Merge pull request #2574 from starknet-io/provisions-hp-popup

Provisions popup: fixes and design update
starknet-io · Feb 25, 2024 · f37548d · f37548d
2 parents 4863e77 + 8c2cf80
commit f37548d
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 97 deletions.
diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
@@ -7,29 +7,34 @@ import { Button } from "@ui/Button";
 import { useLocalStorage } from "usehooks-ts";
 
 const ProvisionsPopup = () => {
-  return null;
+  const isSsr = typeof window === "undefined";
 
-  const [isProvisionsPopupOpen, setIsProvisionsPopupOpen] = useLocalStorage(
+  const [isOpenStorage, setIsOpenStorage] = useLocalStorage(
     "isProvisionsPopupOpen",
-    true
+    !isSsr
   );
 
-  const toggleModal = () => setIsProvisionsPopupOpen((prevState) => !prevState);
-
   const gtmEvent = (event: string) => window?.dataLayer.push({ event });
   const gtmEventClickReadMore = () => gtmEvent("Provisions popup click");
   const gtmEventClickClose = () => gtmEvent("Provisions popup close");
 
   const onClose = (event: React.MouseEvent) => {
     event.stopPropagation();
     gtmEventClickClose();
-    toggleModal();
-    setIsProvisionsPopupOpen(false);
+    setIsOpenStorage(false);
+  };
+
+  const onReadMore = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    gtmEventClickReadMore();
+    setIsOpenStorage(false);
   };
 
+  if (!isOpenStorage) return;
+
   return (
     <Fade
-      in={isProvisionsPopupOpen}
+      in={isOpenStorage}
       style={{ zIndex: "9999" }}
       transition={{ enter: { duration: 0.5 } }}
     >
@@ -39,90 +44,87 @@ const ProvisionsPopup = () => {
         bottom="0"
         right="0"
         left="0"
-        display={isProvisionsPopupOpen ? "unset" : "none"}
+        display={isOpenStorage ? "unset" : "none"}
         backgroundColor="rgba(0,0,0,0.7)"
         onClick={onClose}
+      />
+      <Box
+        pos="fixed"
+        left="50%"
+        top="50%"
+        transform="translate(-50% ,-50%)"
+        w={[336]}
+        h={[358]}
+        borderRadius="8px"
+        bgGradient="linear(to-l, #0C0C4F, #3F8CFF)"
+        display={!isOpenStorage ? "none" : "block"}
       >
         <Box
-          pos="fixed"
-          left="50%"
-          top="50%"
-          transform="translate(-50% ,-50%)"
-          w={[336]}
-          h={[358]}
+          mt="2px"
+          ml="2px"
+          bgColor="white"
+          w={[332]}
+          h={[354]}
           borderRadius="8px"
-          bgGradient="linear(to-l, #0C0C4F, #3F8CFF)"
-          display={!isProvisionsPopupOpen ? "none" : "block"}
         >
-          <Box
-            mt="2px"
-            ml="2px"
+          <IconButton
+            aria-label="Close"
+            border="0"
+            position="absolute"
+            right="10px"
+            top="10px"
+            width="28px"
+            height="28px"
+            style={{ backgroundColor: "transparent" }}
+            onClick={onClose}
+          >
+            <CloseIcon />
+          </IconButton>
+          <Image
+            src={Background}
+            alt=""
+            width="100%"
+            height="100%"
+            borderRadius="6px"
+            objectFit="cover"
+          />
+          <Image
+            src={Logo}
+            alt="STRK Starknet Provisions"
+            position="absolute"
+            top="91px"
+            left="50%"
+            transform="translateX(-50%)"
+            borderRadius="6px"
+          />
+          <Button
+            variant="solid"
             bgColor="white"
-            w={[332]}
-            h={[354]}
+            position="absolute"
+            bottom="40px"
+            left="50%"
+            transform="translateX(-50%)"
             borderRadius="8px"
+            mr="px"
+            width="176px"
+            height="48px"
+            color="black"
+            cursor="pointer"
+            href="https://www.starknet.io/en/content/starknet-provisions-program"
+            _hover={{ color: "#8FBCFF" }}
+            onClick={onReadMore}
           >
-            <IconButton
-              aria-label="Close"
-              border="0"
-              position="absolute"
-              right="10px"
-              top="10px"
-              width="28px"
-              height="28px"
-              style={{ backgroundColor: "transparent" }}
-              onClick={onClose}
-            >
-              <CloseIcon />
-            </IconButton>
-            <Image
-              src={Background}
-              alt=""
-              width="100%"
-              height="100%"
-              borderRadius="6px"
-              objectFit="cover"
-            />
-            <Image
-              src={Logo}
-              alt="STRK Starknet Provisions"
-              position="absolute"
-              top="91px"
-              left="50%"
-              transform="translateX(-50%)"
-              borderRadius="6px"
-            />
-            <Button
-              variant="solid"
-              bgColor="white"
-              position="absolute"
-              bottom="40px"
-              left="50%"
-              transform="translateX(-50%)"
-              borderRadius="8px"
-              mr="px"
-              width="288px"
-              height="48px"
-              color="black"
-              cursor="pointer"
-              href="https://www.starknet.io/en/content/starknet-provisions-program"
+            Read more
+            <Icon
+              mt="1px"
+              ml="4px"
               _hover={{
                 color: "#8FBCFF",
               }}
-              onClick={gtmEventClickReadMore}
             >
-              Read more
-              <Icon
-                mt="1px"
-                ml="4px"
-                _hover={{
-                  color: "#8FBCFF",
-                }}
-              >
-                <ArrowRight />
-              </Icon>
-            </Button>
-          </Box>
+              <ArrowRight />
+            </Icon>
+          </Button>
         </Box>
       </Box>
     </Fade>