@openfort/react 0.3.1 → 1.0.0

package/build/components/Pages/CreateWallet/index.js

@@ -0,0 +1,303 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum, RecoveryMethod, EmbeddedState } from '@openfort/openfort-js';
+import { motion } from 'framer-motion';
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { PlusIcon, PhoneIcon, EmailIcon, FingerPrintIcon, KeyIcon, ShieldIcon, LockIcon } from '../../../assets/icons.js';
+import Logos from '../../../assets/logos.js';
+import { OpenfortError } from '../../../types.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useRecoveryOTP } from '../../../shared/hooks/useRecoveryOTP.js';
+import { handleOtpRecoveryError } from '../../../shared/utils/otpError.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import FitText from '../../Common/FitText/index.js';
+import Input from '../../Common/Input/index.js';
+import Loader from '../../Common/Loading/index.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { OtpInputStandalone } from '../../Common/OTPInput/index.js';
+import TickList from '../../Common/TickList/index.js';
+import { FloatingGraphic } from '../../FloatingGraphic/index.js';
+import { routes, LinkWalletOnSignUpOption } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { PasswordStrengthIndicator } from '../../PasswordStrength/PasswordStrengthIndicator.js';
+import { getPasswordStrength, MEDIUM_SCORE_THRESHOLD } from '../../PasswordStrength/password-utility.js';
+import Connectors from '../Connectors/index.js';
+import { Body, ResultContainer, FooterTextButton, FooterButtonText } from '../EmailOTP/styles.js';
+import { ProvidersButton, ProviderLabel, ProviderIcon } from '../Providers/styles.js';
+import SolanaCreateWallet from './SolanaCreateWallet.js';
+import { OtherMethodButton } from './styles.js';
+
+const OtherMethod = ({ currentMethod, onChangeMethod, }) => {
+    const { uiConfig } = useOpenfort();
+    const otherMethods = useMemo(() => {
+        const allowedMethods = uiConfig.walletRecovery.allowedMethods;
+        const otherMethods = allowedMethods.filter((method) => method !== currentMethod);
+        return otherMethods;
+    }, [uiConfig, currentMethod]);
+    if (otherMethods.length === 0)
+        return null;
+    if (otherMethods.length === 1) {
+        const method = otherMethods[0];
+        let text;
+        switch (method) {
+            case RecoveryMethod.PASSWORD:
+                text = 'Use password recovery instead';
+                break;
+            case RecoveryMethod.AUTOMATIC:
+                text = 'Skip for now';
+                break;
+            case RecoveryMethod.PASSKEY:
+                text = 'Use passkey recovery instead';
+                break;
+            default:
+                text = method;
+        }
+        return (jsx(OtherMethodButton, { onClick: () => {
+                onChangeMethod(method);
+            }, children: text }));
+    }
+    return jsx(OtherMethodButton, { onClick: () => onChangeMethod('other'), children: "Choose another recovery method" });
+};
+const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
+    var _a;
+    const { embeddedState } = useOpenfortCore();
+    const { setRoute, triggerResize } = useOpenfort();
+    const [recoveryError, setRecoveryError] = useState(null);
+    const { create } = useEthereumEmbeddedWallet();
+    const { isEnabled: isWalletRecoveryOTPEnabled, requestOTP } = useRecoveryOTP();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const [needsOTP, setNeedsOTP] = useState(false);
+    const [otpResponse, setOtpResponse] = useState(null);
+    const [otpStatus, setOtpStatus] = useState('idle');
+    const [error, setError] = useState(false);
+    const handleCompleteOtp = async (otp) => {
+        setOtpStatus('loading');
+        try {
+            await create({
+                recoveryMethod: RecoveryMethod.AUTOMATIC,
+                otpCode: otp,
+            });
+            setOtpStatus('success');
+            setRoute(routes.CONNECTED_SUCCESS);
+        }
+        catch (err) {
+            setOtpStatus('error');
+            setError(err instanceof OpenfortError ? err.message : 'There was an error verifying the OTP');
+            logger.log('Error verifying OTP for wallet recovery', err);
+            setTimeout(() => {
+                setOtpStatus('idle');
+                setError(false);
+            }, 1000);
+        }
+    };
+    useEffect(() => {
+        if (!shouldCreateWallet)
+            return;
+        (async () => {
+            logger.log('Creating wallet Automatic recover');
+            try {
+                await create({ recoveryMethod: RecoveryMethod.AUTOMATIC });
+                setRoute(routes.CONNECTED_SUCCESS);
+            }
+            catch (err) {
+                const { error, isOTPRequired } = handleOtpRecoveryError(err, isWalletRecoveryOTPEnabled);
+                if (isOTPRequired && isWalletRecoveryOTPEnabled) {
+                    try {
+                        const res = await requestOTP();
+                        setNeedsOTP(true);
+                        setOtpResponse(res);
+                    }
+                    catch (otpErr) {
+                        logger.log('Error requesting OTP for wallet recovery', otpErr);
+                        setRecoveryError(new Error('Failed to send recovery code'));
+                    }
+                }
+                else {
+                    logger.log('Error creating wallet', err);
+                    setRecoveryError(error);
+                }
+            }
+            triggerResize();
+        })();
+    }, [shouldCreateWallet, create, isWalletRecoveryOTPEnabled, requestOTP, triggerResize]);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
+        }
+    }, [embeddedState]);
+    const handleResendClick = useCallback(() => {
+        setOtpStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || otpStatus === 'sending-otp' || otpStatus === 'send-otp';
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (otpStatus === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, otpStatus]);
+    if (needsOTP && isWalletRecoveryOTPEnabled) {
+        if ((!(otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email) && !(otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone)) || ((_a = otpResponse.email) === null || _a === void 0 ? void 0 : _a.includes('@openfort.anonymous'))) {
+            return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(Loader, { isError: true, description: 'You cannot create a wallet without authentication, please link email or phone to continue.', header: 'Cannot create wallet.' }), jsx(Button, { onClick: () => setRoute(routes.PROVIDERS), children: "Add an authentication method" })] }));
+        }
+        return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                        logo: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? jsx(PhoneIcon, {}) : jsx(EmailIcon, {}),
+                    } }), jsxs(ModalBody, { children: [jsxs(Body, { children: ["Please check ", jsx("b", { children: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone : otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email }), " and enter your code below."] }), jsx(OtpInputStandalone, { length: 9, scale: "80%", onComplete: handleCompleteOtp, isLoading: otpStatus === 'loading', isError: otpStatus === 'error', isSuccess: otpStatus === 'success' }), jsxs(ResultContainer, { children: [otpStatus === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), otpStatus === 'error' && jsx(ModalBody, { "$error": true, children: error || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] })] }));
+    }
+    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { isError: !!recoveryError, header: recoveryError ? 'Error creating wallet.' : `Creating wallet...`, description: recoveryError ? recoveryError.message : undefined }) }));
+};
+const CreateWalletPasskeyRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    const { triggerResize, setRoute } = useOpenfort();
+    const { create } = useEthereumEmbeddedWallet();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const [recoveryError, setRecoveryError] = useState(null);
+    const { embeddedState } = useOpenfortCore();
+    useEffect(() => {
+        if (!shouldCreateWallet)
+            return;
+        (async () => {
+            logger.log('Creating wallet passkey recovery');
+            try {
+                await create({ recoveryMethod: RecoveryMethod.PASSKEY });
+                setRoute(routes.CONNECTED_SUCCESS);
+            }
+            catch (err) {
+                logger.log('Error creating wallet', err);
+                setRecoveryError(new Error('Failed to create wallet'));
+                setShouldCreateWallet(false);
+            }
+        })();
+    }, [shouldCreateWallet, create]);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
+        }
+    }, [embeddedState]);
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? 'Invalid passkey.' : 'Creating wallet with passkey...', description: recoveryError ? 'There was an error creating your passkey. Please try again.' : undefined, onRetry: () => setShouldCreateWallet(true) }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSKEY, onChangeMethod: onChangeMethod })] }));
+};
+const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    const [recoveryPhrase, setRecoveryPhrase] = useState('');
+    const [recoveryError, setRecoveryError] = useState(false);
+    const { triggerResize, setRoute } = useOpenfort();
+    const [showPasswordIsTooWeakError, setShowPasswordIsTooWeakError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { create } = useEthereumEmbeddedWallet();
+    const handleSubmit = async () => {
+        if (getPasswordStrength(recoveryPhrase) < MEDIUM_SCORE_THRESHOLD) {
+            setShowPasswordIsTooWeakError(true);
+            return;
+        }
+        setLoading(true);
+        try {
+            await create({
+                recoveryMethod: RecoveryMethod.PASSWORD,
+                password: recoveryPhrase,
+            });
+            logger.log('Recovery success');
+            setRoute(routes.CONNECTED_SUCCESS);
+        }
+        catch (err) {
+            setRecoveryError(err instanceof OpenfortError ? err.message : 'There was an error recovering your account');
+        }
+        setLoading(false);
+    };
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: {
+                    logo: jsx(KeyIcon, {}),
+                    size: '1.2',
+                }, logoTopLeft: {
+                    logo: jsx(ShieldIcon, {}),
+                    size: '0.75',
+                }, logoBottomRight: {
+                    logo: jsx(LockIcon, {}),
+                    size: '0.5',
+                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleSubmit();
+                        }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
+                                    if (showPasswordIsTooWeakError)
+                                        setShowPasswordIsTooWeakError(false);
+                                    setRecoveryPhrase(e.target.value);
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+};
+const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));
+};
+const CreateEmbeddedWallet = ({ onBack, logoutOnBack }) => {
+    const { uiConfig, triggerResize } = useOpenfort();
+    const [userSelectedMethod, setUserSelectedMethod] = useState(null);
+    useEffect(() => {
+        triggerResize();
+    }, [userSelectedMethod]);
+    const method = userSelectedMethod !== null && userSelectedMethod !== void 0 ? userSelectedMethod : uiConfig.walletRecovery.defaultMethod;
+    switch (method) {
+        case RecoveryMethod.PASSWORD:
+            return (jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(CreateWalletAutomaticRecovery, { onBack: onBack, logoutOnBack: logoutOnBack });
+        case RecoveryMethod.PASSKEY:
+            return (jsx(CreateWalletPasskeyRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
+        case 'other':
+            return (jsx(ChooseRecoveryMethod, { onChangeMethod: setUserSelectedMethod, onBack: () => {
+                    setUserSelectedMethod(null);
+                }, logoutOnBack: logoutOnBack }));
+        default:
+            logger.error(`Unsupported recovery method: ${userSelectedMethod}${uiConfig.walletRecovery.defaultMethod}`);
+            return null;
+    }
+};
+const CreateOrConnectWallet = () => {
+    const [showCreateEmbeddedWallet, setShowCreateEmbeddedWallet] = useState(false);
+    const { setRoute } = useOpenfort();
+    if (showCreateEmbeddedWallet)
+        return jsx(CreateEmbeddedWallet, { onBack: () => setShowCreateEmbeddedWallet(false), logoutOnBack: false });
+    return (jsxs(PageContent, { onBack: routes.PROVIDERS, logoutOnBack: true, children: [jsx(ModalHeading, { children: "Choose an option" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => setShowCreateEmbeddedWallet(true), children: [jsx(ProviderLabel, { children: "Create Wallet" }), jsx(ProviderIcon, { children: jsx(PlusIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => {
+                        setRoute({ route: routes.CONNECTORS, connectType: 'link' });
+                    }, children: [jsx(ProviderLabel, { children: "Connect Wallet" }), jsx(ProviderIcon, { children: jsx(Logos.OtherWallets, {}) })] }) })] }));
+};
+const EthereumCreateWallet = () => {
+    const { uiConfig, walletConfig, setRoute } = useOpenfort();
+    const { user } = useOpenfortCore();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    useEffect(() => {
+        if (isConnected && user)
+            setRoute(routes.CONNECTED_SUCCESS);
+    }, [isConnected, user, setRoute]);
+    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.OPTIONAL) {
+        return jsx(CreateOrConnectWallet, {});
+    }
+    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.REQUIRED ||
+        (!walletConfig && uiConfig.linkWalletOnSignUp !== LinkWalletOnSignUpOption.DISABLED)) {
+        return jsx(Connectors, { logoutOnBack: true });
+    }
+    return jsx(CreateEmbeddedWallet, { onBack: routes.PROVIDERS, logoutOnBack: true });
+};
+const createWalletByChain = {
+    [ChainTypeEnum.EVM]: jsx(EthereumCreateWallet, {}),
+    [ChainTypeEnum.SVM]: jsx(SolanaCreateWallet, { onBack: routes.PROVIDERS, logoutOnBack: true }),
+};
+const CreateWallet = () => {
+    var _a;
+    const { chainType } = useOpenfortCore();
+    return (_a = createWalletByChain[chainType]) !== null && _a !== void 0 ? _a : createWalletByChain[ChainTypeEnum.EVM];
+};
+
+export { CreateWallet as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/CreateWallet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/CreateWallet/styles.js

@@ -0,0 +1,17 @@
+import styled from '../../../styles/styled/index.js';
+
+const OtherMethodButton = styled.button `
+  width: 100%;
+  color: var(--ck-body-color-muted);
+  background: none;
+  font-size: 14px;
+  margin-top: 10px;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--ck-body-color);
+  }
+`;
+
+export { OtherMethodButton };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/CreateWallet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/components/Pages/DownloadApp/index.js

@@ -0,0 +1,32 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import useLocales from '../../../hooks/useLocales.js';
+import { useExternalConnector } from '../../../wallets/useExternalConnectors.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import { ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const DownloadApp = () => {
+    var _a, _b, _c, _d;
+    const context = useOpenfort();
+    const wallet = useExternalConnector(context.connector.id);
+    const locales = useLocales({
+        CONNECTORNAME: (_a = wallet === null || wallet === void 0 ? void 0 : wallet.name) !== null && _a !== void 0 ? _a : 'UNKNOWN CONNECTOR',
+    });
+    if (!wallet)
+        return jsx(Fragment, { children: "Wallet not found" });
+    const downloads = {
+        ios: (_b = wallet.downloadUrls) === null || _b === void 0 ? void 0 : _b.ios,
+        android: (_c = wallet.downloadUrls) === null || _c === void 0 ? void 0 : _c.android,
+        redirect: (_d = wallet.downloadUrls) === null || _d === void 0 ? void 0 : _d.download,
+    };
+    const bodycopy = downloads.ios && downloads.android
+        ? locales.downloadAppScreen_iosAndroid
+        : downloads.ios
+            ? locales.downloadAppScreen_ios
+            : locales.downloadAppScreen_android;
+    return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: '20px', padding: '0 12px' }, children: bodycopy })] }) }));
+};
+
+export { DownloadApp as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/DownloadApp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/EmailLogin/index.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useMemo } from 'react';
+import { useEmailAuth } from '../../../hooks/openfort/auth/useEmailAuth.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
+import FitText from '../../Common/FitText/index.js';
+import Input from '../../Common/Input/index.js';
+import { ModalBody } from '../../Common/Modal/styles.js';
+import { TextContainer } from '../../ConnectButton/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { FooterContainer } from './styles.js';
+
+// TODO: Localize
+const textVariants = {
+    initial: {
+        opacity: 0,
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        position: 'absolute',
+        opacity: 0,
+        transition: {
+            duration: 0,
+        },
+    },
+};
+const EmailLogin = () => {
+    const [password, setPassword] = React.useState('');
+    const { setRoute, triggerResize, setEmailInput: setEmail, emailInput: email, previousRoute } = useOpenfort();
+    const [isRegister, setIsRegister] = React.useState(false);
+    const { signUpEmail, signInEmail, error: loginError, isLoading: loginLoading, } = useEmailAuth({
+        recoverWalletAutomatically: false,
+    });
+    const handleSubmit = async () => {
+        if (isRegister) {
+            return handleSignUp();
+        }
+        setIsRegister(false);
+        setTimeout(() => {
+            triggerResize();
+        });
+        const { error, requiresEmailVerification } = await signInEmail({
+            email,
+            password,
+        });
+        logger.log('SIGN IN RESPONSE', { error, requiresEmailVerification });
+        if (!error) {
+            if (requiresEmailVerification) {
+                setRoute(routes.EMAIL_VERIFICATION);
+            }
+            else {
+                setRoute(routes.LOAD_WALLETS);
+            }
+        }
+        else {
+            setTimeout(() => {
+                triggerResize();
+            }, 100);
+        }
+    };
+    const handleSignUp = async () => {
+        setIsRegister(true);
+        setTimeout(() => {
+            triggerResize();
+        });
+        const { error, requiresEmailVerification } = await signUpEmail({
+            email,
+            password,
+        });
+        logger.log('SIGN UP RESPONSE', { error, requiresEmailVerification });
+        if (!error) {
+            if (requiresEmailVerification) {
+                setRoute(routes.EMAIL_VERIFICATION);
+            }
+            else {
+                setEmail('');
+                setRoute(routes.LOAD_WALLETS);
+            }
+        }
+        else {
+            setTimeout(() => {
+                triggerResize();
+            }, 100);
+        }
+    };
+    const handleToggle = () => {
+        setIsRegister((prev) => !prev);
+    };
+    const errorMessage = loginError
+        ? loginError.message === 'Unauthorized'
+            ? 'Invalid email or password'
+            : loginError.message
+        : null;
+    const onBack = useMemo(() => {
+        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.EMAIL_VERIFICATION)
+            return routes.PROVIDERS;
+        return 'back';
+    }, [previousRoute]);
+    return (jsxs(PageContent, { onBack: onBack, children: [jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                }, noValidate: true, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), jsx(Input, { value: password, onChange: (e) => setPassword(e.target.value), type: "password", placeholder: "Enter your password", disabled: loginLoading, autoFocus: true }), jsx(ModalBody, { style: { marginTop: 12 }, "$error": !!loginError, children: jsx(AnimatePresence, { initial: false, children: jsxs(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: [jsx(FitText, { maxFontSize: 80, children: jsx("span", { style: { textAlign: 'center', color: 'var(--color-error)', marginRight: '4px' }, children: errorMessage }) }, loginError ? 'text-error' : 'text-no-error'), jsx(FitText, { maxFontSize: 80, children: jsx(TextLinkButton, { type: "button", onClick: () => {
+                                                setRoute(routes.FORGOT_PASSWORD);
+                                            }, children: "Forgot password?" }) })] }, loginError ? 'error' : 'no-error') }) }), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: isRegister ? 'Signing up...' : 'Logging in...' }, "connectedText")) : isRegister ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Sign up" }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Sign in" }, "connectedText")) }) })] }), jsxs(FooterContainer, { children: ["or", jsx("button", { type: "button", onClick: handleToggle, disabled: loginLoading, children: isRegister ? 'Sign in' : 'Sign up' })] })] }));
+};
+
+export { EmailLogin as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/EmailLogin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/EmailLogin/styles.js

@@ -0,0 +1,24 @@
+import styled from '../../../styles/styled/index.js';
+
+const FooterContainer = styled.span `
+  padding: 12px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  line-height: 1rem;
+  color: var(--ck-body-disclaimer-color, var(--ck-body-color-muted, inherit));
+
+  & button {
+    color: var(--ck-body-disclaimer-link-color, inherit);
+    font-weight: var(--ck-body-disclaimer-font-weight, 400);
+    text-decoration: none;
+    transition: color 200ms ease;
+    &:hover {
+      color: var(--ck-body-disclaimer-link-hover-color, inherit);
+    }
+  }
+`;
+
+export { FooterContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/EmailLogin/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/EmailOTP/index.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { EmailIcon } from '../../../assets/icons.js';
+import { useEmailOtpAuth } from '../../../hooks/openfort/auth/useEmailOtpAuth.js';
+import { logger } from '../../../utils/logger.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { OtpInputStandalone } from '../../Common/OTPInput/index.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import { FloatingGraphic } from '../../FloatingGraphic/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { Body, ResultContainer, FooterTextButton, FooterButtonText } from './styles.js';
+
+const RESEND_COOLDOWN_MS = 10000;
+const SUCCESS_REDIRECT_DELAY_MS = 2000;
+const ERROR_DISPLAY_DURATION_MS = 2000;
+const EmailOTP = () => {
+    const { emailInput: email, previousRoute, setRoute, setEmailInput } = useOpenfort();
+    const { isLoading, requestEmailOtp, signInEmailOtp } = useEmailOtpAuth({
+        recoverWalletAutomatically: false,
+    });
+    const onBack = useMemo(() => {
+        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.EMAIL_VERIFICATION)
+            return routes.PROVIDERS;
+        return 'back';
+    }, [previousRoute]);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    const [status, setStatus] = useState('idle');
+    // Single ref to track if initial OTP request has been made
+    const hasRequestedInitialOtpRef = useRef(false);
+    // Memoize the OTP request function to prevent unnecessary recreations
+    const sendOtpRequest = useCallback(async () => {
+        const { error } = await requestEmailOtp({ email });
+        if (error) {
+            logger.error('Error requesting email OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('idle');
+        }
+    }, [email, requestEmailOtp]);
+    // Initial OTP request on mount
+    useEffect(() => {
+        if (hasRequestedInitialOtpRef.current)
+            return;
+        hasRequestedInitialOtpRef.current = true;
+        sendOtpRequest();
+    }, [sendOtpRequest]);
+    // Handle OTP completion
+    const handleComplete = useCallback(async (otp) => {
+        logger.log('OTP entered:', otp);
+        setStatus('loading');
+        const { error } = await signInEmailOtp({ email, otp });
+        if (error) {
+            logger.error('Error logging in with email OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('success');
+        }
+    }, [email, signInEmailOtp]);
+    // Handle status changes and side effects
+    useEffect(() => {
+        let timeoutId;
+        switch (status) {
+            case 'send-otp':
+                setStatus('sending-otp');
+                sendOtpRequest();
+                break;
+            case 'success':
+                timeoutId = setTimeout(() => {
+                    setEmailInput('');
+                    setRoute(routes.LOAD_WALLETS);
+                }, SUCCESS_REDIRECT_DELAY_MS);
+                break;
+            case 'error':
+                timeoutId = setTimeout(() => {
+                    setStatus('idle');
+                }, ERROR_DISPLAY_DURATION_MS);
+                break;
+        }
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [status, sendOtpRequest, setEmailInput, setRoute]);
+    // Handle resend cooldown
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => {
+            setCanSendOtp(true);
+        }, RESEND_COOLDOWN_MS);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    // Memoize button text to avoid recalculation
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (status === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, status]);
+    const handleResendClick = useCallback(() => {
+        setStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || status === 'sending-otp' || status === 'send-otp';
+    return (jsxs(PageContent, { onBack: onBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                    logo: jsx(EmailIcon, {}),
+                } }), jsxs(ModalBody, { children: [jsxs(Body, { children: ["Please check ", jsx("b", { children: email }), " for an email from openfort.io and enter your code below."] }), jsx(OtpInputStandalone, { onComplete: handleComplete, isLoading: status === 'loading' || isLoading, isError: status === 'error', isSuccess: status === 'success' }), jsxs(ResultContainer, { children: [status === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), status === 'error' && jsx(ModalBody, { "$error": true, children: "Invalid code. Please try again." })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] }), jsx(PoweredByFooter, {})] }));
+};
+
+export { EmailOTP as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/EmailOTP/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}