@openfort/react 0.0.5 → 0.0.6

package/build/index.es.js

@@ -1,13 +1,13 @@
-import { Openfort as Openfort$1, RecoveryMethod, EmbeddedState, AuthActionRequiredActions, OAuthProvider, MissingRecoveryPasswordError, AccountTypeEnum, ChainTypeEnum } from '@openfort/openfort-js';
+import { Openfort as Openfort$1, EmbeddedState, AuthActionRequiredActions, OAuthProvider, RecoveryMethod, MissingRecoveryPasswordError, AccountTypeEnum, ChainTypeEnum } from '@openfort/openfort-js';
 export { RecoveryMethod, ThirdPartyOAuthProvider } from '@openfort/openfort-js';
-import { http, useConfig, useConnectors as useConnectors$1, useConnect as useConnect$1, useAccount, useDisconnect, useSwitchChain, createConfig, useEnsAddress, useEnsName, useEnsAvatar, useBalance, useChainId, WagmiContext, useBlockNumber } from 'wagmi';
+import { http, useConfig, useConnectors as useConnectors$1, useConnect as useConnect$1, useAccount, useDisconnect, useChainId, useSwitchChain, createConfig, useEnsAddress, useEnsName, useEnsAvatar, useBalance, WagmiContext, useBlockNumber } from 'wagmi';
 import { mainnet, polygon, optimism, arbitrum, sepolia } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useEffect, createContext, useState, useMemo, useRef, useCallback, createElement, useLayoutEffect } from 'react';
+import React, { useEffect, createContext, useState, useMemo, useRef, useCallback, createElement, useLayoutEffect, useContext } from 'react';
 import { detect } from 'detect-browser';
 import { Buffer } from 'buffer';
-import { polygonAmoy } from 'viem/chains';
+import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
 import styled$1, { css, keyframes } from 'styled-components';
 import { createPortal } from 'react-dom';
@@ -20,9 +20,9 @@ import { normalize } from 'viem/ens';
 import { AxiosError } from 'axios';
 import { createSiweMessage } from 'viem/siwe';
 import { signMessage } from '@wagmi/core';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import calculateEntropy from 'fast-password-entropy';
 
-const OPENFORT_VERSION = '0.0.5';
+const OPENFORT_VERSION = '0.0.6';
 
 var OpenfortErrorType;
 (function (OpenfortErrorType) {
@@ -292,7 +292,6 @@ var Logos = {
 };
 
 const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
-const playerRegex = /^(pla_[a-zA-Z0-9]{4})[a-zA-Z0-9-]+([a-zA-Z0-9]{4})$/;
 const truncateEthAddress = (address, separator = '••••') => {
     if (!address)
         return '';
@@ -301,14 +300,6 @@ const truncateEthAddress = (address, separator = '••••') => {
         return address;
     return `${match[1]}${separator}${match[2]}`;
 };
-const truncateUserId = (playerId, separator = '••••') => {
-    if (!playerId)
-        return '';
-    const match = playerId.match(playerRegex);
-    if (!match)
-        return playerId;
-    return `${match[1]}${separator}${match[2]}`;
-};
 const nFormatter = (num, digits = 2) => {
     if (num < 10000)
         return num.toFixed(2);
@@ -991,9 +982,8 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
     const { connectors, connect, reset } = useConnect();
     const { address } = useAccount();
     const [user, setUser] = useState(null);
-    const { disconnect } = useDisconnect();
+    const { disconnectAsync } = useDisconnect();
     const { walletConfig } = useOpenfort();
-    const automaticRecovery = walletConfig && walletConfig.recoveryMethod === RecoveryMethod.AUTOMATIC;
     // ---- Openfort instance ----
     const openfort = useMemo(() => {
         log('Creating Openfort instance.', openfortProps);
@@ -1075,21 +1065,27 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
             return null;
         }
     }, [openfort]);
+    const chainId = useChainId();
     useEffect(() => {
-        if (!openfort)
-            return;
-        if (!walletConfig)
+        if (!openfort || !walletConfig)
             return;
-        log("Getting ethereum provider");
-        openfort.embeddedWallet.getEthereumProvider(walletConfig.ethereumProviderPolicyId ?
-            {
-                policy: walletConfig.ethereumProviderPolicyId,
-                chains: {
-                    [polygonAmoy.id]: "https://rpc-amoy.polygon.technology",
-                }
+        log("Getting ethereum provider", chainId);
+        const resolvePolicy = () => {
+            const { ethereumProviderPolicyId } = walletConfig;
+            if (!ethereumProviderPolicyId)
+                return undefined;
+            if (typeof ethereumProviderPolicyId === "string") {
+                return { policy: ethereumProviderPolicyId };
             }
-            : undefined);
-    }, [openfort]);
+            const policy = ethereumProviderPolicyId[chainId];
+            if (!policy) {
+                log(`No policy found for chainId ${chainId}.`);
+                return undefined;
+            }
+            return { policy };
+        };
+        openfort.embeddedWallet.getEthereumProvider(resolvePolicy());
+    }, [openfort, walletConfig, chainId]);
     const [isConnectedWithEmbeddedSigner, setIsConnectedWithEmbeddedSigner] = useState(false);
     useEffect(() => {
         if (!openfort)
@@ -1127,7 +1123,7 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
             default:
                 throw new Error(`Unknown embedded state: ${embeddedState}`);
         }
-    }, [embeddedState, openfort, automaticRecovery]);
+    }, [embeddedState, openfort]);
     useEffect(() => {
         // Connect to wagmi with Embedded signer
         if (address || !user)
@@ -1144,13 +1140,15 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
         connect({ connector });
     }, [connectors, embeddedState, address, user]);
     // ---- Auth functions ----
-    const logout = useCallback(() => {
+    const queryClient = useQueryClient();
+    const logout = useCallback(async () => {
         if (!openfort)
             return;
-        log('Logging out...');
-        openfort.auth.logout();
         setUser(null);
-        disconnect();
+        log('Logging out...');
+        await openfort.auth.logout();
+        await disconnectAsync();
+        queryClient.resetQueries({ queryKey: ['openfortEmbeddedWalletList'] });
         reset();
         startPollingEmbeddedState();
     }, [openfort]);
@@ -1174,7 +1172,7 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
                 return true;
             case EmbeddedState.UNAUTHENTICATED:
                 if (user)
-                    return true; // If user is set in unauthenticated state, it means that the embedded state is not up to date, so we should wait
+                    return true; // If user i<s set in unauthenticated state, it means that the embedded state is not up to date, so we should wait
                 return false;
             case EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED:
                 if (!user)
@@ -1191,7 +1189,7 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
                 return true;
         }
     }, [embeddedState, address, user]);
-    const needsRecovery = !automaticRecovery && (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) && (!address);
+    const needsRecovery = (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) && (!address);
     const value = {
         signUpGuest,
         embeddedState,
@@ -2853,7 +2851,7 @@ const InfoButton = styled(motion.button) `
     }
   }
 `;
-const Container$7 = styled(motion.div) `
+const Container$8 = styled(motion.div) `
   --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
   --duration: 200ms;
   --transition: height var(--duration) var(--ease),
@@ -4921,7 +4919,7 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
     const Content = (jsx(ResetContainer, { "$useTheme": (_e = demo === null || demo === void 0 ? void 0 : demo.theme) !== null && _e !== void 0 ? _e : themeContext.theme, "$useMode": (_f = demo === null || demo === void 0 ? void 0 : demo.mode) !== null && _f !== void 0 ? _f : themeContext.mode, "$customTheme": (_g = demo === null || demo === void 0 ? void 0 : demo.customTheme) !== null && _g !== void 0 ? _g : themeContext.customTheme, children: jsxs(ModalContainer, { role: "dialog", style: {
                 pointerEvents: rendered ? 'auto' : 'none',
                 position: positionInside ? 'absolute' : undefined,
-            }, children: [!inline && (jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": (_h = context.uiConfig) === null || _h === void 0 ? void 0 : _h.overlayBlur })), jsxs(Container$7, { style: dimensionsCSS, initial: false, children: [jsx("div", { style: {
+            }, children: [!inline && (jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": (_h = context.uiConfig) === null || _h === void 0 ? void 0 : _h.overlayBlur })), jsxs(Container$8, { style: dimensionsCSS, initial: false, children: [jsx("div", { style: {
                                 pointerEvents: inTransition ? 'all' : 'none', // Block interaction while transitioning
                                 position: 'absolute',
                                 top: 0,
@@ -6466,7 +6464,7 @@ function useWalletConnectUri({ enabled } = {
     };
 }
 
-const Web3Context = React.createContext({
+const Web3Context = createContext({
     connect: {
         getUri: () => '',
     },
@@ -6501,7 +6499,7 @@ const Web3ContextProvider = ({ enabled, children, }) => {
     };
     return jsx(Web3Context.Provider, { value: value, children: children });
 };
-const useWeb3 = () => React.useContext(Web3Context);
+const useWeb3 = () => useContext(Web3Context);
 
 const AlertContainer = styled(motion.div) `
   display: flex;
@@ -7348,7 +7346,7 @@ const WalletList = styled.div `
       }
     `}
 `;
-const Container$6 = styled.div ``;
+const Container$7 = styled.div ``;
 
 function useWalletConnectModal() {
     const { log } = useOpenfort();
@@ -7455,7 +7453,7 @@ const CopyToClipboardIcon = ({ copied, small, }) => (jsx(IconContainer$3, { "$cl
             opacity: small || copied ? 1 : 0.3,
         } }) }));
 
-const Container$5 = styled.div `
+const Container$6 = styled.div `
   --color: var(--ck-copytoclipboard-stroke);
   --bg: var(--ck-body-background);
   transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
@@ -7505,7 +7503,7 @@ const CopyToClipboard = ({ string, children, variant }) => {
     };
     if (variant === 'button')
         return (jsx(Button, { disabled: !string, onClick: onCopy, icon: jsx(CopyToClipboardIcon, { copied: clipboard }), children: children }));
-    return (jsx(Container$5, { onClick: onCopy, "$disabled": !string, children: jsxs(OffsetContainer, { children: [children, jsx(CopyToClipboardIcon, { copied: clipboard, small: true })] }) }));
+    return (jsx(Container$6, { onClick: onCopy, "$disabled": !string, children: jsxs(OffsetContainer, { children: [children, jsx(CopyToClipboardIcon, { copied: clipboard, small: true })] }) }));
 };
 
 const MoreIcon = (jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
@@ -7533,7 +7531,7 @@ const MobileConnectors = () => {
             window.location.href = uri;
         //if (uri) window.open(uri, '_blank');
     };
-    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$6, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
+    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$7, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
                                     .sort(
                                 // sort by name
                                 (a, b) => {
@@ -8986,7 +8984,7 @@ const ChainSelectDropdown = ({ children, open, onClose, offsetX = 0, offsetY = 8
                                         }, children: [jsx(DropdownHeading, { children: locales.switchNetworks }), jsx(ChainSelectList, {})] })] }) }) }) })) })] }));
 };
 
-const Container$4 = styled(motion.div) ``;
+const Container$5 = styled(motion.div) ``;
 const SwitchChainButton = styled(motion.button) `
   --color: var(
     --ck-dropdown-button-color,
@@ -9095,7 +9093,7 @@ const ChainSelector = () => {
             setIsOpen(false);
     }, [context.open]);
     const disabled = chains.length <= 1;
-    return (jsx(Fragment, { children: jsx(Container$4, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
+    return (jsx(Fragment, { children: jsx(Container$5, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
                         if (mobile) {
                             context.setRoute(routes.SWITCHNETWORKS);
                         }
@@ -9108,7 +9106,7 @@ const ChainSelector = () => {
 const PoweredByFooter = ({ showDisclaimer }) => {
     var _a, _b;
     const { uiConfig: options } = useOpenfort();
-    return (jsxs(Container$3, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (jsx(Fragment, { children: options.disclaimer })) : (jsxs("div", { children: ["By logging in, you agree to our ", jsx("a", { href: (_a = options === null || options === void 0 ? void 0 : options.termsOfServiceUrl) !== null && _a !== void 0 ? _a : "https://www.openfort.xyz/terms", target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }), " & ", jsx("a", { href: (_b = options === null || options === void 0 ? void 0 : options.privacyPolicyUrl) !== null && _b !== void 0 ? _b : "https://www.openfort.xyz/privacy", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
+    return (jsxs(Container$4, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (jsx(Fragment, { children: options.disclaimer })) : (jsxs("div", { children: ["By logging in, you agree to our ", jsx("a", { href: (_a = options === null || options === void 0 ? void 0 : options.termsOfServiceUrl) !== null && _a !== void 0 ? _a : "https://www.openfort.xyz/terms", target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }), " & ", jsx("a", { href: (_b = options === null || options === void 0 ? void 0 : options.privacyPolicyUrl) !== null && _b !== void 0 ? _b : "https://www.openfort.xyz/privacy", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
                     window.open("https://www.openfort.xyz/", "_blank");
                 }, children: [jsx("span", { children: "Powered by" }), jsx(IconContainer$2, { children: jsx(Logos.Openfort, {}) }), jsx("span", { children: "Openfort" })] })] }));
 };
@@ -9157,7 +9155,7 @@ const IconContainer$2 = styled.div `
     border-radius: 0;
   }
 `;
-const Container$3 = styled(motion.div) `
+const Container$4 = styled(motion.div) `
   text-align: center;
   margin-top: 4px;
   margin-bottom: -16px;
@@ -9350,10 +9348,7 @@ const Profile = ({ closeModal }) => {
         //watch: true,
     });
     const [shouldDisconnect, setShouldDisconnect] = useState(false);
-    const { logout, user } = useOpenfortCore();
-    useEffect(() => {
-        // if (!isConnected) context.setOpen(false);
-    }, [isConnected]);
+    const { logout } = useOpenfortCore();
     useEffect(() => {
         if (!shouldDisconnect)
             return;
@@ -9411,7 +9406,7 @@ const outlineKeyframes = keyframes `
   0%{ opacity:1; }
   100%{ opacity:0; }
 `;
-const Container$2 = styled(motion.div) `
+const Container$3 = styled(motion.div) `
   /*
   background: var(
     --ck-body-background
@@ -10012,14 +10007,14 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
     }, [status, expiryTimer]);
     */
     if (!wallet) {
-        return (jsx(PageContent, { children: jsxs(Container$2, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
+        return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
     }
     // OLD_TODO: Make this more generic
     if (isWalletConnectConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector.id)) {
-        return (jsx(PageContent, { children: jsxs(Container$2, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
+        return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
     }
     const hasError = status === states$2.FAILED || status === states$2.REJECTED || status === states$2.DUPLICATED;
-    return (jsx(PageContent, { children: jsxs(Container$2, { children: [jsx(ConnectingContainer$1, { children: jsxs(ConnectingAnimation$1, { "$shake": hasError, "$circle": walletInfo.iconShape === 'circle', children: [jsx(AnimatePresence, { children: (hasError) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
+    return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ConnectingContainer$1, { children: jsxs(ConnectingAnimation$1, { "$shake": hasError, "$circle": walletInfo.iconShape === 'circle', children: [jsx(AnimatePresence, { children: (hasError) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
                                                 (hasError), message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), walletInfo.iconShape === 'circle' ? (jsx(CircleSpinner, { logo: status === states$2.UNAVAILABLE ? (jsx("div", { style: {
                                         transform: 'scale(1.14)',
                                         position: 'relative',
@@ -11020,12 +11015,13 @@ function useUser() {
     };
 }
 
-const createOpenfortWallet = ({ address, }) => ({
+const parseOpenfortWallet = ({ address, recoveryMethod, }) => ({
     connectorType: "embedded",
     walletClientType: "openfort",
     address,
     id: embeddedWalletId,
     isAvailable: true,
+    recoveryMethod,
 });
 const mapWalletStatus = (status) => {
     return {
@@ -11086,9 +11082,6 @@ function useWallets(hookOptions = {}) {
         refetchOnMount: false,
         refetchOnWindowFocus: false,
     });
-    // useEffect(() => {
-    //   queryClient.resetQueries({ queryKey: ['openfortEmbeddedWalletList'] })
-    // }, [!!user, refetch]);
     const getEncryptionSession = useCallback(async () => {
         if (!walletConfig || !walletConfig.createEncryptedSessionEndpoint) {
             throw new Error("No createEncryptedSessionEndpoint set in walletConfig");
@@ -11122,8 +11115,9 @@ function useWallets(hookOptions = {}) {
             // Remove duplicates (different chain ids)
             if (userWallets.find(w => w.address === (wallet.address)))
                 return;
-            userWallets.push(createOpenfortWallet({
+            userWallets.push(parseOpenfortWallet({
                 address: wallet.address,
+                recoveryMethod: wallet.recoveryMethod,
             }));
         });
         return userWallets;
@@ -11250,13 +11244,12 @@ function useWallets(hookOptions = {}) {
                         walletAddress = walletToRecover.address;
                     }
                     else {
-                        const wallet = await createWallet({
-                            password,
+                        // Here it should check if there is a wallet that can recover in another chain and recover it in the current chain (its a different account so its not supported yet)
+                        return onError({
+                            error: new OpenfortError("No embedded wallet found for the current chain", OpenfortErrorType.WALLET_ERROR),
+                            options: optionsObject,
+                            hookOptions
                         });
-                        if (!wallet.wallet) {
-                            return { error: wallet.error || new OpenfortError("Failed to create embedded wallet", OpenfortErrorType.WALLET_ERROR) };
-                        }
-                        walletAddress = wallet.wallet.address;
                     }
                 }
                 setStatus({
@@ -11264,8 +11257,9 @@ function useWallets(hookOptions = {}) {
                 });
                 return onSuccess({
                     data: {
-                        wallet: createOpenfortWallet({
+                        wallet: parseOpenfortWallet({
                             address: walletAddress,
+                            recoveryMethod: recoveryParams.recoveryMethod,
                         }),
                     },
                     options: optionsObject,
@@ -11365,8 +11359,9 @@ function useWallets(hookOptions = {}) {
             refetch();
             return onSuccess({
                 data: {
-                    wallet: createOpenfortWallet({
+                    wallet: parseOpenfortWallet({
                         address: wallet.address,
+                        recoveryMethod: wallet.recoveryMethod,
                     })
                 }
             });
@@ -11399,8 +11394,9 @@ function useWallets(hookOptions = {}) {
                 hookOptions,
                 options: params,
                 data: {
-                    wallet: createOpenfortWallet({
+                    wallet: parseOpenfortWallet({
                         address: embeddedAccount.address,
+                        recoveryMethod: embeddedAccount.recoveryMethod,
                     }),
                 }
             });
@@ -11429,19 +11425,202 @@ function useWallets(hookOptions = {}) {
     };
 }
 
+/**
+ * Password Utilities Module
+ * Provides functions for password strength calculation, passphrase generation,
+ * and password validation.
+ */
+// ============================================================================
+// Constants and Regular Expressions
+// ============================================================================
+/** Regular expression to match lowercase letters */
+const LOWERCASE_REGEX = /[a-z]/;
+/** Regular expression to match uppercase letters */
+const UPPERCASE_REGEX = /[A-Z]/;
+/** Regular expression to match digits */
+const DIGIT_REGEX = /[0-9]/;
+/** Special characters allowed in passwords */
+const SPECIAL_CHARACTERS = '!@#$%^&()\\-*+.';
+/** Regular expression to match special characters */
+const SPECIAL_CHARACTER_REGEX = new RegExp(`[${SPECIAL_CHARACTERS}]`);
+/** Maximum entropy score for normalization */
+const MAX_ENTROPY_SCORE = 95;
+/** Minimum password length for security */
+const MIN_PASSWORD_LENGTH = 8;
+/** Weight for diversity score in overall strength calculation */
+const DIVERSITY_WEIGHT = 0.3;
+const ENTROPY_WEIGHT = 0.7;
+const MEDIUM_SCORE_THRESHOLD = 0.5;
+const STRONG_SCORE_THRESHOLD = 0.75;
+const VERY_STRONG_SCORE_THRESHOLD = 0.9;
+/**
+ * Converts a numeric password strength score to a human-readable label.
+ *
+ * @param score - The strength score (0-1)
+ * @returns The corresponding strength label
+ */
+function getPasswordStrengthLabel(score) {
+    if (score > VERY_STRONG_SCORE_THRESHOLD) {
+        return 'Very Strong';
+    }
+    else if (score > STRONG_SCORE_THRESHOLD) {
+        return 'Strong';
+    }
+    else if (score > MEDIUM_SCORE_THRESHOLD) {
+        return 'Medium';
+    }
+    else {
+        return 'Weak';
+    }
+}
+/**
+ * Calculates the diversity score of a password based on character types used.
+ * Considers lowercase, uppercase, digits, and special characters.
+ *
+ * @param password - The password to analyze
+ * @returns A score between 0 and 1 representing character diversity
+ */
+function calculatePasswordDiversityScore(password) {
+    // Passwords shorter than minimum length get a score of 0
+    if (password.length < MIN_PASSWORD_LENGTH) {
+        return 0;
+    }
+    let characterTypesUsed = 0;
+    if (LOWERCASE_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (UPPERCASE_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (DIGIT_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (SPECIAL_CHARACTER_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    return Math.max(0, Math.min(1, characterTypesUsed / 4));
+}
+/**
+ * Calculates the overall password strength combining diversity and entropy.
+ *
+ * @param password - The password to analyze
+ * @returns A strength score between 0 and 1
+ */
+function getPasswordStrength(password = '') {
+    const diversityScore = calculatePasswordDiversityScore(password);
+    const entropyScore = calculateEntropy(password) / MAX_ENTROPY_SCORE;
+    return Math.min((diversityScore * DIVERSITY_WEIGHT +
+        entropyScore * ENTROPY_WEIGHT), 1);
+}
+
+const Container$2 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+const BarWrapper = styled.div `
+  width: 100%;
+  height: 4px;
+  background: var(--ck-secondary-button-background);
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const Progress = styled(motion.div) `
+  height: 100%;
+  background: ${({ color }) => color};
+  border-radius: 4px;
+`;
+const Label = styled.div `
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+`;
+const LabelColor = styled.span `
+  color: ${({ color }) => color};
+`;
+const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError }) => {
+    const passwordStrength = getPasswordStrength(password); // should return a number between 0 and 1
+    const label = getPasswordStrengthLabel(passwordStrength);
+    const color = useMemo(() => {
+        switch (label) {
+            case "Weak":
+                return "#ef4444"; // red-500
+            case "Medium":
+                return "#f59e0b"; // amber-500
+            case "Strong":
+                return "#10b981"; // emerald-500
+            case "Very Strong":
+                return "#3b82f6"; // blue-500
+            default:
+                return "#d1d5db"; // gray-300
+        }
+    }, [label]);
+    return (jsxs(Container$2, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: "easeOut", duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
+                            opacity: showPasswordIsTooWeakError ? 0 : 1,
+                            y: showPasswordIsTooWeakError ? 5 : 0
+                        }, transition: { duration: 0.3 }, children: jsxs(Label, { children: ["Password strength: ", jsx(LabelColor, { color: color, children: label })] }) }), jsx(motion.div, { initial: { opacity: 0 }, animate: {
+                            opacity: showPasswordIsTooWeakError ? 1 : 0,
+                            y: showPasswordIsTooWeakError ? 0 : -5
+                        }, transition: { duration: 0.3 }, style: { color: '#ef4444', fontSize: '0.875rem', fontWeight: 500, position: 'absolute', top: '0' }, children: "Password is too weak" })] })] }));
+};
+
+const TickListContainer = styled.ul `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`;
+const TickItem = styled.li `
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: 8px;
+  font-size: 16px;
+  line-height: 24px;
+`;
+const TickIconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+`;
+
+const TickList = ({ items }) => {
+    return (jsx(TickListContainer, { children: items.map((item, index) => (jsxs(TickItem, { children: [jsx(TickIconWrapper, { children: jsx(TickIcon, {}) }), jsx("span", { children: item })] }, index))) }));
+};
+TickList.displayName = 'TickList';
+
+const OtherMethodButton = styled.button `
+  width: 100%;
+  color: var(--ck-body-color-muted);
+  transition: color 0.2s;
+  font-size: 14px;
+  margin-top: 10px;
+
+  &:hover {
+    color: var(--ck-body-color);
+  }
+`;
+
 // TODO: Localize
-const Recover = () => {
-    const [recoveryPhrase, setRecoveryPhrase] = React.useState("");
-    const [recoveryError, setRecoveryError] = React.useState(false);
+const RecoverPasswordWallet = ({ wallet }) => {
+    const [recoveryPhrase, setRecoveryPhrase] = useState("");
+    const [recoveryError, setRecoveryError] = useState(false);
     const { triggerResize, uiConfig: options, log } = useOpenfort();
-    useChainId();
-    const [loading, setLoading] = React.useState(false);
+    const [loading, setLoading] = useState(false);
     const { setActiveWallet } = useWallets();
     const handleSubmit = async () => {
         setLoading(true);
         const { error } = await setActiveWallet({
             connector: embeddedWalletId,
             password: recoveryPhrase,
+            address: wallet.address,
         });
         setLoading(false);
         if (error) {
@@ -11455,34 +11634,172 @@ const Recover = () => {
         if (recoveryError)
             triggerResize();
     }, [recoveryError]);
-    return (jsxs(PageContent, { children: [jsxs(Graphic, { "$height": "110px", children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(1.2)" }, children: jsx(KeyIcon, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.75)" }, children: jsx(ShieldIcon, {}) }) }) }) }) }) }), jsx(Logo$2, {}), jsx(Logo$2, {}), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.5)" }, children: jsx(LockIcon, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsx(ModalHeading, { children: "Secure your account" }), jsx(ModalBody, { style: { textAlign: "center" }, children: jsx(FitText, { children: "Set or enter your password to secure your account." }) }), jsxs("form", { onSubmit: (e) => {
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: wallet.address,
+        config: ensFallbackConfig,
+    });
+    const separator = '....';
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { "$height": "130px", children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(1.2)" }, children: jsx(KeyIcon, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.75)" }, children: jsx(ShieldIcon, {}) }) }) }) }) }) }), jsx(Logo$2, {}), jsx(Logo$2, {}), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.5)" }, children: jsx(LockIcon, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsx(ModalHeading, { children: "Recover wallet" }), jsxs(ModalBody, { style: { textAlign: "center" }, children: ["Please enter the recovery password to recover wallet", " ", jsx(CopyToClipboard, { string: wallet.address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address, separator) })] }), jsxs("form", { onSubmit: (e) => {
                     e.preventDefault();
                     handleSubmit();
-                }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => setRecoveryPhrase(e.target.value), type: "password", placeholder: "Enter your password", autoComplete: "off" }), 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: "Enter" })] })] }));
+                }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => setRecoveryPhrase(e.target.value), type: "password", placeholder: "Enter your password", autoComplete: "off" }), 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: "Recover wallet" })] })] }));
 };
-const AutomaticRecovery = () => {
-    const { needsRecovery } = useOpenfortCore();
+const RecoverAutomaticWallet = ({ walletAddress }) => {
+    const { embeddedState } = useOpenfortCore();
     const { setActiveWallet } = useWallets();
     const { log } = useOpenfort();
-    const [hasRecoveryMethod, setHasRecoveryMethod] = React.useState(false);
+    const [error, setError] = useState(false);
     useEffect(() => {
         (async () => {
-            if (!needsRecovery) {
-                log("Automatic recovery enabled, configuring embedded signer");
+            if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+                log("Automatically recovering wallet", walletAddress);
                 const response = await setActiveWallet({
                     connector: embeddedWalletId,
                 });
-                // TODO: Handle error properly
-                if (response.error && response.error.message === "Missing recovery password") {
-                    setHasRecoveryMethod(true);
+                if (response.error) {
+                    setError(response.error.message || "There was an error recovering your account");
+                    log("Error recovering wallet", response.error);
                 }
             }
         })();
-    }, [needsRecovery]);
-    if (hasRecoveryMethod) {
-        return jsx(Recover, {});
+    }, [embeddedState]);
+    if (error) {
+        jsx(PageContent, { children: jsx(ModalBody, { style: { textAlign: "center" }, "$error": true, children: jsx(FitText, { children: error }) }) });
+    }
+    return (jsx(PageContent, { children: jsx(Loader, { reason: `Recovering wallet...` }) }));
+};
+const CreateWalletAutomaticRecovery = () => {
+    const { embeddedState } = useOpenfortCore();
+    const { createWallet } = useWallets();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const { log } = useOpenfort();
+    useEffect(() => {
+        // To ensure the wallet is created only once
+        if (shouldCreateWallet) {
+            (async () => {
+                log("Creating wallet Automatic recover");
+                const response = await createWallet();
+                if (response.error) {
+                    log("Error creating wallet", response.error);
+                }
+            })();
+        }
+    }, [shouldCreateWallet]);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
+        }
+    }, [embeddedState]);
+    return (jsx(PageContent, { children: jsx(Loader, { reason: "Creating wallet..." }) }));
+};
+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";
+                break;
+            case RecoveryMethod.AUTOMATIC:
+                text = "Skip for now";
+                break;
+            default:
+                text = method;
+        }
+        return (jsx(OtherMethodButton, { onClick: () => {
+                onChangeMethod(method);
+            }, children: text }));
+    }
+    return (jsx(OtherMethodButton, { onClick: () => onChangeMethod("other"), children: "Choose another recovery method" }));
+};
+const CreateWalletPasswordRecovery = ({ onChangeMethod }) => {
+    const [recoveryPhrase, setRecoveryPhrase] = useState("");
+    const [recoveryError, setRecoveryError] = useState(false);
+    const { triggerResize, uiConfig: options, log } = useOpenfort();
+    const [showPasswordIsTooWeakError, setShowPasswordIsTooWeakError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { createWallet } = useWallets();
+    const handleSubmit = async () => {
+        if (getPasswordStrength(recoveryPhrase) < MEDIUM_SCORE_THRESHOLD) {
+            setShowPasswordIsTooWeakError(true);
+            return;
+        }
+        setLoading(true);
+        const { error } = await createWallet({
+            password: recoveryPhrase,
+        });
+        setLoading(false);
+        if (error) {
+            setRecoveryError(error.message || "There was an error recovering your account");
+        }
+        else {
+            log("Recovery success");
+        }
+    };
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { "$height": "80px", children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(1.2)" }, children: jsx(KeyIcon, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.75)" }, children: jsx(ShieldIcon, {}) }) }) }) }) }) }), jsx("div", {}), jsx("div", {}), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { style: { transform: "scale(0.5)" }, children: jsx(LockIcon, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), 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 }) => {
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: "Password" }), jsx(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: "Automatic" }), jsx(Button, { onClick: () => { }, children: "Passkey (coming soon)" })] }));
+};
+const RecoverWallet = ({ wallet }) => {
+    switch (wallet.recoveryMethod) {
+        case RecoveryMethod.PASSWORD:
+            return jsx(RecoverPasswordWallet, { wallet: wallet });
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(RecoverAutomaticWallet, { walletAddress: wallet.address });
+        default:
+            console.error("Unsupported recovery method: " + wallet.recoveryMethod + ", defaulting to automatic.");
+            return jsx(RecoverAutomaticWallet, { walletAddress: wallet.address });
+    }
+};
+const CreateWallet = () => {
+    const { uiConfig } = useOpenfort();
+    const [userSelectedMethod, setUserSelectedMethod] = useState(null);
+    if (userSelectedMethod) {
+        switch (userSelectedMethod) {
+            case RecoveryMethod.PASSWORD:
+                return jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod });
+            case RecoveryMethod.AUTOMATIC:
+                return jsx(CreateWalletAutomaticRecovery, {});
+            case "other":
+                return jsx(ChooseRecoveryMethod, { onChangeMethod: setUserSelectedMethod });
+            default:
+                throw new Error("Unsupported recovery method: " + userSelectedMethod);
+        }
+    }
+    // Default recovery method configured
+    switch (uiConfig.walletRecovery.defaultMethod) {
+        case RecoveryMethod.PASSWORD:
+            return jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod });
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(CreateWalletAutomaticRecovery, {});
+        default:
+            throw new Error("Unsupported recovery method: " + uiConfig.walletRecovery.defaultMethod);
     }
-    return (jsx(PageContent, { children: jsx(Loader, { reason: "Setting up signer" }) }));
 };
 const Connected = () => {
     const { setOpen } = useOpenfort();
@@ -11494,49 +11811,81 @@ const Connected = () => {
     }, []);
     return (jsx(PageContent, { children: jsx(Loader, { isLoading: false, reason: "Connected" }) }));
 };
-const CreateEmbeddedSigner = () => {
+const RecoverPage = () => {
     const { needsRecovery, user } = useOpenfortCore();
     const { triggerResize, uiConfig, walletConfig, setRoute } = useOpenfort();
-    const [loading, setLoading] = React.useState(true);
-    const [embeddedSignerLoading, setEmbeddedSignerLoading] = React.useState(true);
+    const { wallets, isLoadingWallets } = useWallets();
+    // const [loading, setLoading] = useState(true);
+    const [embeddedSignerLoading, setEmbeddedSignerLoading] = useState(true);
     const { isConnected } = useAccount();
     useEffect(() => {
-        setTimeout(() => {
-            setEmbeddedSignerLoading(false);
-            triggerResize();
-        }, 500);
-    }, []);
-    useEffect(() => {
-        if (!user)
-            return;
-        if ((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.linkWalletOnSignUp) || !walletConfig) {
-            if (!user.linkedAccounts.find((account) => account.provider === "wallet")) {
-                setRoute(routes.CONNECTORS);
-                return;
-            }
-            if (!walletConfig) {
-                // Logged in without a wallet
-                setRoute(routes.PROFILE);
-                return;
-            }
+        let timeout;
+        if (!isLoadingWallets) {
+            timeout = setTimeout(() => {
+                setEmbeddedSignerLoading(false);
+                triggerResize();
+            }, 500);
         }
-        setLoading(false);
-    }, [user]);
-    if (embeddedSignerLoading || loading) {
-        return (jsx(PageContent, { children: jsx(Loader, { reason: "Setting up signer" }) }));
+        return () => { clearTimeout(timeout); };
+    }, [isLoadingWallets]);
+    const openfortWallets = useMemo(() => {
+        return wallets.filter((wallet) => wallet.id === embeddedWalletId);
+    }, [wallets]);
+    // useEffect(() => {
+    //   if (!user) return;
+    //   if (uiConfig?.linkWalletOnSignUp || !walletConfig) {
+    //     if (!user.linkedAccounts.find((account) => account.provider === "wallet")) {
+    //       setRoute(routes.CONNECTORS);
+    //       return;
+    //     }
+    //     if (!walletConfig) {
+    //       // Logged in without a wallet
+    //       setRoute(routes.PROFILE);
+    //       return;
+    //     }
+    //   }
+    //   setLoading(false);
+    // }, [user])
+    if (embeddedSignerLoading) {
+        return (jsx(PageContent, { children: jsx(Loader, { reason: "Setting up wallet" }) }));
     }
     if (isConnected && user) {
         return jsx(Connected, {});
     }
-    if (walletConfig && walletConfig.recoveryMethod === RecoveryMethod.AUTOMATIC) {
-        return jsx(AutomaticRecovery, {});
-    }
-    if (needsRecovery) {
-        return jsx(Recover, {});
+    if (!openfortWallets) {
+        // Here wallets should be loaded, so if we don't have them something went wrong
+        // TODO: add error logs
+        return (jsx(PageContent, { children: "An unexpected error occurred. Please try again later." }));
     }
-    else {
-        return (jsx(PageContent, { children: jsx(Loader, { reason: "Setting up signer" }) }));
+    if (openfortWallets.length === 0) {
+        return (jsx(CreateWallet, {}));
     }
+    // if (wallets.length === 1) {
+    return (jsx(RecoverWallet, { wallet: openfortWallets[0] }));
+    // }
+    // return (
+    //   <PageContent>
+    //     <div style={{ flexDirection: "column", display: "flex", gap: 8 }}>
+    //       {wallets.map((wallet) => (
+    //         <div key={wallet.address}>
+    //           {wallet.address} - {wallet.recoveryMethod} recover
+    //         </div>
+    //       ))}
+    //     </div>
+    //   </PageContent>
+    // )
+    // if (walletConfig && walletConfig.recoveryMethod === RecoveryMethod.AUTOMATIC) {
+    //   return <AutomaticRecovery />
+    // }
+    // if (needsRecovery) {
+    //   return <Recover />
+    // } else {
+    //   return (
+    //     <PageContent>
+    //       <Loader reason="Setting up signer" />
+    //     </PageContent>
+    //   )
+    // }
 };
 
 const SocialProviders = () => {
@@ -11608,7 +11957,7 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
         connect: jsx(ConnectUsing, {}),
         profile: jsx(Profile, {}),
         switchNetworks: jsx(SwitchNetworks, {}),
-        recover: jsx(CreateEmbeddedSigner, {}),
+        recover: jsx(RecoverPage, {}),
     };
     function hide() {
         context.setOpen(false);
@@ -11705,8 +12054,9 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     }
     const chains = useChains();
     const injectedConnector = useConnector('injected');
+    const allowAutomaticRecovery = !!((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.createEncryptedSessionEndpoint) || (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession));
     // Default config options
-    const defaultOptions = {
+    const defaultUIOptions = {
         theme: 'auto',
         mode: 'auto',
         language: 'en-US',
@@ -11729,20 +12079,33 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         ethereumOnboardingUrl: undefined,
         walletOnboardingUrl: undefined,
         disableSiweRedirect: false,
-        // Openfort options
-        authProviders: [],
-    };
-    const opts = Object.assign({}, defaultOptions, uiConfig);
-    if (!opts.authProviders || opts.authProviders.length === 0) {
-        opts.authProviders = [
+        walletRecovery: {
+            allowedMethods: [
+                RecoveryMethod.PASSWORD,
+                ...(allowAutomaticRecovery ? [RecoveryMethod.AUTOMATIC] : [])
+            ],
+            defaultMethod: allowAutomaticRecovery ? RecoveryMethod.AUTOMATIC : RecoveryMethod.PASSWORD,
+        },
+        authProviders: [
             AuthProvider.GUEST,
             AuthProvider.EMAIL,
             AuthProvider.WALLET,
-        ];
+        ],
+    };
+    const safeUiConfig = Object.assign({}, defaultUIOptions, uiConfig);
+    if (!safeUiConfig.walletRecovery.allowedMethods) {
+        safeUiConfig.walletRecovery.allowedMethods = defaultUIOptions.walletRecovery.allowedMethods;
+    }
+    if (!safeUiConfig.walletRecovery.defaultMethod) {
+        safeUiConfig.walletRecovery.defaultMethod = defaultUIOptions.walletRecovery.defaultMethod;
+    }
+    if (safeUiConfig.walletRecovery.allowedMethods.includes(RecoveryMethod.AUTOMATIC) && !allowAutomaticRecovery) {
+        safeUiConfig.walletRecovery.allowedMethods = safeUiConfig.walletRecovery.allowedMethods.filter(m => m !== RecoveryMethod.AUTOMATIC);
+        console.warn("Automatic recovery method was removed from allowedMethods because no recovery options are configured in the walletConfig. Please provide either createEncryptedSessionEndpoint or getEncryptionSession to enable automatic recovery.");
     }
     if (typeof window !== 'undefined') {
         // Buffer Polyfill, needed for bundlers that don't provide Node polyfills (e.g CRA, Vite, etc.)
-        if (opts.bufferPolyfill)
+        if (safeUiConfig.bufferPolyfill)
             window.Buffer = (_b = window.Buffer) !== null && _b !== void 0 ? _b : Buffer;
         // Some bundlers may need `global` and `process.env` polyfills as well
         // Not implemented here to avoid unexpected behaviors, but leaving example here for future reference
@@ -11751,8 +12114,8 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
          * window.process = window.process ?? { env: {} };
          */
     }
-    const [ckTheme, setTheme] = useState((_d = (_c = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.theme) !== null && _c !== void 0 ? _c : defaultOptions.theme) !== null && _d !== void 0 ? _d : "auto");
-    const [ckMode, setMode] = useState((_f = (_e = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.mode) !== null && _e !== void 0 ? _e : defaultOptions.mode) !== null && _f !== void 0 ? _f : 'auto');
+    const [ckTheme, setTheme] = useState((_d = (_c = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.theme) !== null && _c !== void 0 ? _c : defaultUIOptions.theme) !== null && _d !== void 0 ? _d : "auto");
+    const [ckMode, setMode] = useState((_f = (_e = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.mode) !== null && _e !== void 0 ? _e : defaultUIOptions.mode) !== null && _f !== void 0 ? _f : 'auto');
     const [ckCustomTheme, setCustomTheme] = useState((_g = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.customTheme) !== null && _g !== void 0 ? _g : {});
     const [ckLang, setLang] = useState('en-US');
     const [open, setOpen] = useState(false);
@@ -11763,17 +12126,17 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     const [errorMessage, setErrorMessage] = useState('');
     const [resize, onResize] = useState(0);
     // Include Google Font that is needed for a themes
-    if (opts.embedGoogleFonts)
+    if (safeUiConfig.embedGoogleFonts)
         useThemeFont(ckTheme);
     // Other Configuration
     useEffect(() => { var _a; return setTheme((_a = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.theme) !== null && _a !== void 0 ? _a : 'auto'); }, [uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.theme]);
-    useEffect(() => setLang(opts.language || 'en-US'), [opts.language]);
+    useEffect(() => setLang(safeUiConfig.language || 'en-US'), [safeUiConfig.language]);
     useEffect(() => setErrorMessage(null), [route, open]);
     // Check if chain is supported, elsewise redirect to switches page
     const { chain, isConnected } = useAccount();
     const isChainSupported = useChainIsSupported(chain === null || chain === void 0 ? void 0 : chain.id);
     useEffect(() => {
-        if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
+        if (isConnected && safeUiConfig.enforceSupportedChains && !isChainSupported) {
             setOpen(true);
             setRoute(routes.SWITCHNETWORKS);
         }
@@ -11804,7 +12167,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         onConnect,
         onDisconnect,
         // Other configuration
-        uiConfig: opts,
+        uiConfig: safeUiConfig,
         errorMessage,
         debugMode,
         log,
@@ -11826,7 +12189,6 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
                     publishableKey,
                 }, shieldConfiguration: walletConfig ? {
                     shieldPublishableKey: walletConfig.shieldPublishableKey,
-                    shieldEncryptionKey: walletConfig.recoveryMethod === RecoveryMethod.PASSWORD ? walletConfig.shieldEncryptionKey : undefined,
                     debug: debugMode,
                 } : undefined, overrides: overrides, thirdPartyAuth: thirdPartyAuth, debugMode: debugMode, onConnect: onConnect, onDisconnect: onDisconnect, children: [children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_h = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.mode) !== null && _h !== void 0 ? _h : ckMode, customTheme: ckCustomTheme })] }) }) }));
 };
@@ -12248,7 +12610,7 @@ const ConnectedLabel = ({ separator }) => {
     if (!user)
         return "Loading user...";
     if (!address)
-        return truncateUserId(user.id, separator);
+        return "Not connected";
     return "Loading...";
 };
 function OpenfortButtonInner({ label, showAvatar, separator, }) {
@@ -12369,21 +12731,16 @@ const mapStatus = (status) => {
 };
 
 function useSignOut(hookOptions = {}) {
-    const { client, updateUser, user } = useOpenfortCore();
+    const { logout } = useOpenfortCore();
     const [status, setStatus] = useState({
         status: "idle",
     });
-    const { disconnect } = useDisconnect();
-    const queryClient = useQueryClient();
     const signOut = useCallback(async (options = {}) => {
         setStatus({
             status: 'loading',
         });
         try {
-            await client.auth.logout();
-            queryClient.resetQueries({ queryKey: ['openfortEmbeddedWalletList'] });
-            disconnect();
-            updateUser();
+            logout();
             setStatus({
                 status: 'success',
             });
@@ -12405,7 +12762,7 @@ function useSignOut(hookOptions = {}) {
                 error,
             });
         }
-    }, [client, user, disconnect, updateUser, setStatus, hookOptions]);
+    }, [logout, setStatus, hookOptions]);
     return {
         ...mapStatus(status),
         signOut,
@@ -12413,22 +12770,43 @@ function useSignOut(hookOptions = {}) {
 }
 
 // this hook is used to create a wallet after the user has authenticated
-const useCreateWalletPostAuth = () => {
-    const { setActiveWallet } = useWallets();
+const useConnectToWalletPostAuth = () => {
+    const { createWallet, setActiveWallet } = useWallets();
     const { walletConfig } = useOpenfort();
     const { signOut } = useSignOut();
+    const queryClient = useQueryClient();
     const tryUseWallet = useCallback(async ({ logoutOnError: signOutOnError = true, automaticRecovery = true }) => {
-        if (!walletConfig || walletConfig.recoveryMethod !== RecoveryMethod.AUTOMATIC || !automaticRecovery) {
+        console.log("tryUseWallet", { walletConfig, automaticRecovery });
+        if ((!(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.createEncryptedSessionEndpoint) && !(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession)) || !automaticRecovery) {
+            // If there is no encryption session, we cannot create a wallet
             return {};
         }
-        const wallet = await setActiveWallet({
-            connector: embeddedWalletId,
-        });
-        if (wallet.error && signOutOnError) {
-            // If there was an error and we should log out, we can call the logout function
-            await signOut();
+        const wallets = await queryClient.ensureQueryData({ queryKey: ['openfortEmbeddedWalletList'] });
+        console.log("WALLETS", wallets);
+        let wallet;
+        if (wallets.length === 0) {
+            const createWalletResult = await createWallet();
+            if (createWalletResult.error && signOutOnError) {
+                console.error("Error creating wallet:", createWalletResult.error);
+                // If there was an error and we should log out, we can call the logout function
+                await signOut();
+                return {};
+            }
+            wallet = createWalletResult.wallet;
         }
-        return wallet;
+        // Has a wallet with automatic recovery
+        if (wallets.some(w => w.recoveryMethod === RecoveryMethod.AUTOMATIC)) {
+            const setWalletResult = await setActiveWallet({
+                connector: embeddedWalletId,
+            });
+            if (!setWalletResult.wallet || (setWalletResult.error && signOutOnError)) {
+                console.error("Error recovering wallet:", setWalletResult.error);
+                // If there was an error and we should log out, we can call the logout function
+                await signOut();
+            }
+            wallet = setWalletResult.wallet;
+        }
+        return { wallet };
     }, [walletConfig, setActiveWallet, signOut]);
     return {
         tryUseWallet,
@@ -12448,7 +12826,7 @@ const useEmailAuth = (hookOptions = {}) => {
         });
         setRequiresEmailVerification(false);
     }, []);
-    const { tryUseWallet } = useCreateWalletPostAuth();
+    const { tryUseWallet } = useConnectToWalletPostAuth();
     const signInEmail = useCallback(async (options) => {
         var _a;
         try {
@@ -12769,7 +13147,7 @@ const useOAuth = (hookOptions = {}) => {
     const [status, setStatus] = useState({
         status: "idle",
     });
-    const { tryUseWallet } = useCreateWalletPostAuth();
+    const { tryUseWallet } = useConnectToWalletPostAuth();
     const storeCredentials = useCallback(async ({ player, accessToken, refreshToken, ...options }) => {
         setStatus({
             status: 'loading',
@@ -13017,7 +13395,7 @@ const useGuestAuth = (hookOptions = {}) => {
     const [status, setStatus] = useState({
         status: "idle",
     });
-    const { tryUseWallet } = useCreateWalletPostAuth();
+    const { tryUseWallet } = useConnectToWalletPostAuth();
     const signUpGuest = useCallback(async (options = {}) => {
         try {
             setStatus({