Skip to content

Commit

Permalink
feat: [GSW-2040] Validate email entry forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@tfrg
tfrg committed Jan 11, 2025
1 parent 27983c3 commit ac1f6ac
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 63 deletions.
59 changes: 42 additions & 17 deletions packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 />
Expand Down
143 changes: 97 additions & 46 deletions packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit ac1f6ac

Please sign in to comment.