@openfort/react 1.1.1 → 1.1.3

package/build/components/Common/ErrorFallbackPage/index.d.ts

@@ -0,0 +1,7 @@
+type ErrorFallbackPageProps = {
+    header: string;
+    description: string;
+};
+/** Shared error page with a single way out: back to the providers (sign-in) screen. */
+declare const ErrorFallbackPage: ({ header, description }: ErrorFallbackPageProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorFallbackPage;

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import Button from '../Button/index.js';
+import Loader from '../Loading/index.js';
+
+/** Shared error page with a single way out: back to the providers (sign-in) screen. */
+const ErrorFallbackPage = ({ header, description }) => {
+    const { setRoute } = useOpenfort();
+    const { user } = useOpenfortCore();
+    return (jsxs(PageContent, { onBack: routes.PROVIDERS, children: [jsx(Loader, { header: header, isError: true, description: description }), jsx(Button, { onClick: () => setRoute(routes.PROVIDERS), children: user ? 'Go back' : 'Back to sign in' })] }));
+};
+
+export { ErrorFallbackPage as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Common/NotFoundFallback/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Catch-all page for flows that would otherwise spin forever
+ * (loading watchdog timeouts, unreachable states).
+ */
+declare const NotFoundFallback: () => import("react/jsx-runtime").JSX.Element;
+export default NotFoundFallback;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import ErrorFallbackPage from '../ErrorFallbackPage/index.js';
+
+/**
+ * Catch-all page for flows that would otherwise spin forever
+ * (loading watchdog timeouts, unreachable states).
+ */
+const NotFoundFallback = () => (jsx(ErrorFallbackPage, { header: "This is taking longer than expected", description: "We couldn't load this screen. Go back and try again." }));
+
+export { NotFoundFallback as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Common/TickList/styles.js

@@ -3,7 +3,7 @@ import styled from '../../../styles/styled/index.js';
 const TickListContainer = styled.ul `
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   padding-top: 8px;
   padding-bottom: 8px;
 `;
@@ -11,16 +11,17 @@ const TickItem = styled.li `
   display: flex;
   align-items: center;
   text-align: left;
-  gap: 8px;
-  font-size: 16px;
-  line-height: 24px;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--ck-body-color-muted);
 `;
 const TickIconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   flex-shrink: 0;
 `;
 

package/build/components/Common/TickList/styles.js.map

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

package/build/components/Common/WalletConnectNotConfigured/index.d.ts

@@ -0,0 +1,9 @@
+/** True when a WalletConnect connector is configured (i.e. a projectId was provided). */
+export declare function useHasWalletConnect(): boolean;
+/**
+ * Shown when a WalletConnect-dependent flow is opened but no WalletConnect
+ * projectId was configured. End users get neutral copy; the actionable
+ * config hint goes to the developer console.
+ */
+declare const WalletConnectNotConfigured: () => import("react/jsx-runtime").JSX.Element;
+export default WalletConnectNotConfigured;

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import { isWalletConnectConnector } from '../../../utils/index.js';
+import ErrorFallbackPage from '../ErrorFallbackPage/index.js';
+
+/** True when a WalletConnect connector is configured (i.e. a projectId was provided). */
+function useHasWalletConnect() {
+    const bridge = useEthereumBridge();
+    return !!(bridge === null || bridge === void 0 ? void 0 : bridge.connectors.some((c) => isWalletConnectConnector(c.id)));
+}
+/**
+ * Shown when a WalletConnect-dependent flow is opened but no WalletConnect
+ * projectId was configured. End users get neutral copy; the actionable
+ * config hint goes to the developer console.
+ */
+const WalletConnectNotConfigured = () => {
+    useEffect(() => {
+        // biome-ignore lint/suspicious/noConsole: config error must reach developers without debug mode
+        console.warn('[Openfort-React] WalletConnect is not configured: pass walletConnectProjectId to getDefaultConnectors (e.g. via your WalletConnect env variable) to enable external wallet connections.');
+    }, []);
+    return (jsx(ErrorFallbackPage, { header: "Wallet connections unavailable", description: "External wallet connections aren't available right now. Please use another sign-in method." }));
+};
+
+export { WalletConnectNotConfigured as default, useHasWalletConnect };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/ConnectModal/ConnectWithMobile.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { embeddedWalletId } from '../../constants/openfort.js';
 import { useEthereumBridge } from '../../ethereum/OpenfortEthereumBridgeContext.js';
@@ -11,6 +11,7 @@ import { walletConfigs } from '../../wallets/walletConfigs.js';
 import Button from '../Common/Button/index.js';
 import FitText from '../Common/FitText/index.js';
 import Loader from '../Common/Loading/index.js';
+import WalletConnectNotConfigured, { useHasWalletConnect } from '../Common/WalletConnectNotConfigured/index.js';
 import { routes } from '../Openfort/types.js';
 import { useOpenfort } from '../Openfort/useOpenfort.js';
 import { PageContent } from '../PageContent/index.js';
@@ -36,6 +37,7 @@ const ConnectWithMobile = () => {
         .indexOf(connector.id) !== -1);
     const wallet = useExternalConnector(connector.id) || (walletId && walletConfigs[walletId]) || {};
     const bridge = useEthereumBridge();
+    const hasWalletConnect = useHasWalletConnect();
     // Only consider external wallets as "connected" — ignore the embedded wallet connector
     const isExternalConnected = (_d = (((_a = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _a === void 0 ? void 0 : _a.isConnected) && ((_c = (_b = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _b === void 0 ? void 0 : _b.connector) === null || _c === void 0 ? void 0 : _c.id) !== embeddedWalletId)) !== null && _d !== void 0 ? _d : false;
     const [status, setStatus] = useState(isExternalConnected ? states.CONNECTING : states.INIT);
@@ -87,6 +89,8 @@ const ConnectWithMobile = () => {
                 break;
         }
     }, [status]);
+    if (!hasWalletConnect)
+        return jsx(WalletConnectNotConfigured, {});
     return (jsxs(PageContent, { children: [jsx(Loader, { header: `Connecting with ${connector.id.split(',')[0]}`, icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: status === states.ERROR, description: description, onRetry: () => {
                     setStatus(isExternalConnected ? states.CONNECTING : states.INIT);
                     setDescription('');

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

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

package/build/components/ConnectModal/ConnectWithQRCode.js

@@ -9,6 +9,7 @@ import { useExternalConnector } from '../../wallets/useExternalConnectors.js';
 import { CopyText } from '../Common/CopyToClipboard/CopyText.js';
 import Loader from '../Common/Loading/index.js';
 import { ModalBody } from '../Common/Modal/styles.js';
+import WalletConnectNotConfigured, { useHasWalletConnect } from '../Common/WalletConnectNotConfigured/index.js';
 import { routes } from '../Openfort/types.js';
 import { useOpenfort } from '../Openfort/useOpenfort.js';
 import { PageContent } from '../PageContent/index.js';
@@ -45,6 +46,7 @@ const ConnectWithWalletConnect = () => {
     const { connector } = useOpenfort();
     const wallet = useExternalConnector(connector.id);
     const { open: openWalletConnectModal } = useWalletConnectModal();
+    const hasWalletConnect = useHasWalletConnect();
     const [error, setError] = useState(undefined);
     const hasOpenedRef = useRef(false);
     const openModal = useCallback(async () => {
@@ -54,11 +56,15 @@ const ConnectWithWalletConnect = () => {
             setError(error);
     }, [openWalletConnectModal]);
     useEffect(() => {
+        if (!hasWalletConnect)
+            return;
         if (hasOpenedRef.current)
             return;
         hasOpenedRef.current = true;
         openModal();
-    }, [openModal]);
+    }, [openModal, hasWalletConnect]);
+    if (!hasWalletConnect)
+        return jsx(WalletConnectNotConfigured, {});
     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 }) }));
 };
 const ConnectWithQRCode = () => {

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/Pages/CreateWallet/SolanaCreateWallet.js

@@ -203,14 +203,14 @@ const SolanaCreatePassword = ({ onChangeMethod, onBack, logoutOnBack, }) => {
         if (recoveryError)
             triggerResize();
     }, [recoveryError]);
-    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
                             e.preventDefault();
                             handleSubmit();
                         }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
                                     if (showPasswordIsTooWeakError)
                                         setShowPasswordIsTooWeakError(false);
                                     setRecoveryPhrase(e.target.value);
-                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
 };
 const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
     return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));

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

@@ -273,14 +273,14 @@ const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, })
                 }, logoBottomRight: {
                     logo: jsx(LockIcon, {}),
                     size: '0.5',
-                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
                             e.preventDefault();
                             handleSubmit();
                         }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
                                     if (showPasswordIsTooWeakError)
                                         setShowPasswordIsTooWeakError(false);
                                     setRecoveryPhrase(e.target.value);
-                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
 };
 const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
     return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));

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

@@ -3,10 +3,12 @@ import { ChainTypeEnum, RecoveryMethod } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { toSolanaUserWallet } from '../../../hooks/openfort/walletTypes.js';
+import { useTimedOut } from '../../../hooks/useTimedOut.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import { logger } from '../../../utils/logger.js';
 import Loader from '../../Common/Loading/index.js';
+import NotFoundFallback from '../../Common/NotFoundFallback/index.js';
 import { createRoute, recoverRoute } from '../../Openfort/routeHelpers.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
@@ -32,6 +34,9 @@ const errorForChainRegistry = {
         message: (errorWallets === null || errorWallets === void 0 ? void 0 : errorWallets.message) || 'There was an error loading wallets',
     }),
 };
+// Watchdog: if wallet loading never settles (hung fetch, unreachable state),
+// bail out to the not-found fallback instead of spinning forever.
+const LOADING_TIMEOUT_MS = 10000;
 const LoadWallets = () => {
     var _a;
     const { chainType, user, isLoadingAccounts } = useOpenfortCore();
@@ -41,6 +46,7 @@ const LoadWallets = () => {
     const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
     const connectOnLogin = (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin) !== null && _a !== void 0 ? _a : true;
     const [loadingUX, setLoadingUX] = useState(true);
+    const timedOut = useTimedOut(LOADING_TIMEOUT_MS);
     const wallets = embeddedWallet.wallets;
     const isLoadingWallets = embeddedWallet.status === 'fetching-wallets' ||
         embeddedWallet.status === 'connecting' ||
@@ -98,6 +104,9 @@ const LoadWallets = () => {
     const { isError: isErrorFromChain, message: errorMessageFromChain } = errorForChainRegistry[chainType](errorWallets);
     const isError = !user || isErrorFromChain;
     const errorMessage = !user ? undefined : errorMessageFromChain;
+    // Only fall back while still spinning — real errors keep their own message
+    if (timedOut && !isError)
+        return jsx(NotFoundFallback, {});
     return (jsx(PageContent, { onBack: !user ? 'back' : null, children: jsx(Loader, { header: "Setting up wallet", isError: isError, description: isError ? errorMessage : 'Setting up wallets' }) }));
 };
 

package/build/components/Pages/LoadWallets/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/Pages/Loading/index.js

@@ -3,13 +3,18 @@ import { ChainTypeEnum, EmbeddedState } from '@openfort/openfort-js';
 import React, { useEffect } from 'react';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import { useTimedOut } from '../../../hooks/useTimedOut.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import Loader from '../../Common/Loading/index.js';
+import NotFoundFallback from '../../Common/NotFoundFallback/index.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
 
+// Watchdog: if no state transition routes us away within this window, the modal
+// would otherwise spin forever (e.g. opened while signed out, or a misconfigured SDK).
+const LOADING_TIMEOUT_MS = 10000;
 const Loading = () => {
     const { setRoute, walletConfig } = useOpenfort();
     const { user, isLoadingAccounts, isLoading, needsRecovery, embeddedState } = useOpenfortCore();
@@ -25,6 +30,7 @@ const Loading = () => {
     const address = embeddedConnected ? wallet.address : bridgeConnected ? bridge === null || bridge === void 0 ? void 0 : bridge.account.address : undefined;
     const [isFirstFrame, setIsFirstFrame] = React.useState(true);
     const [retryCount, setRetryCount] = React.useState(0);
+    const timedOut = useTimedOut(LOADING_TIMEOUT_MS);
     useEffect(() => {
         if (isFirstFrame)
             return;
@@ -65,6 +71,8 @@ const Loading = () => {
         // UX: Wait a bit before showing the next page
         setTimeout(() => setIsFirstFrame(false), 400);
     }, []);
+    if (timedOut)
+        return jsx(NotFoundFallback, {});
     return (jsx(PageContent, { children: jsx(Loader, { header: "Redirecting" }) }));
 };
 

package/build/components/Pages/Loading/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/Pages/MobileConnectors/index.js

@@ -7,6 +7,7 @@ import { CopyButton } from '../../Common/CopyToClipboard/CopyButton.js';
 import { ModalContent } from '../../Common/Modal/styles.js';
 import { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { Spinner } from '../../Common/Spinner/index.js';
+import WalletConnectNotConfigured, { useHasWalletConnect } from '../../Common/WalletConnectNotConfigured/index.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
@@ -19,6 +20,7 @@ const MobileConnectors = () => {
     const locales = useLocales();
     const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
     const wallets = useExternalConnectors();
+    const hasWalletConnect = useHasWalletConnect();
     // filter out installed wallets
     const walletsIdsToDisplay = (_a = Object.keys(walletConfigs).filter((walletId) => {
         const wallet = walletConfigs[walletId];
@@ -32,6 +34,9 @@ const MobileConnectors = () => {
         context.setRoute(routes.CONNECT_WITH_MOBILE);
         context.setConnector({ id: walletId });
     };
+    // Every wallet on this page connects through WalletConnect deeplinks
+    if (!hasWalletConnect)
+        return jsx(WalletConnectNotConfigured, {});
     return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { children: [walletsIdsToDisplay
                                     .sort(
                                 // sort by name

package/build/components/Pages/MobileConnectors/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/Pages/SendConfirmation/index.js

@@ -256,7 +256,10 @@ const SendConfirmation = () => {
         }
     }, [isPollingBalance, currentBalance]);
     const handleConfirm = async () => {
-        if (submittingRef.current)
+        // Block re-entry while submitting, and never submit when a tx already
+        // exists for this send — a second `eth_sendTransaction` is the duplicate
+        // transaction the customer hit after the wallet was slow to respond.
+        if (submittingRef.current || transactionHash)
             return;
         if (!recipientAddress || !parsedAmount || parsedAmount <= BigInt(0) || insufficientBalance)
             return;
@@ -279,8 +282,10 @@ const SendConfirmation = () => {
                 });
             }
         }
-        catch (_error) {
-            // Errors are surfaced through mutation hooks
+        catch {
+            // The error is already recorded in nativeError/erc20Error (which drive
+            // firstError and the error UI) before being re-thrown — we only catch
+            // here to stop it becoming an unhandled rejection.
         }
         finally {
             submittingRef.current = false;
@@ -331,7 +336,14 @@ const SendConfirmation = () => {
                                     width: '100%',
                                     color: 'var(--ck-body-color-valid)',
                                     fontSize: '12px',
-                                }, children: "Sponsored transaction" }))] })] }), insufficientBalance && !isSuccess && (jsx(StatusMessage, { "$status": "error", children: "Insufficient balance for this transfer." })), errorDetails && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: errorDetails.title }), jsx(ErrorMessage, { children: errorDetails.message }), errorDetails.action && jsx(ErrorAction, { children: errorDetails.action })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: isSuccess ? handleOpenBlockExplorer : handleConfirm, disabled: isSuccess ? false : !recipientAddress || !parsedAmount || parsedAmount <= BigInt(0) || insufficientBalance, waiting: isLoading, icon: isSuccess ? jsx(TickIcon, { style: { width: 18, height: 18 } }) : undefined, children: isSuccess ? 'Confirmed' : isLoading ? 'Confirming...' : 'Confirm' }), isSuccess ? (jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })) : (jsx(Button, { variant: "secondary", onClick: handleCancel, disabled: isLoading, children: "Cancel" }))] })] }));
+                                }, children: "Sponsored transaction" }))] })] }), insufficientBalance && !isSuccess && (jsx(StatusMessage, { "$status": "error", children: "Insufficient balance for this transfer." })), errorDetails && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: errorDetails.title }), jsx(ErrorMessage, { children: errorDetails.message }), errorDetails.action && jsx(ErrorAction, { children: errorDetails.action })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: isSuccess ? handleOpenBlockExplorer : handleConfirm, disabled: isSuccess
+                            ? false
+                            : isLoading ||
+                                Boolean(transactionHash) ||
+                                !recipientAddress ||
+                                !parsedAmount ||
+                                parsedAmount <= BigInt(0) ||
+                                insufficientBalance, waiting: isLoading, icon: isSuccess ? jsx(TickIcon, { style: { width: 18, height: 18 } }) : undefined, children: isSuccess ? 'Confirmed' : isLoading ? 'Confirming...' : 'Confirm' }), isSuccess ? (jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })) : (jsx(Button, { variant: "secondary", onClick: handleCancel, disabled: isLoading, children: "Cancel" }))] })] }));
 };
 
 export { SendConfirmation as default };

package/build/components/Pages/SendConfirmation/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/PasswordStrength/PasswordStrengthIndicator.d.ts

@@ -1,4 +1,4 @@
 export declare const PasswordStrengthIndicator: ({ password, showPasswordIsTooWeakError, }: {
     password: string;
     showPasswordIsTooWeakError: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/PasswordStrength/PasswordStrengthIndicator.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import styled from '../../styles/styled/index.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
 import { getPasswordStrength, getPasswordStrengthLabel } from './password-utility.js';
 
 const Container = styled.div `
@@ -49,6 +50,14 @@ const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) =>
                 return '#d1d5db'; // gray-300
         }
     }, [label]);
+    const { triggerResize } = useOpenfort();
+    // Grow/shrink the modal as the meter appears/disappears so it isn't clipped.
+    useEffect(() => {
+        triggerResize();
+    }, [!!password, showPasswordIsTooWeakError, triggerResize]);
+    // Only surface strength once the user starts typing (or on the too-weak error).
+    if (!password && !showPasswordIsTooWeakError)
+        return null;
     return (jsxs(Container, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: 'easeOut', duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
                             opacity: showPasswordIsTooWeakError ? 0 : 1,
                             y: showPasswordIsTooWeakError ? 5 : 0,

package/build/components/PasswordStrength/PasswordStrengthIndicator.js.map

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

package/build/hooks/openfort/useUI.js

@@ -22,7 +22,12 @@ const safeRoutes = {
         routes.PROVIDERS,
     ],
 };
-const allRoutes = [...safeRoutes.connected, ...safeRoutes.disconnected];
+/** Route can be selected by string (route name) or by object with `route` property */
+function routeMatches(a, b) {
+    const aRoute = typeof a === 'object' && a !== null && 'route' in a ? a.route : a;
+    const bRoute = typeof b === 'object' && b !== null && 'route' in b ? b.route : b;
+    return aRoute === bRoute;
+}
 /** Connector id must be a connector (e.g. injected, walletConnect), not an Openfort account id. */
 function isAccountId(id) {
     return id.startsWith('acc_');
@@ -84,27 +89,18 @@ function useUI() {
             setRoute(routes.CONNECTED);
     }
     const gotoAndOpen = (route) => {
-        let validRoute = route;
-        if (!allRoutes.includes(route)) {
-            validRoute = isConnected ? routes.CONNECTED : routes.PROVIDERS;
-            logger.log(`Route ${route} is not a valid route, navigating to ${validRoute} instead.`);
-        }
-        else {
-            if (isConnected) {
-                if (!safeRoutes.connected.includes(route)) {
-                    validRoute = routes.CONNECTED;
-                    logger.log(`Route ${route} is not a valid route when connected, navigating to ${validRoute} instead.`);
-                }
-            }
-            else {
-                if (!safeRoutes.disconnected.includes(route)) {
-                    validRoute = routes.PROVIDERS;
-                    logger.log(`Route ${route} is not a valid route when disconnected, navigating to ${validRoute} instead.`);
-                }
-            }
+        const safeList = isConnected ? safeRoutes.connected : safeRoutes.disconnected;
+        const fallback = isConnected ? routes.CONNECTED : routes.PROVIDERS;
+        // Navigate using the allowlisted spec so vetted options (e.g. connectType) are enforced,
+        // not whatever the caller passed alongside a matching route name.
+        const match = safeList.find((r) => routeMatches(r, route));
+        if (!match) {
+            logger.log(`Route ${JSON.stringify(route)} is not valid when ${isConnected ? 'connected' : 'disconnected'}, navigating to ${fallback} instead.`);
         }
-        setRoute(validRoute);
+        // setOpen(true) resets route/history/connector for a clean session, so it MUST run
+        // before setRoute — otherwise it clobbers the requested route back to LOADING.
         setOpen(true);
+        setRoute(match !== null && match !== void 0 ? match : fallback);
     };
     return {
         isOpen: open,

package/build/hooks/openfort/useUI.js.map

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

package/build/hooks/useTimedOut.d.ts

@@ -0,0 +1,2 @@
+/** Returns true once `ms` milliseconds have elapsed since mount. */
+export declare function useTimedOut(ms: number): boolean;

package/build/hooks/useTimedOut.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+/** Returns true once `ms` milliseconds have elapsed since mount. */
+function useTimedOut(ms) {
+    const [timedOut, setTimedOut] = useState(false);
+    useEffect(() => {
+        const timeout = setTimeout(() => setTimedOut(true), ms);
+        return () => clearTimeout(timeout);
+    }, [ms]);
+    return timedOut;
+}
+
+export { useTimedOut };
+//# sourceMappingURL=useTimedOut.js.map

package/build/hooks/useTimedOut.js.map

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

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "1.1.1";
+export declare const OPENFORT_VERSION = "1.1.3";

package/build/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",
@@ -65,7 +65,7 @@
     "react"
   ],
   "dependencies": {
-    "@openfort/openfort-js": "^1.3.5",
+    "@openfort/openfort-js": "^1.3.6",
     "buffer": "^6.0.3",
     "detect-browser": "^5.3.0",
     "fast-password-entropy": "^1.1.1",