@openfort/react 0.0.7 → 0.0.9

package/build/index.es.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useEffect, createContext, useState, useMemo, useRef, useCallback, createElement, useLayoutEffect, useContext } from 'react';
 import { detect } from 'detect-browser';
 import { Buffer } from 'buffer';
-import { useQueryClient, useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
 import styled$1, { css, keyframes } from 'styled-components';
 import { createPortal } from 'react-dom';
@@ -22,13 +22,14 @@ import { createSiweMessage } from 'viem/siwe';
 import { signMessage } from '@wagmi/core';
 import calculateEntropy from 'fast-password-entropy';
 
-const OPENFORT_VERSION = '0.0.7';
+const OPENFORT_VERSION = '0.0.9';
 
 var OpenfortErrorType;
 (function (OpenfortErrorType) {
     OpenfortErrorType["AUTHENTICATION_ERROR"] = "AUTHENTICATION_ERROR";
     OpenfortErrorType["WALLET_ERROR"] = "WALLET_ERROR";
     OpenfortErrorType["CONFIGURATION_ERROR"] = "CONFIGURATION_ERROR";
+    OpenfortErrorType["VALIDATION_ERROR"] = "VALIDATION_ERROR";
 })(OpenfortErrorType || (OpenfortErrorType = {}));
 class OpenfortError extends Error {
     constructor(message, type, data) {
@@ -986,19 +987,20 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
     const { walletConfig } = useOpenfort();
     // ---- Openfort instance ----
     const openfort = useMemo(() => {
+        var _a;
         log('Creating Openfort instance.', openfortProps);
         if (!openfortProps.baseConfiguration.publishableKey)
             throw Error('CoreOpenfortProvider requires a publishableKey to be set in the baseConfiguration.');
+        if (openfortProps.shieldConfiguration && !((_a = openfortProps.shieldConfiguration) === null || _a === void 0 ? void 0 : _a.passkeyRpId) && typeof window !== 'undefined') {
+            openfortProps.shieldConfiguration = {
+                passkeyRpId: window.location.hostname,
+                passkeyRpName: document.title || 'Openfort DApp',
+                ...openfortProps.shieldConfiguration,
+            };
+        }
         const newClient = createOpenfortClient(openfortProps);
         return newClient;
     }, []);
-    // Create or use provided client
-    // const client = useMemo(() => {
-    //   // return new Openfort(openfortProps)
-    //   const newClient = createOpenfortClient(openfortProps);
-    //   setDefaultClient(newClient);
-    //   return newClient;
-    // }, [openfortProps]);
     // ---- Embedded state ----
     const [embeddedState, setEmbeddedState] = useState(EmbeddedState.NONE);
     const pollingRef = useRef(null);
@@ -1087,6 +1089,13 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
         openfort.embeddedWallet.getEthereumProvider(resolvePolicy());
     }, [openfort, walletConfig, chainId]);
     const [isConnectedWithEmbeddedSigner, setIsConnectedWithEmbeddedSigner] = useState(false);
+    // will reset on logout
+    const { data: embeddedAccounts, refetch: fetchEmbeddedAccounts, isPending: isLoadingAccounts } = useQuery({
+        queryKey: ['openfortEmbeddedAccountsList'],
+        queryFn: () => openfort.embeddedWallet.list(),
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+    });
     useEffect(() => {
         if (!openfort)
             return;
@@ -1103,6 +1112,7 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
                 if (!user)
                     updateUser(undefined, true);
                 setIsConnectedWithEmbeddedSigner(false);
+                fetchEmbeddedAccounts();
                 break;
             case EmbeddedState.READY:
                 (async () => {
@@ -1148,7 +1158,7 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
         log('Logging out...');
         await openfort.auth.logout();
         await disconnectAsync();
-        queryClient.resetQueries({ queryKey: ['openfortEmbeddedWalletList'] });
+        queryClient.resetQueries({ queryKey: ['openfortEmbeddedAccountsList'] });
         reset();
         startPollingEmbeddedState();
     }, [openfort]);
@@ -1198,6 +1208,8 @@ const CoreOpenfortProvider = ({ children, debugMode, onConnect, onDisconnect, ..
         needsRecovery,
         user,
         updateUser,
+        embeddedAccounts,
+        isLoadingAccounts,
         client: openfort,
     };
     return createElement(Context$1.Provider, { value }, jsxs(Fragment, { children: [jsx(ConnectCallback, { onConnect: onConnect, onDisconnect: onDisconnect }), children] }));
@@ -1354,7 +1366,7 @@ var base = {
         '--ck-body-disclaimer-link-hover-color': '#FFFFFF',
         '--ck-modal-box-shadow': '0px 2px 4px rgba(0, 0, 0, 0.02)',
         '--ck-copytoclipboard-stroke': '#555555',
-        '--ck-tooltip-background': '#2B2B2B',
+        '--ck-tooltip-background': '#323232ff',
         '--ck-tooltip-background-secondary': '#333333',
         '--ck-tooltip-color': '#999999',
         '--ck-tooltip-shadow': '0px 2px 10px rgba(0, 0, 0, 0.08)',
@@ -2047,6 +2059,8 @@ const themeGlobals = {
             '--ck-chain-ethereum-01': '#25292E',
             '--ck-chain-ethereum-02': '#fff',
             '--ck-chain-ethereum-03': '#DFE0E0',
+            '--ck-body-color-danger': '#FF4E4E',
+            '--ck-body-color-valid': '#32D74B',
         },
         dark: {
             '--ck-graphic-wave-stop-01': '#E8F17D',
@@ -2058,6 +2072,8 @@ const themeGlobals = {
             '--ck-graphic-scaniconwithlogos-02': '#696969',
             '--ck-graphic-scaniconwithlogos-03': '#F8D74A',
             '--ck-graphic-scaniconwithlogos-04': '#3D3D3D',
+            '--ck-body-color-danger': '#FF4E4E',
+            '--ck-body-color-valid': '#32D74B',
             //'--ck-chain-ethereum-01': '#fff',
             //'--ck-chain-ethereum-02': '#000',
             //'--ck-chain-ethereum-03': '#000',
@@ -3100,9 +3116,10 @@ const EmailIcon = ({ ...props }) => (jsxs("svg", { xmlns: "http://www.w3.org/200
 const GuestIcon = ({ ...props }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", width: "256", height: "256", children: [jsx("rect", { width: "256", height: "256", fill: "none" }), jsx("circle", { cx: "128", cy: "96", r: "64", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }), jsx("path", { d: "M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })] }));
 const EyeIcon = ({ ...props }) => (jsxs("svg", { width: "800", height: "800", fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "m15.001 12c0 1.6569-1.3431 3-3 3-1.6568 0-3-1.3431-3-3s1.3432-3 3-3c1.6569 0 3 1.3431 3 3z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }), jsx("path", { d: "m12.001 5c-4.4777 0-8.2679 2.9429-9.5422 7 1.2743 4.0571 5.0646 7 9.5422 7 4.4776 0 8.2679-2.9429 9.5422-7-1.2743-4.0571-5.0646-7-9.5422-7z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 })] }));
 const EyeOffIcon = ({ ...props }) => (jsx("svg", { width: "800", height: "800", fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m2.999 3 18 18m-11.156-11.086c-0.52264 0.53996-0.84428 1.2756-0.84428 2.0864 0 1.6569 1.3432 3 3 3 0.8225 0 1.5677-0.331 2.1096-0.867m-7.6096-7.4858c-1.8993 1.2532-3.346 3.1368-4.042 5.3528 1.2742 4.0571 5.0646 7 9.5422 7 1.9889 0 3.8422-0.5806 5.3996-1.5816m-6.3998-12.369c0.329-0.03266 0.6627-0.04939 1.0002-0.04939 4.4777 0 8.268 2.9429 9.5422 7-0.2807 0.894-0.6837 1.7338-1.1892 2.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
-const KeyIcon = ({ ...props }) => (jsx("svg", { transform: "matrix(1 0 0 1 0 0)", width: "197px", height: "197px", fill: "none", stroke: "#000000", viewBox: "-2.4 -2.4 28.8 28.8", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M15 15a6 6 0 1 0-5.743-4.257L9 11l-5.707 5.707a1 1 0 0 0-.293.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1 1 1 0 0 1 1-1 1 1 0 0 0 1-1 1 1 0 0 1 1-1h.586a1 1 0 0 0 .707-.293L13 15l.257-.257A5.999 5.999 0 0 0 15 15zm2-6a2 2 0 0 0-2-2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.152 }) }));
-const LockIcon = ({ ...props }) => (jsxs("svg", { fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "m9 16c0 0.5523-0.44772 1-1 1s-1-0.4477-1-1 0.44772-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m13 16c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1 0.4477-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m17 16c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1 0.4477-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m6 10v-2c0-0.34071 0.0284-0.67479 0.08296-1m11.917 3v-2c0-3.3137-2.6863-6-6-6-1.792 0-3.4006 0.78563-4.5 2.0313", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.68 }), jsx("path", { d: "m11 22h-3c-2.8284 0-4.2426 0-5.1213-0.8787s-0.87868-2.2929-0.87868-5.1213 0-4.2426 0.87868-5.1213 2.2929-0.8787 5.1213-0.8787h8c2.8284 0 4.2426 0 5.1213 0.8787s0.8787 2.2929 0.8787 5.1213 0 4.2426-0.8787 5.1213-2.2929 0.8787-5.1213 0.8787h-1", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.68 })] }));
+const KeyIcon = ({ ...props }) => (jsx("svg", { transform: "matrix(1 0 0 1 0 0)", width: "24", height: "24", fill: "none", stroke: "#000000", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M15 15a6 6 0 1 0-5.743-4.257L9 11l-5.707 5.707a1 1 0 0 0-.293.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1 1 1 0 0 1 1-1 1 1 0 0 0 1-1 1 1 0 0 1 1-1h.586a1 1 0 0 0 .707-.293L13 15l.257-.257A5.999 5.999 0 0 0 15 15zm2-6a2 2 0 0 0-2-2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.152 }) }));
+const LockIcon = ({ ...props }) => (jsxs("svg", { fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "m9 16c0 0.5523-0.44772 1-1 1s-1-0.4477-1-1 0.44772-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m13 16c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1 0.4477-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m17 16c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1 0.4477-1 1-1 1 0.4477 1 1z", fill: "currentColor" }), jsx("path", { d: "m6 10v-2c0-0.34071 0.0284-0.67479 0.08296-1m11.917 3v-2c0-3.3137-2.6863-6-6-6-1.792 0-3.4006 0.78563-4.5 2.0313", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.152 }), jsx("path", { d: "m11 22h-3c-2.8284 0-4.2426 0-5.1213-0.8787s-0.87868-2.2929-0.87868-5.1213 0-4.2426 0.87868-5.1213 2.2929-0.8787 5.1213-0.8787h8c2.8284 0 4.2426 0 5.1213 0.8787s0.8787 2.2929 0.8787 5.1213 0 4.2426-0.8787 5.1213-2.2929 0.8787-5.1213 0.8787h-1", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.152 })] }));
 const ShieldIcon = ({ ...props }) => (jsx("svg", { fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m9 12 2 2 4-4m5 2c0 4.4611-5.46 7.6937-7.3586 8.683-0.2053 0.107-0.308 0.1605-0.4504 0.1882-0.111 0.0216-0.271 0.0216-0.382 0-0.1424-0.0277-0.2451-0.0812-0.4504-0.1882-1.8986-0.9893-7.3586-4.2219-7.3586-8.683v-3.7824c0-0.79951 0-1.1993 0.13076-1.5429 0.11551-0.30357 0.30322-0.57443 0.5469-0.78918 0.27584-0.24309 0.65014-0.38345 1.3987-0.66418l5.3618-2.0107c0.2079-0.07796 0.3118-0.11694 0.4188-0.1324 0.0948-0.0137 0.1912-0.0137 0.286 0 0.107 0.01546 0.2109 0.05444 0.4188 0.1324l5.3618 2.0107c0.7486 0.28073 1.1229 0.42109 1.3987 0.66418 0.2437 0.21475 0.4314 0.48561 0.5469 0.78918 0.1308 0.34363 0.1308 0.74338 0.1308 1.5429v3.7824z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 }) }));
+const FingerPrintIcon = ({ ...props }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [jsx("rect", { width: 256, height: 256, fill: "none" }), jsx("path", { d: "M50.69,184.92A127.52,127.52,0,0,0,64,128a63.85,63.85,0,0,1,24-50", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M128,128a191.11,191.11,0,0,1-24,93", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M96,128a32,32,0,0,1,64,0,223.12,223.12,0,0,1-21.28,95.41", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M218.56,184A289.45,289.45,0,0,0,224,128a96,96,0,0,0-192,0,95.8,95.8,0,0,1-5.47,32", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M92.81,160a158.92,158.92,0,0,1-18.12,47.84", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M120,64.5a66,66,0,0,1,8-.49,64,64,0,0,1,64,64,259.86,259.86,0,0,1-2,32", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 }), jsx("path", { d: "M183.94,192q-2.28,8.88-5.18,17.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 10 })] }));
 
 const KEYCODE_TAB = 9;
 function useFocusTrap() {
@@ -9312,7 +9329,7 @@ const ProviderIcon = ({ provider }) => {
         case "facebook":
             return providersLogos[provider.provider];
         default:
-            return jsx(FitText, { children: provider.provider.substring(0, 1).toUpperCase() });
+            return jsx(FitText, { children: provider.provider.substring(0, 4).toUpperCase() });
     }
 };
 const LinkedProvider = ({ provider }) => {
@@ -9394,15 +9411,15 @@ const Content = styled(motion.div) `
     gap: 12px;
   }
 `;
-const dist = 2;
-const shakeKeyframes = keyframes `
+const dist$1 = 2;
+const shakeKeyframes$1 = keyframes `
   0%{ transform:none; }
-  25%{ transform:translateX(${dist}px); }
-  50%{ transform:translateX(-${dist}px); }
-  75%{ transform:translateX(${dist}px); }
+  25%{ transform:translateX(${dist$1}px); }
+  50%{ transform:translateX(-${dist$1}px); }
+  75%{ transform:translateX(${dist$1}px); }
   100%{ transform:none; }
 `;
-const outlineKeyframes = keyframes `
+const outlineKeyframes$1 = keyframes `
   0%{ opacity:1; }
   100%{ opacity:0; }
 `;
@@ -9441,9 +9458,9 @@ const ConnectingAnimation$1 = styled(motion.div) `
   }
   ${(props) => props.$shake &&
     css `
-      animation: ${shakeKeyframes} 220ms ease-out both;
+      animation: ${shakeKeyframes$1} 220ms ease-out both;
       &:before {
-        animation: ${outlineKeyframes} 220ms ease-out 750ms both;
+        animation: ${outlineKeyframes$1} 220ms ease-out 750ms both;
       }
     `}
 `;
@@ -9451,8 +9468,8 @@ const RetryButton = styled(motion.button) `
   z-index: 5;
   appearance: none;
   position: absolute;
-  right: 2px;
-  bottom: 2px;
+  right: 10px;
+  bottom: 10px;
   padding: 0;
   display: flex;
   align-items: center;
@@ -9464,7 +9481,7 @@ const RetryButton = styled(motion.button) `
   overflow: hidden;
   background: none;
 
-  color: var(--ck-body-background);
+  color: var(--ck-body-background-secondary);
   transition: color 200ms ease;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
 
@@ -10153,6 +10170,7 @@ const TextWrapper = styled.div `
   flex-direction: column;
   gap: 12px;
   padding: 0 8px 32px;
+  text-align: center;
 `;
 const ConnectingContainer = styled(motion.div) `
 display: flex;
@@ -10161,7 +10179,20 @@ justify-content: center;
 margin: 10px auto 16px;
 height: 120px;
 `;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes = keyframes `
+  0%{ opacity:0; }
+  100%{ opacity:1; }
+`;
 const ConnectingAnimation = styled(motion.div) `
+  position: relative;
   user-select: none;
   position: relative;
   --spinner-error-opacity: 0;
@@ -10170,18 +10201,26 @@ const ConnectingAnimation = styled(motion.div) `
     position: absolute;
     inset: 1px;
     opacity: 0;
-    background: var(--ck-body-color-valid);
+    background: ${(props) => props.$color};
   }
-  ${(props) => props.$success &&
+  ${(props) => !!props.$color &&
     css `
     &:before {
       opacity: 1;
     }
   `}
+  ${(props) => props.$shake &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 220ms ease-out both;
+      }
+    `}
 `;
-const Loader = ({ reason, isLoading = true, icon }) => {
+const Loader = ({ header, description, icon, isError = false, isSuccess = false, isLoading = !isError && !isSuccess, onRetry, }) => {
     const { uiConfig: options } = useOpenfort();
     const { triggerResize } = useOpenfort();
+    const locales = useLocales();
     useEffect(() => {
         return () => triggerResize();
     }, []);
@@ -10197,11 +10236,11 @@ const Loader = ({ reason, isLoading = true, icon }) => {
         }
         return jsx(Logos.Openfort, {});
     };
-    return (jsxs(Fragment, { children: [jsx(ConnectingContainer, { children: jsx(ConnectingAnimation, { "$success": !isLoading, children: jsx(SquircleSpinner, { logo: jsx("div", { style: {
-                                padding: '12px',
-                                position: 'relative',
-                                width: '100%',
-                            }, children: renderLogo() }), connecting: isLoading }) }) }), jsx(TextWrapper, { children: isLoading ? (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Loading, please wait" }), jsx(ModalBody, { children: reason })] })) : (jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", reason] })) })] }));
+    return (jsxs(Fragment, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$color": isSuccess ? 'var(--ck-body-color-valid)' : isError ? 'var(--ck-body-color-danger)' : undefined, "$shake": isError, children: [jsx(AnimatePresence, { children: (isError && onRetry) && (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: onRetry, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: isError, message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), jsx(SquircleSpinner, { logo: jsx("div", { style: {
+                                    padding: '12px',
+                                    position: 'relative',
+                                    width: '100%',
+                                }, children: renderLogo() }), connecting: isLoading })] }) }), jsxs(TextWrapper, { children: [isLoading && (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Loading, please wait" }), jsx(ModalBody, { children: description !== null && description !== void 0 ? description : header })] })), isSuccess && (jsxs(Fragment, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", header] }), jsx(ModalBody, { children: description })] })), isError && (jsxs(Fragment, { children: [jsx(ModalH1, { "$error": true, children: header }), jsx(ModalBody, { children: description })] }))] })] }));
 };
 
 const states$1 = {
@@ -10299,7 +10338,7 @@ const ConnectWithOAuth = ({}) => {
             }
         })();
     }, [status]);
-    return (jsx(PageContent, { children: jsx(Loader, { reason: `Connecting with ${connector.id}`, icon: providersLogos[connector.id] }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { header: `Connecting with ${connector.id}`, icon: providersLogos[connector.id] }) }));
 };
 
 const states = {
@@ -10650,7 +10689,7 @@ const EmailVerification = () => {
         })();
     }, []);
     if (loading) {
-        return (jsx(PageContent, { children: jsx(Loader, { reason: "Checking if account is verified" }) }));
+        return (jsx(PageContent, { children: jsx(Loader, { header: "Checking if account is verified" }) }));
     }
     return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
                     logo: jsx(EmailIcon, {}),
@@ -10878,7 +10917,7 @@ const Loading = () => {
         // UX: Wait a bit before showing the next page
         setTimeout(() => setIsFirstFrame(false), 400);
     }, []);
-    return (jsx(PageContent, { children: jsx(Loader, { reason: "Redirecting" }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { header: "Redirecting" }) }));
 };
 
 const ProviderButton = ({ children, icon, onClick }) => {
@@ -10942,7 +10981,7 @@ const AddressButNoUserCase = () => {
             console.error("Failed to update user");
         });
     }, []);
-    return (jsx(PageContent, { children: jsx(Loader, { reason: "Updating user" }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { header: "Updating user" }) }));
 };
 const SocialProvidersButton = () => {
     const { setRoute } = useOpenfort();
@@ -11031,14 +11070,23 @@ function useUser() {
     };
 }
 
-const parseOpenfortWallet = ({ address, recoveryMethod, }) => ({
-    connectorType: "embedded",
-    walletClientType: "openfort",
-    address,
-    id: embeddedWalletId,
-    isAvailable: true,
-    recoveryMethod,
-});
+const parseEmbeddedAccount = (embeddedAccount) => {
+    var _a;
+    return ({
+        connectorType: "embedded",
+        walletClientType: "openfort",
+        address: embeddedAccount.address,
+        id: embeddedWalletId,
+        isAvailable: true,
+        recoveryMethod: (_a = embeddedAccount.recoveryMethod) !== null && _a !== void 0 ? _a : RecoveryMethod.AUTOMATIC,
+        accountId: embeddedAccount.id,
+        accountType: embeddedAccount.accountType,
+        ownerAddress: embeddedAccount.ownerAddress,
+        implementationType: embeddedAccount.implementationType,
+        salt: embeddedAccount.salt,
+        createdAt: embeddedAccount.createdAt,
+    });
+};
 const mapWalletStatus = (status) => {
     return {
         error: status.error,
@@ -11049,7 +11097,7 @@ const mapWalletStatus = (status) => {
     };
 };
 function useWallets(hookOptions = {}) {
-    const { client } = useOpenfortCore();
+    const { client, embeddedAccounts, isLoadingAccounts: isLoadingWallets } = useOpenfortCore();
     const { user } = useUser();
     const { walletConfig, log, setOpen, setRoute, setConnector, uiConfig } = useOpenfort();
     const { connector, isConnected, address } = useAccount();
@@ -11091,13 +11139,6 @@ function useWallets(hookOptions = {}) {
             }
         }
     });
-    // will reset on logout
-    const { data: embeddedWallets, refetch, isPending: isLoadingWallets } = useQuery({
-        queryKey: ['openfortEmbeddedWalletList'],
-        queryFn: () => client.embeddedWallet.list(),
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-    });
     const getEncryptionSession = useCallback(async () => {
         if (!walletConfig || !walletConfig.createEncryptedSessionEndpoint) {
             throw new Error("No createEncryptedSessionEndpoint set in walletConfig");
@@ -11114,6 +11155,58 @@ function useWallets(hookOptions = {}) {
         const respJSON = await resp.json();
         return respJSON.session;
     }, [walletConfig]);
+    const parseWalletRecovery = useMemo(() => async function parseWalletRecovery(recovery, embeddedAccounts, walletAddress) {
+        var _a, _b;
+        switch (recovery === null || recovery === void 0 ? void 0 : recovery.recoveryMethod) {
+            case undefined:
+            case RecoveryMethod.AUTOMATIC:
+                const accessToken = await client.getAccessToken();
+                if (!accessToken) {
+                    throw new OpenfortError("Openfort access token not found", OpenfortErrorType.AUTHENTICATION_ERROR);
+                }
+                return {
+                    recoveryMethod: RecoveryMethod.AUTOMATIC,
+                    encryptionSession: (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession) ?
+                        await walletConfig.getEncryptionSession(accessToken) :
+                        await getEncryptionSession()
+                };
+            case RecoveryMethod.PASSWORD:
+                if (!recovery.password) {
+                    throw new OpenfortError("Please enter your password", OpenfortErrorType.VALIDATION_ERROR);
+                }
+                return {
+                    recoveryMethod: RecoveryMethod.PASSWORD,
+                    password: recovery.password,
+                };
+            case RecoveryMethod.PASSKEY:
+                if (!embeddedAccounts) {
+                    return {
+                        recoveryMethod: RecoveryMethod.PASSKEY,
+                    };
+                }
+                if (!walletAddress) {
+                    walletAddress = (_a = embeddedAccounts.find(w => w.recoveryMethod === RecoveryMethod.PASSKEY)) === null || _a === void 0 ? void 0 : _a.address;
+                    if (!walletAddress) {
+                        throw new OpenfortError("No wallet address provided and no embedded wallet with passkey recovery found", OpenfortErrorType.VALIDATION_ERROR);
+                    }
+                }
+                const details = (_b = embeddedAccounts.find(w => w.address === walletAddress && w.recoveryMethod === RecoveryMethod.PASSKEY)) === null || _b === void 0 ? void 0 : _b.recoveryMethodDetails;
+                const passkeyId = details === null || details === void 0 ? void 0 : details.passkeyId;
+                const passkeyEnv = details === null || details === void 0 ? void 0 : details.passkeyEnv;
+                if (!passkeyId || !passkeyEnv) {
+                    throw new OpenfortError("No passkey details found for the wallet", OpenfortErrorType.VALIDATION_ERROR);
+                }
+                return {
+                    recoveryMethod: RecoveryMethod.PASSKEY,
+                    passkeyInfo: {
+                        passkeyId,
+                        passkeyEnv,
+                    },
+                };
+            default:
+                throw new OpenfortError("Invalid recovery method", OpenfortErrorType.VALIDATION_ERROR);
+        }
+    }, [walletConfig, getEncryptionSession]);
     const rawWallets = useMemo(() => {
         const userWallets = user ? user.linkedAccounts
             .filter((a) => a.provider === UIAuthProvider.WALLET)
@@ -11127,38 +11220,34 @@ function useWallets(hookOptions = {}) {
                 isAvailable: !!wallet,
             };
         }) : [];
-        embeddedWallets === null || embeddedWallets === void 0 ? void 0 : embeddedWallets.forEach((wallet) => {
+        embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.forEach((embeddedAccount) => {
             // Remove duplicates (different chain ids)
-            if (userWallets.find(w => w.address === (wallet.address)))
+            if (userWallets.find(w => w.address === (embeddedAccount.address)))
                 return;
-            userWallets.push(parseOpenfortWallet({
-                address: wallet.address,
-                recoveryMethod: wallet.recoveryMethod,
-            }));
+            userWallets.push(parseEmbeddedAccount(embeddedAccount));
         });
         return userWallets;
-    }, [user === null || user === void 0 ? void 0 : user.linkedAccounts, embeddedWallets]);
+    }, [user === null || user === void 0 ? void 0 : user.linkedAccounts, embeddedAccounts]);
     const wallets = useMemo(() => {
-        // if (!isConnected || !address) return rawWallets;
-        log("Mapping wallets", { rawWallets, status, address, isConnected, connector });
+        // log("Mapping wallets", { rawWallets, status, address, isConnected, connector: connector?.id });
         return rawWallets.map((w) => ({
             ...w,
             isConnecting: status.status === 'connecting' && status.address === w.address,
             isActive: w.address === address && isConnected && (connector === null || connector === void 0 ? void 0 : connector.id) === w.id,
         }));
-    }, [rawWallets, status, address, isConnected, connector]);
+    }, [rawWallets.length, status.status, address, isConnected, connector === null || connector === void 0 ? void 0 : connector.id]);
     const activeWallet = isConnected && connector ? wallets.find((w) => w.isActive) : undefined;
     useEffect(() => {
         if (connectToConnector)
             connect({ connector: connectToConnector.connector });
     }, [connectToConnector]);
     const setActiveWallet = useCallback(async (options) => {
-        var _a;
-        const optionsObject = typeof options === "string" ? { connector: options } : options;
+        var _a, _b, _c, _d, _e;
+        const optionsObject = typeof options === "string" ? { walletId: options } : options;
         const { showUI } = optionsObject;
         let connector = null;
-        if (typeof optionsObject.connector === 'string') {
-            const wallet = deviceWallets.find(c => c.id === optionsObject.connector);
+        if (typeof optionsObject.walletId === 'string') {
+            const wallet = deviceWallets.find(c => c.id === optionsObject.walletId);
             if (!wallet) {
                 log("Connector not found", connector);
                 return { error: new OpenfortError("Connector not found", OpenfortErrorType.WALLET_ERROR) };
@@ -11167,10 +11256,10 @@ function useWallets(hookOptions = {}) {
             connector = wallet.connector;
         }
         else {
-            connector = optionsObject.connector;
+            connector = optionsObject.walletId;
         }
         if (!connector) {
-            log("Connector not found", deviceWallets, optionsObject.connector);
+            log("Connector not found", deviceWallets, optionsObject.walletId);
             return { error: new OpenfortError("Connector not found", OpenfortErrorType.WALLET_ERROR) };
         }
         if ((activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id) === connector.id && address === optionsObject.address) {
@@ -11203,7 +11292,7 @@ function useWallets(hookOptions = {}) {
             return {};
         }
         function isOpenfortWallet(opts) {
-            return opts.connector === embeddedWalletId;
+            return opts.walletId === embeddedWalletId;
         }
         log("Setting active wallet", { options: optionsObject, chainId });
         if (isOpenfortWallet(optionsObject)) {
@@ -11211,7 +11300,6 @@ function useWallets(hookOptions = {}) {
                 status: 'connecting',
                 address: optionsObject.address,
             });
-            const { password } = optionsObject;
             if (!walletConfig) {
                 return onError({
                     error: new OpenfortError("Embedded signer not enabled", OpenfortErrorType.WALLET_ERROR),
@@ -11219,56 +11307,64 @@ function useWallets(hookOptions = {}) {
                     hookOptions
                 });
             }
-            const accessToken = await client.getAccessToken();
-            if (!accessToken) {
-                return onError({
-                    error: new OpenfortError("Openfort access token not found", OpenfortErrorType.WALLET_ERROR),
-                    hookOptions,
-                    options: optionsObject,
-                });
-            }
-            log(`Handling recovery with Openfort: ${password ? "with password" : "without password"}, chainId=${chainId}`);
             try {
-                const recoveryParams = password ? {
-                    recoveryMethod: RecoveryMethod.PASSWORD,
-                    password,
-                } : {
-                    recoveryMethod: RecoveryMethod.AUTOMATIC,
-                    encryptionSession: walletConfig.getEncryptionSession ?
-                        await walletConfig.getEncryptionSession(accessToken) :
-                        await getEncryptionSession()
-                };
-                // Ensure that the embedded wallet is listed
-                const embeddedWallets = await client.embeddedWallet.list();
-                log("Recovery params", optionsObject.address);
-                log("Embedded wallets", embeddedWallets, chainId);
+                const embeddedAccounts = await queryClient.ensureQueryData({
+                    queryKey: ['openfortEmbeddedAccountsList'],
+                    queryFn: () => client.embeddedWallet.list()
+                });
                 let walletAddress = optionsObject.address;
+                // Ensure that the embedded wallet is listed
+                log("Embedded wallets", embeddedAccounts, chainId);
+                let embeddedAccount;
                 if (walletAddress) {
-                    const walletId = (_a = embeddedWallets === null || embeddedWallets === void 0 ? void 0 : embeddedWallets.find((w) => w.address === walletAddress && w.chainId === chainId)) === null || _a === void 0 ? void 0 : _a.id;
-                    if (!walletId) {
+                    const accountToRecover = embeddedAccounts.find(w => w.address === walletAddress && w.chainId === chainId);
+                    if (!accountToRecover) {
+                        // TODO: Connect to wallet in the other chain and then switch chain
+                        return onError({
+                            error: new OpenfortError(`Embedded wallet not found for address ${walletAddress} and chainId ${chainId}`, OpenfortErrorType.WALLET_ERROR),
+                            options: optionsObject,
+                            hookOptions
+                        });
+                    }
+                    log("Found embedded wallet to recover", accountToRecover);
+                    if (((_a = optionsObject.recovery) === null || _a === void 0 ? void 0 : _a.recoveryMethod) && accountToRecover.recoveryMethod && optionsObject.recovery.recoveryMethod !== accountToRecover.recoveryMethod) {
+                        log("Recovery method does not match", optionsObject.recovery.recoveryMethod, accountToRecover.recoveryMethod);
                         return onError({
-                            error: new OpenfortError("Embedded wallet not found for address", OpenfortErrorType.WALLET_ERROR),
+                            error: new OpenfortError("The recovery phrase you entered is incorrect and does not match the wallet's recovery method", OpenfortErrorType.WALLET_ERROR),
                             options: optionsObject,
                             hookOptions
                         });
                     }
-                    await client.embeddedWallet.recover({
-                        account: walletId,
+                    const recovery = {
+                        recoveryMethod: (_b = accountToRecover.recoveryMethod) !== null && _b !== void 0 ? _b : RecoveryMethod.AUTOMATIC,
+                        password: (_c = optionsObject.recovery) === null || _c === void 0 ? void 0 : _c.password,
+                    };
+                    const recoveryParams = await parseWalletRecovery(recovery, embeddedAccounts, walletAddress);
+                    embeddedAccount = await client.embeddedWallet.recover({
+                        account: accountToRecover.id,
                         recoveryParams,
                     });
                 }
                 else {
                     // Check if the embedded wallet is already created in the current chain
-                    if (embeddedWallets.some((w) => w.chainId === chainId)) {
-                        const walletToRecover = embeddedWallets.find((w) => w.chainId === chainId);
-                        await client.embeddedWallet.recover({
-                            account: walletToRecover.id,
+                    if (embeddedAccounts.some((w) => w.chainId === chainId)) {
+                        const accountToRecover = embeddedAccounts.find((w) => w.chainId === chainId);
+                        log("Found embedded wallet to recover (without walletAddress)", accountToRecover);
+                        const recovery = {
+                            recoveryMethod: (_d = accountToRecover.recoveryMethod) !== null && _d !== void 0 ? _d : RecoveryMethod.AUTOMATIC,
+                            password: (_e = optionsObject.recovery) === null || _e === void 0 ? void 0 : _e.password,
+                        };
+                        const recoveryParams = await parseWalletRecovery(recovery, embeddedAccounts, walletAddress);
+                        embeddedAccount = await client.embeddedWallet.recover({
+                            account: accountToRecover.id,
                             recoveryParams,
                         });
-                        walletAddress = walletToRecover.address;
+                        walletAddress = accountToRecover.address;
                     }
                     else {
+                        log("No embedded wallet found for the current chain");
                         // 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)
+                        // TODO: Connect to wallet in the other chain and then switch chain
                         return onError({
                             error: new OpenfortError("No embedded wallet found for the current chain", OpenfortErrorType.WALLET_ERROR),
                             options: optionsObject,
@@ -11276,47 +11372,42 @@ function useWallets(hookOptions = {}) {
                         });
                     }
                 }
+                if (!embeddedAccount) {
+                    return onError({
+                        error: new OpenfortError("Failed to recover embedded wallet", OpenfortErrorType.WALLET_ERROR),
+                        options: optionsObject,
+                        hookOptions
+                    });
+                }
                 setStatus({
                     status: 'success',
                 });
                 return onSuccess({
                     data: {
-                        wallet: parseOpenfortWallet({
-                            address: walletAddress,
-                            recoveryMethod: recoveryParams.recoveryMethod,
-                        }),
+                        wallet: parseEmbeddedAccount(embeddedAccount),
                     },
                     options: optionsObject,
                     hookOptions,
                 });
             }
             catch (err) {
-                log('Error handling recovery with Openfort:', err);
+                let error;
                 if (err instanceof MissingRecoveryPasswordError) {
-                    const error = new OpenfortError("Missing recovery password", OpenfortErrorType.WALLET_ERROR);
-                    setStatus({
-                        status: 'error',
-                        error,
-                    });
-                    return onError({
-                        error,
-                        options: optionsObject,
-                        hookOptions
-                    });
+                    error = new OpenfortError("Missing recovery password", OpenfortErrorType.WALLET_ERROR);
                 }
-                if (typeof err === 'string') {
-                    const error = new OpenfortError(err, OpenfortErrorType.WALLET_ERROR);
-                    setStatus({
-                        status: 'error',
-                        error,
-                    });
-                    return onError({
-                        error,
-                        options: optionsObject,
-                        hookOptions
-                    });
+                else if (err instanceof OpenfortError) {
+                    error = err;
+                }
+                else if (typeof err === 'string') {
+                    error = new OpenfortError(err, OpenfortErrorType.WALLET_ERROR);
                 }
-                const error = new OpenfortError("The recovery phrase you entered is incorrect.", OpenfortErrorType.WALLET_ERROR);
+                else {
+                    error = new OpenfortError("Failed to recover embedded wallet", OpenfortErrorType.WALLET_ERROR, { error: err });
+                    if (error.message === "Wrong recovery password for this embedded signer") {
+                        error.message = "Wrong password, Please try again.";
+                    }
+                }
+                log('Error handling recovery with Openfort:', error, err);
                 setStatus({
                     status: 'error',
                     error,
@@ -11324,7 +11415,7 @@ function useWallets(hookOptions = {}) {
                 return onError({
                     error,
                     options: optionsObject,
-                    hookOptions
+                    hookOptions,
                 });
             }
         }
@@ -11339,13 +11430,14 @@ function useWallets(hookOptions = {}) {
             });
         }
         return {};
-    }, [wallets, setOpen, setRoute, setConnector, disconnectAsync, log, address, client, walletConfig, chainId, refetch, hookOptions]);
-    const createWallet = useCallback(async ({ password, ...options } = {}) => {
+    }, [wallets, setOpen, setRoute, setConnector, disconnectAsync, log, address, client, walletConfig, chainId, hookOptions]);
+    const queryClient = useQueryClient();
+    const createWallet = useCallback(async ({ recovery, ...options } = {}) => {
         var _a;
         setStatus({
             status: 'creating',
         });
-        log("Creating wallet", { password: !!password, options });
+        log("Creating wallet", { recovery: (recovery === null || recovery === void 0 ? void 0 : recovery.recoveryMethod) || RecoveryMethod.AUTOMATIC, options });
         try {
             const accessToken = await client.getAccessToken();
             if (!accessToken) {
@@ -11362,16 +11454,8 @@ function useWallets(hookOptions = {}) {
                     options,
                 });
             }
-            const recoveryParams = password ? {
-                recoveryMethod: RecoveryMethod.PASSWORD,
-                password,
-            } : {
-                recoveryMethod: RecoveryMethod.AUTOMATIC,
-                encryptionSession: walletConfig.getEncryptionSession ?
-                    await walletConfig.getEncryptionSession(accessToken) :
-                    await getEncryptionSession()
-            };
-            const wallet = await client.embeddedWallet.create({
+            const recoveryParams = await parseWalletRecovery(recovery);
+            const embeddedAccount = await client.embeddedWallet.create({
                 chainId: (_a = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.initialChainId) !== null && _a !== void 0 ? _a : chainId,
                 accountType: (options === null || options === void 0 ? void 0 : options.accountType) || (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) || AccountTypeEnum.SMART_ACCOUNT,
                 chainType: ChainTypeEnum.EVM,
@@ -11380,13 +11464,10 @@ function useWallets(hookOptions = {}) {
             setStatus({
                 status: 'success',
             });
-            refetch();
+            queryClient.invalidateQueries({ queryKey: ['openfortEmbeddedAccountsList'] });
             return onSuccess({
                 data: {
-                    wallet: parseOpenfortWallet({
-                        address: wallet.address,
-                        recoveryMethod: wallet.recoveryMethod,
-                    })
+                    wallet: parseEmbeddedAccount(embeddedAccount)
                 }
             });
         }
@@ -11403,7 +11484,7 @@ function useWallets(hookOptions = {}) {
                 options,
             });
         }
-    }, [refetch, client, uiConfig, chainId]);
+    }, [client, uiConfig, chainId]);
     const setRecovery = useCallback(async (params) => {
         try {
             setStatus({
@@ -11418,10 +11499,7 @@ function useWallets(hookOptions = {}) {
                 hookOptions,
                 options: params,
                 data: {
-                    wallet: parseOpenfortWallet({
-                        address: embeddedAccount.address,
-                        recoveryMethod: embeddedAccount.recoveryMethod,
-                    }),
+                    wallet: parseEmbeddedAccount(embeddedAccount),
                 }
             });
         }
@@ -11642,8 +11720,11 @@ const RecoverPasswordWallet = ({ wallet }) => {
     const handleSubmit = async () => {
         setLoading(true);
         const { error } = await setActiveWallet({
-            connector: embeddedWalletId,
-            password: recoveryPhrase,
+            walletId: embeddedWalletId,
+            recovery: {
+                recoveryMethod: RecoveryMethod.PASSWORD,
+                password: recoveryPhrase,
+            },
             address: wallet.address,
         });
         setLoading(false);
@@ -11664,7 +11745,6 @@ const RecoverPasswordWallet = ({ wallet }) => {
         address: wallet.address,
         config: ensFallbackConfig,
     });
-    const separator = '....';
     return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "130px", logoCenter: {
                     logo: jsx(KeyIcon, {}),
                     size: "1.2",
@@ -11674,11 +11754,46 @@ const RecoverPasswordWallet = ({ wallet }) => {
                 }, logoBottomRight: {
                     logo: jsx(LockIcon, {}),
                     size: "0.5",
-                } }), 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) => {
+                } }), 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) })] }), 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: "Recover wallet" })] })] }));
 };
+const RecoverPasskeyWallet = ({ wallet }) => {
+    const { triggerResize, uiConfig: options, log } = useOpenfort();
+    const { setActiveWallet, error: recoveryError, isConnecting: loading } = useWallets();
+    const [shouldRecoverWallet, setShouldRecoverWallet] = useState(false);
+    const recoverWallet = async () => {
+        setActiveWallet({
+            walletId: embeddedWalletId,
+            recovery: {
+                recoveryMethod: RecoveryMethod.PASSKEY,
+            },
+            address: wallet.address,
+        });
+    };
+    useEffect(() => {
+        // To ensure the wallet is created only once
+        if (shouldRecoverWallet) {
+            recoverWallet();
+        }
+    }, [shouldRecoverWallet]);
+    useEffect(() => {
+        setShouldRecoverWallet(true);
+    }, []);
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: wallet.address,
+        config: ensFallbackConfig,
+    });
+    const walletDisplay = ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address);
+    return (jsxs(PageContent, { children: [jsx(BackButton, { onClick: (() => setShouldRecoverWallet(false)) }), jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? "Invalid passkey." : `Recovering wallet ${walletDisplay} with passkey...`, description: recoveryError ? "There was an error creating your passkey. Please try again." : undefined, onRetry: () => recoverWallet() })] }));
+};
 const RecoverAutomaticWallet = ({ walletAddress }) => {
     const { embeddedState } = useOpenfortCore();
     const { setActiveWallet } = useWallets();
@@ -11689,7 +11804,7 @@ const RecoverAutomaticWallet = ({ walletAddress }) => {
             if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
                 log("Automatically recovering wallet", walletAddress);
                 const response = await setActiveWallet({
-                    connector: embeddedWalletId,
+                    walletId: embeddedWalletId,
                 });
                 if (response.error) {
                     setError(response.error.message || "There was an error recovering your account");
@@ -11701,7 +11816,7 @@ const RecoverAutomaticWallet = ({ walletAddress }) => {
     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...` }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { header: `Recovering wallet...` }) }));
 };
 const CreateWalletAutomaticRecovery = () => {
     const { embeddedState } = useOpenfortCore();
@@ -11725,7 +11840,7 @@ const CreateWalletAutomaticRecovery = () => {
             setShouldCreateWallet(true);
         }
     }, [embeddedState]);
-    return (jsx(PageContent, { children: jsx(Loader, { reason: "Creating wallet..." }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { header: "Creating wallet..." }) }));
 };
 const OtherMethod = ({ currentMethod, onChangeMethod }) => {
     const { uiConfig } = useOpenfort();
@@ -11746,6 +11861,9 @@ const OtherMethod = ({ currentMethod, onChangeMethod }) => {
             case RecoveryMethod.AUTOMATIC:
                 text = "Skip for now";
                 break;
+            case RecoveryMethod.PASSKEY:
+                text = "Use passkey recovery";
+                break;
             default:
                 text = method;
         }
@@ -11755,6 +11873,40 @@ const OtherMethod = ({ currentMethod, onChangeMethod }) => {
     }
     return (jsx(OtherMethodButton, { onClick: () => onChangeMethod("other"), children: "Choose another recovery method" }));
 };
+const CreateWalletPasskeyRecovery = ({ onChangeMethod }) => {
+    const { triggerResize } = useOpenfort();
+    const { createWallet, error: recoveryError } = useWallets();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const { log } = useOpenfort();
+    const { embeddedState } = useOpenfortCore();
+    useEffect(() => {
+        // To ensure the wallet is created only once
+        if (shouldCreateWallet) {
+            (async () => {
+                log("Creating wallet passkey recovery");
+                const response = await createWallet({
+                    recovery: {
+                        recoveryMethod: RecoveryMethod.PASSKEY,
+                    }
+                });
+                if (response.error) {
+                    log("Error creating wallet", response.error);
+                    setShouldCreateWallet(false);
+                }
+            })();
+        }
+    }, [shouldCreateWallet]);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
+        }
+    }, [embeddedState]);
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsx(PageContent, { children: jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? "Invalid passkey." : "Creating wallet with passkey...", description: recoveryError ? "There was an error creating your passkey. Please try again." : undefined, onRetry: () => setShouldCreateWallet(true) }) }));
+};
 const CreateWalletPasswordRecovery = ({ onChangeMethod }) => {
     const [recoveryPhrase, setRecoveryPhrase] = useState("");
     const [recoveryError, setRecoveryError] = useState(false);
@@ -11769,7 +11921,10 @@ const CreateWalletPasswordRecovery = ({ onChangeMethod }) => {
         }
         setLoading(true);
         const { error } = await createWallet({
-            password: recoveryPhrase,
+            recovery: {
+                recoveryMethod: RecoveryMethod.PASSWORD,
+                password: recoveryPhrase,
+            },
         });
         setLoading(false);
         if (error) {
@@ -11805,7 +11960,7 @@ const CreateWalletPasswordRecovery = ({ onChangeMethod }) => {
                                 ] }), 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)" })] }));
+    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: () => onChangeMethod(RecoveryMethod.PASSKEY), children: "Passkey" })] }));
 };
 const RecoverWallet = ({ wallet }) => {
     switch (wallet.recoveryMethod) {
@@ -11813,34 +11968,66 @@ const RecoverWallet = ({ wallet }) => {
             return jsx(RecoverPasswordWallet, { wallet: wallet });
         case RecoveryMethod.AUTOMATIC:
             return jsx(RecoverAutomaticWallet, { walletAddress: wallet.address });
+        case RecoveryMethod.PASSKEY:
+            return jsx(RecoverPasskeyWallet, { wallet: wallet });
         default:
             console.error("Unsupported recovery method: " + wallet.recoveryMethod + ", defaulting to automatic.");
             return jsx(RecoverAutomaticWallet, { walletAddress: wallet.address });
     }
 };
+const WalletRecoveryIcon = ({ recovery }) => {
+    switch (recovery) {
+        case RecoveryMethod.PASSWORD:
+            return jsx(KeyIcon, {});
+        case RecoveryMethod.PASSKEY:
+            return jsx(FingerPrintIcon, {});
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(LockIcon, {});
+        default:
+            return null;
+    }
+};
+const SelectWalletButton = ({ wallet, onSelect }) => {
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: wallet.address,
+        config: ensFallbackConfig,
+    });
+    const walletDisplay = ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(wallet.address);
+    // <Button
+    //   onClick={() => onSelect(wallet)}
+    // >
+    //   {walletDisplay} - {wallet.recoveryMethod} recover
+    // </Button>
+    return (jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onSelect(wallet), children: [jsx(ProviderLabel, { children: walletDisplay }), jsx(ProviderIcon$1, { children: jsx(WalletRecoveryIcon, { recovery: wallet.recoveryMethod }) })] }) }));
+};
+const SelectWalletToRecover = ({ wallets }) => {
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    if (selectedWallet) {
+        return jsx(RecoverWallet, { wallet: selectedWallet });
+    }
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Select a wallet to recover" }), wallets.map((wallet) => (jsx(SelectWalletButton, { wallet: wallet, onSelect: setSelectedWallet }, wallet.id)))] }));
+};
 const CreateWallet = () => {
-    const { uiConfig } = useOpenfort();
+    const { uiConfig, triggerResize } = 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) {
+    useEffect(() => {
+        triggerResize();
+    }, [userSelectedMethod]);
+    const method = userSelectedMethod !== null && userSelectedMethod !== void 0 ? userSelectedMethod : uiConfig.walletRecovery.defaultMethod;
+    switch (method) {
         case RecoveryMethod.PASSWORD:
             return jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod });
         case RecoveryMethod.AUTOMATIC:
             return jsx(CreateWalletAutomaticRecovery, {});
+        case RecoveryMethod.PASSKEY:
+            return jsx(CreateWalletPasskeyRecovery, { onChangeMethod: setUserSelectedMethod });
+        case "other":
+            return jsx(ChooseRecoveryMethod, { onChangeMethod: setUserSelectedMethod });
         default:
-            throw new Error("Unsupported recovery method: " + uiConfig.walletRecovery.defaultMethod);
+            console.error("Unsupported recovery method: " + userSelectedMethod + uiConfig.walletRecovery.defaultMethod);
+            return null;
     }
 };
 const Connected = () => {
@@ -11851,7 +12038,7 @@ const Connected = () => {
             setOpen(false);
         }, 1000);
     }, []);
-    return (jsx(PageContent, { children: jsx(Loader, { isLoading: false, reason: "Connected" }) }));
+    return (jsx(PageContent, { children: jsx(Loader, { isLoading: false, isSuccess: true, header: "Connected" }) }));
 };
 const RecoverPage = () => {
     const { needsRecovery, user } = useOpenfortCore();
@@ -11889,7 +12076,7 @@ const RecoverPage = () => {
     //   setLoading(false);
     // }, [user])
     if (embeddedSignerLoading) {
-        return (jsx(PageContent, { children: jsx(Loader, { reason: "Setting up wallet" }) }));
+        return (jsx(PageContent, { children: jsx(Loader, { header: "Setting up wallet" }) }));
     }
     if (isConnected && user) {
         return jsx(Connected, {});
@@ -11902,20 +12089,10 @@ const RecoverPage = () => {
     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 (wallets.length === 1) {
+        return (jsx(RecoverWallet, { wallet: openfortWallets[0] }));
+    }
+    return (jsx(SelectWalletToRecover, { wallets: openfortWallets }));
     // if (walletConfig && walletConfig.recoveryMethod === RecoveryMethod.AUTOMATIC) {
     //   return <AutomaticRecovery />
     // }
@@ -12817,14 +12994,12 @@ const useConnectToWalletPostAuth = () => {
     const { walletConfig } = useOpenfort();
     const { signOut } = useSignOut();
     const queryClient = useQueryClient();
-    const tryUseWallet = useCallback(async ({ logoutOnError: signOutOnError = true, automaticRecovery = true }) => {
-        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) {
+    const tryUseWallet = useCallback(async ({ logoutOnError: signOutOnError = true, recoverWalletAutomatically = true }) => {
+        if ((!(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.createEncryptedSessionEndpoint) && !(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession)) || !recoverWalletAutomatically) {
             // If there is no encryption session, we cannot create a wallet
             return {};
         }
-        const wallets = await queryClient.ensureQueryData({ queryKey: ['openfortEmbeddedWalletList'] });
-        console.log("WALLETS", wallets);
+        const wallets = await queryClient.ensureQueryData({ queryKey: ['openfortEmbeddedAccountsList'] });
         let wallet;
         if (wallets.length === 0) {
             const createWalletResult = await createWallet();
@@ -12839,7 +13014,7 @@ const useConnectToWalletPostAuth = () => {
         // Has a wallet with automatic recovery
         if (wallets.some(w => w.recoveryMethod === RecoveryMethod.AUTOMATIC)) {
             const setWalletResult = await setActiveWallet({
-                connector: embeddedWalletId,
+                walletId: embeddedWalletId,
             });
             if (!setWalletResult.wallet || (setWalletResult.error && signOutOnError)) {
                 console.error("Error recovering wallet:", setWalletResult.error);
@@ -12870,7 +13045,7 @@ const useEmailAuth = (hookOptions = {}) => {
     }, []);
     const { tryUseWallet } = useConnectToWalletPostAuth();
     const signInEmail = useCallback(async (options) => {
-        var _a;
+        var _a, _b, _c;
         try {
             setStatus({
                 status: 'loading',
@@ -12901,8 +13076,8 @@ const useEmailAuth = (hookOptions = {}) => {
             }
             else {
                 const { wallet } = await tryUseWallet({
-                    logoutOnError: options.logoutOnError || hookOptions.logoutOnError,
-                    automaticRecovery: options.automaticRecovery || hookOptions.automaticRecovery,
+                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
+                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
                 });
                 setStatus({
                     status: 'success',
@@ -13002,7 +13177,7 @@ const useEmailAuth = (hookOptions = {}) => {
         }
     }, [client, setStatus, updateUser, hookOptions]);
     const signUpEmail = useCallback(async (options) => {
-        var _a;
+        var _a, _b, _c;
         try {
             setStatus({
                 status: 'loading',
@@ -13034,8 +13209,8 @@ const useEmailAuth = (hookOptions = {}) => {
             }
             else {
                 const { wallet } = await tryUseWallet({
-                    logoutOnError: options.logoutOnError || hookOptions.logoutOnError,
-                    automaticRecovery: options.automaticRecovery || hookOptions.automaticRecovery,
+                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
+                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
                 });
                 setStatus({
                     status: 'success',
@@ -13182,6 +13357,7 @@ const useOAuth = (hookOptions = {}) => {
     });
     const { tryUseWallet } = useConnectToWalletPostAuth();
     const storeCredentials = useCallback(async ({ player, accessToken, refreshToken, ...options }) => {
+        var _a, _b;
         setStatus({
             status: 'loading',
         });
@@ -13196,8 +13372,8 @@ const useOAuth = (hookOptions = {}) => {
             });
             const user = await updateUser() || undefined;
             const { wallet } = await tryUseWallet({
-                logoutOnError: options.logoutOnError || hookOptions.logoutOnError,
-                automaticRecovery: options.automaticRecovery || hookOptions.automaticRecovery,
+                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
+                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
             });
             return onSuccess({
                 data: { user, wallet, type: "storeCredentials" },
@@ -13430,6 +13606,7 @@ const useGuestAuth = (hookOptions = {}) => {
     });
     const { tryUseWallet } = useConnectToWalletPostAuth();
     const signUpGuest = useCallback(async (options = {}) => {
+        var _a, _b;
         try {
             setStatus({
                 status: 'loading',
@@ -13438,8 +13615,8 @@ const useGuestAuth = (hookOptions = {}) => {
             const user = result.player;
             await updateUser(user);
             const { wallet } = await tryUseWallet({
-                logoutOnError: options.logoutOnError || hookOptions.logoutOnError,
-                automaticRecovery: options.automaticRecovery || hookOptions.automaticRecovery,
+                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
+                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
             });
             setStatus({
                 status: 'success',