From 5357f6fbcdf08cdd6e66cf18f02405531dc7719e Mon Sep 17 00:00:00 2001
From: Rishabh Singh <rishabh7singh5@gmail.com>
Date: Mon, 22 Dec 2025 12:10:41 +0530
Subject: [PATCH 1/2] feat: add disclaimer

---
 src/App.tsx                         |  2 ++
 src/components/Disclaimer/index.tsx | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/components/Disclaimer/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 082ef2bf..c9ddd15b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { usePersistedConfigFile } from "./common/hook/usePersistedConfigFile";
 import { NavigationBar } from "./components/NavigationBar";
 import { FooterBar } from "./components/FooterBar";
 import { SessionTimeout } from "./components/SessionTimeout";
+import { Disclaimer } from "./components/Disclaimer";
 import { routes, Routes } from "./routes";
 import { history } from "./history";
 
@@ -26,6 +27,7 @@ export const App: React.FunctionComponent = () => {
 
   return (
     <>
+      <Disclaimer />
       <NetworkBar network={configFile?.network}>
         You are currently on <span className="capitalize">{configFile?.network}</span> network. To change it, please
         upload a new config file.
diff --git a/src/components/Disclaimer/index.tsx b/src/components/Disclaimer/index.tsx
new file mode 100644
index 00000000..4ef19d90
--- /dev/null
+++ b/src/components/Disclaimer/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export const Disclaimer: React.FunctionComponent = () => {
+  return (
+    <div className="bg-cerulean-800 text-white py-2 px-0" data-testid="old-verifier-banner">
+      <div className="container">
+        <div className="flex flex-wrap">
+          <div className="col-auto flex items-center justify-between w-full">
+            <p className="mb-0">
+              <strong>Disclaimer:</strong> The Creator tool and Config file are for testing and demonstration purposes
+              only. They are not recommended for production or live issuance of documents. Use the TrustVC library for
+              production use.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From ea327b952c6f5c4a5c3ea88fd30a18e1554617c4 Mon Sep 17 00:00:00 2001
From: Rishabh Singh <rishabh7singh5@gmail.com>
Date: Tue, 23 Dec 2025 11:52:30 +0530
Subject: [PATCH 2/2] feat: add cancel icon

---
 src/components/Disclaimer/index.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Disclaimer/index.tsx b/src/components/Disclaimer/index.tsx
index 4ef19d90..8c95abb5 100644
--- a/src/components/Disclaimer/index.tsx
+++ b/src/components/Disclaimer/index.tsx
@@ -1,17 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { X } from "react-feather";
 
 export const Disclaimer: React.FunctionComponent = () => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(true);
+  }, []);
+
+  if (!show) return null;
+
   return (
-    <div className="bg-cerulean-800 text-white py-2 px-0" data-testid="old-verifier-banner">
+    <div className="bg-cerulean-800 text-white py-2 px-0 mb-2" data-testid="old-verifier-banner">
       <div className="container">
-        <div className="flex flex-wrap">
-          <div className="col-auto flex items-center justify-between w-full">
-            <p className="mb-0">
+        <div className="flex items-start justify-between">
+          <div className="flex-1 flex justify-center">
+            <p className="mb-0 text-center">
               <strong>Disclaimer:</strong> The Creator tool and Config file are for testing and demonstration purposes
               only. They are not recommended for production or live issuance of documents. Use the TrustVC library for
               production use.
             </p>
           </div>
+          <div className="cursor-pointer hover:text-gray-500">
+            <X data-testid="disclaimer-close" onClick={() => setShow(false)} />
+          </div>
         </div>
       </div>
     </div>