From f43b50240b0a39815461f7ac31c7105614e7cc5f Mon Sep 17 00:00:00 2001
From: vihsonic <black02430horse@gmail.com>
Date: Tue, 10 Dec 2024 08:15:53 +0100
Subject: [PATCH] add banner 1.0

---
 src/app/BridgeSwap/Index.tsx                  |  3 +
 src/constant/url/index.ts                     |  3 +
 .../components/legacy-titan/InitialBanner.tsx | 56 +++++++++++++++++++
 src/staging/constants/banner.ts               |  2 +
 4 files changed, 64 insertions(+)
 create mode 100644 src/staging/components/legacy-titan/InitialBanner.tsx
 create mode 100644 src/staging/constants/banner.ts

diff --git a/src/app/BridgeSwap/Index.tsx b/src/app/BridgeSwap/Index.tsx
index f660c1ad..c8e83af2 100644
--- a/src/app/BridgeSwap/Index.tsx
+++ b/src/app/BridgeSwap/Index.tsx
@@ -3,6 +3,8 @@ import Swap from "./Swap";
 import { Details } from "./Details";
 import MaintenanceBanner from "@/components/modal/MaintenanceBanner";
 import { SwitchToTestNetwork } from "@/staging/components/cross-trade/components/common/WrongNetwork";
+import { BANNER10 } from "@/staging/constants/banner";
+import { InitialBanner } from "@/staging/components/legacy-titan/InitialBanner";
 
 export default function BridgeSwap() {
   return (
@@ -23,6 +25,7 @@ export default function BridgeSwap() {
       >
         {/* <ServiceSuspensionBanner/> */}
         <MaintenanceBanner />
+        {BANNER10 && <InitialBanner />}
         {/* <SwitchToTestNetwork
           style={{ marginTop: "55px", marginBottom: "14px" }}
         /> */}
diff --git a/src/constant/url/index.ts b/src/constant/url/index.ts
index 69971632..a3e72e15 100644
--- a/src/constant/url/index.ts
+++ b/src/constant/url/index.ts
@@ -1,2 +1,5 @@
 export const GoogleFormURL =
   "https://docs.google.com/forms/d/e/1FAIpQLSc6pHHABsnIZ2MvcEa57VCtSNTRXHAaFjBLQYf1LbiMB_81OA/viewform";
+
+export const TitanSunSetGuideURL =
+  "https://medium.com/tokamak-network/tokamak-network-to-sunset-titan-b4471019c92";
diff --git a/src/staging/components/legacy-titan/InitialBanner.tsx b/src/staging/components/legacy-titan/InitialBanner.tsx
new file mode 100644
index 00000000..0ffc14f7
--- /dev/null
+++ b/src/staging/components/legacy-titan/InitialBanner.tsx
@@ -0,0 +1,56 @@
+import { TitanSunSetGuideURL } from "@/constant/url";
+import { Flex, Text } from "@chakra-ui/react";
+import React from "react";
+
+export const InitialBanner = () => {
+  return (
+    <Flex
+      w={"493px"}
+      flexDir={"column"}
+      gap={"12px"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      mb={"48px"}
+    >
+      <Flex
+        width={"100%"}
+        flexDir={"column"}
+        px={"16px"}
+        py={"10px"}
+        borderRadius={"8px"}
+        bg={"#F9C03E"}
+      >
+        <Text fontSize={"14px"} color={"#0F0F12"} fontWeight={500}>
+          Titan to shutown in December, 2024
+        </Text>
+        <Text fontSize={"11px"} color={"#0F0F12"} fontWeight={400}>
+          Read about it more{" "}
+          <a
+            href={TitanSunSetGuideURL}
+            target="_blank"
+            style={{ textDecoration: "underline" }}
+          >
+            here
+          </a>
+          . The exact date will be announced soon.
+        </Text>
+      </Flex>
+      <Flex
+        flexDir={"column"}
+        px={"16px"}
+        py={"10px"}
+        borderRadius={"8px"}
+        bg={"#F9C03E"}
+      >
+        <Text fontSize={"14px"} color={"#0F0F12"} fontWeight={500}>
+          Tokamak Bridge to shutdown in January, 2025
+        </Text>
+        <Text fontSize={"11px"} color={"#0F0F12"} fontWeight={400}>
+          Pools and cross trade will shutdown in December, while other functions
+          will continue with limited support until their final shutdown in
+          January
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/staging/constants/banner.ts b/src/staging/constants/banner.ts
new file mode 100644
index 00000000..463dd6d0
--- /dev/null
+++ b/src/staging/constants/banner.ts
@@ -0,0 +1,2 @@
+export const BANNER10 = true;
+export const MAINTENANCE_MODE = false;