@dynamic-labs/sdk-react-core 4.102.0 → 4.104.0

package/src/lib/utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs

@@ -99,7 +99,10 @@ const usePasskeyRecovery = () => {
         return true;
     }), [wallet, isTurnkeyWalletWithoutAuthenticator, isSessionRestored]);
     const initPasskeyRecoveryProcess = React.useCallback((authenticatorType, currentAction) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _f;
+        var _f, _g, _h;
+        // Recovery can target a non-primary wallet (e.g. a later wallet in the
+        // upgrade flow); fall back to the primary wallet.
+        const recoveryWallet = (_g = (_f = currentAction === null || currentAction === void 0 ? void 0 : currentAction.settings) === null || _f === void 0 ? void 0 : _f.wallet) !== null && _g !== void 0 ? _g : wallet;
         const validateRecoveryRequest = () => {
             if (!user$1) {
                 throw new Error(errors.USER_NOT_LOGGED_IN);
@@ -110,25 +113,26 @@ const usePasskeyRecovery = () => {
             if (!hasEmbeddedWallet.hasEmbeddedWallet(user$1)) {
                 throw new Error('Dynamic embedded wallet not found');
             }
-            if (wallet && !walletConnectorCore.isPasskeyWalletConnector(wallet.connector)) {
+            if (recoveryWallet &&
+                !walletConnectorCore.isPasskeyWalletConnector(recoveryWallet.connector)) {
                 throw new Error('Dynamic embedded wallet not found.');
             }
         };
         validateRecoveryRequest();
-        const turnkeyRecoveryHandler = (wallet === null || wallet === void 0 ? void 0 : wallet.connector).getAuthenticatorHandler();
+        const turnkeyRecoveryHandler = (recoveryWallet === null || recoveryWallet === void 0 ? void 0 : recoveryWallet.connector).getAuthenticatorHandler();
         // email auth - session is still up, so create passkey authenticator usign the same session
         if (authenticatorType === 'passkey' &&
             turnkeyRecoveryHandler.isSessionActive()) {
             yield passkeyRecovery.addNewPasskeyAuthenticator({
                 environmentId,
                 user: user$1,
-                wallet: wallet,
+                wallet: recoveryWallet,
             });
             setShowAuthFlow(false);
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return wallet;
+            return recoveryWallet;
         }
-        const supportedAuthenticators = getEnabledEmbeddedWalletsAuthenticators.getEnabledEmbeddedWalletsAuthenticators((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _f === void 0 ? void 0 : _f.supportedSecurityMethods);
+        const supportedAuthenticators = getEnabledEmbeddedWalletsAuthenticators.getEnabledEmbeddedWalletsAuthenticators((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _h === void 0 ? void 0 : _h.supportedSecurityMethods);
         const supportedAuthenticatorMethods = supportedAuthenticators
             ? Object.keys(supportedAuthenticators)
             : [];

package/src/lib/utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js

@@ -95,7 +95,10 @@ const usePasskeyRecovery = () => {
         return true;
     }), [wallet, isTurnkeyWalletWithoutAuthenticator, isSessionRestored]);
     const initPasskeyRecoveryProcess = useCallback((authenticatorType, currentAction) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f;
+        var _f, _g, _h;
+        // Recovery can target a non-primary wallet (e.g. a later wallet in the
+        // upgrade flow); fall back to the primary wallet.
+        const recoveryWallet = (_g = (_f = currentAction === null || currentAction === void 0 ? void 0 : currentAction.settings) === null || _f === void 0 ? void 0 : _f.wallet) !== null && _g !== void 0 ? _g : wallet;
         const validateRecoveryRequest = () => {
             if (!user) {
                 throw new Error(USER_NOT_LOGGED_IN);
@@ -106,25 +109,26 @@ const usePasskeyRecovery = () => {
             if (!hasEmbeddedWallet(user)) {
                 throw new Error('Dynamic embedded wallet not found');
             }
-            if (wallet && !isPasskeyWalletConnector(wallet.connector)) {
+            if (recoveryWallet &&
+                !isPasskeyWalletConnector(recoveryWallet.connector)) {
                 throw new Error('Dynamic embedded wallet not found.');
             }
         };
         validateRecoveryRequest();
-        const turnkeyRecoveryHandler = (wallet === null || wallet === void 0 ? void 0 : wallet.connector).getAuthenticatorHandler();
+        const turnkeyRecoveryHandler = (recoveryWallet === null || recoveryWallet === void 0 ? void 0 : recoveryWallet.connector).getAuthenticatorHandler();
         // email auth - session is still up, so create passkey authenticator usign the same session
         if (authenticatorType === 'passkey' &&
             turnkeyRecoveryHandler.isSessionActive()) {
             yield addNewPasskeyAuthenticator({
                 environmentId,
                 user,
-                wallet: wallet,
+                wallet: recoveryWallet,
             });
             setShowAuthFlow(false);
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return wallet;
+            return recoveryWallet;
         }
-        const supportedAuthenticators = getEnabledEmbeddedWalletsAuthenticators((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _f === void 0 ? void 0 : _f.supportedSecurityMethods);
+        const supportedAuthenticators = getEnabledEmbeddedWalletsAuthenticators((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _h === void 0 ? void 0 : _h.supportedSecurityMethods);
         const supportedAuthenticatorMethods = supportedAuthenticators
             ? Object.keys(supportedAuthenticators)
             : [];

package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.cjs

@@ -123,7 +123,9 @@ const useWalletCreation = () => {
             }
             logger.logger.error('Error creating dynamic waas wallet', error);
             setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
-            clearStackAndPush('backup-unsuccessful');
+            clearStackAndPush('backup-unsuccessful', {
+                errorMessage: error.message,
+            });
         },
     });
 };

package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.js

@@ -119,7 +119,9 @@ const useWalletCreation = () => {
             }
             logger.error('Error creating dynamic waas wallet', error);
             setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
-            clearStackAndPush('backup-unsuccessful');
+            clearStackAndPush('backup-unsuccessful', {
+                errorMessage: error.message,
+            });
         },
     });
 };

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.cjs

@@ -124,7 +124,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
-const BackupUnsuccessfulView = () => {
+const BackupUnsuccessfulView = ({ errorMessage, }) => {
     var _a, _b;
     const { t } = reactI18next.useTranslation();
     const projectSettings = useProjectSettings.useProjectSettings();
@@ -167,7 +167,7 @@ const BackupUnsuccessfulView = () => {
                                             position: 'absolute',
                                             top: '50%',
                                             transform: 'translate(-50%, -50%)',
-                                        } })] })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), jsxRuntime.jsx("div", { className: classNames.classNames('button-group', {
+                                        } })] })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), errorMessage && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'error-1', className: 'backup-error-message', children: errorMessage })), jsxRuntime.jsx("div", { className: classNames.classNames('button-group', {
                             'button-group--with-help-section': hasContactInfo,
                         }), children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'retry-button', buttonVariant: 'brand-primary', type: 'submit', onClick: onTryAgainClick, copykey: 'dyn_waas.backup_unsuccessful.try_again', typographyProps: {
                                 color: 'inherit',

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-export declare const BackupUnsuccessfulView: React.FC;
+type BackupUnsuccessfulViewProps = {
+    errorMessage?: string;
+};
+export declare const BackupUnsuccessfulView: React.FC<BackupUnsuccessfulViewProps>;
 export default BackupUnsuccessfulView;

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.js

@@ -120,7 +120,7 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
-const BackupUnsuccessfulView = () => {
+const BackupUnsuccessfulView = ({ errorMessage, }) => {
     var _a, _b;
     const { t } = useTranslation();
     const projectSettings = useProjectSettings();
@@ -163,7 +163,7 @@ const BackupUnsuccessfulView = () => {
                                             position: 'absolute',
                                             top: '50%',
                                             transform: 'translate(-50%, -50%)',
-                                        } })] })] }), jsx(Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), jsx("div", { className: classNames('button-group', {
+                                        } })] })] }), jsx(Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), errorMessage && (jsx(Typography, { variant: 'body_mini', color: 'error-1', className: 'backup-error-message', children: errorMessage })), jsx("div", { className: classNames('button-group', {
                             'button-group--with-help-section': hasContactInfo,
                         }), children: jsx(TypographyButton, { buttonClassName: 'retry-button', buttonVariant: 'brand-primary', type: 'submit', onClick: onTryAgainClick, copykey: 'dyn_waas.backup_unsuccessful.try_again', typographyProps: {
                                 color: 'inherit',

package/src/lib/views/WalletUpgradeFlowView/WalletUpgradeFlowView.cjs

@@ -78,6 +78,7 @@ var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs
 require('../../components/IconButton/IconButton.cjs');
 var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
 var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
+var getProperErrorMessage = require('../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
 var useDynamicWaas = require('../../utils/hooks/useDynamicWaas/useDynamicWaas.cjs');
 var useRefreshAuth = require('../../utils/hooks/useRefreshAuth/useRefreshAuth.cjs');
 require('../../utils/hooks/useWalletDelegation/DelegationError.cjs');
@@ -104,6 +105,7 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysMfaWidgetView/ManagePas
 require('../../widgets/DynamicWidget/views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.cjs');
 require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 var Textarea = require('../../components/Textarea/Textarea.cjs');
+var NeedHelpSection = require('../../components/NeedHelpSection/NeedHelpSection.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('@marsidev/react-turnstile');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
@@ -124,19 +126,20 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
-const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
-    var _a;
+const WalletUpgradeFlowView = ({ wallets, method, startIndex = 0, onComplete, onCancel, }) => {
+    var _a, _b;
     const { setShowAuthFlow, user, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
     const { upgradeToDynamicWaas } = useDynamicWaas.useDynamicWaas();
     const { t } = reactI18next.useTranslation();
     const { pushView } = ViewContext.useViewContext();
-    const [currentWalletIndex, setCurrentWalletIndex] = React.useState(0);
+    const [currentWalletIndex, setCurrentWalletIndex] = React.useState(startIndex);
     const [privateKeyInput, setPrivateKeyInput] = React.useState('');
     const [iframeContainerRef, setIframeContainerRef] = React.useState(null);
     const isLastWallet = currentWalletIndex === wallets.length - 1;
     const completedSteps = currentWalletIndex;
     const totalSteps = wallets.length;
     const refresh = useRefreshAuth.useRefreshAuth();
+    const walletCredential = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find((cred) => { var _a; return cred.address === ((_a = wallets[currentWalletIndex]) === null || _a === void 0 ? void 0 : _a.address); });
     // Check if current wallet is a WaaS wallet based on its properties
     const isWaasWallet = Boolean(user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((vc) => { var _a; return (_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('dynamicwaas'); }));
     const onExportReady = (isReady, wallet) => {
@@ -159,6 +162,22 @@ const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
             dynamicEvents.dynamicEvents.emit('embeddedWalletRevealFailed', err);
         },
     });
+    // Map the raw export failure (e.g. a rejected WebAuthn ceremony) to the
+    // same user-facing copy the main widget export view shows.
+    const exportErrorText = React.useMemo(() => {
+        if (!exportError) {
+            return undefined;
+        }
+        try {
+            return getProperErrorMessage.getProperErrorMessage(exportError, user);
+        }
+        catch (e) {
+            if (e instanceof utils.AccessBlockedError) {
+                pushView('access-blocked');
+            }
+            return undefined;
+        }
+    }, [exportError, pushView, user]);
     // Track successful export for emitting event on unmount
     const revealedWalletRef = React.useRef(null);
     React.useEffect(() => {
@@ -216,11 +235,13 @@ const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
                                         ? 'wallet-upgrade-flow-view__step--completed'
                                         : ''} ${index === currentWalletIndex
                                         ? 'wallet-upgrade-flow-view__step--current'
-                                        : ''}`, children: [jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-indicator', children: index < completedSteps ? (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-check', children: "\u2713" })) : (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-number', children: index + 1 })) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: index <= currentWalletIndex ? 'primary' : 'secondary', className: 'wallet-upgrade-flow-view__step-title', children: getStepTitle(index) })] }), index < totalSteps - 1 && (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-separator' }))] }, index))) }) })) }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__content', children: [exportError && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: exportError instanceof Error
-                            ? exportError.message
-                            : t('dyn_wallet_upgrade_flow.export_failed') })), upgradeError && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: upgradeError instanceof Error
+                                        : ''}`, children: [jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-indicator', children: index < completedSteps ? (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-check', children: "\u2713" })) : (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-number', children: index + 1 })) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: index <= currentWalletIndex ? 'primary' : 'secondary', className: 'wallet-upgrade-flow-view__step-title', children: getStepTitle(index) })] }), index < totalSteps - 1 && (jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__step-separator' }))] }, index))) }) })) }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__content', children: [exportError && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: exportErrorText !== null && exportErrorText !== void 0 ? exportErrorText : t('dyn_wallet_upgrade_flow.export_failed') })), upgradeError && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: upgradeError instanceof Error
                             ? upgradeError.message
-                            : t('dyn_wallet_upgrade_flow.upgrade_failed') })), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__title-section', children: [jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_wallet_upgrade_flow.title') }), jsxRuntime.jsx(Typography.Typography, { color: 'secondary', className: 'wallet-upgrade-flow-view__subtitle', children: t('dyn_wallet_upgrade_flow.copy_private_key_subtitle') })] }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__export-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_normal', weight: 'bold', className: 'wallet-upgrade-flow-view__section-title', children: t('dyn_wallet_upgrade_flow.copy_private_key_title') }), jsxRuntime.jsx(EmbeddedWalletExport.EmbeddedWalletExport, { wallet: wallets[currentWalletIndex], isTurnkeyWallet: true, isWaasWallet: isWaasWallet, data: exportData, onIframeContainerRef: setIframeContainerRef, onExportReady: onExportReady }, `wallet-export-${currentWalletIndex}-${(_a = wallets[currentWalletIndex]) === null || _a === void 0 ? void 0 : _a.id}`)] }), jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__input-section', children: jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__input-container', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', copykey: 'dyn_embedded_reveal.step_2_title', children: [jsxRuntime.jsx("span", { className: 'wallet-upgrade-flow__step-description', children: t('dyn_wallet_upgrade_flow.step_2_upgrade_description') }), ' '] }), jsxRuntime.jsx(Textarea.Textarea, { id: 'paste-private-key-input', value: privateKeyInput, onChange: (e) => setPrivateKeyInput(e.target.value), variant: 'regular', className: 'wallet-upgrade-flow__paste-input', label: '' })] }) })] }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', onClick: () => handleUpgradeWallet(), disabled: !privateKeyInput.trim() || isUpgrading, loading: isUpgrading, copykey: 'dyn_wallet_upgrade_flow.upgrade_button', typographyProps: {
+                            : t('dyn_wallet_upgrade_flow.upgrade_failed') })), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__title-section', children: [jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_wallet_upgrade_flow.title') }), jsxRuntime.jsx(Typography.Typography, { color: 'secondary', className: 'wallet-upgrade-flow-view__subtitle', children: t('dyn_wallet_upgrade_flow.copy_private_key_subtitle') })] }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__export-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_normal', weight: 'bold', className: 'wallet-upgrade-flow-view__section-title', children: t('dyn_wallet_upgrade_flow.copy_private_key_title') }), jsxRuntime.jsx(EmbeddedWalletExport.EmbeddedWalletExport, { wallet: wallets[currentWalletIndex], isTurnkeyWallet: true, isWaasWallet: isWaasWallet, data: exportData, onIframeContainerRef: setIframeContainerRef, onExportReady: onExportReady }, `wallet-export-${currentWalletIndex}-${(_b = wallets[currentWalletIndex]) === null || _b === void 0 ? void 0 : _b.id}`)] }), jsxRuntime.jsx("div", { className: 'wallet-upgrade-flow-view__input-section', children: jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__input-container', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', copykey: 'dyn_embedded_reveal.step_2_title', children: [jsxRuntime.jsx("span", { className: 'wallet-upgrade-flow__step-description', children: t('dyn_wallet_upgrade_flow.step_2_upgrade_description') }), ' '] }), jsxRuntime.jsx(Textarea.Textarea, { id: 'paste-private-key-input', value: privateKeyInput, onChange: (e) => setPrivateKeyInput(e.target.value), variant: 'regular', className: 'wallet-upgrade-flow__paste-input', label: '' })] }) }), exportError && (jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, { isExport: true, walletCredential: walletCredential, wallet: wallets[currentWalletIndex], goBack: () => pushView('wallet-upgrade-flow-view', {
+                            method,
+                            startIndex: currentWalletIndex,
+                            wallets,
+                        }) }))] }), jsxRuntime.jsxs("div", { className: 'wallet-upgrade-flow-view__actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', onClick: () => handleUpgradeWallet(), disabled: !privateKeyInput.trim() || isUpgrading, loading: isUpgrading, copykey: 'dyn_wallet_upgrade_flow.upgrade_button', typographyProps: {
                             color: 'inherit',
                         }, expanded: true, children: t('dyn_wallet_upgrade_flow.upgrade_wallet') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'tertiary', onClick: handleClose, disabled: isUpgrading, children: t('dyn_wallet_upgrade_flow.cancel') })] })] }));
 };

package/src/lib/views/WalletUpgradeFlowView/WalletUpgradeFlowView.d.ts

@@ -3,6 +3,7 @@ import { Wallet, WalletConnectorCore } from '@dynamic-labs/wallet-connector-core
 export interface WalletUpgradeFlowViewProps {
     wallets: Wallet<WalletConnectorCore.WalletConnector>[];
     method: 'new' | 'existing';
+    startIndex?: number;
     onComplete?: () => void;
     onCancel?: () => void;
 }

package/src/lib/views/WalletUpgradeFlowView/WalletUpgradeFlowView.js

@@ -1,9 +1,9 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useMemo, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DynamicError } from '@dynamic-labs/utils';
+import { AccessBlockedError, DynamicError } from '@dynamic-labs/utils';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '@dynamic-labs/iconic';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
@@ -74,6 +74,7 @@ import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.j
 import '../../components/IconButton/IconButton.js';
 import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
 import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
+import { getProperErrorMessage } from '../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
 import { useDynamicWaas } from '../../utils/hooks/useDynamicWaas/useDynamicWaas.js';
 import { useRefreshAuth } from '../../utils/hooks/useRefreshAuth/useRefreshAuth.js';
 import '../../utils/hooks/useWalletDelegation/DelegationError.js';
@@ -100,6 +101,7 @@ import '../../widgets/DynamicWidget/views/ManagePasskeysMfaWidgetView/ManagePass
 import '../../widgets/DynamicWidget/views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
 import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
 import { Textarea } from '../../components/Textarea/Textarea.js';
+import { NeedHelpSection } from '../../components/NeedHelpSection/NeedHelpSection.js';
 import '@hcaptcha/react-hcaptcha';
 import '@marsidev/react-turnstile';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
@@ -120,19 +122,20 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
-const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
-    var _a;
+const WalletUpgradeFlowView = ({ wallets, method, startIndex = 0, onComplete, onCancel, }) => {
+    var _a, _b;
     const { setShowAuthFlow, user, environmentId } = useInternalDynamicContext();
     const { upgradeToDynamicWaas } = useDynamicWaas();
     const { t } = useTranslation();
     const { pushView } = useViewContext();
-    const [currentWalletIndex, setCurrentWalletIndex] = useState(0);
+    const [currentWalletIndex, setCurrentWalletIndex] = useState(startIndex);
     const [privateKeyInput, setPrivateKeyInput] = useState('');
     const [iframeContainerRef, setIframeContainerRef] = useState(null);
     const isLastWallet = currentWalletIndex === wallets.length - 1;
     const completedSteps = currentWalletIndex;
     const totalSteps = wallets.length;
     const refresh = useRefreshAuth();
+    const walletCredential = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find((cred) => { var _a; return cred.address === ((_a = wallets[currentWalletIndex]) === null || _a === void 0 ? void 0 : _a.address); });
     // Check if current wallet is a WaaS wallet based on its properties
     const isWaasWallet = Boolean(user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((vc) => { var _a; return (_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('dynamicwaas'); }));
     const onExportReady = (isReady, wallet) => {
@@ -155,6 +158,22 @@ const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
             dynamicEvents.emit('embeddedWalletRevealFailed', err);
         },
     });
+    // Map the raw export failure (e.g. a rejected WebAuthn ceremony) to the
+    // same user-facing copy the main widget export view shows.
+    const exportErrorText = useMemo(() => {
+        if (!exportError) {
+            return undefined;
+        }
+        try {
+            return getProperErrorMessage(exportError, user);
+        }
+        catch (e) {
+            if (e instanceof AccessBlockedError) {
+                pushView('access-blocked');
+            }
+            return undefined;
+        }
+    }, [exportError, pushView, user]);
     // Track successful export for emitting event on unmount
     const revealedWalletRef = useRef(null);
     useEffect(() => {
@@ -212,11 +231,13 @@ const WalletUpgradeFlowView = ({ wallets, method, onComplete, onCancel, }) => {
                                         ? 'wallet-upgrade-flow-view__step--completed'
                                         : ''} ${index === currentWalletIndex
                                         ? 'wallet-upgrade-flow-view__step--current'
-                                        : ''}`, children: [jsx("div", { className: 'wallet-upgrade-flow-view__step-indicator', children: index < completedSteps ? (jsx("div", { className: 'wallet-upgrade-flow-view__step-check', children: "\u2713" })) : (jsx("div", { className: 'wallet-upgrade-flow-view__step-number', children: index + 1 })) }), jsx(Typography, { variant: 'body_small', color: index <= currentWalletIndex ? 'primary' : 'secondary', className: 'wallet-upgrade-flow-view__step-title', children: getStepTitle(index) })] }), index < totalSteps - 1 && (jsx("div", { className: 'wallet-upgrade-flow-view__step-separator' }))] }, index))) }) })) }), jsxs("div", { className: 'wallet-upgrade-flow-view__content', children: [exportError && (jsx(ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: exportError instanceof Error
-                            ? exportError.message
-                            : t('dyn_wallet_upgrade_flow.export_failed') })), upgradeError && (jsx(ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: upgradeError instanceof Error
+                                        : ''}`, children: [jsx("div", { className: 'wallet-upgrade-flow-view__step-indicator', children: index < completedSteps ? (jsx("div", { className: 'wallet-upgrade-flow-view__step-check', children: "\u2713" })) : (jsx("div", { className: 'wallet-upgrade-flow-view__step-number', children: index + 1 })) }), jsx(Typography, { variant: 'body_small', color: index <= currentWalletIndex ? 'primary' : 'secondary', className: 'wallet-upgrade-flow-view__step-title', children: getStepTitle(index) })] }), index < totalSteps - 1 && (jsx("div", { className: 'wallet-upgrade-flow-view__step-separator' }))] }, index))) }) })) }), jsxs("div", { className: 'wallet-upgrade-flow-view__content', children: [exportError && (jsx(ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: exportErrorText !== null && exportErrorText !== void 0 ? exportErrorText : t('dyn_wallet_upgrade_flow.export_failed') })), upgradeError && (jsx(ErrorContainer, { className: 'wallet-upgrade-flow-view__error', children: upgradeError instanceof Error
                             ? upgradeError.message
-                            : t('dyn_wallet_upgrade_flow.upgrade_failed') })), jsxs("div", { className: 'wallet-upgrade-flow-view__title-section', children: [jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_wallet_upgrade_flow.title') }), jsx(Typography, { color: 'secondary', className: 'wallet-upgrade-flow-view__subtitle', children: t('dyn_wallet_upgrade_flow.copy_private_key_subtitle') })] }), jsxs("div", { className: 'wallet-upgrade-flow-view__export-section', children: [jsx(Typography, { color: 'primary', variant: 'body_normal', weight: 'bold', className: 'wallet-upgrade-flow-view__section-title', children: t('dyn_wallet_upgrade_flow.copy_private_key_title') }), jsx(EmbeddedWalletExport, { wallet: wallets[currentWalletIndex], isTurnkeyWallet: true, isWaasWallet: isWaasWallet, data: exportData, onIframeContainerRef: setIframeContainerRef, onExportReady: onExportReady }, `wallet-export-${currentWalletIndex}-${(_a = wallets[currentWalletIndex]) === null || _a === void 0 ? void 0 : _a.id}`)] }), jsx("div", { className: 'wallet-upgrade-flow-view__input-section', children: jsxs("div", { className: 'wallet-upgrade-flow-view__input-container', children: [jsxs(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', copykey: 'dyn_embedded_reveal.step_2_title', children: [jsx("span", { className: 'wallet-upgrade-flow__step-description', children: t('dyn_wallet_upgrade_flow.step_2_upgrade_description') }), ' '] }), jsx(Textarea, { id: 'paste-private-key-input', value: privateKeyInput, onChange: (e) => setPrivateKeyInput(e.target.value), variant: 'regular', className: 'wallet-upgrade-flow__paste-input', label: '' })] }) })] }), jsxs("div", { className: 'wallet-upgrade-flow-view__actions', children: [jsx(TypographyButton, { buttonVariant: 'brand-primary', onClick: () => handleUpgradeWallet(), disabled: !privateKeyInput.trim() || isUpgrading, loading: isUpgrading, copykey: 'dyn_wallet_upgrade_flow.upgrade_button', typographyProps: {
+                            : t('dyn_wallet_upgrade_flow.upgrade_failed') })), jsxs("div", { className: 'wallet-upgrade-flow-view__title-section', children: [jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', children: t('dyn_wallet_upgrade_flow.title') }), jsx(Typography, { color: 'secondary', className: 'wallet-upgrade-flow-view__subtitle', children: t('dyn_wallet_upgrade_flow.copy_private_key_subtitle') })] }), jsxs("div", { className: 'wallet-upgrade-flow-view__export-section', children: [jsx(Typography, { color: 'primary', variant: 'body_normal', weight: 'bold', className: 'wallet-upgrade-flow-view__section-title', children: t('dyn_wallet_upgrade_flow.copy_private_key_title') }), jsx(EmbeddedWalletExport, { wallet: wallets[currentWalletIndex], isTurnkeyWallet: true, isWaasWallet: isWaasWallet, data: exportData, onIframeContainerRef: setIframeContainerRef, onExportReady: onExportReady }, `wallet-export-${currentWalletIndex}-${(_b = wallets[currentWalletIndex]) === null || _b === void 0 ? void 0 : _b.id}`)] }), jsx("div", { className: 'wallet-upgrade-flow-view__input-section', children: jsxs("div", { className: 'wallet-upgrade-flow-view__input-container', children: [jsxs(Typography, { variant: 'body_normal', weight: 'bold', color: 'primary', copykey: 'dyn_embedded_reveal.step_2_title', children: [jsx("span", { className: 'wallet-upgrade-flow__step-description', children: t('dyn_wallet_upgrade_flow.step_2_upgrade_description') }), ' '] }), jsx(Textarea, { id: 'paste-private-key-input', value: privateKeyInput, onChange: (e) => setPrivateKeyInput(e.target.value), variant: 'regular', className: 'wallet-upgrade-flow__paste-input', label: '' })] }) }), exportError && (jsx(NeedHelpSection, { isExport: true, walletCredential: walletCredential, wallet: wallets[currentWalletIndex], goBack: () => pushView('wallet-upgrade-flow-view', {
+                            method,
+                            startIndex: currentWalletIndex,
+                            wallets,
+                        }) }))] }), jsxs("div", { className: 'wallet-upgrade-flow-view__actions', children: [jsx(TypographyButton, { buttonVariant: 'brand-primary', onClick: () => handleUpgradeWallet(), disabled: !privateKeyInput.trim() || isUpgrading, loading: isUpgrading, copykey: 'dyn_wallet_upgrade_flow.upgrade_button', typographyProps: {
                             color: 'inherit',
                         }, expanded: true, children: t('dyn_wallet_upgrade_flow.upgrade_wallet') }), jsx(TypographyButton, { buttonVariant: 'tertiary', onClick: handleClose, disabled: isUpgrading, children: t('dyn_wallet_upgrade_flow.cancel') })] })] }));
 };

package/src/lib/views/viewToComponentMap.d.ts

@@ -4,7 +4,9 @@ export declare const viewToComponentMap: {
     'account-exists': () => JSX.Element;
     'account-upgraded': import("react").FC;
     'auth-loading': import("react").FC;
-    'backup-unsuccessful': import("react").FC<{}>;
+    'backup-unsuccessful': import("react").FC<{
+        errorMessage?: string | undefined;
+    }>;
     'bridge-next-wallet-connection': import("react").FC;
     'bridge-summary': () => JSX.Element;
     'bridge-welcome': () => JSX.Element;