Merge pull request #2566 from starknet-io/provisions-hp-popup-adding-…

…localStorage

Provisions HP Popup:  adding localStorage to popup

package.json

@@ -96,6 +96,7 @@
     "unified": "^10.1.2",
     "unist-util-index": "^3.0.2",
     "use-scramble": "^2.2.12",
+    "usehooks-ts": "^2.14.0",
     "video.js": "^8.3.0",
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^4.2.0",

workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx

@@ -1,15 +1,18 @@
 import { Box, Image, Icon, Fade, IconButton } from "@chakra-ui/react";
 import Background from "./popup-background.png";
 import Logo from "./popup-text.svg";
-import { useState } from "react";
 import CloseIcon from "./CloseIcon/CloseIcon";
 import ArrowRight from "./ArrowRight/ArrowRight";
 import { Button } from "@ui/Button";
+import { useLocalStorage } from "usehooks-ts";
 
 const ProvisionsPopup = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [isProvisionsPopupOpen, setIsProvisionsPopupOpen] = useLocalStorage(
+    "isProvisionsPopupOpen",
+    true
+  );
 
-  const toggleModal = () => setIsOpen((prevState) => !prevState);
+  const toggleModal = () => setIsProvisionsPopupOpen((prevState) => !prevState);
 
   const gtmEvent = (event: string) => window?.dataLayer.push({ event });
   const gtmEventClickReadMore = () => gtmEvent("Provisions popup click");
@@ -19,11 +22,12 @@ const ProvisionsPopup = () => {
     event.stopPropagation();
     gtmEventClickClose();
     toggleModal();
+    setIsProvisionsPopupOpen(false);
   };
 
   return (
     <Fade
-      in={isOpen}
+      in={isProvisionsPopupOpen}
       style={{ zIndex: "9999" }}
       transition={{ enter: { duration: 0.5 } }}
     >
@@ -33,6 +37,7 @@ const ProvisionsPopup = () => {
         bottom="0"
         right="0"
         left="0"
+        display={isProvisionsPopupOpen ? "unset" : "none"}
         backgroundColor="rgba(0,0,0,0.7)"
         onClick={onClose}
       >
@@ -45,7 +50,7 @@ const ProvisionsPopup = () => {
           h={[358]}
           borderRadius="8px"
           bgGradient="linear(to-l, #0C0C4F, #3F8CFF)"
-          display={!isOpen ? "none" : "block"}
+          display={!isProvisionsPopupOpen ? "none" : "block"}
         >
           <Box
             mt="2px"

yarn.lock

@@ -4836,6 +4836,7 @@ __metadata:
     unified: ^10.1.2
     unist-util-index: ^3.0.2
     use-scramble: ^2.2.12
+    usehooks-ts: ^2.14.0
     video.js: ^8.3.0
     vite: ^4.3.9
     vite-tsconfig-paths: ^4.2.0
@@ -19284,6 +19285,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "usehooks-ts@npm:2.14.0"
+  dependencies:
+    lodash.debounce: ^4.0.8
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 12cfb95de2624aa9005f35ac4b924b3f64c95e1f09fa0b20cb16cf1c47f811d454a30fe492e1f40b6b93a32c3772c6c16d26a381f6a28f26c06b6724ca0d0960
+  languageName: node
+  linkType: hard
+
 "utf8-byte-length@npm:^1.0.1":
   version: 1.0.4
   resolution: "utf8-byte-length@npm:1.0.4"