From ac1f6ac7245ff94a8df3a30adebec29a46f16f2a Mon Sep 17 00:00:00 2001
From: yjin <devyzyn@gmail.com>
Date: Sat, 11 Jan 2025 12:28:01 +0900
Subject: [PATCH] feat: [GSW-2040] Validate email entry forms

---
 .../ConnectWalletModal.tsx                    |  59 +++++---
 .../SocialWalletProvider.tsx                  | 143 ++++++++++++------
 2 files changed, 139 insertions(+), 63 deletions(-)

diff --git a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx
index 5e895833a..35625b887 100644
--- a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx
+++ b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx
@@ -29,16 +29,38 @@ const ConnectWalletModal: React.FC<Props> = ({ close, connect, loadingConnect })
   const { openModal: openSocialLoadingModal } = useConnectSocialWalletModal();
   const { openModal: openApproveTransactionModal } = useApproveTransactionModal();
 
-  const handleSocialConnect = useCallback(
-    async (type: SocialWalletLoginType) => {
-      try {
-        close();
-        openSocialLoadingModal(type);
-        await socialWalletConnect(type);
-      } catch {}
-    },
-    [socialWalletConnect],
-  );
+  const [email, setEmail] = React.useState<string>("");
+  const [isEmailValid, setIsEmailValid] = React.useState<boolean>(false);
+  const [isSubmitAttempted, setIsSubmitAttempted] = React.useState<boolean>(false);
+  const isEmailErrorVisible = !!email && !isEmailValid && isSubmitAttempted;
+
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value);
+    setIsEmailValid(isValidEmail(value));
+  };
+
+  const handleEmailSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitAttempted(true);
+
+    if (isEmailValid) {
+      handleSocialConnect("email");
+    }
+  };
+
+  const handleSocialConnect = async (type: SocialWalletLoginType) => {
+    try {
+      close();
+      openSocialLoadingModal(type);
+      await socialWalletConnect(type);
+    } catch {}
+  };
 
   const onClickClose = useCallback(() => {
     close();
@@ -56,23 +78,26 @@ const ConnectWalletModal: React.FC<Props> = ({ close, connect, loadingConnect })
         <div className="content">
           {/* Email Login */}
           <div className="login-section" style={{ "--login-section-gap": "4px" } as React.CSSProperties}>
-            <div className={cx("email-section", { error: false })}>
+            <div className={cx("email-section", { error: isEmailErrorVisible })}>
               <input
                 placeholder="Email Address"
                 type="email"
                 inputMode="email"
                 autoComplete={"off"}
+                value={email}
+                onChange={handleEmailChange}
+                onKeyDown={e => {
+                  if (e.key === "Enter") {
+                    handleEmailSubmit(e);
+                  }
+                }}
                 spellCheck={"false"}
               />
-              <button
-                onClick={() => {
-                  handleSocialConnect("email");
-                }}
-              >
+              <button onClick={handleEmailSubmit}>
                 <IconArrowRight className="right-chevron" />
               </button>
             </div>
-            {false && <div className="validation-message">Please enter a valid email</div>}
+            {isEmailErrorVisible && <div className="validation-message">Please enter a valid email</div>}
           </div>
 
           <ConnectWalletModalDivider />
diff --git a/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx b/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx
index fb2eb84a1..d8f4f2f08 100644
--- a/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx
+++ b/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx
@@ -50,59 +50,110 @@ export const SocialWalletProvider = ({ children }: { children: React.ReactNode }
     [sessionId, connectingState],
   );
 
-  const connect = React.useCallback(
-    async (loginType: SocialWalletLoginType) => {
-      try {
-        setConnectingState("loading");
-        setError(null);
+  const connect = async (loginType: SocialWalletLoginType) => {
+    try {
+      setConnectingState("loading");
+      setError(null);
 
-        const socialWalletClient = await SocialWalletClient.createSocialWalletClient(loginType);
-        if (!socialWalletClient) {
-          throw new Error("Failed to create socail wallet client");
-        }
+      const socialWalletClient = await SocialWalletClient.createSocialWalletClient(loginType);
+      if (!socialWalletClient) {
+        throw new Error("Failed to create socail wallet client");
+      }
 
-        sessionStorage.setItem(GNOSWAP_WALLET_TYPE_KEY, "SOCIAL_WALLET");
-        sessionStorage.setItem(GNOSWAP_SOCIAL_LOGIN_TYPE_KEY, loginType);
-        setWalletClient(socialWalletClient);
-        accountRepository.setWalletClient(socialWalletClient);
+      sessionStorage.setItem(GNOSWAP_WALLET_TYPE_KEY, "SOCIAL_WALLET");
+      sessionStorage.setItem(GNOSWAP_SOCIAL_LOGIN_TYPE_KEY, loginType);
+      setWalletClient(socialWalletClient);
+      accountRepository.setWalletClient(socialWalletClient);
 
-        const established = await accountRepository.addEstablishedSite().catch(() => null);
-        if (!established || established.code === 4000) {
-          throw new Error("Failed to established site");
-        }
+      const established = await accountRepository.addEstablishedSite().catch(() => null);
+      if (!established || established.code === 4000) {
+        throw new Error("Failed to established site");
+      }
 
-        if (established.code === 0 || established.code === 4001) {
-          const account = await accountRepository.getAccount();
-          if (!account) {
-            throw new Error("Failed to get account");
-          }
-
-          sessionStorage.setItem(ACCOUNT_SESSION_INFO_KEY, JSON.stringify(account));
-          // const availNetwork = SUPPORT_CHAIN_IDS.includes(account.chainId);
-          // if (!availNetwork) {
-          //   await accountRepository.switchNetwork(SUPPORT_CHAIN_IDS[0]);
-          // }
-          setWalletAccount(account);
-          accountRepository.setConnectedWallet(true);
-          setConnectingState("done");
-          setTimeout(() => {
-            setConnectingState("initial");
-          }, 1000);
-        } else {
-          accountRepository.setConnectedWallet(false);
-          setConnectingState("error");
-          setTimeout(() => {
-            setConnectingState("initial");
-          }, 1000);
+      if (established.code === 0 || established.code === 4001) {
+        const account = await accountRepository.getAccount();
+        if (!account) {
+          throw new Error("Failed to get account");
         }
-      } catch (err) {
-        sessionStorage.removeItem(GNOSWAP_WALLET_TYPE_KEY);
+
+        sessionStorage.setItem(ACCOUNT_SESSION_INFO_KEY, JSON.stringify(account));
+        // const availNetwork = SUPPORT_CHAIN_IDS.includes(account.chainId);
+        // if (!availNetwork) {
+        //   await accountRepository.switchNetwork(SUPPORT_CHAIN_IDS[0]);
+        // }
+        setWalletAccount(account);
+        accountRepository.setConnectedWallet(true);
+        setConnectingState("done");
+        setTimeout(() => {
+          setConnectingState("initial");
+        }, 1000);
+      } else {
+        accountRepository.setConnectedWallet(false);
         setConnectingState("error");
-        setError(err instanceof Error ? err.message : "Failed to connect Social Wallet");
+        setTimeout(() => {
+          setConnectingState("initial");
+        }, 1000);
       }
-    },
-    [accountRepository, SocialWalletClient, setWalletClient, setWalletAccount],
-  );
+    } catch (err) {
+      sessionStorage.removeItem(GNOSWAP_WALLET_TYPE_KEY);
+      setConnectingState("error");
+      setError(err instanceof Error ? err.message : "Failed to connect Social Wallet");
+    }
+  };
+
+  // const connect = React.useCallback(
+  //   async (loginType: SocialWalletLoginType) => {
+  //     try {
+  //       setConnectingState("loading");
+  //       setError(null);
+
+  //       const socialWalletClient = await SocialWalletClient.createSocialWalletClient(loginType);
+  //       if (!socialWalletClient) {
+  //         throw new Error("Failed to create socail wallet client");
+  //       }
+
+  //       sessionStorage.setItem(GNOSWAP_WALLET_TYPE_KEY, "SOCIAL_WALLET");
+  //       sessionStorage.setItem(GNOSWAP_SOCIAL_LOGIN_TYPE_KEY, loginType);
+  //       setWalletClient(socialWalletClient);
+  //       accountRepository.setWalletClient(socialWalletClient);
+
+  //       const established = await accountRepository.addEstablishedSite().catch(() => null);
+  //       if (!established || established.code === 4000) {
+  //         throw new Error("Failed to established site");
+  //       }
+
+  //       if (established.code === 0 || established.code === 4001) {
+  //         const account = await accountRepository.getAccount();
+  //         if (!account) {
+  //           throw new Error("Failed to get account");
+  //         }
+
+  //         sessionStorage.setItem(ACCOUNT_SESSION_INFO_KEY, JSON.stringify(account));
+  //         // const availNetwork = SUPPORT_CHAIN_IDS.includes(account.chainId);
+  //         // if (!availNetwork) {
+  //         //   await accountRepository.switchNetwork(SUPPORT_CHAIN_IDS[0]);
+  //         // }
+  //         setWalletAccount(account);
+  //         accountRepository.setConnectedWallet(true);
+  //         setConnectingState("done");
+  //         setTimeout(() => {
+  //           setConnectingState("initial");
+  //         }, 1000);
+  //       } else {
+  //         accountRepository.setConnectedWallet(false);
+  //         setConnectingState("error");
+  //         setTimeout(() => {
+  //           setConnectingState("initial");
+  //         }, 1000);
+  //       }
+  //     } catch (err) {
+  //       sessionStorage.removeItem(GNOSWAP_WALLET_TYPE_KEY);
+  //       setConnectingState("error");
+  //       setError(err instanceof Error ? err.message : "Failed to connect Social Wallet");
+  //     }
+  //   },
+  //   [accountRepository, SocialWalletClient, setWalletClient, setWalletAccount],
+  // );
 
   const disconnect = React.useCallback(async () => {
     try {