@openfort/react 1.0.8 → 1.0.9

package/build/components/Common/ConnectorList/index.js

@@ -14,7 +14,6 @@ import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, Re
 
 const ConnectorList = () => {
     const context = useOpenfort();
-    const isMobile = useIsMobile();
     const wallets = useExternalConnectors();
     const { lastConnectorId } = useLastConnector();
     const familyConnector = useFamilyConnector();
@@ -31,7 +30,7 @@ const ConnectorList = () => {
             ...wallets.filter((wallet) => lastConnectorId === wallet.connector.id && wallet.id !== embeddedWalletId),
             ...wallets.filter((wallet) => lastConnectorId !== wallet.connector.id && wallet.id !== embeddedWalletId),
         ];
-    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))) }))] }));
+    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": false, "$totalResults": walletsToDisplay.length, children: filteredWallets.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
 };
 const ConnectorItem = ({ wallet, isRecent }) => {
     var _a;
@@ -44,9 +43,9 @@ const ConnectorItem = ({ wallet, isRecent }) => {
         return (jsxs(Fragment, { children: [jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, 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: async () => {
-            // Disconnect if the same connector is selected, otherwise wagmi won't trigger the connection flow
-            // Disconnect for wallet connect to work
-            if (bridge && (wallet.id === 'walletConnect' || wallet.id === (connector === null || connector === void 0 ? void 0 : connector.id))) {
+            var _a;
+            // Only disconnect if actually connected and switching connectors or reconnecting WC
+            if (((_a = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _a === void 0 ? void 0 : _a.isConnected) && (wallet.id === 'walletConnect' || wallet.id === (connector === null || connector === void 0 ? void 0 : connector.id))) {
                 await bridge.disconnect();
             }
             context.setRoute({ route: routes.CONNECT, connectType: 'linkIfUserConnectIfNoUser' });

package/build/components/Common/ConnectorList/index.js.map

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

package/build/components/ConnectModal/ConnectWithQRCode.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { useEthereumBridge } from '../../ethereum/OpenfortEthereumBridgeContext.js';
 import { useWalletConnectModal } from '../../hooks/useWalletConnectModal.js';
 import 'detect-browser';
@@ -46,6 +46,7 @@ const ConnectWithWalletConnect = () => {
     const wallet = useExternalConnector(connector.id);
     const { open: openWalletConnectModal } = useWalletConnectModal();
     const [error, setError] = useState(undefined);
+    const hasOpenedRef = useRef(false);
     const openModal = useCallback(async () => {
         setError(undefined);
         const { error } = await openWalletConnectModal();
@@ -53,6 +54,9 @@ const ConnectWithWalletConnect = () => {
             setError(error);
     }, [openWalletConnectModal]);
     useEffect(() => {
+        if (hasOpenedRef.current)
+            return;
+        hasOpenedRef.current = true;
         openModal();
     }, [openModal]);
     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: openModal }) }));

package/build/components/ConnectModal/ConnectWithQRCode.js.map

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

package/build/components/Openfort/OpenfortProvider.js

@@ -32,9 +32,10 @@ let openfortProviderWarnedNoWagmi = false;
  * ```
  */
 const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMode, publishableKey, walletConfig, overrides, thirdPartyAuth, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const bridge = useContext(OpenfortEthereumBridgeContext);
     const hasWagmi = !!bridge;
+    const hasExternalWallets = (_b = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) === null || _a === void 0 ? void 0 : _a.some((c) => c.id === 'walletConnect')) !== null && _b !== void 0 ? _b : false;
     const hasSolana = !!(walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.solana);
     // Only allow for mounting OpenfortProvider once, so we avoid weird global
     // state collisions.
@@ -61,7 +62,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         logger.enabled = result.openfortReactDebugMode;
         return result;
     }, [debugMode]);
-    const injectedConnector = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) === null || _a === void 0 ? void 0 : _a.find((c) => c.id === 'injected');
+    const injectedConnector = (_c = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) === null || _c === void 0 ? void 0 : _c.find((c) => c.id === 'injected');
     const allowAutomaticRecovery = !!((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.createEncryptedSessionEndpoint) || (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession));
     const defaultUIOptions = useMemo(() => ({
         appName: 'Openfort',
@@ -93,19 +94,19 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
             allowedMethods: [RecoveryMethod.PASSWORD, ...(allowAutomaticRecovery ? [RecoveryMethod.AUTOMATIC] : [])],
             defaultMethod: allowAutomaticRecovery ? RecoveryMethod.AUTOMATIC : RecoveryMethod.PASSWORD,
         },
-        authProviders: hasWagmi
+        authProviders: hasExternalWallets
             ? [UIAuthProvider.GUEST, UIAuthProvider.EMAIL_OTP, UIAuthProvider.WALLET, UIAuthProvider.GOOGLE]
             : [UIAuthProvider.GUEST, UIAuthProvider.EMAIL_OTP, UIAuthProvider.GOOGLE],
-    }), [allowAutomaticRecovery, hasWagmi]);
+    }), [allowAutomaticRecovery, hasExternalWallets]);
     const safeUiConfig = useMemo(() => {
         var _a, _b, _c, _d, _e;
         const merged = { ...defaultUIOptions, ...uiConfig };
         let authProviders = (_a = merged.authProviders) !== null && _a !== void 0 ? _a : defaultUIOptions.authProviders;
-        if (!hasWagmi && authProviders.includes(UIAuthProvider.WALLET)) {
+        if (!hasExternalWallets && authProviders.includes(UIAuthProvider.WALLET)) {
             authProviders = authProviders.filter((p) => p !== UIAuthProvider.WALLET);
             if (process.env.NODE_ENV === 'development' && !openfortProviderWarnedNoWagmi) {
                 openfortProviderWarnedNoWagmi = true;
-                logger.warn('[@openfort/react] UIAuthProvider.WALLET was removed from authProviders because no Wagmi bridge is present. Add OpenfortWagmiBridge to enable external wallet sign-in.');
+                logger.warn('[@openfort/react] UIAuthProvider.WALLET was removed from authProviders because no WalletConnect connector is present. Pass walletConnectProjectId to getDefaultConfig/getDefaultConnectors to enable external wallet sign-in.');
             }
         }
         const walletRecovery = {
@@ -117,15 +118,15 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
             logger.warn('Automatic recovery method was removed from allowedMethods because no recovery options are configured in the walletConfig. Please provide either createEncryptedSessionEndpoint or getEncryptionSession to enable automatic recovery.');
         }
         return { ...merged, authProviders, walletRecovery };
-    }, [defaultUIOptions, uiConfig, hasWagmi, allowAutomaticRecovery]);
+    }, [defaultUIOptions, uiConfig, hasExternalWallets, allowAutomaticRecovery]);
     useEffect(() => {
         if (typeof window !== 'undefined' && safeUiConfig.bufferPolyfill && !window.Buffer) {
             window.Buffer = Buffer;
         }
     }, [safeUiConfig.bufferPolyfill]);
-    const [ckTheme, setTheme] = useState((_b = safeUiConfig.theme) !== null && _b !== void 0 ? _b : 'auto');
-    const [ckMode, setMode] = useState((_c = safeUiConfig.mode) !== null && _c !== void 0 ? _c : 'auto');
-    const [ckCustomTheme, setCustomTheme] = useState((_d = safeUiConfig.customTheme) !== null && _d !== void 0 ? _d : {});
+    const [ckTheme, setTheme] = useState((_d = safeUiConfig.theme) !== null && _d !== void 0 ? _d : 'auto');
+    const [ckMode, setMode] = useState((_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : 'auto');
+    const [ckCustomTheme, setCustomTheme] = useState((_f = safeUiConfig.customTheme) !== null && _f !== void 0 ? _f : {});
     const [ckLang, setLang] = useState('en-US');
     const [open, setOpenWithoutHistory] = useState(false);
     const initialConnector = { id: '' };
@@ -138,7 +139,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     const [sendForm, setSendForm] = useState(defaultSendFormState);
     const [buyForm, setBuyForm] = useState(defaultBuyFormState);
     const [headerLeftSlot, setHeaderLeftSlot] = useState(null);
-    const [chainType, setChainType] = useState((_e = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.chainType) !== null && _e !== void 0 ? _e : ChainTypeEnum.EVM);
+    const [chainType, setChainType] = useState((_g = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.chainType) !== null && _g !== void 0 ? _g : ChainTypeEnum.EVM);
     const setOpen = useCallback((value) => {
         if (value) {
             setRouteHistory([]);
@@ -170,10 +171,10 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
             return chainIds.map((id) => buildChainFromConfig(id, rpcUrls));
         }
         return [];
-    }, [(_f = bridge === null || bridge === void 0 ? void 0 : bridge.switchChain) === null || _f === void 0 ? void 0 : _f.chains, (_g = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _g === void 0 ? void 0 : _g.rpcUrls, (_h = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _h === void 0 ? void 0 : _h.chainId]);
+    }, [(_h = bridge === null || bridge === void 0 ? void 0 : bridge.switchChain) === null || _h === void 0 ? void 0 : _h.chains, (_j = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _j === void 0 ? void 0 : _j.rpcUrls, (_k = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _k === void 0 ? void 0 : _k.chainId]);
     const chain = bridge === null || bridge === void 0 ? void 0 : bridge.account.chain;
-    const isConnected = (_j = bridge === null || bridge === void 0 ? void 0 : bridge.account.isConnected) !== null && _j !== void 0 ? _j : false;
-    const isChainSupported = !(chain === null || chain === void 0 ? void 0 : chain.id) || ((_l = (_k = bridge === null || bridge === void 0 ? void 0 : bridge.config.chains) === null || _k === void 0 ? void 0 : _k.some((c) => c.id === chain.id)) !== null && _l !== void 0 ? _l : false);
+    const isConnected = (_l = bridge === null || bridge === void 0 ? void 0 : bridge.account.isConnected) !== null && _l !== void 0 ? _l : false;
+    const isChainSupported = !(chain === null || chain === void 0 ? void 0 : chain.id) || ((_o = (_m = bridge === null || bridge === void 0 ? void 0 : bridge.config.chains) === null || _m === void 0 ? void 0 : _m.some((c) => c.id === chain.id)) !== null && _o !== void 0 ? _o : false);
     useEffect(() => {
         if (hasWagmi && isConnected && safeUiConfig.enforceSupportedChains && !isChainSupported) {
             setOpen(true);
@@ -335,7 +336,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
                 }, children: JSON.stringify(routeHistory.map((item) => Object.fromEntries(Object.entries(item).map(([key, value]) => [
                     key,
                     typeof value === 'object' && value !== null ? '[object]' : value,
-                ]))), null, 2) })), children, jsx(Suspense, { fallback: null, children: jsx(LazyConnectKitModal, { lang: ckLang, theme: ckTheme, mode: (_m = safeUiConfig.mode) !== null && _m !== void 0 ? _m : ckMode, customTheme: ckCustomTheme }) })] }));
+                ]))), null, 2) })), children, jsx(Suspense, { fallback: null, children: jsx(LazyConnectKitModal, { lang: ckLang, theme: ckTheme, mode: (_p = safeUiConfig.mode) !== null && _p !== void 0 ? _p : ckMode, customTheme: ckCustomTheme }) })] }));
     return (jsx(UIContext.Provider, { value: connectUIValue, children: jsx(OpenfortContext.Provider, { value: value, children: jsx(CoreOpenfortProvider, { openfortConfig: {
                     baseConfiguration: { publishableKey },
                     shieldConfiguration: walletConfig

package/build/components/Openfort/OpenfortProvider.js.map

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

package/build/hooks/useWalletConnectModal.d.ts

@@ -1,8 +1,8 @@
 export declare function useWalletConnectModal(): {
     isOpen: boolean;
     open: () => Promise<{
-        error: string;
-    } | {
         error?: undefined;
+    } | {
+        error: string;
     }>;
 };

package/build/hooks/useWalletConnectModal.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useEthereumBridge } from '../ethereum/OpenfortEthereumBridgeContext.js';
 import { isWalletConnectConnector } from '../utils/index.js';
 import { logger } from '../utils/logger.js';
@@ -6,53 +6,58 @@ import { logger } from '../utils/logger.js';
 function useWalletConnectModal() {
     const bridge = useEthereumBridge();
     const [isOpen, setIsOpen] = useState(false);
-    return {
-        isOpen,
-        open: async () => {
-            var _a;
-            const w3mcss = document.createElement('style');
-            w3mcss.textContent = `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 connectors = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.connectors) !== null && _a !== void 0 ? _a : [];
-            const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
-            if (clientConnector && (bridge === null || bridge === void 0 ? void 0 : bridge.connectAsync)) {
-                try {
-                    setIsOpen(true);
-                    try {
-                        await bridge.connectAsync({ connector: clientConnector });
-                    }
-                    catch (err) {
-                        logger.log('WalletConnect', err);
-                        return {
-                            error: 'Connection failed',
-                        };
-                    }
-                    setIsOpen(false);
-                    removeChild();
-                    return {};
-                }
-                catch (err) {
-                    logger.log('Could not get WalletConnect provider', err);
-                    removeChild();
-                    return {
-                        error: 'Could not get WalletConnect provider',
-                    };
-                }
+    const bridgeRef = useRef(bridge);
+    bridgeRef.current = bridge;
+    const connectingRef = useRef(false);
+    const open = useCallback(async () => {
+        var _a;
+        if (connectingRef.current)
+            return {};
+        connectingRef.current = true;
+        const currentBridge = bridgeRef.current;
+        const w3mcss = document.createElement('style');
+        w3mcss.textContent = `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);
             }
-            else {
+        };
+        const connectors = (_a = currentBridge === null || currentBridge === void 0 ? void 0 : currentBridge.connectors) !== null && _a !== void 0 ? _a : [];
+        const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
+        if (clientConnector && (currentBridge === null || currentBridge === void 0 ? void 0 : currentBridge.connectAsync)) {
+            try {
+                currentBridge.reset();
+                setIsOpen(true);
+                await currentBridge.connectAsync({ connector: clientConnector });
+                setIsOpen(false);
                 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.',
-                };
+                connectingRef.current = false;
+                return {};
             }
-        },
-    };
+            catch (err) {
+                setIsOpen(false);
+                removeChild();
+                connectingRef.current = false;
+                const message = err instanceof Error ? err.message : String(err);
+                if (message.includes('Connection request reset')) {
+                    currentBridge.reset();
+                    return { error: 'Connection cancelled' };
+                }
+                logger.log('WalletConnect', err);
+                return { error: 'Connection failed' };
+            }
+        }
+        else {
+            removeChild();
+            connectingRef.current = false;
+            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.',
+            };
+        }
+    }, []);
+    return { isOpen, open };
 }
 
 export { useWalletConnectModal };

package/build/hooks/useWalletConnectModal.js.map

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

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "1.0.8";
+export declare const OPENFORT_VERSION = "1.0.9";

package/build/version.js

@@ -1,4 +1,4 @@
-const OPENFORT_VERSION = '1.0.8';
+const OPENFORT_VERSION = '1.0.9';
 
 export { OPENFORT_VERSION };
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",