@dynamic-labs/sdk-react-core 4.49.0 → 4.50.1

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/BackupStepper.js

@@ -0,0 +1,33 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const STEPS = ['Cloud Backup', 'Download'];
+const BackupStepper = ({ currentStep, completedSteps, }) => {
+    const getStepClassName = (index) => {
+        const classes = ['waas-backup-view__step'];
+        if (index < completedSteps) {
+            classes.push('waas-backup-view__step--completed');
+        }
+        else if (index === currentStep) {
+            classes.push('waas-backup-view__step--current');
+        }
+        else {
+            classes.push('waas-backup-view__step--upcoming');
+        }
+        return classes.join(' ');
+    };
+    const getSeparatorClassName = () => {
+        const classes = ['waas-backup-view__step-separator'];
+        if (completedSteps >= 1) {
+            classes.push('waas-backup-view__step-separator--solid');
+        }
+        return classes.join(' ');
+    };
+    return (jsx("div", { className: 'waas-backup-view__stepper', children: STEPS.map((step, index) => (jsxs("div", { className: 'waas-backup-view__step-container', children: [jsx("div", { className: getStepClassName(index), children: jsx("div", { className: 'waas-backup-view__step-indicator', children: index < completedSteps ? (jsx(SvgCheck, { className: 'waas-backup-view__step-check' })) : (jsx("div", { className: 'waas-backup-view__step-number', children: index + 1 })) }) }), index < STEPS.length - 1 && (jsx("div", { className: getSeparatorClassName() }))] }, step))) }));
+};
+
+export { BackupStepper };

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupCloudProviderView.cjs

@@ -0,0 +1,49 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+var ErrorContainer = require('../../../../components/ErrorContainer/ErrorContainer.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var questionMark = require('../../../../shared/assets/question-mark.cjs');
+require('@dynamic-labs/iconic');
+var googleDrive = require('../../../../shared/assets/google-drive.cjs');
+var useSocialAccounts = require('../../../../utils/hooks/useSocialAccounts/useSocialAccounts.cjs');
+var useWalletBackup = require('../../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+var BackupStepper = require('./BackupStepper.cjs');
+
+const WaasBackupCloudProviderView = () => {
+    var _a;
+    const { pushView, goBack } = ViewContext.useViewContext();
+    const { t } = reactI18next.useTranslation();
+    const { isProcessingForProvider, error: socialError } = useSocialAccounts.useSocialAccounts();
+    const { ensureGoogleLinked } = useWalletBackup.useWalletBackup();
+    const [errorMessage, setErrorMessage] = React.useState(null);
+    const handleBackClick = React.useCallback(() => goBack(), [goBack]);
+    const handleInfoClick = React.useCallback(() => {
+        pushView('waas-backup-info-view');
+    }, [pushView]);
+    const handleGoogleDriveClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setErrorMessage(null);
+        const isLinked = yield ensureGoogleLinked();
+        if (!isLinked) {
+            setErrorMessage(t('dyn_waas.backup.error'));
+            return;
+        }
+        pushView('waas-backup-progress-view');
+    }), [ensureGoogleLinked, pushView, t]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const infoButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleInfoClick, "data-testid": 'info-button', children: jsxRuntime.jsx(questionMark.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: infoButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.title', children: t('dyn_waas.backup.title') }) }), jsxRuntime.jsx("div", { className: 'waas-backup-view', children: jsxRuntime.jsxs("div", { className: 'waas-backup-view__body', children: [jsxRuntime.jsx(BackupStepper.BackupStepper, { currentStep: 0, completedSteps: 0 }), (errorMessage || socialError) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'error', withIcon: false, children: (_a = socialError === null || socialError === void 0 ? void 0 : socialError.message) !== null && _a !== void 0 ? _a : errorMessage })), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.cloud_backup_title', className: 'waas-backup-view__cloud-title', children: t('dyn_waas.backup.cloud_backup_title', '1. Cloud Backup') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.cloud_backup_subtitle', className: 'waas-backup-view__cloud-subtitle', children: t('dyn_waas.backup.cloud_backup_subtitle', 'Back up your first key share to a cloud provider') }), jsxRuntime.jsxs("button", { type: 'button', className: 'waas-backup-view__provider-button', onClick: handleGoogleDriveClick, disabled: isProcessingForProvider(sdkApiCore.ProviderEnum.Google), "data-testid": 'google-drive-button', children: [jsxRuntime.jsx(googleDrive.ReactComponent, { className: 'waas-backup-view__provider-icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup.backup_to_google_drive', children: t('dyn_waas.backup.backup_to_google_drive', 'Backup to Google Drive') })] })] }) })] }));
+};
+
+exports.WaasBackupCloudProviderView = WaasBackupCloudProviderView;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupCloudProviderView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const WaasBackupCloudProviderView: FC;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupCloudProviderView.js

@@ -0,0 +1,45 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
+import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
+import '@dynamic-labs/iconic';
+import { ReactComponent as SvgGoogleDrive } from '../../../../shared/assets/google-drive.js';
+import { useSocialAccounts } from '../../../../utils/hooks/useSocialAccounts/useSocialAccounts.js';
+import { useWalletBackup } from '../../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+import { BackupStepper } from './BackupStepper.js';
+
+const WaasBackupCloudProviderView = () => {
+    var _a;
+    const { pushView, goBack } = useViewContext();
+    const { t } = useTranslation();
+    const { isProcessingForProvider, error: socialError } = useSocialAccounts();
+    const { ensureGoogleLinked } = useWalletBackup();
+    const [errorMessage, setErrorMessage] = useState(null);
+    const handleBackClick = useCallback(() => goBack(), [goBack]);
+    const handleInfoClick = useCallback(() => {
+        pushView('waas-backup-info-view');
+    }, [pushView]);
+    const handleGoogleDriveClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        setErrorMessage(null);
+        const isLinked = yield ensureGoogleLinked();
+        if (!isLinked) {
+            setErrorMessage(t('dyn_waas.backup.error'));
+            return;
+        }
+        pushView('waas-backup-progress-view');
+    }), [ensureGoogleLinked, pushView, t]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
+    const infoButton = (jsx(IconButton, { type: 'button', onClick: handleInfoClick, "data-testid": 'info-button', children: jsx(SvgQuestionMark, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: infoButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.title', children: t('dyn_waas.backup.title') }) }), jsx("div", { className: 'waas-backup-view', children: jsxs("div", { className: 'waas-backup-view__body', children: [jsx(BackupStepper, { currentStep: 0, completedSteps: 0 }), (errorMessage || socialError) && (jsx(ErrorContainer, { variant: 'error', withIcon: false, children: (_a = socialError === null || socialError === void 0 ? void 0 : socialError.message) !== null && _a !== void 0 ? _a : errorMessage })), jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.cloud_backup_title', className: 'waas-backup-view__cloud-title', children: t('dyn_waas.backup.cloud_backup_title', '1. Cloud Backup') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.cloud_backup_subtitle', className: 'waas-backup-view__cloud-subtitle', children: t('dyn_waas.backup.cloud_backup_subtitle', 'Back up your first key share to a cloud provider') }), jsxs("button", { type: 'button', className: 'waas-backup-view__provider-button', onClick: handleGoogleDriveClick, disabled: isProcessingForProvider(ProviderEnum.Google), "data-testid": 'google-drive-button', children: [jsx(SvgGoogleDrive, { className: 'waas-backup-view__provider-icon' }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup.backup_to_google_drive', children: t('dyn_waas.backup.backup_to_google_drive', 'Backup to Google Drive') })] })] }) })] }));
+};
+
+export { WaasBackupCloudProviderView };

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupDownloadView.cjs

@@ -0,0 +1,53 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var ErrorContainer = require('../../../../components/ErrorContainer/ErrorContainer.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var check = require('../../../../shared/assets/check.cjs');
+var download = require('../../../../shared/assets/download.cjs');
+var questionMark = require('../../../../shared/assets/question-mark.cjs');
+require('@dynamic-labs/iconic');
+var useWalletBackup = require('../../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+var BackupStepper = require('./BackupStepper.cjs');
+
+const WaasBackupDownloadView = () => {
+    const { pushView } = ViewContext.useViewContext();
+    const { t } = reactI18next.useTranslation();
+    const handleComplete = React.useCallback((walletCount) => {
+        pushView('waas-backup-success-view', { walletCount });
+    }, [pushView]);
+    const { currentIndex, hasError, isComplete, isProcessing, retry, startDownload, totalWallets, } = useWalletBackup.useDownloadKeyShares(handleComplete);
+    const handleInfoClick = React.useCallback(() => {
+        pushView('waas-backup-info-view');
+    }, [pushView]);
+    const infoButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleInfoClick, "data-testid": 'info-button', children: jsxRuntime.jsx(questionMark.ReactComponent, {}) }));
+    const getButtonContent = () => {
+        if (isComplete) {
+            return (jsxRuntime.jsxs("span", { className: 'waas-backup-view__download-button-content', children: [jsxRuntime.jsx(check.ReactComponent, { className: 'waas-backup-view__download-icon' }), t('dyn_waas.backup.download_complete')] }));
+        }
+        if (isProcessing) {
+            return (jsxRuntime.jsxs("span", { className: 'waas-backup-view__download-button-content', children: [jsxRuntime.jsx(download.ReactComponent, { className: 'waas-backup-view__download-icon' }), t('dyn_waas.backup.downloading', {
+                        current: currentIndex,
+                        total: totalWallets,
+                    })] }));
+        }
+        if (hasError) {
+            return t('dyn_waas.backup.error_try_again');
+        }
+        return t('dyn_waas.backup.download_key_share');
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: infoButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.title', children: t('dyn_waas.backup.title') }) }), jsxRuntime.jsx("div", { className: 'waas-backup-view', children: jsxRuntime.jsxs("div", { className: 'waas-backup-view__body', children: [jsxRuntime.jsx(BackupStepper.BackupStepper, { currentStep: 1, completedSteps: 1 }), hasError && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'error', withIcon: false, children: t('dyn_waas.backup.download_error') })), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.download_title', className: 'waas-backup-view__cloud-title', children: t('dyn_waas.backup.download_title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.download_subtitle', className: 'waas-backup-view__cloud-subtitle', children: t('dyn_waas.backup.download_subtitle') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'download-key-share-button', onClick: hasError ? retry : startDownload, disabled: isProcessing || isComplete, buttonVariant: isProcessing || isComplete ? 'secondary' : 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: getButtonContent() })] }) })] }));
+};
+
+exports.WaasBackupDownloadView = WaasBackupDownloadView;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupDownloadView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const WaasBackupDownloadView: FC;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupDownloadView.js

@@ -0,0 +1,49 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
+import { ReactComponent as SvgDownload } from '../../../../shared/assets/download.js';
+import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
+import '@dynamic-labs/iconic';
+import { useDownloadKeyShares } from '../../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+import { BackupStepper } from './BackupStepper.js';
+
+const WaasBackupDownloadView = () => {
+    const { pushView } = useViewContext();
+    const { t } = useTranslation();
+    const handleComplete = useCallback((walletCount) => {
+        pushView('waas-backup-success-view', { walletCount });
+    }, [pushView]);
+    const { currentIndex, hasError, isComplete, isProcessing, retry, startDownload, totalWallets, } = useDownloadKeyShares(handleComplete);
+    const handleInfoClick = useCallback(() => {
+        pushView('waas-backup-info-view');
+    }, [pushView]);
+    const infoButton = (jsx(IconButton, { type: 'button', onClick: handleInfoClick, "data-testid": 'info-button', children: jsx(SvgQuestionMark, {}) }));
+    const getButtonContent = () => {
+        if (isComplete) {
+            return (jsxs("span", { className: 'waas-backup-view__download-button-content', children: [jsx(SvgCheck, { className: 'waas-backup-view__download-icon' }), t('dyn_waas.backup.download_complete')] }));
+        }
+        if (isProcessing) {
+            return (jsxs("span", { className: 'waas-backup-view__download-button-content', children: [jsx(SvgDownload, { className: 'waas-backup-view__download-icon' }), t('dyn_waas.backup.downloading', {
+                        current: currentIndex,
+                        total: totalWallets,
+                    })] }));
+        }
+        if (hasError) {
+            return t('dyn_waas.backup.error_try_again');
+        }
+        return t('dyn_waas.backup.download_key_share');
+    };
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: infoButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.title', children: t('dyn_waas.backup.title') }) }), jsx("div", { className: 'waas-backup-view', children: jsxs("div", { className: 'waas-backup-view__body', children: [jsx(BackupStepper, { currentStep: 1, completedSteps: 1 }), hasError && (jsx(ErrorContainer, { variant: 'error', withIcon: false, children: t('dyn_waas.backup.download_error') })), jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.download_title', className: 'waas-backup-view__cloud-title', children: t('dyn_waas.backup.download_title') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.download_subtitle', className: 'waas-backup-view__cloud-subtitle', children: t('dyn_waas.backup.download_subtitle') }), jsx(TypographyButton, { dataTestId: 'download-key-share-button', onClick: hasError ? retry : startDownload, disabled: isProcessing || isComplete, buttonVariant: isProcessing || isComplete ? 'secondary' : 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: getButtonContent() })] }) })] }));
+};
+
+export { WaasBackupDownloadView };

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.cjs

@@ -6,31 +6,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
-var Typography = require('../../../../components/Typography/Typography.cjs');
-var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
-var Icon = require('../../../../components/Icon/Icon.cjs');
-var Alert = require('../../../../components/Alert/Alert.cjs');
-var close = require('../../../../shared/assets/close.cjs');
-var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var cautionTriangle = require('../../../../shared/assets/caution-triangle.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 require('@dynamic-labs/iconic');
-require('../../../../context/ViewContext/ViewContext.cjs');
 var filledQuestionMark = require('../../../../shared/assets/filled-question-mark.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 
 const WaasBackupInfoView = () => {
-    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { goBack } = ViewContext.useViewContext();
     const { t } = reactI18next.useTranslation();
-    const handleBackClick = React.useCallback(() => setDynamicWidgetView('waas-backup'), [setDynamicWidgetView]);
-    const handleCloseClick = React.useCallback(() => setDynamicWidgetView('account-and-security-settings'), [setDynamicWidgetView]);
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleCloseClick, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'waas-backup-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title', 'Why backup a share') }) }) }), jsxRuntime.jsx("div", { className: 'account-wrap', children: jsxRuntime.jsx("div", { className: 'settings-view__body', children: jsxRuntime.jsxs("div", { className: 'backup-content', children: [jsxRuntime.jsx("div", { className: 'backup-icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(filledQuestionMark.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.description', children: t('dyn_waas.backup_info.description', 'Your account uses strong security behind the scenes. Backing up a share adds additional security to your account by requiring the share to be retrieved if your account is used on another device.') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.storage', children: t('dyn_waas.backup_info.storage', 'You can store this backup share in a secure cloud.') }), jsxRuntime.jsx(Alert.Alert, { icon: 
-                                // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsx(Icon.Icon, { size: 'medium', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, { width: 24, height: 24 }) }), variant: 'warning', copykey: 'dyn_waas.backup_info.warning_alert', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'current-color', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', copykey: 'dyn_waas.backup_info.important', style: { color: 'var(--default-alert-1, #DD8500)' }, children: t('dyn_waas.backup_info.important', 'Important') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup_info.warning', children: t('dyn_waas.backup_info.warning', "Make sure you don't lose access to the backup share or you will not be able to restore this account!") })] }) }), jsxRuntime.jsx("div", { className: 'backup-actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'back-button', onClick: handleBackClick, buttonClassName: 'backup-button', typographyProps: {
-                                        color: 'primary',
-                                        weight: 'bold',
-                                    }, copykey: 'dyn_waas.backup_info.back', buttonPadding: 'small', children: t('dyn_waas.backup_info.back', 'Back') }) })] }) }) })] }));
+    const handleBackClick = React.useCallback(() => goBack(), [goBack]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title') }) }), jsxRuntime.jsx("div", { className: 'waas-backup-view', children: jsxRuntime.jsxs("div", { className: 'waas-backup-view__info', children: [jsxRuntime.jsx("div", { className: 'waas-backup-view__info-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(filledQuestionMark.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'medium', color: 'primary', copykey: 'dyn_waas.backup_info.subtitle', className: 'waas-backup-view__info-subtitle', children: t('dyn_waas.backup_info.subtitle') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup_info.description', className: 'waas-backup-view__info-description', children: t('dyn_waas.backup_info.description') }), jsxRuntime.jsxs("div", { className: 'waas-backup-view__info-alert', children: [jsxRuntime.jsx(cautionTriangle.ReactComponent, { className: 'waas-backup-view__info-alert-icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_waas.backup_info.warning') })] })] }) })] }));
 };
 
 exports.WaasBackupInfoView = WaasBackupInfoView;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.js

@@ -1,32 +1,23 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '../../../../components/Typography/Typography.js';
-import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
-import { Icon } from '../../../../components/Icon/Icon.js';
-import { Alert } from '../../../../components/Alert/Alert.js';
-import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
-import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCautionTriangle } from '../../../../shared/assets/caution-triangle.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import '@dynamic-labs/iconic';
-import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgFilledQuestionMark } from '../../../../shared/assets/filled-question-mark.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
 const WaasBackupInfoView = () => {
-    const { setDynamicWidgetView } = useWidgetContext();
+    const { goBack } = useViewContext();
     const { t } = useTranslation();
-    const handleBackClick = useCallback(() => setDynamicWidgetView('waas-backup'), [setDynamicWidgetView]);
-    const handleCloseClick = useCallback(() => setDynamicWidgetView('account-and-security-settings'), [setDynamicWidgetView]);
-    const closeButton = (jsx(IconButton, { type: 'button', onClick: handleCloseClick, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
-    return (jsxs("div", { className: 'waas-backup-view', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title', 'Why backup a share') }) }) }), jsx("div", { className: 'account-wrap', children: jsx("div", { className: 'settings-view__body', children: jsxs("div", { className: 'backup-content', children: [jsx("div", { className: 'backup-icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgFilledQuestionMark, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.description', children: t('dyn_waas.backup_info.description', 'Your account uses strong security behind the scenes. Backing up a share adds additional security to your account by requiring the share to be retrieved if your account is used on another device.') }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.storage', children: t('dyn_waas.backup_info.storage', 'You can store this backup share in a secure cloud.') }), jsx(Alert, { icon: 
-                                // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsx(Icon, { size: 'medium', children: jsx(SvgFooterInfoIcon, { width: 24, height: 24 }) }), variant: 'warning', copykey: 'dyn_waas.backup_info.warning_alert', children: jsxs(Typography, { variant: 'body_small', color: 'current-color', children: [jsx(Typography, { variant: 'body_normal', copykey: 'dyn_waas.backup_info.important', style: { color: 'var(--default-alert-1, #DD8500)' }, children: t('dyn_waas.backup_info.important', 'Important') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup_info.warning', children: t('dyn_waas.backup_info.warning', "Make sure you don't lose access to the backup share or you will not be able to restore this account!") })] }) }), jsx("div", { className: 'backup-actions', children: jsx(TypographyButton, { dataTestId: 'back-button', onClick: handleBackClick, buttonClassName: 'backup-button', typographyProps: {
-                                        color: 'primary',
-                                        weight: 'bold',
-                                    }, copykey: 'dyn_waas.backup_info.back', buttonPadding: 'small', children: t('dyn_waas.backup_info.back', 'Back') }) })] }) }) })] }));
+    const handleBackClick = useCallback(() => goBack(), [goBack]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title') }) }), jsx("div", { className: 'waas-backup-view', children: jsxs("div", { className: 'waas-backup-view__info', children: [jsx("div", { className: 'waas-backup-view__info-icon', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgFilledQuestionMark, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', weight: 'medium', color: 'primary', copykey: 'dyn_waas.backup_info.subtitle', className: 'waas-backup-view__info-subtitle', children: t('dyn_waas.backup_info.subtitle') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup_info.description', className: 'waas-backup-view__info-description', children: t('dyn_waas.backup_info.description') }), jsxs("div", { className: 'waas-backup-view__info-alert', children: [jsx(SvgCautionTriangle, { className: 'waas-backup-view__info-alert-icon' }), jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_waas.backup_info.warning') })] })] }) })] }));
 };
 
 export { WaasBackupInfoView };

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupProgressView.cjs

@@ -0,0 +1,52 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var exclamation = require('../../../../shared/assets/exclamation.cjs');
+require('@dynamic-labs/iconic');
+var googleDrive = require('../../../../shared/assets/google-drive.cjs');
+var useWalletBackup = require('../../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+
+const WaasBackupProgressView = () => {
+    const { goBack, pushView } = ViewContext.useViewContext();
+    const { t } = reactI18next.useTranslation();
+    const handleComplete = React.useCallback(() => {
+        pushView('waas-backup-download-view');
+    }, [pushView]);
+    const handleBackClick = React.useCallback(() => goBack(), [goBack]);
+    const { currentIndex, hasError, isComplete, retry, totalWallets } = useWalletBackup.useBackupWallets(handleComplete);
+    const getProgressText = () => {
+        if (isComplete) {
+            return t('dyn_waas.backup.progress_complete');
+        }
+        if (totalWallets === 0) {
+            return t('dyn_waas.backup.progress_initializing');
+        }
+        return t('dyn_waas.backup.progress_title', {
+            current: currentIndex,
+            total: totalWallets,
+        });
+    };
+    const renderProgressContent = () => {
+        if (hasError) {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup.error_title', className: 'waas-backup-view__progress-title', children: t('dyn_waas.backup.error_title') }), jsxRuntime.jsx("div", { className: 'waas-backup-view__progress-actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'retry-backup-button', onClick: retry, copykey: 'dyn_waas.backup.error_try_again', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_waas.backup.error_try_again') }) })] }));
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.progress_title', className: 'waas-backup-view__progress-title', children: getProgressText() }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.progress_subtitle', className: 'waas-backup-view__progress-subtitle', children: t('dyn_waas.backup.progress_subtitle') })] }));
+    };
+    const backButton = hasError ? (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })) : undefined;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.cloud_backup_header', children: t('dyn_waas.backup.cloud_backup_header') }) }), jsxRuntime.jsx("div", { className: 'waas-backup-view', children: jsxRuntime.jsxs("div", { className: 'waas-backup-view__progress', children: [jsxRuntime.jsxs("div", { className: `waas-backup-view__progress-icon ${hasError ? 'waas-backup-view__progress-icon--error' : ''}`, children: [jsxRuntime.jsx(googleDrive.ReactComponent, {}), hasError && (jsxRuntime.jsx("div", { className: 'waas-backup-view__progress-error-badge', children: jsxRuntime.jsx(exclamation.ReactComponent, {}) }))] }), renderProgressContent()] }) })] }));
+};
+
+exports.WaasBackupProgressView = WaasBackupProgressView;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupProgressView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const WaasBackupProgressView: FC;

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupProgressView.js

@@ -0,0 +1,48 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgExclamation } from '../../../../shared/assets/exclamation.js';
+import '@dynamic-labs/iconic';
+import { ReactComponent as SvgGoogleDrive } from '../../../../shared/assets/google-drive.js';
+import { useBackupWallets } from '../../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+
+const WaasBackupProgressView = () => {
+    const { goBack, pushView } = useViewContext();
+    const { t } = useTranslation();
+    const handleComplete = useCallback(() => {
+        pushView('waas-backup-download-view');
+    }, [pushView]);
+    const handleBackClick = useCallback(() => goBack(), [goBack]);
+    const { currentIndex, hasError, isComplete, retry, totalWallets } = useBackupWallets(handleComplete);
+    const getProgressText = () => {
+        if (isComplete) {
+            return t('dyn_waas.backup.progress_complete');
+        }
+        if (totalWallets === 0) {
+            return t('dyn_waas.backup.progress_initializing');
+        }
+        return t('dyn_waas.backup.progress_title', {
+            current: currentIndex,
+            total: totalWallets,
+        });
+    };
+    const renderProgressContent = () => {
+        if (hasError) {
+            return (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup.error_title', className: 'waas-backup-view__progress-title', children: t('dyn_waas.backup.error_title') }), jsx("div", { className: 'waas-backup-view__progress-actions', children: jsx(TypographyButton, { dataTestId: 'retry-backup-button', onClick: retry, copykey: 'dyn_waas.backup.error_try_again', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_waas.backup.error_try_again') }) })] }));
+        }
+        return (jsxs(Fragment, { children: [jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.progress_title', className: 'waas-backup-view__progress-title', children: getProgressText() }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.progress_subtitle', className: 'waas-backup-view__progress-subtitle', children: t('dyn_waas.backup.progress_subtitle') })] }));
+    };
+    const backButton = hasError ? (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) })) : undefined;
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.cloud_backup_header', children: t('dyn_waas.backup.cloud_backup_header') }) }), jsx("div", { className: 'waas-backup-view', children: jsxs("div", { className: 'waas-backup-view__progress', children: [jsxs("div", { className: `waas-backup-view__progress-icon ${hasError ? 'waas-backup-view__progress-icon--error' : ''}`, children: [jsx(SvgGoogleDrive, {}), hasError && (jsx("div", { className: 'waas-backup-view__progress-error-badge', children: jsx(SvgExclamation, {}) }))] }), renderProgressContent()] }) })] }));
+};
+
+export { WaasBackupProgressView };

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupSuccessView.cjs

@@ -0,0 +1,131 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var questionMark = require('../../../../shared/assets/question-mark.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/consts/index.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../../../_virtual/_tslib.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-sdk/client/core');
+require('../../../../client/client.cjs');
+require('@dynamic-labs-sdk/client');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/locale');
+require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../store/state/authMode/authMode.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+require('@dynamic-labs/types');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+var BackupStepper = require('./BackupStepper.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../context/DynamicWidgetContext.cjs');
+require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../../store/state/sendBalances.cjs');
+require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../components/PasskeyCard/PasskeyCard.cjs');
+require('../CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../../index.cjs');
+require('../ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../../store/state/tokenBalances.cjs');
+require('../../../../store/state/multichainBalances.cjs');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+
+const WaasBackupSuccessView = ({ walletCount = 1, }) => {
+    const { goBack, pushView } = ViewContext.useViewContext();
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
+    const handleBackClick = React.useCallback(() => goBack(), [goBack]);
+    const handleInfoClick = React.useCallback(() => {
+        pushView('waas-backup-info-view');
+    }, [pushView]);
+    const handleDoneClick = React.useCallback(() => {
+        setShowAuthFlow(false);
+    }, [setShowAuthFlow]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const infoButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleInfoClick, "data-testid": 'info-button', children: jsxRuntime.jsx(questionMark.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: infoButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup.success_title', children: t('dyn_waas.backup.success_title') }) }), jsxRuntime.jsx("div", { className: 'waas-backup-view', children: jsxRuntime.jsxs("div", { className: 'waas-backup-view__body waas-backup-view__body--centered', children: [jsxRuntime.jsx("div", { className: 'waas-backup-view__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(backupWaas.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(BackupStepper.BackupStepper, { currentStep: 1, completedSteps: 2 }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup.success_description', className: 'waas-backup-view__success-description', children: t('dyn_waas.backup.success_description', { count: walletCount }) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'done-button', onClick: handleDoneClick, buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_waas.backup.done') })] }) })] }));
+};
+
+exports.WaasBackupSuccessView = WaasBackupSuccessView;