From a031f97aea7793213e4386f05f02cece89fe1e43 Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Thu, 18 Jul 2024 19:29:54 +0800
Subject: [PATCH] - avoid using key event on dialog - fix window any type

---
 .../react-app/src/components/CancelModal.tsx  |  6 +--
 example/react-app/src/components/Console.tsx  | 32 ++++++++----
 example/react-app/src/components/Dialog.tsx   | 51 +++++++++++++++----
 example/react-app/src/global.d.ts             |  7 +++
 example/react-app/src/pages/HomePage.tsx      |  8 +--
 example/react-app/src/pages/LoginPage.tsx     |  8 +--
 example/react-app/src/services/playground.tsx |  9 ++--
 7 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 example/react-app/src/global.d.ts

diff --git a/example/react-app/src/components/CancelModal.tsx b/example/react-app/src/components/CancelModal.tsx
index 214c43f..f85290e 100644
--- a/example/react-app/src/components/CancelModal.tsx
+++ b/example/react-app/src/components/CancelModal.tsx
@@ -2,10 +2,10 @@ import { useEffect, useRef } from "react";
 
 import AlertIcon from "../assets/alertIcon.svg";
 import { usePlayground } from "../services/playground";
-import Dialog from "./Dialog";
+import Dialog, { DialogRef } from "./Dialog";
 
 function CancelModal() {
-  const dialogHowRef = useRef<HTMLDialogElement>(null);
+  const dialogHowRef = useRef<DialogRef>(null);
   const { isCancelModalOpen, toggleCancelModal } = usePlayground();
   const steps = [
     "Sign in with Google or use Google One Tap",
@@ -18,7 +18,7 @@ function CancelModal() {
       return;
     }
     if (isCancelModalOpen) {
-      dialogHowRef.current.showModal();
+      dialogHowRef.current.show();
     } else dialogHowRef.current.close();
   }, [isCancelModalOpen]);
 
diff --git a/example/react-app/src/components/Console.tsx b/example/react-app/src/components/Console.tsx
index b0a7dcc..237ce7b 100644
--- a/example/react-app/src/components/Console.tsx
+++ b/example/react-app/src/components/Console.tsx
@@ -25,17 +25,29 @@ function Console() {
     consolePopupRef.current.showModal();
   }, [playgroundConsoleData]);
 
+  useEffect(() => {
+    const effectRef = consolePopupRef.current;
+    const closeEffectDialog = () => {
+      setShowAnimate(false);
+      setTimeout(() => {
+        resetConsole();
+        consolePopupRef.current?.close();
+      }, 180);
+    };
+
+    if (effectRef) {
+      effectRef.addEventListener("click", closeEffectDialog);
+
+      return () => {
+        effectRef.removeEventListener("scroll", closeEffectDialog);
+      };
+    }
+
+    return () => {};
+  }, [resetConsole, consolePopupRef]);
+
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      className={`console-dialog overflow-hidden ${showAnimate ? "showAnimate" : ""}`}
-      ref={consolePopupRef}
-      onClick={(e) => {
-        if (e.currentTarget === e.target) {
-          closeDialog();
-        }
-      }}
-    >
+    <dialog className={`console-dialog overflow-hidden ${showAnimate ? "showAnimate" : ""}`} ref={consolePopupRef}>
       <div className="p-5 h-full overflow-hidden flex flex-col gap-5">
         {playgroundConsoleTitle && <div className="flex-shrink-0 font-semibold text-center">{playgroundConsoleTitle}</div>}
         <div className="flex-1 overflow-auto p-6 bg-app-gray-200 rounded-2xl">
diff --git a/example/react-app/src/components/Dialog.tsx b/example/react-app/src/components/Dialog.tsx
index 2981072..d353b8f 100644
--- a/example/react-app/src/components/Dialog.tsx
+++ b/example/react-app/src/components/Dialog.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from "react";
+import { ComponentRef, forwardRef, ReactNode, useEffect, useImperativeHandle, useRef } from "react";
 
 import closeIcon from "../assets/closeIcon.svg";
 
@@ -8,17 +8,47 @@ type Props = {
   type: "modal" | "non-modal";
 };
 
-const Dialog = forwardRef<HTMLDialogElement, Props>(function Dialog({ children, closeDialog, type = "non-modal" }, ref) {
+type Handle = {
+  show: () => void;
+  close: () => void;
+};
+
+const Dialog = forwardRef<Handle, Props>(function Dialog({ children, closeDialog, type = "non-modal" }, ref) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        if (type === "modal") {
+          dialogRef.current?.showModal();
+        } else {
+          dialogRef.current?.show();
+        }
+      },
+      close() {
+        dialogRef.current?.close();
+      },
+    };
+  }, [type]);
+
+  useEffect(() => {
+    const effectRef = dialogRef.current;
+
+    if (effectRef) {
+      effectRef.addEventListener("click", closeDialog);
+
+      return () => {
+        effectRef.removeEventListener("scroll", closeDialog);
+      };
+    }
+
+    return () => {};
+  }, [closeDialog, dialogRef]);
+
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <dialog
       className={`global-dialog rounded-3xl px-6 pb-6 pt-10 w-[360px] shadow-sm border border-gray-100 ${type === "non-modal" ? "ml-8 mb-8 z-50 bottom-0 left-0" : ""}`}
-      ref={ref}
-      onClick={(e) => {
-        if (e.currentTarget === e.target) {
-          closeDialog();
-        }
-      }}
+      ref={dialogRef}
     >
       {children}
       <button className="absolute top-4 right-5 shadow-sm outline-none" onClick={closeDialog} type="button">
@@ -27,4 +57,7 @@ const Dialog = forwardRef<HTMLDialogElement, Props>(function Dialog({ children,
     </dialog>
   );
 });
+
+export type DialogRef = ComponentRef<typeof Dialog>;
+
 export default Dialog;
diff --git a/example/react-app/src/global.d.ts b/example/react-app/src/global.d.ts
new file mode 100644
index 0000000..df47fd4
--- /dev/null
+++ b/example/react-app/src/global.d.ts
@@ -0,0 +1,7 @@
+import { type Web3Auth } from "@web3auth/single-factor-auth";
+
+declare global {
+  interface Window {
+    web3auth: Web3Auth;
+  }
+}
diff --git a/example/react-app/src/pages/HomePage.tsx b/example/react-app/src/pages/HomePage.tsx
index f95d8b5..bb4b8b8 100644
--- a/example/react-app/src/pages/HomePage.tsx
+++ b/example/react-app/src/pages/HomePage.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import Account from "../components/Account";
 import Card from "../components/Card";
 import Console from "../components/Console";
-import Dialog from "../components/Dialog";
+import Dialog, { DialogRef } from "../components/Dialog";
 import DocsDetails from "../components/DocsDetails";
 import Loader from "../components/Loader";
 import NftServices from "../components/NftServices";
@@ -13,7 +13,7 @@ import WalletServices from "../components/WalletServices";
 import { usePlayground } from "../services/playground";
 
 function HomePage() {
-  const dialogHowRef = useRef<HTMLDialogElement>(null);
+  const dialogHowRef = useRef<DialogRef>(null);
   const { isLoading, showRegisterPasskeyModal, registerPasskey, toggleRegisterPasskeyModal } = usePlayground();
 
   function toggleDialog(open: boolean) {
@@ -21,7 +21,7 @@ function HomePage() {
       return;
     }
     if (open) {
-      dialogHowRef.current.showModal();
+      dialogHowRef.current.show();
       return;
     }
     dialogHowRef.current.close();
@@ -69,7 +69,7 @@ function HomePage() {
         </div>
       </div>
       <Console />
-      <Dialog type="modal" closeDialog={() => toggleRegisterPasskeyModal()} ref={dialogHowRef}>
+      <Dialog type="modal" closeDialog={() => toggleRegisterPasskeyModal(false)} ref={dialogHowRef}>
         <div className="text-center mt-2">
           <img className="mx-auto mb-b" src="https://images.web3auth.io/passkey-register.svg" alt="Register Passkey" />
           <div className="font-bold mb-2 text-gray-900">Register Passkey</div>
diff --git a/example/react-app/src/pages/LoginPage.tsx b/example/react-app/src/pages/LoginPage.tsx
index cbe76a3..4096eee 100644
--- a/example/react-app/src/pages/LoginPage.tsx
+++ b/example/react-app/src/pages/LoginPage.tsx
@@ -5,14 +5,14 @@ import { useEffect, useRef } from "react";
 import { Navigate } from "react-router-dom";
 
 import web3authLogoBlue from "../assets/web3authLogoBlue.svg";
-import Dialog from "../components/Dialog";
+import Dialog, { DialogRef } from "../components/Dialog";
 import Loader from "../components/Loader";
 import useWindowDimensions from "../hooks/window-dimensions";
 import { usePlayground } from "../services/playground";
 
 function LoginPage() {
-  const guidePopupRef = useRef<HTMLDialogElement>(null);
-  const guideModalRef = useRef<HTMLDialogElement>(null);
+  const guidePopupRef = useRef<DialogRef>(null);
+  const guideModalRef = useRef<DialogRef>(null);
   const { loginWithPasskey, onSuccess, isLoggedIn, isLoading } = usePlayground();
 
   const { width } = useWindowDimensions();
@@ -37,7 +37,7 @@ function LoginPage() {
       return;
     }
     if (open) {
-      guideModalRef.current.showModal();
+      guideModalRef.current.show();
       return;
     }
     guideModalRef.current.close();
diff --git a/example/react-app/src/services/playground.tsx b/example/react-app/src/services/playground.tsx
index 2db61bd..9aa839c 100644
--- a/example/react-app/src/services/playground.tsx
+++ b/example/react-app/src/services/playground.tsx
@@ -41,7 +41,7 @@ export interface IPlaygroundContext {
   signMessage: () => Promise<string>;
   sendTransaction: () => void;
   toggleCancelModal: (isOpen: boolean) => void;
-  toggleRegisterPasskeyModal: () => void;
+  toggleRegisterPasskeyModal: (isOpen: boolean) => void;
   resetConsole: () => void;
 }
 
@@ -296,8 +296,8 @@ export function Playground({ children }: IPlaygroundProps) {
     await wsPlugin.showWalletConnectScanner();
   }, [wsPlugin]);
 
-  const toggleRegisterPasskeyModal = () => {
-    setShowRegisterPasskeyModal((prev) => !prev);
+  const toggleRegisterPasskeyModal = (isOpen: boolean) => {
+    setShowRegisterPasskeyModal(isOpen);
   };
 
   useEffect(() => {
@@ -373,8 +373,7 @@ export function Playground({ children }: IPlaygroundProps) {
 
         setWeb3authSFAuth(web3authSfa);
         await web3authSfa.init();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).web3auth = web3authSfa;
+        window.web3auth = web3authSfa;
       } catch (error) {
         log.error(error);
       }