From d01b3777aabaf0046e8784911efbe8868f134af0 Mon Sep 17 00:00:00 2001
From: henrio123 <henriots33@gmail.com>
Date: Fri, 5 Apr 2024 12:30:44 +0300
Subject: [PATCH] fix do not load snapshot modal with everyload

---
 .../_modals/SnapshotNotifyModal..tsx          | 29 +++++++++++++++++++
 src/pages/index.tsx                           | 26 ++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/_modals/SnapshotNotifyModal..tsx

diff --git a/src/components/_modals/SnapshotNotifyModal..tsx b/src/components/_modals/SnapshotNotifyModal..tsx
new file mode 100644
index 000000000..5b9c61964
--- /dev/null
+++ b/src/components/_modals/SnapshotNotifyModal..tsx
@@ -0,0 +1,29 @@
+import { ModalProps, Text, Link } from "@chakra-ui/react"
+import { BaseModal } from "./BaseModal"
+import { useEffect } from "react"
+export const SnapshotNotifyModal = ({
+  isOpen,
+  onClose,
+}: Pick<ModalProps, "isOpen" | "onClose">) => {
+  useEffect(() => {
+    // Logic here if needed, e.g., analytics
+  }, [isOpen])
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      heading="Connect Wallet on Snapshot"
+    >
+      <Link
+        href="/snapshot"
+        color="white.500"
+        textDecoration="underline"
+        isExternal
+      >
+        Complete campaigns to earn bonus SOMM rewards and/or airdrop
+        points.
+      </Link>
+    </BaseModal>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 88450a167..96ae608e7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,32 @@
 import type { NextPage } from "next"
 import { PageHome } from "components/_pages/PageHome"
+import { useState, useEffect } from "react"
+import { SnapshotNotifyModal } from "components/_modals/SnapshotNotifyModal."
 
 const Home: NextPage = () => {
-  return <PageHome />
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  useEffect(() => {
+    const modalShown = localStorage.getItem("modalShown")
+    if (!modalShown) {
+      setIsModalOpen(true)
+      localStorage.setItem("modalShown", "true")
+    }
+  }, [])
+
+  const handleCloseModal = () => setIsModalOpen(false)
+
+  return (
+    <>
+      <PageHome />
+      {isModalOpen && (
+        <SnapshotNotifyModal
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+    </>
+  )
 }
 
 export default Home