@openfort/react 0.1.1 → 0.1.3

package/build/index.es.js

@@ -1,7 +1,7 @@
 import { Openfort as Openfort$1, EmbeddedState, AccountTypeEnum, RecoveryMethod, MissingRecoveryPasswordError, ChainTypeEnum, OAuthProvider, OpenfortError as OpenfortError$1, OpenfortErrorType as OpenfortErrorType$1 } from '@openfort/openfort-js';
 export { AccountTypeEnum, OAuthProvider, OpenfortEvents, RecoveryMethod, ThirdPartyOAuthProvider, openfortEvents } from '@openfort/openfort-js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, createContext, useRef, useId, useMemo, useCallback, createElement, useLayoutEffect, useContext } from 'react';
+import React, { useState, useEffect, createContext, useRef, useId, useMemo, useCallback, createElement, useLayoutEffect } from 'react';
 import { normalize } from 'viem/ens';
 import { useEnsAddress, useEnsName, useEnsAvatar, useConfig, useAccount, useBlockNumber, useBalance, useConnectors as useConnectors$1, useConnect as useConnect$1, useDisconnect, useChainId, http, useSwitchChain, usePublicClient, WagmiContext, useWalletClient } from 'wagmi';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
@@ -15,7 +15,6 @@ import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors
 import { useTransition } from 'react-transition-state';
 import ResizeObserver from 'resize-observer-polyfill';
 import { createPortal } from 'react-dom';
-import { walletConnect as walletConnect$1 } from 'wagmi/connectors';
 import calculateEntropy from 'fast-password-entropy';
 import QRCodeUtil from 'qrcode';
 import { switchChain, signMessage } from '@wagmi/core';
@@ -3683,9 +3682,7 @@ function flattenChildren(children) {
     }, []);
 }
 const isWalletConnectConnector = (connectorId) => connectorId === 'walletConnect';
-const isFamilyAccountsConnector = (connectorId) => connectorId === 'familyAccountsProvider';
 const isCoinbaseWalletConnector = (connectorId) => connectorId === 'coinbaseWalletSDK';
-const isPortoConnector = (connectorId) => connectorId === 'xyz.ithaca.porto';
 const isSafeConnector = (connectorId) => connectorId === 'safe';
 const isInjectedConnector = (connectorId) => connectorId === 'injected';
 
@@ -3984,7 +3981,7 @@ styled(motion.div) `
     display: block;
   }
 `;
-const IconContainer$5 = styled(motion.div) `
+const IconContainer$4 = styled(motion.div) `
   pointer-events: none;
   user-select: none;
   position: relative;
@@ -4144,7 +4141,7 @@ function OpenfortButtonInner({ label, showAvatar, separator, }) {
     return (jsx(AnimatePresence, { initial: false, children: user || address ? (jsxs(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: addressVariants, style: {
                 height: 40,
                 //padding: !showAvatar ? '0 5px' : undefined,
-            }, children: [showAvatar && (jsxs(IconContainer$5, { children: [jsx(AnimatePresence, { initial: false, children: !isChainSupported && (jsx(UnsupportedNetworkContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported network" }), jsx("path", { d: "M1.68831 13.5H12.0764C13.1026 13.5 13.7647 12.7197 13.7647 11.763C13.7647 11.4781 13.6985 11.1863 13.5462 10.9149L8.34225 1.37526C8.02445 0.791754 7.45505 0.5 6.88566 0.5C6.31627 0.5 5.73364 0.791754 5.42246 1.37526L0.225108 10.9217C0.0728291 11.1863 0 11.4781 0 11.763C0 12.7197 0.662083 13.5 1.68831 13.5ZM6.88566 8.8048C6.49503 8.8048 6.27655 8.5809 6.26331 8.1738L6.16399 5.0595C6.15075 4.64562 6.44869 4.34708 6.87904 4.34708C7.30278 4.34708 7.61396 4.6524 7.60071 5.06628L7.5014 8.16701C7.48154 8.5809 7.26305 8.8048 6.88566 8.8048ZM6.88566 11.3492C6.44207 11.3492 6.07792 11.0303 6.07792 10.5757C6.07792 10.1211 6.44207 9.80219 6.88566 9.80219C7.32926 9.80219 7.69341 10.1143 7.69341 10.5757C7.69341 11.0371 7.32264 11.3492 6.88566 11.3492Z", fill: "currentColor" })] }) })) }), jsx(Avatar, { size: 24, address: address })] })), jsx("div", { style: {
+            }, children: [showAvatar && (jsxs(IconContainer$4, { children: [jsx(AnimatePresence, { initial: false, children: !isChainSupported && (jsx(UnsupportedNetworkContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported network" }), jsx("path", { d: "M1.68831 13.5H12.0764C13.1026 13.5 13.7647 12.7197 13.7647 11.763C13.7647 11.4781 13.6985 11.1863 13.5462 10.9149L8.34225 1.37526C8.02445 0.791754 7.45505 0.5 6.88566 0.5C6.31627 0.5 5.73364 0.791754 5.42246 1.37526L0.225108 10.9217C0.0728291 11.1863 0 11.4781 0 11.763C0 12.7197 0.662083 13.5 1.68831 13.5ZM6.88566 8.8048C6.49503 8.8048 6.27655 8.5809 6.26331 8.1738L6.16399 5.0595C6.15075 4.64562 6.44869 4.34708 6.87904 4.34708C7.30278 4.34708 7.61396 4.6524 7.60071 5.06628L7.5014 8.16701C7.48154 8.5809 7.26305 8.8048 6.88566 8.8048ZM6.88566 11.3492C6.44207 11.3492 6.07792 11.0303 6.07792 10.5757C6.07792 10.1211 6.44207 9.80219 6.88566 9.80219C7.32926 9.80219 7.69341 10.1143 7.69341 10.5757C7.69341 11.0371 7.32264 11.3492 6.88566 11.3492Z", fill: "currentColor" })] }) })) }), jsx(Avatar, { size: 24, address: address })] })), jsx("div", { style: {
                         position: 'relative',
                         paddingRight: showAvatar ? 1 : 0,
                     }, children: jsx(AnimatePresence, { initial: false, children: jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$2, style: {
@@ -4235,16 +4232,6 @@ function useFamilyAccountsConnector() {
 function useFamilyConnector() {
     return useConnector('co.family.wallet');
 }
-function useWalletConnectConnector() {
-    /*
-    options: {
-      qrcode: false,
-      // or
-      showQrModal: false,
-    }
-    */
-    return useConnector('walletConnect');
-}
 
 function useGoogleFont(font) {
     useEffect(() => {
@@ -4424,29 +4411,31 @@ const ConnectCallback = ({ onConnect, onDisconnect }) => {
     });
     return null;
 };
-const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, ...openfortProps }) => {
+const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, openfortConfig, }) => {
     const { connectors, connect, reset } = useConnect();
     const { address } = useAccount();
     const [user, setUser] = useState(null);
     const [walletStatus, setWalletStatus] = useState({ status: 'idle' });
     const { disconnectAsync } = useDisconnect();
     const { walletConfig } = useOpenfort();
+    const wagmiConfig = useConfig();
+    const chainId = useChainId();
     // ---- Openfort instance ----
     const openfort = useMemo(() => {
         var _a;
-        logger.log('Creating Openfort instance.', openfortProps);
-        if (!openfortProps.baseConfiguration.publishableKey)
+        logger.log('Creating Openfort instance.', openfortConfig);
+        if (!openfortConfig.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) &&
+        if (openfortConfig.shieldConfiguration &&
+            !((_a = openfortConfig.shieldConfiguration) === null || _a === void 0 ? void 0 : _a.passkeyRpId) &&
             typeof window !== 'undefined') {
-            openfortProps.shieldConfiguration = {
+            openfortConfig.shieldConfiguration = {
                 passkeyRpId: window.location.hostname,
                 passkeyRpName: document.title || 'Openfort DApp',
-                ...openfortProps.shieldConfiguration,
+                ...openfortConfig.shieldConfiguration,
             };
         }
-        const newClient = createOpenfortClient(openfortProps);
+        const newClient = createOpenfortClient(openfortConfig);
         return newClient;
     }, []);
     // ---- Embedded state ----
@@ -4520,8 +4509,27 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, ...openfortPr
             return null;
         }
     }, [openfort]);
-    const chainId = useChainId();
-    const wagmiConfig = useConfig();
+    // Embedded accounts list. Will reset on logout.
+    const { data: embeddedAccounts, refetch: fetchEmbeddedAccounts, isPending: isLoadingAccounts, } = useQuery({
+        queryKey: ['openfortEmbeddedAccountsList'],
+        queryFn: async () => {
+            try {
+                return await openfort.embeddedWallet.list({
+                    limit: 100,
+                    // If its EOA we want all accounts, otherwise we want only smart accounts
+                    accountType: (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) === AccountTypeEnum.EOA ? undefined : AccountTypeEnum.SMART_ACCOUNT,
+                });
+            }
+            catch (error) {
+                handleOAuthConfigError(error);
+                throw error;
+            }
+        },
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        retry: false,
+    });
+    // Update ethereum provider when chainId changes
     useEffect(() => {
         if (!openfort || !walletConfig)
             return;
@@ -4551,28 +4559,10 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, ...openfortPr
             ...resolvePolicy(),
             chains: rpcUrls,
         });
+        // Refresh embedded accounts to reflect any changes in the selected chain
+        fetchEmbeddedAccounts();
     }, [openfort, walletConfig, chainId]);
     const [isConnectedWithEmbeddedSigner, setIsConnectedWithEmbeddedSigner] = useState(false);
-    // will reset on logout
-    const { data: embeddedAccounts, refetch: fetchEmbeddedAccounts, isPending: isLoadingAccounts, } = useQuery({
-        queryKey: ['openfortEmbeddedAccountsList'],
-        queryFn: async () => {
-            try {
-                return await openfort.embeddedWallet.list({
-                    limit: 100,
-                    // If its EOA we want all accounts, otherwise we want only smart accounts
-                    accountType: (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) === AccountTypeEnum.EOA ? undefined : AccountTypeEnum.SMART_ACCOUNT,
-                });
-            }
-            catch (error) {
-                handleOAuthConfigError(error);
-                throw error;
-            }
-        },
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-        retry: false,
-    });
     useEffect(() => {
         if (!openfort)
             return;
@@ -4685,6 +4675,7 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, ...openfortPr
         needsRecovery,
         user,
         updateUser,
+        updateEmbeddedAccounts: fetchEmbeddedAccounts,
         embeddedAccounts,
         isLoadingAccounts,
         walletStatus,
@@ -4713,7 +4704,6 @@ const defaultConnectors = ({ app, walletConnectProjectId, coinbaseWalletPreferen
     }));
     if (walletConnectProjectId) {
         connectors.push(walletConnect({
-            showQrModal: false,
             projectId: walletConnectProjectId,
             metadata: hasAllAppData
                 ? {
@@ -4725,13 +4715,6 @@ const defaultConnectors = ({ app, walletConnectProjectId, coinbaseWalletPreferen
                 : undefined,
         }));
     }
-    /*
-    connectors.push(
-      injected({
-        shimDisconnect: true,
-      })
-    );
-    */
     return connectors;
 };
 
@@ -4763,10 +4746,6 @@ const defaultConfig = ({ appName = 'Openfort', appIcon, appDescription, appUrl,
     return config;
 };
 
-const ExternalLinkIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
-        left: 0,
-        top: 0,
-    }, ...props, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C2.89543 4 2 4.89543 2 6V12C2 13.1046 2.89543 14 4 14H10C11.1046 14 12 13.1046 12 12V9.66667C12 9.11438 12.4477 8.66667 13 8.66667C13.5523 8.66667 14 9.11438 14 9.66667V12C14 14.2091 12.2091 16 10 16H4C1.79086 16 0 14.2091 0 12V6C0 3.79086 1.79086 2 4 2H6.33333C6.88562 2 7.33333 2.44772 7.33333 3C7.33333 3.55228 6.88562 4 6.33333 4H4Z", fill: "currentColor", fillOpacity: 0.3 }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.5 1C9.5 0.447715 9.94772 0 10.5 0H15C15.5523 0 16 0.447715 16 1V5.5C16 6.05228 15.5523 6.5 15 6.5C14.4477 6.5 14 6.05228 14 5.5V3.41421L8.70711 8.70711C8.31658 9.09763 7.68342 9.09763 7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289L12.5858 2H10.5C9.94772 2 9.5 1.55228 9.5 1Z", fill: "currentColor", fillOpacity: 0.3 })] }));
 const AlertIcon = ({ ...props }) => {
     return (jsxs("svg", { "aria-hidden": "true", width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.81753 1.60122C7.39283 0.530035 8.46953 0 9.50409 0C10.5507 0 11.6022 0.539558 12.1805 1.59767L18.6047 13.3334C18.882 13.8283 19 14.3568 19 14.8622C19 16.5296 17.7949 18 15.9149 18H3.08514C1.20508 18 0 16.5296 0 14.8622C0 14.3454 0.131445 13.8172 0.405555 13.3379L6.81753 1.60122ZM9.50409 2C9.13355 2 8.77256 2.18675 8.57866 2.54907L8.57458 2.5567L2.14992 14.3166L2.144 14.3268C2.04638 14.4959 2 14.6817 2 14.8622C2 15.5497 2.43032 16 3.08514 16H15.9149C16.5697 16 17 15.5497 17 14.8622C17 14.6681 16.9554 14.4805 16.8588 14.309L16.8529 14.2986L10.4259 2.55741C10.2191 2.1792 9.86395 2 9.50409 2Z", fill: "currentColor" }), jsx("path", { d: "M9.5 11.2297C9.01639 11.2297 8.7459 10.9419 8.72951 10.4186L8.60656 6.4157C8.59016 5.88372 8.95902 5.5 9.4918 5.5C10.0164 5.5 10.4016 5.89244 10.3852 6.42442L10.2623 10.4099C10.2377 10.9419 9.96721 11.2297 9.5 11.2297ZM9.5 14.5C8.95082 14.5 8.5 14.0901 8.5 13.5058C8.5 12.9215 8.95082 12.5116 9.5 12.5116C10.0492 12.5116 10.5 12.9128 10.5 13.5058C10.5 14.0988 10.041 14.5 9.5 14.5Z", fill: "currentColor" })] }));
 };
@@ -5246,13 +5225,13 @@ const walletConfigs = {
 };
 
 const useWallet = (id) => {
-    const wallets = useWallets$1();
+    const wallets = useWagmiWallets();
     const wallet = wallets.find((c) => c.id === id);
     if (!wallet)
         return null;
     return wallet;
 };
-const useWallets$1 = () => {
+const useWagmiWallets = () => {
     const connectors = useConnectors();
     const context = useOpenfort();
     const wallets = connectors.map((connector) => {
@@ -5481,7 +5460,7 @@ const FitText = ({ children, maxFontSize = 100, minFontSize = 70, }) => {
 };
 FitText.displayName = 'FitText';
 
-const OPENFORT_VERSION = '0.1.1';
+const OPENFORT_VERSION = '0.1.3';
 
 const Portal = (props) => {
     props = {
@@ -6719,7 +6698,7 @@ const InnerContainer = styled.div `
   text-overflow: ellipsis;
   */
 `;
-const IconContainer$4 = styled(motion.div) `
+const IconContainer$3 = styled(motion.div) `
   position: relative;
   display: inline-block;
   vertical-align: middle;
@@ -6784,7 +6763,7 @@ disabled, icon, iconPosition = 'left', roundedIcon, waiting, arrow, download, hr
                     }, transition: {
                         ...transition,
                         delay: 0.2,
-                    }, children: [icon && iconPosition === 'left' && jsx(IconContainer$4, { "$rounded": roundedIcon, children: icon }), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: jsx(FitText, { children: children }) }), icon && iconPosition === 'right' && jsx(IconContainer$4, { "$rounded": roundedIcon, children: icon }), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer$2, { children: jsx(Spinner$3, {}) }))] }) }));
+                    }, children: [icon && iconPosition === 'left' && jsx(IconContainer$3, { "$rounded": roundedIcon, children: icon }), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: jsx(FitText, { children: children }) }), icon && iconPosition === 'right' && jsx(IconContainer$3, { "$rounded": roundedIcon, children: icon }), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer$2, { children: jsx(Spinner$3, {}) }))] }) }));
 };
 
 var OpenfortErrorType;
@@ -6986,7 +6965,7 @@ const PageContent = ({ children, width, onBack = 'back', logoutOnBack }) => {
         else
             setOnBack(null);
         // else setOnBack(() => () => alert('REMOVE DEBUG ON BACK STRING!'))
-    }, [onBack, logoutOnBack]);
+    }, []);
     return jsx(PageContentStyle, { style: { width }, children: children });
 };
 
@@ -7901,18 +7880,17 @@ function useWalletConnectModal() {
             const w3mcss = document.createElement('style');
             w3mcss.innerHTML = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
             document.head.appendChild(w3mcss);
+            const removeChild = () => {
+                if (document.head.contains(w3mcss)) {
+                    document.head.removeChild(w3mcss);
+                }
+            };
             const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
             if (clientConnector) {
                 try {
-                    const provider = await clientConnector.getProvider();
-                    const projectId = provider.rpc.projectId;
-                    const connector = walletConnect$1({
-                        projectId,
-                        showQrModal: true,
-                    });
                     setIsOpen(true);
                     try {
-                        await connectAsync({ connector: connector });
+                        await connectAsync({ connector: clientConnector });
                     }
                     catch (err) {
                         logger.log('WalletConnect', err);
@@ -7921,18 +7899,19 @@ function useWalletConnectModal() {
                         };
                     }
                     setIsOpen(false);
-                    // remove modal styling
-                    document.head.removeChild(w3mcss);
+                    removeChild();
                     return {};
                 }
                 catch (err) {
                     logger.log('Could not get WalletConnect provider', err);
+                    removeChild();
                     return {
                         error: 'Could not get WalletConnect provider',
                     };
                 }
             }
             else {
+                removeChild();
                 logger.log('Configuration error: Please provide a WalletConnect Project ID in your wagmi config.');
                 return {
                     error: 'Configuration error: Please provide a WalletConnect Project ID in your wagmi config.',
@@ -7963,140 +7942,6 @@ const useLastConnector = () => {
     };
 };
 
-function useWalletConnectUri({ enabled } = {
-    enabled: true,
-}) {
-    const [uri, setUri] = useState(undefined);
-    const connector = useWalletConnectConnector();
-    const { isConnected } = useAccount();
-    const { connectAsync } = useConnect();
-    const { disconnect } = useDisconnect();
-    useEffect(() => {
-        if (!enabled)
-            return;
-        async function handleMessage(message) {
-            const { type, data } = message;
-            logger.log('WC Message', type, data);
-            if (type === 'display_uri') {
-                setUri(data);
-            }
-            /*
-              // This has the URI as well, but we're probably better off using the one in the display_uri event
-              if (type === 'connecting') {
-                const p = await connector.getProvider();
-                const uri = p.signer.uri;
-                setConnectorUri(uri);
-              }
-              */
-        }
-        async function handleDisconnect() {
-            logger.log('WC Disconnect');
-            if (connector)
-                connectWallet(connector);
-        }
-        async function connectWallet(connector) {
-            if (isConnected)
-                disconnect();
-            const result = await connectAsync({ connector });
-            if (result)
-                return result;
-            return false;
-        }
-        async function connectWalletConnect(connector) {
-            try {
-                await connectWallet(connector);
-            }
-            catch (error) {
-                logger.log('catch error');
-                logger.log(error);
-                if (error.code) {
-                    switch (error.code) {
-                        case 4001:
-                            logger.log('error.code - User rejected');
-                            connectWalletConnect(connector); // Regenerate QR code
-                            break;
-                        default:
-                            logger.log('error.code - Unknown Error');
-                            break;
-                    }
-                }
-                else {
-                    // Sometimes the error doesn't respond with a code
-                    logger.log('WalletConnect cannot connect.', error);
-                }
-            }
-        }
-        if (isConnected) {
-            setUri(undefined);
-        }
-        else {
-            if (!connector || uri)
-                return;
-            if (connector && !isConnected) {
-                connectWalletConnect(connector);
-                logger.log('add wc listeners');
-                connector.emitter.on('message', handleMessage);
-                connector.emitter.on('disconnect', handleDisconnect);
-                return () => {
-                    logger.log('remove wc listeners');
-                    connector.emitter.off('message', handleMessage);
-                    connector.emitter.off('disconnect', handleDisconnect);
-                };
-            }
-        }
-    }, [enabled, connector, isConnected]);
-    return {
-        uri,
-    };
-}
-
-const Web3Context = createContext({
-    connect: {
-        getUri: () => '',
-    },
-    dapp: {
-        chains: [],
-    },
-    account: undefined,
-});
-const Web3ContextProvider = ({ enabled, children }) => {
-    const { uri: walletConnectUri } = useWalletConnectUri({
-        enabled,
-    });
-    const { address: currentAddress, chain } = useAccount();
-    const chainIsSupported = useChainIsSupported(chain === null || chain === void 0 ? void 0 : chain.id);
-    const chains = useChains();
-    const value = {
-        connect: {
-            getUri: (_id) => {
-                return walletConnectUri;
-            },
-        },
-        dapp: {
-            chains,
-        },
-        account: currentAddress
-            ? {
-                chain,
-                chainIsSupported,
-                address: currentAddress,
-            }
-            : undefined,
-    };
-    return jsx(Web3Context.Provider, { value: value, children: children });
-};
-/**
- * React hook to access the {@link Web3Context} values.
- *
- * @returns Shared Web3 utilities exposed by the provider.
- *
- * @example
- * ```ts
- * const { account } = useWeb3();
- * ```
- */
-const useWeb3 = () => useContext(Web3Context);
-
 const AlertContainer = styled(motion.div) `
   display: flex;
   gap: 8px;
@@ -8132,7 +7977,7 @@ const AlertContainer = styled(motion.div) `
       `;
 }}
 `;
-const IconContainer$3 = styled(motion.div) `
+const IconContainer$2 = styled(motion.div) `
   width: 24px;
   height: 24px;
   display: flex;
@@ -8146,7 +7991,7 @@ const IconContainer$3 = styled(motion.div) `
 `;
 
 const Alert = ({ children, error, icon }) => {
-    return (jsxs(AlertContainer, { "$error": error, children: [icon && jsx(IconContainer$3, { children: icon }), jsx("div", { children: children })] }));
+    return (jsxs(AlertContainer, { "$error": error, children: [icon && jsx(IconContainer$2, { children: icon }), jsx("div", { children: children })] }));
 };
 Alert.displayName = 'Alert';
 
@@ -8685,7 +8530,7 @@ const ConnectorsContainer = styled.div `
 const ConnectorList = () => {
     const context = useOpenfort();
     const isMobile = useIsMobile();
-    const wallets = useWallets$1();
+    const wallets = useWagmiWallets();
     const { lastConnectorId } = useLastConnector();
     const familyConnector = useFamilyConnector();
     const familyAccountsConnector = useFamilyAccountsConnector();
@@ -8704,47 +8549,19 @@ const ConnectorList = () => {
     return (jsxs(ScrollArea, { mobileDirection: 'horizontal', children: [filteredWallets.length === 0 && jsx(Alert, { error: true, children: "No connectors found in Openfort config." }), filteredWallets.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: filteredWallets.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
 };
 const ConnectorItem = ({ wallet, isRecent }) => {
-    var _a;
-    const { connect: { getUri }, } = useWeb3();
-    const wcUri = getUri();
     const isMobile = useIsMobile();
     const context = useOpenfort();
-    const { connect } = useConnect();
-    /*
-    const [ready, setReady] = useState(false);
-    useEffect(() => {
-      (async () => {
-        const provider = await wallet.connector.getProvider();
-        setReady(!!provider);
-      })();
-    }, [wallet, setReady]);
-    */
-    let deeplink = (!wallet.isInstalled && isMobile) || (wallet.shouldDeeplinkDesktop && !isMobile)
-        ? (_a = wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, wcUri !== null && wcUri !== void 0 ? wcUri : '')
-        : undefined;
     const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
     // Safari requires opening popup on user gesture, so we connect immediately here
-    const shouldConnectImmediately = (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
-        (isCoinbaseWalletConnector(wallet.connector.id) || isPortoConnector(wallet.connector.id));
-    if (redirectToMoreWallets || shouldConnectImmediately)
-        deeplink = undefined; // mobile redirects to more wallets page
     const content = () => {
         var _a, _b;
         return (jsxs(Fragment, { children: [jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, "data-background": redirectToMoreWallets, children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon }), jsxs(ConnectorLabel, { children: [isMobile ? ((_b = wallet.shortName) !== null && _b !== void 0 ? _b : wallet.name) : wallet.name, !context.uiConfig.hideRecentBadge && isRecent && (jsx(RecentlyUsedTag, { children: jsx("span", { children: "Recent" }) }))] })] }));
     };
     return (jsx(ConnectorButton, { type: "button", onClick: () => {
-            if (isMobile && deeplink) {
-                context.setRoute(routes.CONNECT_WITH_MOBILE);
-                context.setConnector({ id: wallet.id });
-                return;
-            }
             if (redirectToMoreWallets) {
                 context.setRoute(routes.MOBILECONNECTORS);
             }
             else {
-                if (shouldConnectImmediately) {
-                    connect({ connector: wallet === null || wallet === void 0 ? void 0 : wallet.connector });
-                }
                 context.setRoute({ route: routes.CONNECT, connectType: 'linkIfUserConnectIfNoUser' });
                 context.setConnector({ id: wallet.id });
             }
@@ -8754,7 +8571,6 @@ const ConnectorItem = ({ wallet, isRecent }) => {
 const ConnectWithMobile$1 = () => {
     const { open: openWalletConnectModal } = useWalletConnectModal();
     const [error, setError] = useState(undefined);
-    const { connect, connectors } = useConnect();
     const { connector, address } = useAccount();
     const { setRoute, setConnector } = useOpenfort();
     const openWCModal = async () => {
@@ -8766,7 +8582,7 @@ const ConnectWithMobile$1 = () => {
     };
     useEffect(() => {
         openWCModal();
-    }, [connect, connectors]);
+    }, []);
     useEffect(() => {
         if (connector && address) {
             const walletConnectDeeplinkChoice = localStorage.getItem('WALLETCONNECT_DEEPLINK_CHOICE');
@@ -8784,9 +8600,7 @@ const ConnectWithMobile$1 = () => {
 };
 const Connectors = ({ logoutOnBack }) => {
     const isMobile = useIsMobile();
-    return (
-    // TODO: logout on back
-    jsx(PageContent, { logoutOnBack: logoutOnBack, width: 312, children: isMobile ? jsx(ConnectWithMobile$1, {}) : jsx(ConnectorList, {}) }));
+    return (jsx(PageContent, { logoutOnBack: logoutOnBack, width: 312, children: isMobile ? jsx(ConnectWithMobile$1, {}) : jsx(ConnectorList, {}) }));
 };
 
 /**
@@ -8951,15 +8765,16 @@ const mapWalletStatus = (status) => {
  * ```
  */
 function useWallets(hookOptions = {}) {
-    const { client, embeddedAccounts, isLoadingAccounts: isLoadingWallets } = useOpenfortCore();
+    const { client, embeddedAccounts, isLoadingAccounts: isLoadingWallets, updateEmbeddedAccounts } = useOpenfortCore();
     const { user } = useUser();
     const { walletConfig, setOpen, setRoute, setConnector, uiConfig } = useOpenfort();
     const { connector, isConnected, address } = useAccount();
     const chainId = useChainId();
-    const availableWallets = useWallets$1(); // TODO: Map wallets object to be the same as wallets
+    const availableWallets = useWagmiWallets(); // TODO: Map wallets object to be the same as wallets
     const { disconnect, disconnectAsync } = useDisconnect();
     const [status, setStatus] = useWalletStatus();
     const [connectToConnector, setConnectToConnector] = useState(undefined);
+    const { switchChainAsync } = useSwitchChain();
     const { connect } = useConnect({
         mutation: {
             onError: (e) => {
@@ -9060,29 +8875,33 @@ function useWallets(hookOptions = {}) {
                 throw new OpenfortError('Invalid recovery method', OpenfortErrorType.VALIDATION_ERROR);
         }
     }, [walletConfig, getEncryptionSession]);
-    const rawWallets = useMemo(() => {
+    const userLinkedWalletConnectors = useMemo(() => {
         const userWallets = user
             ? user.linkedAccounts
-                .filter((a) => a.provider === UIAuthProvider.WALLET)
-                .map((a) => {
+                .filter((linkedAccount) => linkedAccount.provider === UIAuthProvider.WALLET)
+                .map((linkedAccount) => {
                 // For connector wallets (e.g. Metamask, Rabby, etc.)
-                const wallet = availableWallets.find((c) => c.connector.id === a.walletClientType);
+                const wallet = availableWallets.find((c) => c.connector.id === linkedAccount.walletClientType);
                 return {
                     accounts: [],
-                    address: a.address,
-                    connectorType: a.connectorType,
-                    walletClientType: a.walletClientType,
-                    id: (wallet === null || wallet === void 0 ? void 0 : wallet.id) || a.walletClientType || 'unknown',
+                    address: linkedAccount.address,
+                    connectorType: linkedAccount.connectorType,
+                    walletClientType: linkedAccount.walletClientType,
+                    id: (wallet === null || wallet === void 0 ? void 0 : wallet.id) || linkedAccount.walletClientType || 'unknown',
                     isAvailable: !!wallet,
                     connector: wallet === null || wallet === void 0 ? void 0 : wallet.connector,
                 };
             })
             : [];
+        return userWallets;
+    }, [user === null || user === void 0 ? void 0 : user.linkedAccounts, embeddedAccounts]);
+    const userEmbeddedWallets = useMemo(() => {
+        const newRawWallets = [];
         embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.forEach((embeddedAccount) => {
             // Remove duplicates (different chain ids)
-            if (userWallets.find((w) => w.address.toLowerCase() === embeddedAccount.address.toLowerCase()))
+            if (newRawWallets.find((w) => w.address.toLowerCase() === embeddedAccount.address.toLowerCase()))
                 return;
-            userWallets.push(parseEmbeddedAccount({
+            newRawWallets.push(parseEmbeddedAccount({
                 embeddedAccount,
                 connector: openfortConnector,
                 simpleAccounts: getSimpleAccounts({
@@ -9092,8 +8911,11 @@ function useWallets(hookOptions = {}) {
                 chainId,
             }));
         });
-        return userWallets;
-    }, [user === null || user === void 0 ? void 0 : user.linkedAccounts, embeddedAccounts]);
+        return newRawWallets;
+    }, [chainId, embeddedAccounts, openfortConnector]);
+    const rawWallets = useMemo(() => {
+        return [...userLinkedWalletConnectors, ...userEmbeddedWallets];
+    }, [userLinkedWalletConnectors, userEmbeddedWallets]);
     const wallets = useMemo(() => {
         // logger.log("Mapping wallets", { rawWallets, status, address, isConnected, connector: connector?.id });
         return rawWallets.map((w) => {
@@ -9104,8 +8926,9 @@ function useWallets(hookOptions = {}) {
                 isActive: w.address.toLowerCase() === (address === null || address === void 0 ? void 0 : address.toLowerCase()) && isConnected && (connector === null || connector === void 0 ? void 0 : connector.id) === w.id,
             });
         });
-    }, [rawWallets.length, status.status, address, isConnected, connector === null || connector === void 0 ? void 0 : connector.id]);
+    }, [rawWallets, status.status, address, isConnected, connector === null || connector === void 0 ? void 0 : connector.id]);
     const activeWallet = isConnected && connector ? wallets.find((w) => w.isActive) : undefined;
+    const [shouldSwitchToChain, setShouldSwitchToChain] = useState(null);
     useEffect(() => {
         if (connectToConnector)
             connect({ connector: connectToConnector.connector });
@@ -9176,6 +8999,7 @@ function useWallets(hookOptions = {}) {
                     hookOptions,
                 });
             }
+            let hasToSwitchChain = false;
             try {
                 const embeddedAccounts = await queryClient.ensureQueryData({
                     queryKey: ['openfortEmbeddedAccountsList'],
@@ -9191,7 +9015,7 @@ function useWallets(hookOptions = {}) {
                 let embeddedAccount;
                 if (walletAddress) {
                     const addressToMatch = walletAddress.toLowerCase();
-                    const accountToRecover = embeddedAccounts.find((w) => {
+                    let accountToRecover = embeddedAccounts.find((w) => {
                         if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) === AccountTypeEnum.EOA) {
                             return w.address.toLowerCase() === addressToMatch;
                         }
@@ -9200,23 +9024,23 @@ function useWallets(hookOptions = {}) {
                         }
                     });
                     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,
+                        logger.log(`No embedded wallet found for address ${walletAddress} in chain ${chainId}. Checking other chains.`);
+                        const accountToRecoverInDifferentChain = embeddedAccounts.find((w) => {
+                            return w.address.toLowerCase() === addressToMatch && !!w.chainId;
                         });
+                        if (!accountToRecoverInDifferentChain || !accountToRecoverInDifferentChain.chainId) {
+                            throw new OpenfortError(`Embedded wallet not found for address ${walletAddress}`, OpenfortErrorType.WALLET_ERROR);
+                        }
+                        logger.log(`Found embedded wallet for address ${walletAddress} in different chain ${accountToRecoverInDifferentChain.chainId}.`);
+                        hasToSwitchChain = true;
+                        accountToRecover = accountToRecoverInDifferentChain;
                     }
                     logger.log('Found embedded wallet to recover', accountToRecover);
                     if (((_b = optionsObject.recovery) === null || _b === void 0 ? void 0 : _b.recoveryMethod) &&
                         accountToRecover.recoveryMethod &&
                         optionsObject.recovery.recoveryMethod !== accountToRecover.recoveryMethod) {
                         logger.log('Recovery method does not match', optionsObject.recovery.recoveryMethod, accountToRecover.recoveryMethod);
-                        return onError({
-                            error: new OpenfortError("The recovery method you entered is incorrect and does not match the wallet's recovery method", OpenfortErrorType.WALLET_ERROR),
-                            options: optionsObject,
-                            hookOptions,
-                        });
+                        throw new OpenfortError("The recovery method you entered is incorrect and does not match the wallet's recovery method", OpenfortErrorType.WALLET_ERROR);
                     }
                     const recovery = {
                         recoveryMethod: (_c = accountToRecover.recoveryMethod) !== null && _c !== void 0 ? _c : RecoveryMethod.AUTOMATIC,
@@ -9234,11 +9058,7 @@ function useWallets(hookOptions = {}) {
                     if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) === AccountTypeEnum.EOA) {
                         accountToRecover = embeddedAccounts.find((w) => w.accountType === AccountTypeEnum.EOA);
                         if (!accountToRecover) {
-                            return onError({
-                                error: new OpenfortError('No embedded wallet found with type EOA', OpenfortErrorType.WALLET_ERROR),
-                                options: optionsObject,
-                                hookOptions,
-                            });
+                            throw new OpenfortError('No embedded wallet found with type EOA', OpenfortErrorType.WALLET_ERROR);
                         }
                     }
                     else {
@@ -9246,11 +9066,7 @@ function useWallets(hookOptions = {}) {
                         if (!accountToRecover) {
                             // 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,
-                                hookOptions,
-                            });
+                            throw new OpenfortError('No embedded wallet found for the current chain', OpenfortErrorType.WALLET_ERROR);
                         }
                     }
                     logger.log('Found embedded wallet to recover (without walletAddress)', accountToRecover);
@@ -9266,11 +9082,7 @@ function useWallets(hookOptions = {}) {
                     walletAddress = accountToRecover.address;
                 }
                 if (!embeddedAccount) {
-                    return onError({
-                        error: new OpenfortError('Failed to recover embedded wallet', OpenfortErrorType.WALLET_ERROR),
-                        options: optionsObject,
-                        hookOptions,
-                    });
+                    throw new OpenfortError('Failed to recover embedded wallet', OpenfortErrorType.WALLET_ERROR);
                 }
                 setStatus({
                     status: 'success',
@@ -9321,6 +9133,11 @@ function useWallets(hookOptions = {}) {
                     hookOptions,
                 });
             }
+            finally {
+                if (hasToSwitchChain) {
+                    setShouldSwitchToChain(chainId);
+                }
+            }
         }
         else {
             setStatus({
@@ -9334,6 +9151,19 @@ function useWallets(hookOptions = {}) {
         }
         return {};
     }, [wallets, setOpen, setRoute, setConnector, disconnectAsync, address, client, walletConfig, chainId, hookOptions]);
+    useEffect(() => {
+        (async () => {
+            if (shouldSwitchToChain) {
+                logger.log(`Switching to chain ${shouldSwitchToChain}.`);
+                // const a = await client.embeddedWallet.getEthereumProvider()
+                // const res = await switchChain(a, { id: shouldSwitchToChain })
+                const res = await switchChainAsync({ chainId: shouldSwitchToChain });
+                logger.log('Switched to chain', res);
+                updateEmbeddedAccounts();
+                setShouldSwitchToChain(null);
+            }
+        })();
+    }, [shouldSwitchToChain]);
     const queryClient = useQueryClient();
     const createWallet = useCallback(async ({ recovery, ...options } = {}) => {
         setStatus({
@@ -9343,18 +9173,10 @@ function useWallets(hookOptions = {}) {
         try {
             const accessToken = await client.getAccessToken();
             if (!accessToken) {
-                return onError({
-                    error: new OpenfortError('Openfort access token not found', OpenfortErrorType.WALLET_ERROR),
-                    hookOptions,
-                    options,
-                });
+                throw new OpenfortError('Openfort access token not found', OpenfortErrorType.WALLET_ERROR);
             }
             if (!walletConfig) {
-                return onError({
-                    error: new OpenfortError('Embedded signer not enabled', OpenfortErrorType.WALLET_ERROR),
-                    hookOptions,
-                    options,
-                });
+                throw new OpenfortError('Embedded signer not enabled', OpenfortErrorType.WALLET_ERROR);
             }
             const recoveryParams = await parseWalletRecovery(recovery);
             const embeddedAccount = await client.embeddedWallet.create({
@@ -9385,7 +9207,9 @@ function useWallets(hookOptions = {}) {
         }
         catch (e) {
             const errorObj = e instanceof Error ? e : new Error('Failed to create wallet');
-            const error = new OpenfortError('Failed to create wallet', OpenfortErrorType.WALLET_ERROR, { error: errorObj });
+            const error = e instanceof OpenfortError
+                ? e
+                : new OpenfortError('Failed to create wallet', OpenfortErrorType.WALLET_ERROR, { error: errorObj });
             setStatus({
                 status: 'error',
                 error,
@@ -11638,7 +11462,7 @@ const LoadWallets = () => {
     return (jsx(PageContent, { onBack: !user ? 'back' : null, children: jsx(Loader, { header: "Setting up wallet", isError: isError, description: isError ? errorMessage : 'Setting up wallets' }) }));
 };
 
-const IconContainer$2 = styled(motion.div) `
+const IconContainer$1 = styled(motion.div) `
   transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
   display: flex;
   align-items: center;
@@ -11696,7 +11520,7 @@ const IconContainer$2 = styled(motion.div) `
           }
         `}
 `;
-const CopyToClipboardIcon = ({ copied, small }) => (jsx(IconContainer$2, { "$clipboard": copied, children: jsx(CopyToClipboardIcon$1, { style: {
+const CopyToClipboardIcon = ({ copied, small }) => (jsx(IconContainer$1, { "$clipboard": copied, children: jsx(CopyToClipboardIcon$1, { style: {
             transform: small ? 'scale(1)' : 'translateX(3px) scale(1.5)',
             opacity: small || copied ? 1 : 0.3,
         } }) }));
@@ -11819,10 +11643,8 @@ const MobileConnectors = () => {
     var _a;
     const context = useOpenfort();
     const locales = useLocales();
-    const { connect: { getUri }, } = useWeb3();
-    const wcUri = getUri();
     const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
-    const wallets = useWallets$1();
+    const wallets = useWagmiWallets();
     // filter out installed wallets
     const walletsIdsToDisplay = (_a = Object.keys(walletConfigs).filter((walletId) => {
         const wallet = walletConfigs[walletId];
@@ -11836,7 +11658,7 @@ const MobileConnectors = () => {
         context.setRoute(routes.CONNECT_WITH_MOBILE);
         context.setConnector({ id: walletId });
     };
-    return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container$2, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
+    return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container$2, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { children: [walletsIdsToDisplay
                                     .sort(
                                 // sort by name
                                 (a, b) => {
@@ -11868,7 +11690,7 @@ const MobileConnectors = () => {
                         justifyContent: 'center',
                         gap: 14,
                         paddingTop: 8,
-                    }, children: jsx(CopyToClipboard, { variant: "button", string: wcUri, children: locales.copyToClipboard }) }))] }) }));
+                    }, children: jsx(CopyToClipboard, { variant: "button", children: locales.copyToClipboard }) }))] }) }));
 };
 
 const Introduction = () => {
@@ -12501,7 +12323,7 @@ const PoweredByFooter = ({ showDisclaimer }) => {
     const { uiConfig: options } = useOpenfort();
     return (jsxs(Container, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (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.io/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.io/privacy', target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
                     window.open('https://www.openfort.io/', '_blank');
-                }, children: [jsx("span", { children: "Powered by" }), jsx(IconContainer$1, { children: jsx(Logos.Openfort, {}) }), jsx("span", { children: "Openfort" })] })] }));
+                }, children: [jsx("span", { children: "Powered by" }), jsx(IconContainer, { children: jsx(Logos.Openfort, {}) }), jsx("span", { children: "Openfort" })] })] }));
 };
 const Disclaimer = styled(motion.div) `
   padding: 8px 50px 0px 50px;
@@ -12524,7 +12346,7 @@ const Disclaimer = styled(motion.div) `
     }
   }
 `;
-const IconContainer$1 = styled.div `
+const IconContainer = styled.div `
   width: 20px;
   height: 20px;
   margin-left: 5px;
@@ -12729,7 +12551,7 @@ const ProvidersHeader = styled(motion.h3) `
 
 const WalletIcon = ({ provider }) => {
     var _a;
-    const wallets = useWallets$1();
+    const wallets = useWagmiWallets();
     const wallet = useMemo(() => {
         return wallets.find((w) => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === provider.walletClientType; });
     }, [provider]);
@@ -12941,11 +12763,9 @@ const RecoverPasswordWallet = ({ wallet, onBack, logoutOnBack, }) => {
         if (recoveryError)
             triggerResize();
     }, [recoveryError]);
-    const ensFallbackConfig = useEnsFallbackConfig();
     const { data: ensName } = useEnsName({
         chainId: 1,
         address: wallet.address,
-        config: ensFallbackConfig,
     });
     return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "130px", logoCenter: {
                     logo: jsx(KeyIcon, {}),
@@ -13752,113 +13572,67 @@ const ConnectWithOAuth = () => {
             } }) }));
 };
 
-const IconContainer = styled(motion.div) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 47px;
-  height: 52px;
-  min-width: 47px;
-  min-height: 52px;
-  svg {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
-`;
-const ScanIconWithLogos = ({ logo }) => {
-    const logoList = [
-        jsx(Logos.MetaMask, { background: true }),
-        jsx(Logos.Coinbase, { background: true }),
-        jsx(Logos.Crypto, {}),
-        jsx(Logos.ImToken, {}),
-        jsx(Logos.Argent, {}),
-        jsx(Logos.Trust, {}),
-    ];
-    return (jsx(IconContainer, { children: jsxs("svg", { "aria-hidden": "true", width: "47", height: "52", viewBox: "0 0 47 52", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { mask: "url(#gradient-mask)", children: [jsx("path", { d: "M7 14.5C7 11.4624 9.46243 9 12.5 9H31.5C34.5376 9 37 11.4624 37 14.5V47H7V14.5Z", fill: "var(--ck-graphic-scaniconwithlogos-04)" }), logo ? (jsx("foreignObject", { x: "13", y: "21", width: "18", height: "18", rx: "5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 5 }, children: logo }) })) : (jsxs(Fragment, { children: [jsx("foreignObject", { x: "12", y: "15", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[0] }) }), jsx("foreignObject", { x: "23", y: "15", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[1] }) }), jsx("foreignObject", { x: "12", y: "26", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[2] }) }) }), jsx("foreignObject", { x: "23", y: "26", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[3] }) }), jsx("foreignObject", { x: "12", y: "37", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[4] }) }), jsx("foreignObject", { x: "23", y: "37", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: 'hidden', borderRadius: 2.5 }, children: logoList[5] }) })] })), jsx("path", { d: "M36 47V13.7143C36 11.1107 33.8893 9 31.2857 9H12.7143C10.1107 9 8 11.1107 8 13.7143V47", stroke: "url(#paint0_linear_924_12568)", strokeWidth: "2" }), jsx("path", { d: "M15 10H29C29 11.1046 28.1046 12 27 12H17C15.8954 12 15 11.1046 15 10Z", fill: "var(--ck-graphic-scaniconwithlogos-01)" }), jsx("rect", { x: "1", y: "47", width: "43", height: "5", fill: "var(--ck-tooltip-background)" }), jsx("rect", { x: "22", y: "1", width: "24", height: "24", rx: "12", fill: "var(--ck-graphic-scaniconwithlogos-03)", stroke: "var(--ck-tooltip-background)", strokeWidth: "2" }), jsx("rect", { x: "34.5", y: "10", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "31", y: "10", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "31", y: "13.5", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "34.5", y: "13.5", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("path", { d: "M28.5 10.5V9C28.5 8.17157 29.1716 7.5 30 7.5H31.5", stroke: "#373737", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M36.5 7.5L38 7.5C38.8284 7.5 39.5 8.17157 39.5 9L39.5 10.5", stroke: "#373737", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M39.5 15.5L39.5 17C39.5 17.8284 38.8284 18.5 38 18.5L36.5 18.5", stroke: "#373737", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M31.5 18.5L30 18.5C29.1716 18.5 28.5 17.8284 28.5 17L28.5 15.5", stroke: "#373737", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_924_12568", x1: "22", y1: "8.2549", x2: "22", y2: "47", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-graphic-scaniconwithlogos-01)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-graphic-scaniconwithlogos-02)" })] }), jsxs("linearGradient", { id: "linear-gradient-mask", x1: "47", y1: "42", x2: "47", y2: "47", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "white" }), jsx("stop", { offset: "1", stopColor: "black", stopOpacity: "0" })] }), jsx("mask", { id: "gradient-mask", children: jsx("rect", { x: "0", y: "0", width: "47", height: "52", fill: "url(#linear-gradient-mask)" }) })] })] }) }));
-};
-
-const ConnectWithQRCode = ({ switchConnectMethod }) => {
-    var _a, _b, _c, _d;
-    const { connector, setRoute, uiConfig } = useOpenfort();
-    const id = connector.id;
+const ConnectWithSiwe = () => {
+    const { isConnected, address } = useAccount();
+    const { connector, setRoute } = useOpenfort();
     const wallet = useWallet(connector.id);
-    const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
-    const { connect: { getUri }, } = useWeb3();
-    const wcUri = getUri(id);
-    const uri = wcUri ? ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, wcUri)) !== null && _b !== void 0 ? _b : wcUri) : undefined;
-    const locales = useLocales({
-        CONNECTORNAME: wallet === null || wallet === void 0 ? void 0 : wallet.name,
-    });
-    const connectWithSiwe = useConnectWithSiwe();
-    const { isConnected } = useAccount();
-    const { setOpen } = useOpenfort();
-    const { disconnect } = useDisconnect();
-    const [isFirstFrame, setIsFirstFrame] = React.useState(true);
+    const [error, setError] = useState(undefined);
+    const siwe = useConnectWithSiwe();
+    const [description, setDescription] = useState(undefined);
+    const connectWithSiwe = () => {
+        setDescription('Requesting signature to verify wallet...');
+        siwe({
+            walletClientType: connector.id,
+            onConnect: () => {
+                setRoute(routes.PROFILE);
+            },
+            onError: (error) => {
+                setError(error || 'Connection failed');
+                setDescription(undefined);
+            },
+        });
+    };
     useEffect(() => {
-        // When the component is first rendered, we disconnect the user if they are connected
-        if (isFirstFrame) {
-            setIsFirstFrame(false);
-            if (isConnected) {
-                disconnect();
-            }
+        if (isConnected) {
+            connectWithSiwe();
         }
-        else {
-            // When connected with WalletConnect, we connect with SIWE
-            if (isConnected) {
-                connectWithSiwe({
-                    // connectorType: 'walletConnect',
-                    // walletClientType: 'walletConnect',
-                    onError: (error) => {
-                        logger.log(error);
-                        disconnect();
-                    },
-                    onConnect: () => {
-                        setOpen(false);
-                    },
-                });
-            }
+    }, [isConnected]);
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: address,
+    });
+    return (jsxs(PageContent, { children: [jsxs(ModalBody, { style: { textAlign: 'center' }, children: ["Connected with", jsx(CopyToClipboard, { string: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address) })] }), jsx(Loader, { header: 'Sign in to your wallet', icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: !!error, description: error !== null && error !== void 0 ? error : description, onRetry: () => connectWithSiwe() })] }));
+};
+const ConnectWithWalletConnect = () => {
+    const { connector } = useOpenfort();
+    const wallet = useWallet(connector.id);
+    const [error, setError] = useState(undefined);
+    const { open: openWalletConnectModal } = useWalletConnectModal();
+    useEffect(() => {
+        openWCModal();
+    }, []);
+    const openWCModal = async () => {
+        setError(undefined);
+        const { error } = await openWalletConnectModal();
+        if (error) {
+            setError(error);
         }
+    };
+    return (jsx(PageContent, { children: jsx(Loader, { header: error ? 'Error connecting wallet.' : `Connecting...`, icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: !!error, description: error, onRetry: () => openWCModal() }) }));
+};
+const ConnectWithQRCode = () => {
+    const { connector, triggerResize } = useOpenfort();
+    const { isConnected } = useAccount();
+    useEffect(() => {
+        triggerResize();
     }, [isConnected]);
+    const wallet = useWallet(connector.id);
     if (!wallet)
-        return jsxs(Fragment, { children: ["Wallet not found ", connector.id] });
-    const downloads = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls;
-    const extensions = {
-        chrome: downloads === null || downloads === void 0 ? void 0 : downloads.chrome,
-        firefox: downloads === null || downloads === void 0 ? void 0 : downloads.firefox,
-        brave: downloads === null || downloads === void 0 ? void 0 : downloads.brave,
-        edge: downloads === null || downloads === void 0 ? void 0 : downloads.edge,
-        safari: downloads === null || downloads === void 0 ? void 0 : downloads.safari,
-    };
-    detectBrowser();
-    const hasApps = downloads && Object.keys(downloads).length !== 0;
-    extensions
-        ? {
-            name: Object.keys(extensions)[0],
-            label: ((_c = Object.keys(extensions)[0]) === null || _c === void 0 ? void 0 : _c.charAt(0).toUpperCase()) + ((_d = Object.keys(extensions)[0]) === null || _d === void 0 ? void 0 : _d.slice(1)), // Capitalise first letter, but this might be better suited as a lookup table
-            url: extensions[Object.keys(extensions)[0]],
-        }
-        : undefined;
-    const showAdditionalOptions = isWalletConnectConnector(id);
-    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [jsx(CustomQRCode, { value: uri, image: wallet === null || wallet === void 0 ? void 0 : wallet.icon, tooltipMessage: isWalletConnectConnector(id) ? (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, {}), jsx("span", { children: locales.scanScreen_tooltip_walletConnect })] })) : (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, { logo: wallet === null || wallet === void 0 ? void 0 : wallet.icon }), jsx("span", { children: locales.scanScreen_tooltip_default })] })) }), showAdditionalOptions ? jsx(OrDivider, {}) : hasApps && jsx(OrDivider, { children: locales.dontHaveTheApp })] }), showAdditionalOptions && ( // for walletConnect
-            jsxs("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 14,
-                }, children: [uiConfig.walletConnectCTA !== 'modal' && (jsx(CopyToClipboard, { variant: "button", string: uri, children: uiConfig.walletConnectCTA === 'link' ? locales.copyToClipboard : locales.copyCode })), uiConfig.walletConnectCTA !== 'link' && (jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: openW3M, disabled: isOpenW3M, waiting: isOpenW3M, children: uiConfig.walletConnectCTA === 'modal' ? locales.useWalletConnectModal : locales.useModal }))] })), isFamilyAccountsConnector(wallet.id) && (jsxs(Fragment, { children: [jsx(OrDivider, {}), jsx(Button, { onClick: () => switchConnectMethod(id), children: locales.loginWithEmailOrPhone })] })), hasApps && (jsx(Button, { onClick: () => {
-                    setRoute(routes.DOWNLOAD);
-                }, 
-                /*
-                  icon={
-                    <div style={{ background: connectorInfo?.icon }}>
-                      {connectorInfo?.logos.default}
-                    </div>
-                  }
-                  roundedIcon
-                  */
-                download: true, children: locales.getWalletName }))] }));
+        return jsx(Loader, { header: `Connector not found: ${connector.id}`, isError: true });
+    if (isConnected) {
+        return jsx(ConnectWithSiwe, {});
+    }
+    return jsx(ConnectWithWalletConnect, {});
 };
 
 const states$1 = {
@@ -13893,11 +13667,7 @@ const ConnectUsing = () => {
         return jsx(ConnectWithOAuth, {});
     if (!wallet)
         return jsxs(Alert, { children: ["Connector not found ", context.connector.id] });
-    return (jsxs(AnimatePresence, { children: [status === states$1.QRCODE && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants$1, children: jsx(ConnectWithQRCode, { switchConnectMethod: (_id) => {
-                        //if (id) setId(id);
-                        setStatus(states$1.INJECTOR);
-                        setTimeout(context.triggerResize, 10); // delay required here for modal to resize
-                    } }) }, states$1.QRCODE)), status === states$1.INJECTOR && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants$1, children: jsx(ConnectWithInjector, { switchConnectMethod: (_id) => {
+    return (jsxs(AnimatePresence, { children: [status === states$1.QRCODE && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants$1, children: jsx(ConnectWithQRCode, {}) }, states$1.QRCODE)), status === states$1.INJECTOR && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants$1, children: jsx(ConnectWithInjector, { switchConnectMethod: (_id) => {
                         //if (id) setId(id);
                         setStatus(states$1.QRCODE);
                         setTimeout(context.triggerResize, 10); // delay required here for modal to resize
@@ -13946,21 +13716,13 @@ const ConnectWithMobile = () => {
     const { isConnected } = useAccount();
     const [status, setStatus] = useState(isConnected ? states.INIT : states.CONNECTING);
     const [description, setDescription] = useState(undefined);
-    const { connect: { getUri }, } = useWeb3();
-    const wcUri = getUri();
     const [hasReturned, setHasReturned] = useState(false);
     const siwe = useConnectWithSiwe();
-    const openApp = (url) => {
+    const openApp = () => {
         var _a;
-        const uri = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, url !== null && url !== void 0 ? url : '');
-        logger.log('Opening wallet app with uri', { uri, url, wallet, walletId, walletConfigs, connectorId: connector.id });
+        const uri = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, '');
         if (uri) {
-            if (url) {
-                window.location.href = uri;
-            }
-            else {
-                window.location.href = uri.replace('?uri=', '');
-            }
+            window.location.href = uri.replace('?uri=', '');
         }
         else {
             setStatus(states.ERROR);
@@ -13987,7 +13749,6 @@ const ConnectWithMobile = () => {
     useEffect(() => {
         switch (status) {
             case states.INIT:
-                openApp(wcUri);
                 break;
             case states.CONNECTING:
                 setDescription('Requesting signature to verify wallet...');
@@ -14010,7 +13771,7 @@ const ConnectWithMobile = () => {
                 } }), isConnected ? (jsx(Button, { onClick: () => {
                     openApp();
                 }, children: "Sign in App" })) : (jsx(Button, { onClick: () => {
-                    openApp(wcUri);
+                    openApp();
                 }, children: "Sign in App" })), jsx(DownloadFooter, { children: jsxs(FitText, { children: ["Don't have ", (_a = wallet.name) !== null && _a !== void 0 ? _a : connector.id.split(',')[0], " installed?", ' ', jsx("a", { style: { marginLeft: 5 }, href: isAndroid() ? (_b = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) === null || _b === void 0 ? void 0 : _b.android : (_c = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) === null || _c === void 0 ? void 0 : _c.ios, target: "_blank", rel: "noreferrer", children: "GET" })] }) })] }));
 };
 
@@ -14140,6 +13901,34 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
     return (jsx(ConnectKitThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: jsx(Modal, { open: context.open, pages: pages, pageId: route, onClose: closeable ? hide : undefined }) }));
 };
 
+const Web3Context = createContext({
+    connect: {
+        getUri: () => '',
+    },
+    dapp: {
+        chains: [],
+    },
+    account: undefined,
+});
+const Web3ContextProvider = ({ children }) => {
+    const { address: currentAddress, chain } = useAccount();
+    const chainIsSupported = useChainIsSupported(chain === null || chain === void 0 ? void 0 : chain.id);
+    const chains = useChains();
+    const value = {
+        dapp: {
+            chains,
+        },
+        account: currentAddress
+            ? {
+                chain,
+                chainIsSupported,
+                address: currentAddress,
+            }
+            : undefined,
+    };
+    return jsx(Web3Context.Provider, { value: value, children: children });
+};
+
 /**
  * Provides Openfort configuration and context to descendant components.
  *
@@ -14168,7 +13957,7 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
  * }
  * ```
  */
-const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMode = false, publishableKey, walletConfig, overrides, thirdPartyAuth, }) => {
+const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMode, publishableKey, walletConfig, overrides, thirdPartyAuth, }) => {
     var _a, _b, _c, _d, _e;
     // OpenfortProvider must be within a WagmiProvider
     if (!React.useContext(WagmiContext)) {
@@ -14179,9 +13968,35 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     if (React.useContext(Openfortcontext)) {
         throw new Error('Multiple, nested usages of OpenfortProvider detected. Please use only one.');
     }
-    useMemo(() => {
-        logger.enabled = !!debugMode;
-    }, []);
+    const debugModeOptions = useMemo(() => {
+        const getDebugMode = () => {
+            var _a, _b, _c;
+            if (typeof debugMode === 'undefined') {
+                return {
+                    shieldDebugMode: false,
+                    openfortCoreDebugMode: false,
+                    openfortReactDebugMode: false,
+                };
+            }
+            else if (typeof debugMode === 'boolean') {
+                return {
+                    shieldDebugMode: debugMode,
+                    openfortCoreDebugMode: debugMode,
+                    openfortReactDebugMode: debugMode,
+                };
+            }
+            else {
+                return {
+                    shieldDebugMode: (_a = debugMode.shieldDebugMode) !== null && _a !== void 0 ? _a : false,
+                    openfortCoreDebugMode: (_b = debugMode.openfortCoreDebugMode) !== null && _b !== void 0 ? _b : false,
+                    openfortReactDebugMode: (_c = debugMode.openfortReactDebugMode) !== null && _c !== void 0 ? _c : false,
+                };
+            }
+        };
+        const debugModeOptions = getDebugMode();
+        logger.enabled = debugModeOptions.openfortReactDebugMode;
+        return debugModeOptions;
+    }, [debugMode]);
     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
@@ -14323,7 +14138,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         // Other configuration
         uiConfig: safeUiConfig,
         errorMessage,
-        debugMode,
+        debugMode: debugModeOptions,
         emailInput,
         setEmailInput,
         resize,
@@ -14332,14 +14147,20 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         overrides,
         thirdPartyAuth,
     };
-    return createElement(Openfortcontext.Provider, { value }, jsx(Web3ContextProvider, { enabled: open, children: jsxs(CoreOpenfortProvider, { baseConfiguration: {
-                publishableKey,
-            }, shieldConfiguration: walletConfig
-                ? {
-                    shieldPublishableKey: walletConfig.shieldPublishableKey,
-                    debug: debugMode,
-                }
-                : undefined, overrides: overrides, thirdPartyAuth: thirdPartyAuth, onConnect: onConnect, onDisconnect: onDisconnect, children: [children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : ckMode, customTheme: ckCustomTheme })] }) }));
+    return createElement(Openfortcontext.Provider, { value }, jsx(Web3ContextProvider, { children: jsxs(CoreOpenfortProvider, { openfortConfig: {
+                baseConfiguration: {
+                    publishableKey,
+                },
+                shieldConfiguration: walletConfig
+                    ? {
+                        shieldPublishableKey: walletConfig.shieldPublishableKey,
+                        debug: debugModeOptions.shieldDebugMode,
+                    }
+                    : undefined,
+                debug: debugModeOptions.openfortCoreDebugMode,
+                overrides,
+                thirdPartyAuth,
+            }, onConnect: onConnect, onDisconnect: onDisconnect, children: [children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : ckMode, customTheme: ckCustomTheme })] }) }));
 };
 
 /**
@@ -14737,7 +14558,7 @@ const useAuthCallback = ({ enabled = true, // Automatically handle OAuth and ema
 const useWalletAuth = (hookOptions = {}) => {
     const { updateUser } = useOpenfortCore();
     const siwe = useConnectWithSiwe();
-    const availableWallets = useWallets$1(); // TODO: Use this to get the wallet client type
+    const availableWallets = useWagmiWallets(); // TODO: Use this to get the wallet client type
     const { disconnect } = useDisconnect();
     const [walletConnectingTo, setWalletConnectingTo] = useState(null);
     const [shouldConnectWithSiwe, setShouldConnectWithSiwe] = useState(false);