Merge pull request #309 from tokamak-network/victor/feature/titan-sun…

…set-warning-modal

add bridge warning modal 1.0

src/app/BridgeSwap/Index.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/staging/types/legacyTitan";
 import { Banner11Component } from "@/staging/components/legacy-titan/Banner11";
 import { Banner110Component } from "@/staging/components/legacy-titan/Banner110";
+import { TitanSunsetWarningModal10 } from "@/staging/components/legacy-titan/WarningModal10";
 
 export default function BridgeSwap() {
   return (
@@ -49,6 +50,9 @@ export default function BridgeSwap() {
         /> */}
         <Swap />
         <Details />
+        {BRIDGE_VERSION === LegacyTitanBridgeVersionEnum.V10 && (
+          <TitanSunsetWarningModal10 />
+        )}
       </Flex>
     </Flex>
   );

src/staging/components/legacy-titan/WarningModal10.tsx

@@ -0,0 +1,64 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  Text,
+  Button,
+  Link,
+  Flex,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import useMediaView from "@/hooks/mediaView/useMediaView";
+import { UnorderedList, ListItem } from "@chakra-ui/react";
+
+export const TitanSunsetWarningModal10 = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const { mobileView } = useMediaView();
+
+  return (
+    <Modal isOpen={isOpen} onClose={() => {}} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        width={"408px"}
+        bg="#1F2128"
+        p={"20px"}
+        borderRadius={"16px"}
+      >
+        <ModalBody
+          p={0}
+          display={"flex"}
+          flexDir={"column"}
+          rowGap={"16px"}
+          textAlign={"center"}
+          color={"#fff"}
+        >
+          <Text fontSize={20} fontWeight={500} h={"30px"}>
+            Warning
+          </Text>
+          <Flex flexDir={"column"} alignItems={"start"}>
+            <Text>Titan Network Shutdown Warning:</Text>
+            <UnorderedList pl={"5px"} textAlign={"left"} fontSize={"14px"}>
+              <ListItem>L2 deposits are not available</ListItem>
+              <ListItem>L2 transactions suspended</ListItem>
+              <ListItem>L2 balance can only be viewed through L2 RPC</ListItem>
+              <ListItem>Only Finalize operations supported in history</ListItem>
+              <ListItem>Claimable list remains clickable</ListItem>
+            </UnorderedList>
+          </Flex>
+          <Button
+            w={"100%"}
+            borderRadius={"8px"}
+            h={mobileView ? "40px" : "48px"}
+            bgColor={"#007AFF"}
+            _hover={{}}
+            _active={{}}
+            onClick={() => setIsOpen(false)}
+          >
+            I understand the risk
+          </Button>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};