- avoid using key event on dialog

- fix window any type

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]);
 

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">

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;

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;
+  }
+}

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,15 +13,15 @@ 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) {
     if (!dialogHowRef.current) {
       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>

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();

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);
       }