chore: improve first visit modal

bridge-ui/src/app/buy/page.tsx

@@ -2,13 +2,11 @@
 
 import OnRamperWidget from "@/components/onramper";
 import styles from "./page.module.scss";
-import FirstVisitModal from "@/components/modal/first-time-visit";
 
 export default function Page() {
   return (
     <section className={styles["content-wrapper"]}>
       <OnRamperWidget />
-      <FirstVisitModal type="buy" />
     </section>
   );
 }

bridge-ui/src/app/layout.tsx

@@ -9,6 +9,7 @@ import atypFont from "@/assets/fonts/atyp";
 import atypTextFont from "@/assets/fonts/atypText";
 import "./globals.css";
 import "../scss/app.scss";
+import FirstVisitModal from "@/components/modal/first-time-visit";
 
 const metadata: Metadata = {
   title: "Linea Bridge",
@@ -43,6 +44,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </symbol>
           </defs>
         </svg>
+        <FirstVisitModal />
       </body>
 
       <Script id="usabilla" dangerouslySetInnerHTML={{ __html: usabillaBeScript }} strategy="lazyOnload" />

bridge-ui/src/app/native-bridge/page.tsx

@@ -2,13 +2,11 @@
 
 import BridgeLayout from "@/components/bridge/bridge-layout";
 import styles from "./page.module.scss";
-import FirstVisitModal from "@/components/modal/first-time-visit";
 
 export default function Home() {
   return (
     <section className={styles["content-wrapper"]}>
       <BridgeLayout />
-      <FirstVisitModal type="native-bridge" />
     </section>
   );
 }

bridge-ui/src/app/page.tsx

@@ -2,13 +2,11 @@
 
 import styles from "./page.module.scss";
 import { Widget } from "@/components/lifi/widget";
-import FirstVisitModal from "@/components/modal/first-time-visit";
 
 export default function Page() {
   return (
     <section className={styles["content-wrapper"]}>
       <Widget />
-      <FirstVisitModal type="all-bridges" />
     </section>
   );
 }

bridge-ui/src/components/modal/first-time-visit/index.tsx

@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import Modal from "@/components/modal";
 import styles from "./first-time-visit.module.scss";
 import Button from "@/components/ui/button";
@@ -8,6 +10,12 @@ import CloseIcon from "@/assets/icons/close.svg";
 
 type ModalType = "all-bridges" | "native-bridge" | "buy";
 
+const pathToModalType: Record<string, ModalType> = {
+  "/": "all-bridges",
+  "/native-bridge": "native-bridge",
+  "/buy": "buy",
+};
+
 type FirstTimeModalDataType = {
   title: string;
   description: string;
@@ -76,30 +84,37 @@ const modalData: Record<ModalType, FirstTimeModalDataType> = {
   },
 };
 
-export default function FirstVisitModal({ type }: { type: ModalType }) {
+export default function FirstVisitModal() {
+  const pathname = usePathname();
   const [showModal, setShowModal] = useState(false);
   const [shouldRenderModal, setShouldRenderModal] = useState(false);
 
-  const data = useMemo(() => modalData[type], [type]);
+  const modalType = pathToModalType[pathname];
+  const data = modalType ? modalData[modalType] : null;
 
   useEffect(() => {
-    if (typeof window !== "undefined" && localStorage.getItem(`hasVisited-${type}`) !== "true") {
+    if (!modalType) return;
+
+    const key = `hasVisited-${modalType}`;
+    if (localStorage.getItem(key) !== "true") {
       setShowModal(true);
       setShouldRenderModal(true);
     }
-  }, [type]);
+  }, [modalType]);
 
   const handleClose = useCallback(() => {
+    if (!modalType) return;
+
     setShowModal(false);
     setTimeout(() => {
       setShouldRenderModal(false);
     }, 300);
-    if (typeof window !== "undefined") {
-      localStorage.setItem(`hasVisited-${type}`, "true");
-    }
-  }, [type]);
+    localStorage.setItem(`hasVisited-${modalType}`, "true");
+  }, [modalType]);
 
-  return shouldRenderModal ? <BaseModal isModalOpen={showModal} onCloseModal={handleClose} data={data} /> : null;
+  if (!shouldRenderModal || !data) return null;
+
+  return <BaseModal isModalOpen={showModal} onCloseModal={handleClose} data={data} />;
 }
 
 type BaseModalProps = {