Add banner 1.0

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" }}
         /> */}

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";

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>
+  );
+};

src/staging/constants/banner.ts

@@ -0,0 +1,2 @@
+export const BANNER10 = true;
+export const MAINTENANCE_MODE = false;