diff --git a/account-kit/react/src/components/auth/card/add-passkey.tsx b/account-kit/react/src/components/auth/card/add-passkey.tsx index 6de8a97b7a..780c1b421e 100644 --- a/account-kit/react/src/components/auth/card/add-passkey.tsx +++ b/account-kit/react/src/components/auth/card/add-passkey.tsx @@ -7,7 +7,7 @@ import { import { ReactLogger } from "../../../metrics.js"; import { ls } from "../../../strings.js"; import { Button } from "../../button.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import { ConnectionError } from "./error/connection-error.js"; import { ConnectionFailed as PasskeyConnectionFailed } from "../../../icons/connectionFailed.js"; @@ -25,18 +25,18 @@ const BENEFITS = [ ]; export const AddPasskey = () => { - const { setAuthStep, authStep } = useAuthContext("passkey_create"); + const { setAuthStep, authStep } = useAuthContext(AuthStepType.PasskeyCreate); const { addPasskey, isAddingPasskey } = useAddPasskey({ onSuccess: () => { ReactLogger.trackEvent({ name: "add_passkey_on_signup_success", }); - setAuthStep({ type: "passkey_create_success" }); + setAuthStep({ type: AuthStepType.PasskeyCreateSuccess }); }, onError: () => { setAuthStep({ - type: "passkey_create", + type: AuthStepType.PasskeyCreate, error: new Error("Failed to add passkey"), }); }, @@ -50,7 +50,7 @@ export const AddPasskey = () => { icon={} shouldDisconnect={false} handleTryAgain={addPasskey} - handleSkip={() => setAuthStep({ type: "complete" })} + handleSkip={() => setAuthStep({ type: AuthStepType.Complete })} /> ); } @@ -91,7 +91,7 @@ export const AddPasskey = () => { ReactLogger.trackEvent({ name: "add_passkey_on_signup_skip", }); - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }} disabled={isAddingPasskey} > diff --git a/account-kit/react/src/components/auth/card/eoa.tsx b/account-kit/react/src/components/auth/card/eoa.tsx index 565d8fe8fd..facf489caa 100644 --- a/account-kit/react/src/components/auth/card/eoa.tsx +++ b/account-kit/react/src/components/auth/card/eoa.tsx @@ -4,7 +4,7 @@ import { Spinner } from "../../../icons/spinner.js"; import { WalletConnectIcon } from "../../../icons/walletConnectIcon.js"; import { ls } from "../../../strings.js"; import { Button } from "../../button.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import { useConnectEOA } from "../hooks/useConnectEOA.js"; import { useWalletConnectAuthConfig } from "../hooks/useWalletConnectAuthConfig.js"; import { CardContent } from "./content.js"; @@ -14,7 +14,7 @@ import { WalletIcon } from "./error/icons/wallet-icon.js"; export const WALLET_CONNECT = "walletConnect"; export const EoaConnectCard = () => { - const { setAuthStep, authStep } = useAuthContext("eoa_connect"); + const { setAuthStep, authStep } = useAuthContext(AuthStepType.EoaConnect); const { connect } = useConnectEOA(); const { chain } = useChain(); @@ -31,7 +31,7 @@ export const EoaConnectCard = () => { tryAgainCTA={errorMessage.tryAgainCTA} handleTryAgain={() => { setAuthStep({ - type: "eoa_connect", + type: AuthStepType.EoaConnect, connector: authStep.connector, }); @@ -41,7 +41,9 @@ export const EoaConnectCard = () => { chainId: chain.id, }); }} - handleUseAnotherMethod={() => setAuthStep({ type: "pick_eoa" })} + handleUseAnotherMethod={() => + setAuthStep({ type: AuthStepType.PickEoa }) + } /> ); } @@ -69,7 +71,7 @@ export const EoaConnectCard = () => { secondaryButton={{ title: "Cancel", onClick: async () => { - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); }, }} /> @@ -77,7 +79,7 @@ export const EoaConnectCard = () => { }; export const WalletConnectCard = () => { - const { setAuthStep, authStep } = useAuthContext("wallet_connect"); + const { setAuthStep, authStep } = useAuthContext(AuthStepType.WalletConnect); const { walletConnectParams } = useWalletConnectAuthConfig(); const { chain } = useChain(); @@ -89,7 +91,7 @@ export const WalletConnectCard = () => { if (!walletConnectConnector) { setAuthStep({ - type: "wallet_connect", + type: AuthStepType.WalletConnect, error: new Error("WalletConnect params not found"), }); @@ -106,14 +108,16 @@ export const WalletConnectCard = () => { tryAgainCTA={errorMessage.tryAgainCTA} icon={} handleTryAgain={() => { - setAuthStep({ type: "wallet_connect" }); + setAuthStep({ type: AuthStepType.WalletConnect }); // Re-try wallet connect's connection... connect({ connector: walletConnectConnector, chainId: chain.id, }); }} - handleUseAnotherMethod={() => setAuthStep({ type: "pick_eoa" })} + handleUseAnotherMethod={() => + setAuthStep({ type: AuthStepType.PickEoa }) + } /> ); } @@ -141,7 +145,7 @@ export const WalletConnectCard = () => { title: "Cancel", onClick: async () => { // Ensure to stop all inflight requests - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); }, }} /> @@ -151,7 +155,7 @@ export const WalletConnectCard = () => { export const EoaPickCard = () => { const { chain } = useChain(); const { connectors, connect } = useConnectEOA(); - const { setAuthStep } = useAuthContext("pick_eoa"); + const { setAuthStep } = useAuthContext(AuthStepType.PickEoa); const { walletConnectParams } = useWalletConnectAuthConfig(); @@ -203,7 +207,7 @@ export const EoaPickCard = () => { // If walletConnectConnector is not found, set the error and return if (!walletConnectConnector) { return setAuthStep({ - type: "wallet_connect", + type: AuthStepType.WalletConnect, error: new Error("WalletConnect params not found"), }); } diff --git a/account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx b/account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx index 841cfc07c5..66925d498c 100644 --- a/account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx +++ b/account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx @@ -3,13 +3,17 @@ import { useAuthenticate } from "../../../../hooks/useAuthenticate.js"; import { ls } from "../../../../strings.js"; import { AuthStepStatus, + AuthStepType, useAuthContext, type AuthStep, } from "../../context.js"; import { Button } from "../../../button.js"; type EmailNotReceivedDisclaimerProps = { - authStep: Extract; + authStep: Extract< + AuthStep, + { type: AuthStepType.EmailVerify | AuthStepType.OtpVerify } + >; }; export const EmailNotReceivedDisclaimer = ({ authStep, @@ -18,13 +22,13 @@ export const EmailNotReceivedDisclaimer = ({ const [emailResent, setEmailResent] = useState(false); const { authenticate } = useAuthenticate({ onSuccess: () => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, }); const isOTPVerifying = useMemo(() => { return ( - authStep.type === "otp_verify" && + authStep.type === AuthStepType.OtpVerify && (authStep.status === AuthStepStatus.verifying || authStep.status === AuthStepStatus.success) ); diff --git a/account-kit/react/src/components/auth/card/index.tsx b/account-kit/react/src/components/auth/card/index.tsx index 2fbc949874..a2928383ac 100644 --- a/account-kit/react/src/components/auth/card/index.tsx +++ b/account-kit/react/src/components/auth/card/index.tsx @@ -14,7 +14,7 @@ import { useAuthModal } from "../../../hooks/useAuthModal.js"; import { useElementHeight } from "../../../hooks/useElementHeight.js"; import { useSignerStatus } from "../../../hooks/useSignerStatus.js"; import { Navigation } from "../../navigation.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import { Footer } from "../sections/Footer.js"; import { Step } from "./steps.js"; export type AuthCardProps = { @@ -72,34 +72,34 @@ export const AuthCardContent = ({ const canGoBack = useMemo(() => { return [ - "email_verify", - "otp_verify", - "passkey_verify", - "passkey_create", - "pick_eoa", - "wallet_connect", - "eoa_connect", - "oauth_completing", + AuthStepType.EmailVerify, + AuthStepType.OtpVerify, + AuthStepType.PasskeyVerify, + AuthStepType.PasskeyCreate, + AuthStepType.PickEoa, + AuthStepType.WalletConnect, + AuthStepType.EoaConnect, + AuthStepType.OauthCompleting, ].includes(authStep.type); }, [authStep]); const onBack = useCallback(() => { switch (authStep.type) { - case "email_verify": - case "otp_verify": - case "passkey_verify": - case "passkey_create": - case "oauth_completing": + case AuthStepType.EmailVerify: + case AuthStepType.OtpVerify: + case AuthStepType.PasskeyVerify: + case AuthStepType.PasskeyCreate: + case AuthStepType.OauthCompleting: disconnect(config); // Terminate any inflight authentication didGoBack.current = true; - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); break; - case "wallet_connect": - case "eoa_connect": - setAuthStep({ type: "pick_eoa" }); + case AuthStepType.WalletConnect: + case AuthStepType.EoaConnect: + setAuthStep({ type: AuthStepType.PickEoa }); break; - case "pick_eoa": - setAuthStep({ type: "initial" }); + case AuthStepType.PickEoa: + setAuthStep({ type: AuthStepType.Initial }); break; default: console.warn("Unhandled back action for auth step", authStep); @@ -112,20 +112,20 @@ export const AuthCardContent = ({ disconnect(config); } - if (authStep.type === "passkey_create") { - setAuthStep({ type: "complete" }); + if (authStep.type === AuthStepType.PasskeyCreate) { + setAuthStep({ type: AuthStepType.Complete }); } else { - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); } closeAuthModal(); }, [isConnected, authStep.type, closeAuthModal, config, setAuthStep]); useEffect(() => { - if (authStep.type === "complete") { + if (authStep.type === AuthStepType.Complete) { didGoBack.current = false; closeAuthModal(); onAuthSuccess?.(); - } else if (authStep.type !== "initial") { + } else if (authStep.type !== AuthStepType.Initial) { didGoBack.current = false; } }, [ diff --git a/account-kit/react/src/components/auth/card/loading/email.tsx b/account-kit/react/src/components/auth/card/loading/email.tsx index f0226f3ff2..2964cf38f7 100644 --- a/account-kit/react/src/components/auth/card/loading/email.tsx +++ b/account-kit/react/src/components/auth/card/loading/email.tsx @@ -3,11 +3,11 @@ import { useSignerStatus } from "../../../../hooks/useSignerStatus.js"; import { EmailIllustration } from "../../../../icons/illustrations/email.js"; import { Spinner } from "../../../../icons/spinner.js"; import { ls } from "../../../../strings.js"; -import { useAuthContext } from "../../context.js"; +import { AuthStepType, useAuthContext } from "../../context.js"; // eslint-disable-next-line jsdoc/require-jsdoc export const LoadingEmail = () => { - const { authStep } = useAuthContext("email_verify"); + const { authStep } = useAuthContext(AuthStepType.EmailVerify); // yup, re-sent and resent. I'm not fixing it const [emailResent, setEmailResent] = useState(false); @@ -39,11 +39,11 @@ export const LoadingEmail = () => { // eslint-disable-next-line jsdoc/require-jsdoc export const CompletingEmailAuth = () => { const { isConnected } = useSignerStatus(); - const { setAuthStep } = useAuthContext("email_completing"); + const { setAuthStep } = useAuthContext(AuthStepType.EmailCompleting); useEffect(() => { if (isConnected) { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); } }, [isConnected, setAuthStep]); diff --git a/account-kit/react/src/components/auth/card/loading/oauth.tsx b/account-kit/react/src/components/auth/card/loading/oauth.tsx index 689901d7e5..e4c23c5e1d 100644 --- a/account-kit/react/src/components/auth/card/loading/oauth.tsx +++ b/account-kit/react/src/components/auth/card/loading/oauth.tsx @@ -6,22 +6,24 @@ import { OAuthConnectionFailed, } from "../../../../icons/oauth.js"; import { capitalize } from "../../../../utils.js"; -import { useAuthContext } from "../../context.js"; +import { AuthStepType, useAuthContext } from "../../context.js"; import { useOAuthVerify } from "../../hooks/useOAuthVerify.js"; import { ConnectionError } from "../error/connection-error.js"; import { ls } from "../../../../strings.js"; export const CompletingOAuth = () => { const { isConnected } = useSignerStatus(); - const { setAuthStep, authStep } = useAuthContext("oauth_completing"); + const { setAuthStep, authStep } = useAuthContext( + AuthStepType.OauthCompleting + ); const { authenticate } = useOAuthVerify({ config: authStep.config }); const oauthWasCancelled = authStep.error instanceof OauthCancelledError; useEffect(() => { if (isConnected) { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); } else if (oauthWasCancelled) { - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); } }, [isConnected, oauthWasCancelled, setAuthStep]); @@ -33,7 +35,9 @@ export const CompletingOAuth = () => { )}`} bodyText={ls.error.connection.oauthBody} handleTryAgain={authenticate} - handleUseAnotherMethod={() => setAuthStep({ type: "initial" })} + handleUseAnotherMethod={() => + setAuthStep({ type: AuthStepType.Initial }) + } icon={ } diff --git a/account-kit/react/src/components/auth/card/loading/otp.stories.tsx b/account-kit/react/src/components/auth/card/loading/otp.stories.tsx index 5265359e41..4c904d6ce7 100644 --- a/account-kit/react/src/components/auth/card/loading/otp.stories.tsx +++ b/account-kit/react/src/components/auth/card/loading/otp.stories.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/rules-of-hooks */ import { useEffect } from "react"; -import { useAuthContext } from "../../context.js"; +import { AuthStepType, useAuthContext } from "../../context.js"; import { LoadingOtp } from "./otp.js"; import type { Meta, StoryObj } from "@storybook/react"; @@ -12,9 +12,9 @@ const meta: Meta = { render: () => { const { authStep, setAuthStep } = useAuthContext(); useEffect(() => { - setAuthStep({ type: "otp_verify", email: "test@alchemy.com" }); + setAuthStep({ type: AuthStepType.OtpVerify, email: "test@alchemy.com" }); }, [setAuthStep]); - if (authStep.type === "otp_verify") { + if (authStep.type === AuthStepType.OtpVerify) { return ; } diff --git a/account-kit/react/src/components/auth/card/loading/otp.tsx b/account-kit/react/src/components/auth/card/loading/otp.tsx index 949c069f98..00e3297770 100644 --- a/account-kit/react/src/components/auth/card/loading/otp.tsx +++ b/account-kit/react/src/components/auth/card/loading/otp.tsx @@ -8,7 +8,7 @@ import { isOTPCodeType, } from "../../../otp-input/otp-input.js"; import { Spinner } from "../../../../icons/spinner.js"; -import { AuthStepStatus, useAuthContext } from "../../context.js"; +import { AuthStepStatus, AuthStepType, useAuthContext } from "../../context.js"; import { useAuthenticate } from "../../../../hooks/useAuthenticate.js"; import { useSignerStatus } from "../../../../hooks/useSignerStatus.js"; @@ -16,7 +16,7 @@ const AUTH_DELAY = 3000; export const LoadingOtp = () => { const { isConnected } = useSignerStatus(); - const { authStep } = useAuthContext("otp_verify"); + const { authStep } = useAuthContext(AuthStepType.OtpVerify); const [otpCode, setOtpCode] = useState(initialOTPValue); const [errorText, setErrorText] = useState(authStep.error?.message || ""); const [titleText, setTitleText] = useState(ls.loadingOtp.title); @@ -38,7 +38,7 @@ export const LoadingOtp = () => { setAuthStep({ ...authStep, status: AuthStepStatus.success }); setTitleText(ls.loadingOtp.verified); setTimeout(() => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, AUTH_DELAY); } }, diff --git a/account-kit/react/src/components/auth/card/loading/passkey.tsx b/account-kit/react/src/components/auth/card/loading/passkey.tsx index c1f46842f0..a6234cfdba 100644 --- a/account-kit/react/src/components/auth/card/loading/passkey.tsx +++ b/account-kit/react/src/components/auth/card/loading/passkey.tsx @@ -1,12 +1,12 @@ import { ConnectionFailed } from "../../../../icons/connectionFailed.js"; import { LoadingPasskey } from "../../../../icons/passkey.js"; import { ls } from "../../../../strings.js"; -import { useAuthContext } from "../../context.js"; +import { AuthStepType, useAuthContext } from "../../context.js"; import { usePasskeyVerify } from "../../hooks/usePasskeyVerify.js"; import { ConnectionError } from "../error/connection-error.js"; export const LoadingPasskeyAuth = () => { - const { setAuthStep, authStep } = useAuthContext("passkey_verify"); + const { setAuthStep, authStep } = useAuthContext(AuthStepType.PasskeyVerify); const { authenticate } = usePasskeyVerify(); if (authStep.error) { @@ -16,7 +16,9 @@ export const LoadingPasskeyAuth = () => { bodyText={ls.error.connection.passkeyBody} icon={} handleTryAgain={authenticate} - handleUseAnotherMethod={() => setAuthStep({ type: "initial" })} + handleUseAnotherMethod={() => + setAuthStep({ type: AuthStepType.Initial }) + } /> ); } @@ -45,7 +47,7 @@ export const LoadingPasskeyAuth = () => { diff --git a/account-kit/react/src/components/auth/card/passkey-added.tsx b/account-kit/react/src/components/auth/card/passkey-added.tsx index 58207b8523..1ea1e534f6 100644 --- a/account-kit/react/src/components/auth/card/passkey-added.tsx +++ b/account-kit/react/src/components/auth/card/passkey-added.tsx @@ -1,12 +1,12 @@ import { AddedPasskeyIllustration } from "../../../icons/illustrations/added-passkey.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; // eslint-disable-next-line jsdoc/require-jsdoc export function PasskeyAdded() { const { setAuthStep } = useAuthContext(); setTimeout(() => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, 5000); return ( diff --git a/account-kit/react/src/components/auth/card/passkey.stories.tsx b/account-kit/react/src/components/auth/card/passkey.stories.tsx index f001eb5e1d..6282590cf3 100644 --- a/account-kit/react/src/components/auth/card/passkey.stories.tsx +++ b/account-kit/react/src/components/auth/card/passkey.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { http, HttpResponse } from "msw"; import { useEffect } from "react"; import { useUiConfig } from "../../../hooks/useUiConfig.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import type { AuthType } from "../types.js"; import { AuthCard } from "./index.jsx"; @@ -44,7 +44,7 @@ const PasskeyStory = (props: any) => { const { setAuthStep } = useAuthContext(); useEffect(() => { - setAuthStep({ type: "passkey_create" }); + setAuthStep({ type: AuthStepType.PasskeyCreate }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/account-kit/react/src/components/auth/card/steps.tsx b/account-kit/react/src/components/auth/card/steps.tsx index ff74b36a6f..7b59446840 100644 --- a/account-kit/react/src/components/auth/card/steps.tsx +++ b/account-kit/react/src/components/auth/card/steps.tsx @@ -1,4 +1,4 @@ -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import { AddPasskey } from "./add-passkey.js"; import { EoaConnectCard, EoaPickCard, WalletConnectCard } from "./eoa.js"; import { CompletingEmailAuth, LoadingEmail } from "./loading/email.js"; @@ -11,28 +11,28 @@ import { LoadingOtp } from "./loading/otp.js"; export const Step = () => { const { authStep } = useAuthContext(); switch (authStep.type) { - case "email_verify": + case AuthStepType.EmailVerify: return ; - case "otp_verify": + case AuthStepType.OtpVerify: return ; - case "passkey_verify": + case AuthStepType.PasskeyVerify: return ; - case "email_completing": + case AuthStepType.EmailCompleting: return ; - case "oauth_completing": + case AuthStepType.OauthCompleting: return ; - case "passkey_create": + case AuthStepType.PasskeyCreate: return ; - case "passkey_create_success": + case AuthStepType.PasskeyCreateSuccess: return ; - case "eoa_connect": + case AuthStepType.EoaConnect: return ; - case "pick_eoa": + case AuthStepType.PickEoa: return ; - case "wallet_connect": + case AuthStepType.WalletConnect: return ; - case "complete": - case "initial": + case AuthStepType.Complete: + case AuthStepType.Initial: default: return ; } diff --git a/account-kit/react/src/components/auth/context.ts b/account-kit/react/src/components/auth/context.ts index 6c7d0fd219..a7ef18e3de 100644 --- a/account-kit/react/src/components/auth/context.ts +++ b/account-kit/react/src/components/auth/context.ts @@ -4,6 +4,21 @@ import type { Connector } from "@wagmi/core"; import { createContext, useContext } from "react"; import type { AuthType } from "./types"; +export enum AuthStepType { + EmailVerify = "email_verify", + OtpVerify = "otp_verify", + PasskeyVerify = "passkey_verify", + PasskeyCreate = "passkey_create", + PasskeyCreateSuccess = "passkey_create_success", + EmailCompleting = "email_completing", + OauthCompleting = "oauth_completing", + Initial = "initial", + Complete = "complete", + EoaConnect = "eoa_connect", + WalletConnect = "wallet_connect", + PickEoa = "pick_eoa", +} + export enum AuthStepStatus { base = "base", success = "success", @@ -12,27 +27,27 @@ export enum AuthStepStatus { } export type AuthStep = - | { type: "email_verify"; email: string } + | { type: AuthStepType.EmailVerify; email: string } | { - type: "otp_verify"; + type: AuthStepType.OtpVerify; email: string; error?: Error; status?: AuthStepStatus; } - | { type: "passkey_verify"; error?: Error } - | { type: "passkey_create"; error?: Error } - | { type: "passkey_create_success" } - | { type: "email_completing" } + | { type: AuthStepType.PasskeyVerify; error?: Error } + | { type: AuthStepType.PasskeyCreate; error?: Error } + | { type: AuthStepType.PasskeyCreateSuccess } + | { type: AuthStepType.EmailCompleting } | { - type: "oauth_completing"; + type: AuthStepType.OauthCompleting; config: Extract; error?: Error; } - | { type: "initial"; error?: Error } - | { type: "complete" } - | { type: "eoa_connect"; connector: Connector; error?: Error } - | { type: "wallet_connect"; error?: Error } - | { type: "pick_eoa" }; + | { type: AuthStepType.Initial; error?: Error } + | { type: AuthStepType.Complete } + | { type: AuthStepType.EoaConnect; connector: Connector; error?: Error } + | { type: AuthStepType.WalletConnect; error?: Error } + | { type: AuthStepType.PickEoa }; type AuthContextType< TType extends AuthStep["type"] | undefined = AuthStep["type"] | undefined diff --git a/account-kit/react/src/components/auth/hooks/useConnectEOA.ts b/account-kit/react/src/components/auth/hooks/useConnectEOA.ts index 48e8d958c6..e970320ee1 100644 --- a/account-kit/react/src/components/auth/hooks/useConnectEOA.ts +++ b/account-kit/react/src/components/auth/hooks/useConnectEOA.ts @@ -1,27 +1,27 @@ "use client"; import { useConnect } from "../../../hooks/useConnect.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; export const useConnectEOA = () => { const { setAuthStep } = useAuthContext(); const { connectors, connect } = useConnect({ onMutate: ({ connector }) => { if (typeof connector === "function") { - setAuthStep({ type: "wallet_connect" }); + setAuthStep({ type: AuthStepType.WalletConnect }); } else { - setAuthStep({ type: "eoa_connect", connector }); + setAuthStep({ type: AuthStepType.EoaConnect, connector }); } }, onError: (error, { connector }) => { if (typeof connector === "function") { - setAuthStep({ type: "wallet_connect", error }); + setAuthStep({ type: AuthStepType.WalletConnect, error }); } else { - setAuthStep({ type: "eoa_connect", connector, error }); + setAuthStep({ type: AuthStepType.EoaConnect, connector, error }); } }, onSuccess: () => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, }); diff --git a/account-kit/react/src/components/auth/hooks/useOAuthVerify.ts b/account-kit/react/src/components/auth/hooks/useOAuthVerify.ts index 3957c14862..c1c3cec171 100644 --- a/account-kit/react/src/components/auth/hooks/useOAuthVerify.ts +++ b/account-kit/react/src/components/auth/hooks/useOAuthVerify.ts @@ -1,7 +1,7 @@ "use client"; import { useCallback } from "react"; import { useAuthenticate } from "../../../hooks/useAuthenticate.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import type { AuthType } from "../types.js"; export type UseOAuthVerifyReturnType = { @@ -20,19 +20,19 @@ export const useOAuthVerify = ({ onMutate: () => { setAuthStep({ config, - type: "oauth_completing", + type: AuthStepType.OauthCompleting, }); }, onError: (err) => { console.error(err); setAuthStep({ - type: "oauth_completing", + type: AuthStepType.OauthCompleting, config, error: err, }); }, onSuccess: () => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, }); diff --git a/account-kit/react/src/components/auth/hooks/usePasskeyVerify.ts b/account-kit/react/src/components/auth/hooks/usePasskeyVerify.ts index ab626254fa..5fd98791ed 100644 --- a/account-kit/react/src/components/auth/hooks/usePasskeyVerify.ts +++ b/account-kit/react/src/components/auth/hooks/usePasskeyVerify.ts @@ -1,6 +1,6 @@ import { useCallback } from "react"; import { useAuthenticate } from "../../../hooks/useAuthenticate.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; export type UsePasskeyVerifyReturnType = { authenticate: () => void; @@ -18,13 +18,13 @@ export const usePasskeyVerify = (): UsePasskeyVerifyReturnType => { const { setAuthStep } = useAuthContext(); const { authenticate: authenticate_, isPending } = useAuthenticate({ onMutate: () => { - setAuthStep({ type: "passkey_verify" }); + setAuthStep({ type: AuthStepType.PasskeyVerify }); }, onError: (err) => { - setAuthStep({ type: "passkey_verify", error: err }); + setAuthStep({ type: AuthStepType.PasskeyVerify, error: err }); }, onSuccess: () => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, }); diff --git a/account-kit/react/src/components/auth/modal.tsx b/account-kit/react/src/components/auth/modal.tsx index d60e41d091..d056d61744 100644 --- a/account-kit/react/src/components/auth/modal.tsx +++ b/account-kit/react/src/components/auth/modal.tsx @@ -5,7 +5,7 @@ import { useUiConfig } from "../../hooks/useUiConfig.js"; import { useSignerStatus } from "../../index.js"; import { Dialog } from "../dialog/dialog.js"; import { AuthCardContent } from "./card/index.js"; -import { useAuthContext } from "./context.js"; +import { AuthStepType, useAuthContext } from "./context.js"; export const AuthModal = () => { const { isConnected } = useSignerStatus(); @@ -23,14 +23,15 @@ export const AuthModal = () => { if (addPasskeyOnSignup) { openAuthModal(); setAuthStep({ - type: "passkey_create", + type: AuthStepType.PasskeyCreate, }); } }, [addPasskeyOnSignup, openAuthModal, setAuthStep]); useNewUserSignup( handleSignup, isConnected && - (authStep.type === "complete" || authStep.type === "initial") && + (authStep.type === AuthStepType.Complete || + authStep.type === AuthStepType.Initial) && !isOpen ); diff --git a/account-kit/react/src/components/auth/sections/EmailAuth.tsx b/account-kit/react/src/components/auth/sections/EmailAuth.tsx index 8b335bb084..8652a9d7b0 100644 --- a/account-kit/react/src/components/auth/sections/EmailAuth.tsx +++ b/account-kit/react/src/components/auth/sections/EmailAuth.tsx @@ -10,7 +10,7 @@ import { ls } from "../../../strings.js"; import { Button } from "../../button.js"; import { IS_SIGNUP_QP } from "../../constants.js"; import { Input } from "../../input.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; import type { AuthType } from "../types.js"; type EmailAuthProps = Extract; @@ -30,18 +30,21 @@ export const EmailAuth = memo( onMutate: async (params) => { if (params.type === "email" && "email" in params) { if (params.emailMode === "magicLink") { - setAuthStep({ type: "email_verify", email: params.email }); + setAuthStep({ + type: AuthStepType.EmailVerify, + email: params.email, + }); } else { - setAuthStep({ type: "otp_verify", email: params.email }); + setAuthStep({ type: AuthStepType.OtpVerify, email: params.email }); } } }, onSuccess: () => { - setAuthStep({ type: "complete" }); + setAuthStep({ type: AuthStepType.Complete }); }, onError: (error) => { console.error(error); - setAuthStep({ type: "initial", error }); + setAuthStep({ type: AuthStepType.Initial, error }); }, }); @@ -67,7 +70,7 @@ export const EmailAuth = memo( } catch (e) { const error = e instanceof Error ? e : new Error("An Unknown error"); - setAuthStep({ type: "initial", error }); + setAuthStep({ type: AuthStepType.Initial, error }); } }, validatorAdapter: zodValidator(), diff --git a/account-kit/react/src/components/auth/sections/Footer.tsx b/account-kit/react/src/components/auth/sections/Footer.tsx index 302a30b428..258ff7802c 100644 --- a/account-kit/react/src/components/auth/sections/Footer.tsx +++ b/account-kit/react/src/components/auth/sections/Footer.tsx @@ -3,7 +3,7 @@ import { HelpText } from "../card/footer/help-text.js"; import { OAuthContactSupport } from "../card/footer/oauth-contact-support.js"; import { ProtectedBy } from "../card/footer/protected-by.js"; import { RegistrationDisclaimer } from "../card/footer/registration-disclaimer.js"; -import type { AuthStep } from "../context.js"; +import { AuthStepType, type AuthStep } from "../context.js"; type FooterProps = { authStep: AuthStep; @@ -11,22 +11,23 @@ type FooterProps = { const RenderFooterText = ({ authStep }: FooterProps) => { switch (authStep.type) { - case "initial": + case AuthStepType.Initial: return ; - case "email_verify": - case "otp_verify": + case AuthStepType.EmailVerify: + case AuthStepType.OtpVerify: return ; - case "passkey_create": - case "wallet_connect": - case "passkey_verify": + case AuthStepType.PasskeyCreate: + case AuthStepType.WalletConnect: + case AuthStepType.PasskeyVerify: return ; - case "oauth_completing": + case AuthStepType.OauthCompleting: return ; - case "email_completing": - case "passkey_create_success": - case "eoa_connect": - case "pick_eoa": - case "complete": + case AuthStepType.EmailCompleting: + case AuthStepType.PasskeyCreateSuccess: + case AuthStepType.EoaConnect: + case AuthStepType.PickEoa: + case AuthStepType.Complete: + default: return null; } }; diff --git a/account-kit/react/src/components/auth/sections/InjectedProvidersAuth.tsx b/account-kit/react/src/components/auth/sections/InjectedProvidersAuth.tsx index f5ae8870d2..3a69c34af5 100644 --- a/account-kit/react/src/components/auth/sections/InjectedProvidersAuth.tsx +++ b/account-kit/react/src/components/auth/sections/InjectedProvidersAuth.tsx @@ -1,6 +1,6 @@ import { WalletIcon } from "../../../icons/wallet.js"; import { Button } from "../../button.js"; -import { useAuthContext } from "../context.js"; +import { AuthStepType, useAuthContext } from "../context.js"; export const ExternalWalletsAuth = () => { const { setAuthStep } = useAuthContext(); @@ -9,7 +9,7 @@ export const ExternalWalletsAuth = () => { diff --git a/account-kit/react/src/context.tsx b/account-kit/react/src/context.tsx index 63315b6871..4b9804bbb1 100644 --- a/account-kit/react/src/context.tsx +++ b/account-kit/react/src/context.tsx @@ -14,7 +14,11 @@ import { useMemo, useState, } from "react"; -import { AuthModalContext, type AuthStep } from "./components/auth/context.js"; +import { + AuthModalContext, + AuthStepType, + type AuthStep, +} from "./components/auth/context.js"; import { AuthModal } from "./components/auth/modal.js"; import { IS_SIGNUP_QP } from "./components/constants.js"; import type { AlchemyAccountsConfigWithUI } from "./createConfig.js"; @@ -115,7 +119,7 @@ export const AlchemyAccountProvider = ( * Reset the auth step to the initial state. This also clears the email auth query params from the URL. */ const resetAuthStep = useCallback(() => { - setAuthStep({ type: "initial" }); + setAuthStep({ type: AuthStepType.Initial }); clearSignupParam(); }, []); @@ -133,17 +137,17 @@ export const AlchemyAccountProvider = ( const [authStep, setAuthStep] = useState(() => { if (status === AlchemySignerStatus.AUTHENTICATING_EMAIL) { return { - type: "email_completing", + type: AuthStepType.EmailCompleting, }; } return { - type: "initial", + type: AuthStepType.Initial, }; }); useEffect(() => { - if (authStep.type === "complete") { + if (authStep.type === AuthStepType.Complete) { clearSignupParam(); } }, [authStep]);