@openfort/react 0.3.2 → 1.0.1

package/build/components/Pages/Connected/SolanaConnected.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEffect } from 'react';
+import { UserRoundIcon, ReceiveIcon } from '../../../assets/icons.js';
+import { BALANCE_INVALIDATE_EVENT, fetchSolanaBalance } from '../../../hooks/useBalance.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { formatSol } from '../../../solana/hooks/utils.js';
+import { useSolanaContext } from '../../../solana/SolanaContext.js';
+import { nFormatter } from '../../../utils/index.js';
+import { logger } from '../../../utils/logger.js';
+import Avatar from '../../Common/Avatar/index.js';
+import Button from '../../Common/Button/index.js';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { ConnectedPageLayout } from './ConnectedPageLayout.js';
+import { LinkedProvidersToggle, Balance, ActionButton } from './styles.js';
+import { truncateSolanaAddress } from '../../../utils/format.js';
+
+const SolanaConnected = () => {
+    var _a, _b, _c, _d, _e;
+    const context = useOpenfort();
+    const { setHeaderLeftSlot, setRoute } = context;
+    const locales = useLocales();
+    const wallet = useSolanaEmbeddedWallet();
+    const { embeddedAccounts } = useOpenfortCore();
+    const { rpcUrl } = useSolanaContext();
+    const hasSolanaWallets = ((_a = embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.filter((a) => a.chainType === ChainTypeEnum.SVM)) !== null && _a !== void 0 ? _a : []).length > 0;
+    const isAddressLoading = wallet.status === 'connected' && !wallet.address;
+    const address = wallet.status === 'connected' && wallet.address ? wallet.address : undefined;
+    const { triggerResize } = context;
+    // When the address becomes available, trigger a modal resize so the modal
+    // height (measured via offsetHeight) reflects the full connected layout.
+    useEffect(() => {
+        if (address)
+            triggerResize();
+    }, [address, triggerResize]);
+    const balanceResult = useAsyncData({
+        queryKey: ['solana-balance', address, rpcUrl],
+        queryFn: async () => {
+            if (!address || !rpcUrl)
+                return null;
+            try {
+                const balanceLamports = await fetchSolanaBalance(address, rpcUrl, 'confirmed');
+                return balanceLamports.value;
+            }
+            catch (error) {
+                logger.error('Failed to fetch Solana balance:', error);
+                return null;
+            }
+        },
+        enabled: Boolean(address && rpcUrl),
+    });
+    useEffect(() => {
+        if (!address || !rpcUrl)
+            return;
+        const handler = () => balanceResult.refetch().catch(() => { });
+        window.addEventListener(BALANCE_INVALIDATE_EVENT, handler);
+        return () => window.removeEventListener(BALANCE_INVALIDATE_EVENT, handler);
+    }, [address, rpcUrl, balanceResult.refetch]);
+    const lamports = balanceResult.data;
+    const isBalanceLoading = balanceResult.isLoading;
+    const balanceSol = lamports != null ? formatSol(BigInt(lamports), 9) : null;
+    // Re-measure when balance loads so the modal expands to fit balance + actions.
+    useEffect(() => {
+        if (!isBalanceLoading)
+            triggerResize();
+    }, [isBalanceLoading, triggerResize]);
+    useEffect(() => {
+        if (!address) {
+            setHeaderLeftSlot(null);
+            return;
+        }
+        setHeaderLeftSlot(jsx(LinkedProvidersToggle, { type: "button", onClick: () => setRoute(routes.PROFILE), "aria-label": "Profile", title: "Profile", children: jsx(UserRoundIcon, {}) }));
+        return () => {
+            setHeaderLeftSlot(null);
+        };
+    }, [address, setHeaderLeftSlot, setRoute]);
+    const themeContext = useThemeContext();
+    const solanaUI = (_c = (_b = context.walletConfig) === null || _b === void 0 ? void 0 : _b.solana) === null || _c === void 0 ? void 0 : _c.ui;
+    const CustomAvatar = solanaUI === null || solanaUI === void 0 ? void 0 : solanaUI.customAvatar;
+    const separator = ['web95', 'rounded', 'minimal'].includes((_e = (_d = themeContext.theme) !== null && _d !== void 0 ? _d : context.uiConfig.theme) !== null && _e !== void 0 ? _e : '')
+        ? '....'
+        : undefined;
+    const avatar = address ? CustomAvatar ? jsx(CustomAvatar, { address: address }) : jsx(Avatar, { address: address }) : jsx("span", {});
+    const balanceNode = balanceSol != null && !isBalanceLoading ? (jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balanceSol)), " SOL"] }, "solana-balance")) : null;
+    return (jsx(PageContent, { onBack: null, header: locales.profileScreen_heading, children: jsx(ConnectedPageLayout, { address: address !== null && address !== void 0 ? address : '', displayName: jsx(CopyText, { value: address !== null && address !== void 0 ? address : '', children: truncateSolanaAddress(address !== null && address !== void 0 ? address : '', separator) }), avatar: avatar, balance: balanceNode, actions: jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.SOL_RECEIVE), children: "Get" }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isBalanceLoading, isAddressLoading: isAddressLoading, noWalletFallback: hasSolanaWallets ? (jsx(Button, { onClick: () => setRoute(routes.SOL_WALLETS), children: "Manage wallets" })) : (jsx(Button, { onClick: () => setRoute(routes.SOL_CREATE_WALLET), children: "Create Solana Wallet" })) }) }));
+};
+
+export { SolanaConnected as default };
+//# sourceMappingURL=SolanaConnected.js.map

package/build/components/Pages/Connected/SolanaConnected.js.map

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

package/build/components/Pages/Connected/index.d.ts

@@ -1,2 +1,2 @@
-declare const Connected: () => import("react/jsx-runtime").JSX.Element;
-export default Connected;
+import type React from 'react';
+export declare const Connected: React.FC;

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import EthereumConnected from './EthereumConnected.js';
+import SolanaConnected from './SolanaConnected.js';
+
+const CONNECTED_REGISTRY = {
+    [ChainTypeEnum.EVM]: EthereumConnected,
+    [ChainTypeEnum.SVM]: SolanaConnected,
+};
+const Connected = () => {
+    const { chainType } = useOpenfortCore();
+    const Component = CONNECTED_REGISTRY[chainType];
+    return Component ? jsx(Component, {}) : null;
+};
+
+export { Connected };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,122 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+import { InnerContainer } from '../../Common/Button/styles.js';
+
+const AvatarContainer = styled(motion.div) `
+  padding: 18px 0 20px;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 16px 0 20px;
+  }
+`;
+const AvatarInner = styled(motion.div) `
+  position: relative;
+  display: inline-block;
+`;
+const ChainSelectorContainer = styled(motion.div) `
+  z-index: 3;
+  position: absolute;
+  bottom: 0px;
+  right: -16px;
+`;
+const BalanceContainer = styled(motion.div) `
+  position: relative;
+  height: 24px;
+  margin-top: 4px;
+`;
+const Balance = styled(motion.div) `
+  position: relative;
+  font-size: 20px;
+`;
+const PlaceholderKeyframes = keyframes `
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const LoadingBalance = styled(motion.div) `
+  width: 25%;
+  height: 24px;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--ck-body-background-secondary);
+  inset: 0;
+  &:before {
+    z-index: 4;
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(
+      90deg,
+      var(--ck-body-background-transparent) 50%,
+      var(--ck-body-background),
+      var(--ck-body-background-transparent)
+    );
+    opacity: 0.75;
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;
+const Unsupported = styled(motion.div) `
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  min-width: 13px;
+  min-height: 13px;
+  color: var(--ck-body-color-danger, red);
+`;
+const ActionButtonsContainer = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+`;
+const ActionButton = styled(Button) `
+  flex: 1;
+  margin: 0;
+  height: 48px;
+  font-size: 16px;
+
+  ${InnerContainer} {
+    gap: 8px;
+    white-space: nowrap;
+  }
+`;
+const DisconnectButton = styled(Button) `
+  margin-top: 4px;
+`;
+const LinkedProvidersToggle = styled.button `
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+  margin: 0;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+export { ActionButton, ActionButtonsContainer, AvatarContainer, AvatarInner, Balance, BalanceContainer, ChainSelectorContainer, DisconnectButton, LinkedProvidersToggle, LoadingBalance, Unsupported };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import Loader from '../../Common/Loading/index.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const ConnectedSuccess = () => {
+    const { setOpen } = useOpenfort();
+    // hide on connect
+    useEffect(() => {
+        setTimeout(() => {
+            setOpen(false);
+        }, 1000);
+    }, []);
+    return (jsx(PageContent, { children: jsx(Loader, { isLoading: false, isSuccess: true, header: "Connected" }) }));
+};
+
+export { ConnectedSuccess as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { useWalletConnectModal } from '../../../hooks/useWalletConnectModal.js';
+import { logger } from '../../../utils/logger.js';
+import ConnectorList from '../../Common/ConnectorList/index.js';
+import Loader from '../../Common/Loading/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+let hasWarnedConnectors = false;
+const ConnectWithMobile = () => {
+    var _a, _b;
+    const { open: openWalletConnectModal } = useWalletConnectModal();
+    const [error, setError] = useState(undefined);
+    const bridge = useEthereumBridge();
+    const connector = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _a === void 0 ? void 0 : _a.connector;
+    const address = (_b = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _b === void 0 ? void 0 : _b.address;
+    const { setRoute, setConnector } = useOpenfort();
+    const openWCModal = async () => {
+        setError(undefined);
+        const { error } = await openWalletConnectModal();
+        if (error) {
+            setError(error);
+        }
+    };
+    useEffect(() => {
+        openWCModal();
+    }, []);
+    useEffect(() => {
+        if (connector && address) {
+            const walletConnectDeeplinkChoice = localStorage.getItem('WALLETCONNECT_DEEPLINK_CHOICE');
+            if (walletConnectDeeplinkChoice) {
+                try {
+                    const parsedChoice = JSON.parse(walletConnectDeeplinkChoice);
+                    if (parsedChoice &&
+                        typeof parsedChoice === 'object' &&
+                        'name' in parsedChoice &&
+                        typeof parsedChoice.name === 'string') {
+                        setConnector({ id: parsedChoice.name });
+                    }
+                    else {
+                        setConnector({ id: connector.id });
+                    }
+                }
+                catch {
+                    setConnector({ id: connector.id });
+                }
+            }
+            else {
+                setConnector({ id: connector.id });
+            }
+            setRoute(routes.CONNECT_WITH_MOBILE);
+        }
+    }, [address, connector]);
+    return (jsx(Loader, { header: error ? 'Error connecting wallet.' : `Connecting...`, isError: !!error, description: error, onRetry: () => openWCModal() }));
+};
+const Connectors = ({ logoutOnBack }) => {
+    const isMobile = useIsMobile();
+    // Runtime deprecation warning
+    if (process.env.NODE_ENV === 'development' && !hasWarnedConnectors) {
+        logger.warn('[@openfort/react] <Connectors /> is deprecated and will be moved to @openfort/react/wagmi in v3.0.\n' +
+            'For embedded wallets, external wallet connections are not needed.\n' +
+            'See: https://openfort.io/docs/migration/external-wallets');
+        hasWarnedConnectors = true;
+    }
+    return (jsx(PageContent, { logoutOnBack: logoutOnBack, width: 312, children: isMobile ? jsx(ConnectWithMobile, {}) : jsx(ConnectorList, {}) }));
+};
+
+export { Connectors as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useGuestAuth } from '../../../hooks/openfort/auth/useGuestAuth.js';
+import { logger } from '../../../utils/logger.js';
+import Loader from '../../Common/Loading/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+const CreateGuestUserPage = () => {
+    const { setRoute } = useOpenfort();
+    const { signUpGuest, error } = useGuestAuth({
+        recoverWalletAutomatically: false,
+        onSuccess: () => setRoute(routes.LOAD_WALLETS),
+    });
+    const initialized = useRef(false);
+    useEffect(() => {
+        if (initialized.current)
+            return;
+        initialized.current = true;
+        logger.log('Signing up guest user...');
+        signUpGuest();
+    }, []);
+    return (jsx(PageContent, { onBack: null, children: jsx(Loader, { header: error ? 'Error creating guest user.' : 'Creating guest user...', isError: !!error, onRetry: () => signUpGuest() }) }));
+};
+
+export { CreateGuestUserPage as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Pages/CreateWallet/SolanaCreateWallet.d.ts

@@ -0,0 +1,6 @@
+import { type SetOnBackFunction } from '../../PageContent';
+declare const SolanaCreateWallet: ({ onBack, logoutOnBack }: {
+    onBack: SetOnBackFunction;
+    logoutOnBack: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default SolanaCreateWallet;

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

@@ -0,0 +1,241 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RecoveryMethod, EmbeddedState } from '@openfort/openfort-js';
+import { motion } from 'framer-motion';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { PhoneIcon, EmailIcon, FingerPrintIcon, KeyIcon, LockIcon } from '../../../assets/icons.js';
+import { OpenfortError } from '../../../types.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 } 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 { Body, ResultContainer, FooterTextButton, FooterButtonText } from '../EmailOTP/styles.js';
+import { ProvidersButton, ProviderLabel, ProviderIcon } from '../Providers/styles.js';
+import { OtherMethodButton } from './styles.js';
+
+const OtherMethod = ({ currentMethod, onChangeMethod, }) => {
+    const { uiConfig } = useOpenfort();
+    const otherMethods = useMemo(() => {
+        return uiConfig.walletRecovery.allowedMethods.filter((method) => method !== currentMethod);
+    }, [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 SolanaCreateAutomatic = ({ onBack, logoutOnBack }) => {
+    var _a;
+    const { embeddedState } = useOpenfortCore();
+    const { setRoute, triggerResize } = useOpenfort();
+    const embeddedWallet = useSolanaEmbeddedWallet();
+    const { isEnabled: isWalletRecoveryOTPEnabled, requestOTP } = useRecoveryOTP();
+    const [recoveryError, setRecoveryError] = useState(null);
+    const [shouldCreate, setShouldCreate] = 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 embeddedWallet.create({
+                recoveryMethod: RecoveryMethod.AUTOMATIC,
+                otpCode: otp,
+            });
+            setOtpStatus('success');
+            setRoute(routes.SOL_CONNECTED);
+        }
+        catch (err) {
+            setOtpStatus('error');
+            setError(err instanceof OpenfortError ? err.message : 'There was an error verifying the OTP. Please try again.');
+            setTimeout(() => {
+                setOtpStatus('idle');
+                setError(false);
+            }, 1000);
+        }
+    };
+    useEffect(() => {
+        if (!shouldCreate)
+            return;
+        (async () => {
+            logger.log('Creating Solana wallet with automatic recovery');
+            try {
+                await embeddedWallet.create({ recoveryMethod: RecoveryMethod.AUTOMATIC });
+                setRoute(routes.SOL_CONNECTED);
+            }
+            catch (err) {
+                const { error, isOTPRequired } = handleOtpRecoveryError(err, isWalletRecoveryOTPEnabled);
+                if (isOTPRequired && isWalletRecoveryOTPEnabled) {
+                    try {
+                        const response = await requestOTP();
+                        setNeedsOTP(true);
+                        setOtpResponse(response);
+                    }
+                    catch (otpErr) {
+                        logger.log('Error requesting OTP for wallet creation', otpErr);
+                        setRecoveryError(new Error('Failed to send recovery code'));
+                    }
+                }
+                else {
+                    logger.log('Error creating Solana wallet', err);
+                    setRecoveryError(error);
+                }
+            }
+            triggerResize();
+        })();
+    }, [shouldCreate]);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreate(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 SolanaCreatePasskey = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    const { triggerResize, setRoute } = useOpenfort();
+    const embeddedWallet = useSolanaEmbeddedWallet();
+    const { embeddedState } = useOpenfortCore();
+    const [shouldCreate, setShouldCreate] = useState(false);
+    const [recoveryError, setRecoveryError] = useState(null);
+    useEffect(() => {
+        if (!shouldCreate)
+            return;
+        (async () => {
+            logger.log('Creating Solana wallet with passkey recovery');
+            try {
+                await embeddedWallet.create({ recoveryMethod: RecoveryMethod.PASSKEY });
+                setRoute(routes.SOL_CONNECTED);
+            }
+            catch (err) {
+                logger.log('Error creating Solana wallet with passkey', err);
+                setRecoveryError(new Error('Failed to create wallet'));
+                setShouldCreate(false);
+            }
+        })();
+    }, [shouldCreate]);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreate(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: () => setShouldCreate(true) }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSKEY, onChangeMethod: onChangeMethod })] }));
+};
+const SolanaCreatePassword = ({ 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 embeddedWallet = useSolanaEmbeddedWallet();
+    const handleSubmit = async () => {
+        if (getPasswordStrength(recoveryPhrase) < MEDIUM_SCORE_THRESHOLD) {
+            setShowPasswordIsTooWeakError(true);
+            return;
+        }
+        setLoading(true);
+        try {
+            await embeddedWallet.create({
+                recoveryMethod: RecoveryMethod.PASSWORD,
+                password: recoveryPhrase,
+            });
+            setRoute(routes.SOL_CONNECTED);
+        }
+        catch (err) {
+            setRecoveryError(err instanceof OpenfortError ? err.message : 'Failed to create wallet. Please try again.');
+        }
+        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(LockIcon, {}), 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 recoveryMethodComponents = {
+    [RecoveryMethod.AUTOMATIC]: ({ onBack, logoutOnBack }) => (jsx(SolanaCreateAutomatic, { onBack: onBack, logoutOnBack: logoutOnBack })),
+    [RecoveryMethod.PASSKEY]: SolanaCreatePasskey,
+    [RecoveryMethod.PASSWORD]: SolanaCreatePassword,
+    other: ChooseRecoveryMethod,
+};
+const SolanaCreateWallet = ({ 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;
+    const Component = recoveryMethodComponents[method];
+    if (!Component) {
+        logger.error(`Unsupported recovery method: ${method}`);
+        return null;
+    }
+    return jsx(Component, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack });
+};
+
+export { SolanaCreateWallet as default };
+//# sourceMappingURL=SolanaCreateWallet.js.map

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

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