@dynamic-labs/sdk-react-core 4.8.1 → 4.8.2

package/src/lib/modals/SyncWalletPromptModal/SyncWalletPromptModal.cjs

@@ -83,6 +83,7 @@ require('../../context/ConnectWithOtpContext/constants.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../context/FooterAnimationContext/index.cjs');
+require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../store/state/sendBalances.cjs');
 require('../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/modals/SyncWalletPromptModal/SyncWalletPromptModal.js

@@ -79,6 +79,7 @@ import '../../context/ConnectWithOtpContext/constants.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../context/FooterAnimationContext/index.js';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../store/state/sendBalances.js';
 import '../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -87,6 +87,7 @@ require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../context/ConnectWithOtpContext/constants.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -83,6 +83,7 @@ import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../context/ConnectWithOtpContext/constants.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../store/state/tokenBalances.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.cjs

@@ -87,6 +87,7 @@ require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../context/ConnectWithOtpContext/constants.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.js

@@ -83,6 +83,7 @@ import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../context/ConnectWithOtpContext/constants.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../store/state/tokenBalances.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';

package/src/lib/store/state/nonce/nonce.cjs

@@ -82,6 +82,7 @@ require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secon
 require('@hcaptcha/react-hcaptcha');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../sendBalances.cjs');
 require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/store/state/nonce/nonce.js

@@ -78,6 +78,7 @@ import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Second
 import '@hcaptcha/react-hcaptcha';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../context/FooterAnimationContext/index.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../sendBalances.js';
 import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/store/state/projectSettings/projectSettings.cjs

@@ -82,6 +82,7 @@ require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secon
 require('@hcaptcha/react-hcaptcha');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../sendBalances.cjs');
 require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/store/state/projectSettings/projectSettings.js

@@ -78,6 +78,7 @@ import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Second
 import '@hcaptcha/react-hcaptcha';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../context/FooterAnimationContext/index.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../sendBalances.js';
 import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.cjs

@@ -0,0 +1,27 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const formatCoinbaseOnrampUrl = (url, wallet) => {
+    if (wallet) {
+        const networks = wallet.connector.getEnabledNetworks();
+        if (!networks || networks.length === 0) {
+            return url;
+        }
+        const filteredNetworks = networks.filter((network) => !network.isTestnet);
+        const onlyKeys = filteredNetworks
+            .map((network) => network.key)
+            .filter((key) => Boolean(key));
+        const addressesObj = {
+            [wallet.address]: onlyKeys,
+        };
+        const baseUrl = new URL(url);
+        // Construct the URL with the raw query parameters
+        const finalUrl = `${baseUrl.origin}${baseUrl.pathname}?appId=${baseUrl.searchParams.get('appId')}&addresses=${encodeURIComponent(JSON.stringify(addressesObj))}`;
+        return finalUrl;
+    }
+    return url;
+};
+
+exports.formatCoinbaseOnrampUrl = formatCoinbaseOnrampUrl;

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.d.ts

@@ -0,0 +1,2 @@
+import type { Wallet } from '@dynamic-labs/wallet-connector-core';
+export declare const formatCoinbaseOnrampUrl: (url: string, wallet: Wallet) => string;

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.js

@@ -0,0 +1,23 @@
+'use client'
+const formatCoinbaseOnrampUrl = (url, wallet) => {
+    if (wallet) {
+        const networks = wallet.connector.getEnabledNetworks();
+        if (!networks || networks.length === 0) {
+            return url;
+        }
+        const filteredNetworks = networks.filter((network) => !network.isTestnet);
+        const onlyKeys = filteredNetworks
+            .map((network) => network.key)
+            .filter((key) => Boolean(key));
+        const addressesObj = {
+            [wallet.address]: onlyKeys,
+        };
+        const baseUrl = new URL(url);
+        // Construct the URL with the raw query parameters
+        const finalUrl = `${baseUrl.origin}${baseUrl.pathname}?appId=${baseUrl.searchParams.get('appId')}&addresses=${encodeURIComponent(JSON.stringify(addressesObj))}`;
+        return finalUrl;
+    }
+    return url;
+};
+
+export { formatCoinbaseOnrampUrl };

package/src/lib/utils/functions/coinbaseOnramp/index.d.ts

@@ -0,0 +1 @@
+export { formatCoinbaseOnrampUrl } from './formatCoinbaseOnrampUrl';

package/src/lib/utils/functions/index.d.ts

@@ -78,3 +78,5 @@ export * from './isAuthenticatedWithAWallet';
 export * from './networksAndChains';
 export * from './updatePrimaryWalletId';
 export * from './getWalletUniqueId';
+export * from './coinbaseOnramp';
+export * from './openPopup';

package/src/lib/utils/functions/onrampConfigurationToOnrampOption/onrampConfigurationToOnrampOption.cjs

@@ -3,17 +3,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const onrampConfigurationToOnrampOption = (provider, onClick) => {
+var openOnrampPopup = require('../openOnrampPopup.cjs');
+
+const onrampConfigurationToOnrampOption = (provider, onClick, setShowOnramp) => {
     var _a, _b, _c;
-    return ({
+    const isPopupImplementation = provider.provider === 'coinbaseOnramp';
+    return {
         displayName: (_b = (_a = provider.name) !== null && _a !== void 0 ? _a : provider.provider) !== null && _b !== void 0 ? _b : '',
         iconUrl: (_c = provider.iconUrl) !== null && _c !== void 0 ? _c : '',
         id: String(provider.provider),
-        iframeUrl: provider.url,
-        onClick: (_params) => onClick({
-            onrampProvider: provider.provider,
-        }),
-    });
+        // For Coinbase, we don't use the iframeUrl in the widget, we handle it in onClick
+        iframeUrl: isPopupImplementation ? undefined : provider.url,
+        onClick: (params) => {
+            // Call the provided onClick to set the selected provider
+            onClick({
+                onrampProvider: provider.provider,
+            });
+            // For Coinbase, handle the popup opening directly in the onClick
+            if (isPopupImplementation && provider.url && setShowOnramp) {
+                // Use the new openOnrampPopup function to handle the popup logic
+                openOnrampPopup.openOnrampPopup(provider.url, params.wallet, setShowOnramp);
+            }
+        },
+    };
 };
 
 exports.onrampConfigurationToOnrampOption = onrampConfigurationToOnrampOption;

package/src/lib/utils/functions/onrampConfigurationToOnrampOption/onrampConfigurationToOnrampOption.d.ts

@@ -1,5 +1,5 @@
-import { OnrampConfiguration, OnrampProviders } from '@dynamic-labs/sdk-api-core';
-import { OnrampOption } from '../../../context/DynamicContext';
+import type { OnrampConfiguration, OnrampProviders } from '@dynamic-labs/sdk-api-core';
+import type { OnrampOption } from '../../../context/DynamicContext';
 export declare const onrampConfigurationToOnrampOption: (provider: OnrampConfiguration, onClick: ({ onrampProvider }: {
     onrampProvider: OnrampProviders;
-}) => void) => OnrampOption;
+}) => void, setShowOnramp?: (show: boolean) => void) => OnrampOption;

package/src/lib/utils/functions/onrampConfigurationToOnrampOption/onrampConfigurationToOnrampOption.js

@@ -1,15 +1,27 @@
 'use client'
-const onrampConfigurationToOnrampOption = (provider, onClick) => {
+import { openOnrampPopup } from '../openOnrampPopup.js';
+
+const onrampConfigurationToOnrampOption = (provider, onClick, setShowOnramp) => {
     var _a, _b, _c;
-    return ({
+    const isPopupImplementation = provider.provider === 'coinbaseOnramp';
+    return {
         displayName: (_b = (_a = provider.name) !== null && _a !== void 0 ? _a : provider.provider) !== null && _b !== void 0 ? _b : '',
         iconUrl: (_c = provider.iconUrl) !== null && _c !== void 0 ? _c : '',
         id: String(provider.provider),
-        iframeUrl: provider.url,
-        onClick: (_params) => onClick({
-            onrampProvider: provider.provider,
-        }),
-    });
+        // For Coinbase, we don't use the iframeUrl in the widget, we handle it in onClick
+        iframeUrl: isPopupImplementation ? undefined : provider.url,
+        onClick: (params) => {
+            // Call the provided onClick to set the selected provider
+            onClick({
+                onrampProvider: provider.provider,
+            });
+            // For Coinbase, handle the popup opening directly in the onClick
+            if (isPopupImplementation && provider.url && setShowOnramp) {
+                // Use the new openOnrampPopup function to handle the popup logic
+                openOnrampPopup(provider.url, params.wallet, setShowOnramp);
+            }
+        },
+    };
 };
 
 export { onrampConfigurationToOnrampOption };

package/src/lib/utils/functions/openOnrampPopup.cjs

@@ -0,0 +1,32 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var formatCoinbaseOnrampUrl = require('./coinbaseOnramp/formatCoinbaseOnrampUrl.cjs');
+var openPopup = require('./openPopup/openPopup.cjs');
+
+const ONRAMP_POPUP_CONFIG = {
+    height: 600,
+    width: 500,
+};
+/**
+ * Opens an onramp popup for Coinbase and sets up event listeners to handle popup closure
+ * @param url The base URL to open in the popup
+ * @param wallet The user's wallet (optional)
+ * @param setShowOnramp Callback to update the UI state when popup is closed
+ * @returns A promise that resolves when the popup is opened
+ */
+const openOnrampPopup = (url, wallet, setShowOnramp) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    // Format the URL with wallet information for Coinbase if wallet is provided
+    const formattedUrl = wallet ? formatCoinbaseOnrampUrl.formatCoinbaseOnrampUrl(url, wallet) : url;
+    // Open the popup - errors will propagate to the caller
+    yield openPopup.openPopup(formattedUrl, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
+        // When the popup is closed (by user or programmatically), update the UI
+        setShowOnramp(false);
+    });
+});
+
+exports.ONRAMP_POPUP_CONFIG = ONRAMP_POPUP_CONFIG;
+exports.openOnrampPopup = openOnrampPopup;

package/src/lib/utils/functions/openOnrampPopup.d.ts

@@ -0,0 +1,13 @@
+import type { Wallet } from '@dynamic-labs/wallet-connector-core';
+export declare const ONRAMP_POPUP_CONFIG: {
+    readonly height: 600;
+    readonly width: 500;
+};
+/**
+ * Opens an onramp popup for Coinbase and sets up event listeners to handle popup closure
+ * @param url The base URL to open in the popup
+ * @param wallet The user's wallet (optional)
+ * @param setShowOnramp Callback to update the UI state when popup is closed
+ * @returns A promise that resolves when the popup is opened
+ */
+export declare const openOnrampPopup: (url: string, wallet: Wallet | undefined, setShowOnramp: (show: boolean) => void) => Promise<void>;

package/src/lib/utils/functions/openOnrampPopup.js

@@ -0,0 +1,27 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { formatCoinbaseOnrampUrl } from './coinbaseOnramp/formatCoinbaseOnrampUrl.js';
+import { openPopup } from './openPopup/openPopup.js';
+
+const ONRAMP_POPUP_CONFIG = {
+    height: 600,
+    width: 500,
+};
+/**
+ * Opens an onramp popup for Coinbase and sets up event listeners to handle popup closure
+ * @param url The base URL to open in the popup
+ * @param wallet The user's wallet (optional)
+ * @param setShowOnramp Callback to update the UI state when popup is closed
+ * @returns A promise that resolves when the popup is opened
+ */
+const openOnrampPopup = (url, wallet, setShowOnramp) => __awaiter(void 0, void 0, void 0, function* () {
+    // Format the URL with wallet information for Coinbase if wallet is provided
+    const formattedUrl = wallet ? formatCoinbaseOnrampUrl(url, wallet) : url;
+    // Open the popup - errors will propagate to the caller
+    yield openPopup(formattedUrl, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
+        // When the popup is closed (by user or programmatically), update the UI
+        setShowOnramp(false);
+    });
+});
+
+export { ONRAMP_POPUP_CONFIG, openOnrampPopup };

package/src/lib/utils/functions/openPopup/index.d.ts

@@ -0,0 +1 @@
+export { openPopup } from './openPopup';

package/src/lib/utils/functions/openPopup/openPopup.cjs

@@ -0,0 +1,43 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getCenteredPopupFeatures = (popupWidth, popupHeight) => {
+    const { screenLeft = window.screenX, screenTop = window.screenY } = window;
+    const { innerWidth = document.documentElement.clientWidth, innerHeight = document.documentElement.clientHeight, } = window;
+    const left = screenLeft + (innerWidth - popupWidth) / 2;
+    const top = screenTop + (innerHeight - popupHeight) / 2;
+    return `toolbar=0,location=0,menubar=0,resizable=1,scrollbars=1,width=${popupWidth},height=${popupHeight},left=${left},top=${top}`;
+};
+const openPopup = (url, popupWidth, popupHeight, onClose) => new Promise((resolve, reject) => {
+    const popup = window.open('', '_blank', getCenteredPopupFeatures(popupWidth, popupHeight));
+    if (!popup) {
+        reject(new Error('Popup blocked'));
+        return;
+    }
+    // Set up interval to check if popup is closed
+    const checkClosed = setInterval(() => {
+        if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('unload', cleanup);
+            onClose();
+        }
+    }, 500);
+    // Set the URL after opening to avoid popup blockers
+    popup.location.href = url;
+    // Clean up function
+    const cleanup = () => {
+        clearInterval(checkClosed);
+        if (!popup.closed) {
+            popup.close();
+        }
+        window.removeEventListener('unload', cleanup);
+    };
+    // Handle window unload
+    window.addEventListener('unload', cleanup);
+    // Return cleanup function
+    resolve(cleanup);
+});
+
+exports.openPopup = openPopup;

package/src/lib/utils/functions/openPopup/openPopup.d.ts

@@ -0,0 +1 @@
+export declare const openPopup: (url: string, popupWidth: number, popupHeight: number, onClose: () => void) => Promise<() => void>;

package/src/lib/utils/functions/openPopup/openPopup.js

@@ -0,0 +1,39 @@
+'use client'
+const getCenteredPopupFeatures = (popupWidth, popupHeight) => {
+    const { screenLeft = window.screenX, screenTop = window.screenY } = window;
+    const { innerWidth = document.documentElement.clientWidth, innerHeight = document.documentElement.clientHeight, } = window;
+    const left = screenLeft + (innerWidth - popupWidth) / 2;
+    const top = screenTop + (innerHeight - popupHeight) / 2;
+    return `toolbar=0,location=0,menubar=0,resizable=1,scrollbars=1,width=${popupWidth},height=${popupHeight},left=${left},top=${top}`;
+};
+const openPopup = (url, popupWidth, popupHeight, onClose) => new Promise((resolve, reject) => {
+    const popup = window.open('', '_blank', getCenteredPopupFeatures(popupWidth, popupHeight));
+    if (!popup) {
+        reject(new Error('Popup blocked'));
+        return;
+    }
+    // Set up interval to check if popup is closed
+    const checkClosed = setInterval(() => {
+        if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('unload', cleanup);
+            onClose();
+        }
+    }, 500);
+    // Set the URL after opening to avoid popup blockers
+    popup.location.href = url;
+    // Clean up function
+    const cleanup = () => {
+        clearInterval(checkClosed);
+        if (!popup.closed) {
+            popup.close();
+        }
+        window.removeEventListener('unload', cleanup);
+    };
+    // Handle window unload
+    window.addEventListener('unload', cleanup);
+    // Return cleanup function
+    resolve(cleanup);
+});
+
+export { openPopup };

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.cjs

@@ -86,6 +86,7 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../store/state/sendBalances.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
@@ -102,7 +103,7 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useD
 const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = true, } = {}) => {
     const { pushView, clearStackAndPushInitialView, replaceView } = ViewContext.useViewContext();
     const { engageCaptcha, getCaptchaToken } = CaptchaContext.useCaptchaContext();
-    const { setErrorMessage } = ErrorContext.useErrorContext();
+    const { setErrorMessage, setError, setDefaultError } = ErrorContext.useErrorContext();
     const { authMode, connectWallet, displaySiweStatement, environmentId, projectSettings, networkValidationMode, setIsSingleWalletAccount, user, walletUiUtils, } = useInternalDynamicContext.useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect.useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
@@ -133,6 +134,15 @@ const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = tr
         setErrorMessage((_a = err === null || err === void 0 ? void 0 : err.code) === null || _a === void 0 ? void 0 : _a.toString());
         clearStackAndPushInitialView();
     };
+    const handleWalletConnectionError = (error) => {
+        clearStackAndPushInitialView();
+        if (error instanceof utils.CustomError) {
+            setError(error.message, error.code);
+        }
+        else {
+            setDefaultError();
+        }
+    };
     return (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ walletConnector, getAddressOpts = undefined, }) {
         var _b;
         try {
@@ -145,10 +155,19 @@ const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = tr
                     pushView('wait-for-email-confirmation-view');
                 }
             }
-            const connectionResult = yield connectWallet(walletConnector, getAddressOpts, {
-                applyHandleConnectedWallet: shouldCallCallback,
-            });
+            let connectionResult;
+            try {
+                connectionResult = yield connectWallet(walletConnector, getAddressOpts, {
+                    applyHandleConnectedWallet: shouldCallCallback,
+                });
+            }
+            catch (error) {
+                handleWalletConnectionError(error);
+                return;
+            }
+            // Fallback to catch any errors that were missed.
             if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.address)) {
+                handleWalletConnectionError();
                 return;
             }
             const { address } = connectionResult;

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { StorageService } from '@dynamic-labs/utils';
+import { StorageService, CustomError } from '@dynamic-labs/utils';
 import { isEmailWalletConnector, isEmailOTPWalletConnector, isBloctoConnector } from '@dynamic-labs/wallet-connector-core';
 import { useCaptchaContext } from '../../../../context/CaptchaContext/CaptchaContext.js';
 import 'react';
@@ -82,6 +82,7 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../store/state/sendBalances.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
@@ -98,7 +99,7 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = true, } = {}) => {
     const { pushView, clearStackAndPushInitialView, replaceView } = useViewContext();
     const { engageCaptcha, getCaptchaToken } = useCaptchaContext();
-    const { setErrorMessage } = useErrorContext();
+    const { setErrorMessage, setError, setDefaultError } = useErrorContext();
     const { authMode, connectWallet, displaySiweStatement, environmentId, projectSettings, networkValidationMode, setIsSingleWalletAccount, user, walletUiUtils, } = useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet({
@@ -129,6 +130,15 @@ const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = tr
         setErrorMessage((_a = err === null || err === void 0 ? void 0 : err.code) === null || _a === void 0 ? void 0 : _a.toString());
         clearStackAndPushInitialView();
     };
+    const handleWalletConnectionError = (error) => {
+        clearStackAndPushInitialView();
+        if (error instanceof CustomError) {
+            setError(error.message, error.code);
+        }
+        else {
+            setDefaultError();
+        }
+    };
     return (_a) => __awaiter(void 0, [_a], void 0, function* ({ walletConnector, getAddressOpts = undefined, }) {
         var _b;
         try {
@@ -141,10 +151,19 @@ const useConnectAndSign = ({ shouldUpdateWallets = true, shouldCallCallback = tr
                     pushView('wait-for-email-confirmation-view');
                 }
             }
-            const connectionResult = yield connectWallet(walletConnector, getAddressOpts, {
-                applyHandleConnectedWallet: shouldCallCallback,
-            });
+            let connectionResult;
+            try {
+                connectionResult = yield connectWallet(walletConnector, getAddressOpts, {
+                    applyHandleConnectedWallet: shouldCallCallback,
+                });
+            }
+            catch (error) {
+                handleWalletConnectionError(error);
+                return;
+            }
+            // Fallback to catch any errors that were missed.
             if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.address)) {
+                handleWalletConnectionError();
                 return;
             }
             const { address } = connectionResult;

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs

@@ -86,6 +86,7 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../store/state/sendBalances.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js

@@ -82,6 +82,7 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../store/state/sendBalances.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/utils/hooks/authenticationHooks/useOtpVerificationRequest/useOtpVerificationRequest.cjs

@@ -87,6 +87,7 @@ require('../../../../locale/locale.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../store/state/sendBalances.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/utils/hooks/authenticationHooks/useOtpVerificationRequest/useOtpVerificationRequest.js

@@ -83,6 +83,7 @@ import '../../../../locale/locale.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../store/state/sendBalances.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.cjs

@@ -80,6 +80,7 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../store/state/sendBalances.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.js

@@ -76,6 +76,7 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../store/state/sendBalances.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.cjs

@@ -83,6 +83,7 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../store/state/sendBalances.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js

@@ -79,6 +79,7 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../store/state/sendBalances.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';