diff --git a/.changeset/deep-shirts-worry.md b/.changeset/deep-shirts-worry.md new file mode 100644 index 00000000000..79b15de1fe1 --- /dev/null +++ b/.changeset/deep-shirts-worry.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Adds countdown for email cooldown diff --git a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx index fcdfdf0a23c..dc8c387aef3 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx @@ -53,6 +53,7 @@ export function OTPLoginUI(props: { const [verifyStatus, setVerifyStatus] = useState("idle"); const [error, setError] = useState(); const [accountStatus, setAccountStatus] = useState("sending"); + const [countdown, setCountdown] = useState(0); const ecosystem = isEcosystemWallet(wallet) ? { id: wallet.id, @@ -76,6 +77,7 @@ export function OTPLoginUI(props: { client: props.client, }); setAccountStatus("sent"); + setCountdown(60); // Start 60-second countdown } else if ("phone" in userInfo) { await preAuthenticate({ ecosystem, @@ -84,6 +86,7 @@ export function OTPLoginUI(props: { client: props.client, }); setAccountStatus("sent"); + setCountdown(60); // Start 60-second countdown } else { throw new Error("Invalid userInfo"); } @@ -184,6 +187,23 @@ export function OTPLoginUI(props: { } }, [sendEmailOrSms]); + // Handle countdown timer + useEffect(() => { + if (countdown <= 0) return; + + const timer = setInterval(() => { + setCountdown((current) => { + if (current <= 1) { + clearInterval(timer); + return 0; + } + return current - 1; + }); + }, 1000); + + return () => clearInterval(timer); + }, [countdown]); + if (screen === "base") { return ( @@ -298,8 +318,17 @@ export function OTPLoginUI(props: { )} {accountStatus !== "sending" && ( - - {locale.emailLoginScreen.resendCode} + 0 ? 0.5 : 1, + cursor: countdown > 0 ? "default" : "pointer", + }} + > + {countdown > 0 + ? `Resend code in ${countdown} seconds` + : locale.emailLoginScreen.resendCode} )}