feat: sbtc modal

src/app/_components/PageWrapper.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SBTCModal } from '@/common/components/modals/SBTCModal';
 import { useColorModeValue } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
@@ -77,7 +78,8 @@
         <IncidentsStatusBarWithErrorBoundary />
         <CMSStatusBars statusBarContent={statusBarContent} />
       </Flex>
-      <NakamotoModal />
+      {/* <NakamotoModal /> */}
+      <SBTCModal />
       <WrapperWithBg>
         <Flex
           mx="auto"

src/common/components/modals/Nakamoto.tsx

@@ -20,19 +20,19 @@
 export function NakamotoModal() {
   const [isOpen, setIsOpen] = useState(false);
 
-  // useEffect(() => {
-  //   const nakamotoModalShown = localStorage.getItem('nakamoto3MainnetModalShown');
-  //   try {
-  //     const dismissQueryParam = new URLSearchParams(window.location.search).get('dismiss');
-  //     // to run performance testing without the modal
-  //     if (dismissQueryParam === 'nakamoto') {
-  //       return;
-  //     }
-  //   } catch (e) {}
-  //   if (!nakamotoModalShown || nakamotoModalShown === 'false') {
-  //     setIsOpen(true);
-  //   }
-  // }, []);
+  useEffect(() => {
+    const nakamotoModalShown = localStorage.getItem('nakamoto3MainnetModalShown');
+    try {
+      const dismissQueryParam = new URLSearchParams(window.location.search).get('dismiss');
+      // to run performance testing without the modal
+      if (dismissQueryParam === 'nakamoto') {
+        return;
+      }
+    } catch (e) {}
+    if (!nakamotoModalShown || nakamotoModalShown === 'false') {
+      setIsOpen(true);
+    }
+  }, []);
 
   const handleClose = () => {
     localStorage.setItem('nakamoto3MainnetModalShown', 'true');

src/common/components/modals/SBTCModal.tsx

@@ -0,0 +1,91 @@
+import {
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+  Stack,
+} from '@chakra-ui/react';
+import { ArrowUpRight } from '@phosphor-icons/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { Icon } from '../../..//ui/Icon';
+import { ButtonLink } from '../../../ui/ButtonLink';
+import { Flex } from '../../../ui/Flex';
+import { Image } from '../../../ui/Image';
+import { Modal } from '../../../ui/Modal';
+import { Text } from '../../../ui/Text';
+import { TextLink } from '../../../ui/TextLink';
+
+export function SBTCModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const sbtcModalShown = localStorage.getItem('sbtcModalShown');
+    try {
+      const dismissQueryParam = new URLSearchParams(window.location.search).get('dismiss');
+      // to run performance testing without the modal
+      if (dismissQueryParam === 'sbtc') {
+        return;
+      }
+    } catch (e) {}
+    if (!sbtcModalShown || sbtcModalShown === 'false') {
+      setIsOpen(true);
+    }
+  }, []);
+
+  const handleClose = () => {
+    localStorage.setItem('sbtcModalShown', 'true');
+    setIsOpen(false);
+  };
+
+  const queryClient = useQueryClient();
+
+  return (
+    <Modal title={'sBTC'} isOpen={isOpen} onClose={() => handleClose()}>
+      <ModalOverlay />
+      <ModalContent width={'762px'} maxWidth={'full'}>
+        <ModalCloseButton
+          _focus={{
+            boxShadow: 'none',
+          }}
+        />
+        <ModalBody pt={12}>
+          <Stack alignItems={'center'} gap={6}>
+            <Text fontSize={'4xl'} textAlign={'center'}>
+              ✨ sBTC is here ✨
+            </Text>
+            <Image src={'/sbtc.png'} alt={'sBTC'} />
+            <Text>sBTC is live! You can now put your Bitcoin to work in DeFi apps.</Text>
+            <ButtonLink
+              variant={'primary'}
+              href={'https://app.stacks.co/'}
+              onClick={() => {
+                handleClose();
+                void queryClient.clear();
+              }}
+              _hover={{ textDecoration: 'none' }}
+              bg="accent.stacks-500"
+            >
+              Mint sBTC
+            </ButtonLink>
+            <ModalFooter borderTop={'1px'} width={'full'} justifyContent={'center'}>
+              <Flex alignItems="center" gap={1}>
+                <TextLink
+                  color="accent.stacks-500"
+                  href={'https://www.stacks.co/sbtc'}
+                  fontSize={'sm'}
+                  target={'_blank'}
+                >
+                  Learn more about sBTC
+                </TextLink>
+                <Icon as={ArrowUpRight} size={3} color="accent.stacks-500" />
+              </Flex>
+            </ModalFooter>
+          </Stack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}