@dynamic-labs/sdk-react-core 4.0.0-alpha.22 → 4.0.0-alpha.24

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

@@ -136,6 +136,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 copykey: 'dyn_chainalysis_blocked_wallet.title',
                 heading: t('dyn_chainalysis_blocked_wallet.title'),
             },
+            'embedded-delete-view': {
+                copykey: 'dyn_embedded_delete.title',
+                heading: t('dyn_embedded_delete.title'),
+            },
             'farcaster-connect-view': {
                 copykey: 'dyn_login.qr_code.title',
                 heading: t('dyn_login.qr_code.title'),

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

@@ -132,6 +132,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 copykey: 'dyn_chainalysis_blocked_wallet.title',
                 heading: t('dyn_chainalysis_blocked_wallet.title'),
             },
+            'embedded-delete-view': {
+                copykey: 'dyn_embedded_delete.title',
+                heading: t('dyn_embedded_delete.title'),
+            },
             'farcaster-connect-view': {
                 copykey: 'dyn_login.qr_code.title',
                 heading: t('dyn_login.qr_code.title'),

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

@@ -103,7 +103,7 @@ const useWalletOptions = () => {
     const walletOptions = React.useMemo(() => {
         var _a;
         return (_a = walletConnectorOptions === null || walletConnectorOptions === void 0 ? void 0 : walletConnectorOptions.filter((option) => !embeddedWalletsKeys.includes(option.walletConnector.key)).map((option) => {
-            const groupName = option.group
+            const groupName = option.group && Boolean(Object.keys(walletBook$1).length)
                 ? walletBook.getWalletGroup(walletBook$1, option.group).name
                 : undefined;
             return {

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

@@ -99,7 +99,7 @@ const useWalletOptions = () => {
     const walletOptions = useMemo(() => {
         var _a;
         return (_a = walletConnectorOptions === null || walletConnectorOptions === void 0 ? void 0 : walletConnectorOptions.filter((option) => !embeddedWalletsKeys.includes(option.walletConnector.key)).map((option) => {
-            const groupName = option.group
+            const groupName = option.group && Boolean(Object.keys(walletBook).length)
                 ? getWalletGroup(walletBook, option.group).name
                 : undefined;
             return {

package/src/lib/views/EmbeddedDeleteView/EmbeddedDeleteView.cjs

@@ -0,0 +1,154 @@
+'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 utils = require('@dynamic-labs/utils');
+require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../components/Alert/Alert.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var deleteEmbeddedHero = require('../../shared/assets/delete-embedded-hero.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
+require('../../store/state/loadingAndLifecycle.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../config/ApiEndpoint.cjs');
+var embeddedWallets = require('../../data/api/embeddedWallets/embeddedWallets.cjs');
+require('../../store/state/user/user.cjs');
+require('../../locale/locale.cjs');
+require('../../store/state/projectSettings/projectSettings.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../context/WalletContext/WalletContext.cjs');
+var useSmartWallets = require('../../utils/hooks/useSmartWallets/useSmartWallets.cjs');
+require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+require('../CollectUserDataView/useFields.cjs');
+require('../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../store/state/environmentId.cjs');
+require('../../store/state/walletConnectorOptions.cjs');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
+var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
+require('../../store/state/sendBalances.cjs');
+require('../../components/Input/Input.cjs');
+require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var getProperErrorMessage = require('../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
+require('../../../index.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+var Checkbox = require('../../components/Checkbox/Checkbox.cjs');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/IsBrowser/IsBrowser.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('qrcode');
+
+const EmbeddedDeleteView = () => {
+    const { primaryWallet, setShowAuthFlow, environmentId, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
+    const [isAcknowledgementChecked, setIsAcknowledgementChecked] = React.useState(false);
+    const [error, setError] = React.useState(undefined);
+    const { t } = reactI18next.useTranslation();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const { isSmartWallet, getEOAWallet } = useSmartWallets.useSmartWallets();
+    const errorText = React.useMemo(() => {
+        if (!error) {
+            return undefined;
+        }
+        if (error instanceof utils.DynamicError) {
+            return error.message;
+        }
+        try {
+            return getProperErrorMessage.getProperErrorMessage(error);
+        }
+        catch (e) {
+            return 'An unexpected error occured while deleting your embedded wallets.';
+        }
+    }, [error]);
+    const handleDeleteEmbeddedWallets = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!primaryWallet) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const deleteEmbeddedWalletsRawPayload = yield embeddedWallets.getDeleteEmbeddedWalletsRequest({
+                environmentId,
+            });
+            const connector = isSmartWallet(primaryWallet)
+                ? (_a = getEOAWallet(primaryWallet)) === null || _a === void 0 ? void 0 : _a.connector
+                : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+            const signedDeleteWalletsRequest = yield connector.stampDeleteSubOrganizationRequest({
+                request: deleteEmbeddedWalletsRawPayload,
+            });
+            yield embeddedWallets.deleteEmbeddedWallets({
+                deleteEmbeddedWalletsRequest: signedDeleteWalletsRequest,
+                environmentId,
+            });
+            handleLogOut();
+        }
+        catch (error) {
+            setError(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const contentHeader = (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: 'embedded-delete-view__body__description', children: jsxRuntime.jsx("div", { className: 'embedded-delete-view__header', children: jsxRuntime.jsx(deleteEmbeddedHero.ReactComponent, {}) }) }) }));
+    return (jsxRuntime.jsxs("div", { className: 'embedded-delete-view', children: [jsxRuntime.jsx("div", { className: 'embedded-delete-view__body', children: contentHeader }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-delete-view__body__card', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.description_1', children: t('dyn_embedded_delete.description_1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { fontWeight: 'bold', letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.description_2', children: t('dyn_embedded_delete.description_2') })] }), jsxRuntime.jsx("div", { className: 'embedded-delete-view__body__confirm_card', children: jsxRuntime.jsxs("button", { className: 'embedded-delete-view__body__card__acknowledgement', "data-testid": 'embedded-delete-checkbox', onClick: () => setIsAcknowledgementChecked(!isAcknowledgementChecked), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: isAcknowledgementChecked, className: 'embedded-delete-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.acknowledgement', children: t('dyn_embedded_delete.acknowledgement') }) })] }) }), jsxRuntime.jsxs("div", { className: 'embedded-delete-view__body__cta_button_wrapper', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', typographyProps: {
+                            color: 'inherit',
+                        }, onClick: () => setShowAuthFlow(false), disabled: false, loading: false, dataTestId: 'embedded-delete-cancel-button', copykey: 'dyn_embedded_delete.cancel_button', buttonClassName: 'embedded-delete-view__body__button', children: t('dyn_embedded_delete.cancel_button') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            color: 'inherit',
+                            style: {
+                                fontSize: '13px',
+                            },
+                        }, onClick: handleDeleteEmbeddedWallets, disabled: isLoading || !isAcknowledgementChecked, loading: isLoading, dataTestId: 'embedded-delete-action-button', copykey: 'dyn_embedded_delete.action_button', buttonClassName: 'embedded-delete-view__body__button', children: t('dyn_embedded_delete.action_button') })] })] }));
+};
+
+exports.EmbeddedDeleteView = EmbeddedDeleteView;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmbeddedDeleteView: () => JSX.Element;

package/src/lib/views/EmbeddedDeleteView/EmbeddedDeleteView.js

@@ -0,0 +1,150 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DynamicError } from '@dynamic-labs/utils';
+import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../components/Alert/Alert.js';
+import '../../events/dynamicEvents.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgDeleteEmbeddedHero } from '../../shared/assets/delete-embedded-hero.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../store/state/loadingAndLifecycle.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../config/ApiEndpoint.js';
+import { getDeleteEmbeddedWalletsRequest, deleteEmbeddedWallets } from '../../data/api/embeddedWallets/embeddedWallets.js';
+import '../../store/state/user/user.js';
+import '../../locale/locale.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../context/WalletContext/WalletContext.js';
+import { useSmartWallets } from '../../utils/hooks/useSmartWallets/useSmartWallets.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import '../../context/LoadingContext/LoadingContext.js';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../CollectUserDataView/useFields.js';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../store/state/environmentId.js';
+import '../../store/state/walletConnectorOptions.js';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
+import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
+import 'formik';
+import '../../store/state/sendBalances.js';
+import '../../components/Input/Input.js';
+import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { getProperErrorMessage } from '../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
+import '../../../index.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import { Checkbox } from '../../components/Checkbox/Checkbox.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../store/state/tokenBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/IsBrowser/IsBrowser.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'qrcode';
+
+const EmbeddedDeleteView = () => {
+    const { primaryWallet, setShowAuthFlow, environmentId, handleLogOut } = useInternalDynamicContext();
+    const [isAcknowledgementChecked, setIsAcknowledgementChecked] = useState(false);
+    const [error, setError] = useState(undefined);
+    const { t } = useTranslation();
+    const [isLoading, setIsLoading] = useState(false);
+    const { isSmartWallet, getEOAWallet } = useSmartWallets();
+    const errorText = useMemo(() => {
+        if (!error) {
+            return undefined;
+        }
+        if (error instanceof DynamicError) {
+            return error.message;
+        }
+        try {
+            return getProperErrorMessage(error);
+        }
+        catch (e) {
+            return 'An unexpected error occured while deleting your embedded wallets.';
+        }
+    }, [error]);
+    const handleDeleteEmbeddedWallets = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!primaryWallet) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const deleteEmbeddedWalletsRawPayload = yield getDeleteEmbeddedWalletsRequest({
+                environmentId,
+            });
+            const connector = isSmartWallet(primaryWallet)
+                ? (_a = getEOAWallet(primaryWallet)) === null || _a === void 0 ? void 0 : _a.connector
+                : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+            const signedDeleteWalletsRequest = yield connector.stampDeleteSubOrganizationRequest({
+                request: deleteEmbeddedWalletsRawPayload,
+            });
+            yield deleteEmbeddedWallets({
+                deleteEmbeddedWalletsRequest: signedDeleteWalletsRequest,
+                environmentId,
+            });
+            handleLogOut();
+        }
+        catch (error) {
+            setError(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const contentHeader = (jsx("div", { children: jsx("div", { className: 'embedded-delete-view__body__description', children: jsx("div", { className: 'embedded-delete-view__header', children: jsx(SvgDeleteEmbeddedHero, {}) }) }) }));
+    return (jsxs("div", { className: 'embedded-delete-view', children: [jsx("div", { className: 'embedded-delete-view__body', children: contentHeader }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-delete-view__body__card', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.description_1', children: t('dyn_embedded_delete.description_1') }), jsx(Typography, { variant: 'body_normal', color: 'primary', style: { fontWeight: 'bold', letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.description_2', children: t('dyn_embedded_delete.description_2') })] }), jsx("div", { className: 'embedded-delete-view__body__confirm_card', children: jsxs("button", { className: 'embedded-delete-view__body__card__acknowledgement', "data-testid": 'embedded-delete-checkbox', onClick: () => setIsAcknowledgementChecked(!isAcknowledgementChecked), children: [jsx("div", { children: jsx(Checkbox, { checked: isAcknowledgementChecked, className: 'embedded-delete-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_delete.acknowledgement', children: t('dyn_embedded_delete.acknowledgement') }) })] }) }), jsxs("div", { className: 'embedded-delete-view__body__cta_button_wrapper', children: [jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', typographyProps: {
+                            color: 'inherit',
+                        }, onClick: () => setShowAuthFlow(false), disabled: false, loading: false, dataTestId: 'embedded-delete-cancel-button', copykey: 'dyn_embedded_delete.cancel_button', buttonClassName: 'embedded-delete-view__body__button', children: t('dyn_embedded_delete.cancel_button') }), jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            color: 'inherit',
+                            style: {
+                                fontSize: '13px',
+                            },
+                        }, onClick: handleDeleteEmbeddedWallets, disabled: isLoading || !isAcknowledgementChecked, loading: isLoading, dataTestId: 'embedded-delete-action-button', copykey: 'dyn_embedded_delete.action_button', buttonClassName: 'embedded-delete-view__body__button', children: t('dyn_embedded_delete.action_button') })] })] }));
+};
+
+export { EmbeddedDeleteView };

package/src/lib/views/EmbeddedDeleteView/index.d.ts

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

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -250,9 +250,15 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const coinbaseWaasKeyExportIframe = (jsxRuntime.jsx("iframe", { src: (_d = ApiEndpoint === null || ApiEndpoint === void 0 ? void 0 : ApiEndpoint.getBaseUrl()) === null || _d === void 0 ? void 0 : _d.replace('api/v0', 'coinbase-waas-key-export.html'), id: 'coinbase-waas-key-export', title: 'Coinbase WaaS key export', height: hasRevealedCoinbaseMpcKey ? '100%' : 0, width: hasRevealedCoinbaseMpcKey ? '100%' : 0, style: {
             borderRadius: '0.75rem',
         }, allow: 'clipboard-write' }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
-                                color: 'inherit',
-                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(walletV2.ReactComponent, { height: 16, width: 16 }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(eyeOffIcon.ReactComponent, { height: 16, width: 16 }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__confirm_card', children: jsxRuntime.jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
+    const handleClickUnlink = () => {
+        setView('embedded-delete-view');
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
+                                        color: 'inherit',
+                                    }, children: t('dyn_embedded_reveal.done_button_label') }), !exportPrivateKey && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'embedded-reveal-view__body__unlink_button', buttonVariant: 'tertiary', buttonPadding: 'none', copykey: 'dyn_embedded_reveal.unlink', onClick: handleClickUnlink, typographyProps: {
+                                        color: 'secondary',
+                                        variant: 'button_tertiary',
+                                    }, children: t('dyn_embedded_reveal.unlink') }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(walletV2.ReactComponent, { height: 16, width: 16 }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(eyeOffIcon.ReactComponent, { height: 16, width: 16 }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__confirm_card', children: jsxRuntime.jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
                                                 handleAcknowledgeExportPrompt();
                                                 setShowAuthFlow(false);
                                             }, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.skip_button_label', expanded: true, buttonClassName: 'embedded-reveal-view__body__button', children: t('dyn_embedded_reveal.skip_button_label') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -246,9 +246,15 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const coinbaseWaasKeyExportIframe = (jsx("iframe", { src: (_d = ApiEndpoint === null || ApiEndpoint === void 0 ? void 0 : ApiEndpoint.getBaseUrl()) === null || _d === void 0 ? void 0 : _d.replace('api/v0', 'coinbase-waas-key-export.html'), id: 'coinbase-waas-key-export', title: 'Coinbase WaaS key export', height: hasRevealedCoinbaseMpcKey ? '100%' : 0, width: hasRevealedCoinbaseMpcKey ? '100%' : 0, style: {
             borderRadius: '0.75rem',
         }, allow: 'clipboard-write' }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
-                                color: 'inherit',
-                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgWalletV2, { height: 16, width: 16 }) }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxs(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgEyeOffIcon, { height: 16, width: 16 }) }), jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsx("div", { className: 'embedded-reveal-view__body__confirm_card', children: jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
+    const handleClickUnlink = () => {
+        setView('embedded-delete-view');
+    };
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, isCoinbaseMpcWallet && coinbaseWaasKeyExportIframe, isTurnkeyWallet ? (jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxs(Fragment, { children: [jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
+                                        color: 'inherit',
+                                    }, children: t('dyn_embedded_reveal.done_button_label') }), !exportPrivateKey && (jsx(TypographyButton, { buttonClassName: 'embedded-reveal-view__body__unlink_button', buttonVariant: 'tertiary', buttonPadding: 'none', copykey: 'dyn_embedded_reveal.unlink', onClick: handleClickUnlink, typographyProps: {
+                                        color: 'secondary',
+                                        variant: 'button_tertiary',
+                                    }, children: t('dyn_embedded_reveal.unlink') }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgWalletV2, { height: 16, width: 16 }) }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxs(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgEyeOffIcon, { height: 16, width: 16 }) }), jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsx("div", { className: 'embedded-reveal-view__body__confirm_card', children: jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
                                                 handleAcknowledgeExportPrompt();
                                                 setShowAuthFlow(false);
                                             }, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.skip_button_label', expanded: true, buttonClassName: 'embedded-reveal-view__body__button', children: t('dyn_embedded_reveal.skip_button_label') })), jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {

package/src/lib/views/viewToComponentMap.cjs

@@ -125,6 +125,7 @@ var WalletLockedView = require('./WalletLockedView/WalletLockedView.cjs');
 var WalletRedirectView = require('./WalletRedirectView/WalletRedirectView.cjs');
 var WalletSignSpinnerView = require('./WalletSignSpinnerView/WalletSignSpinnerView.cjs');
 var WalletUsedView = require('./WalletUsedView/WalletUsedView.cjs');
+var EmbeddedDeleteView = require('./EmbeddedDeleteView/EmbeddedDeleteView.cjs');
 require('../store/state/tokenBalances.cjs');
 require('../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 require('../components/InlineWidget/InlineWidget.cjs');
@@ -147,6 +148,7 @@ const viewToComponentMap = {
     'collect-user-data-login-no-wallet': CollectUserDataViewNoWallet.CollectUserDataViewNoWallet,
     'create-password-view': CreatePasswordView.CreatePasswordView,
     'email-wallet-otp-verification-view': EmailWalletOTPVerificationView.EmailWalletOTPVerificationView,
+    'embedded-delete-view': EmbeddedDeleteView.EmbeddedDeleteView,
     'embedded-reveal-account-view': EmbeddedRevealView.EmbeddedRevealView,
     'embedded-reveal-view': EmbeddedRevealView.EmbeddedRevealView,
     'embedded-wallet-auth-choice': EmbeddedAuthChoice.EmbeddedAuthChoice,

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

@@ -14,6 +14,7 @@ export declare const viewToComponentMap: {
     }>;
     'create-password-view': import("react").FC<import("./CreatePasswordView/CreatePasswordView").CreatePasswordViewProps>;
     'email-wallet-otp-verification-view': () => JSX.Element;
+    'embedded-delete-view': () => JSX.Element;
     'embedded-reveal-account-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
     'embedded-reveal-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
     'embedded-wallet-auth-choice': import("react").FC<import("./Passkey/EmbeddedAuthChoice/EmbeddedAuthChoice").EmbeddedAuthChoiceProps>;

package/src/lib/views/viewToComponentMap.js

@@ -121,6 +121,7 @@ import { WalletLockedView } from './WalletLockedView/WalletLockedView.js';
 import { WalletRedirectView } from './WalletRedirectView/WalletRedirectView.js';
 import { WalletSignSpinnerView } from './WalletSignSpinnerView/WalletSignSpinnerView.js';
 import { WalletUsedView } from './WalletUsedView/WalletUsedView.js';
+import { EmbeddedDeleteView } from './EmbeddedDeleteView/EmbeddedDeleteView.js';
 import '../store/state/tokenBalances.js';
 import '../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import '../components/InlineWidget/InlineWidget.js';
@@ -143,6 +144,7 @@ const viewToComponentMap = {
     'collect-user-data-login-no-wallet': CollectUserDataViewNoWallet,
     'create-password-view': CreatePasswordView,
     'email-wallet-otp-verification-view': EmailWalletOTPVerificationView,
+    'embedded-delete-view': EmbeddedDeleteView,
     'embedded-reveal-account-view': EmbeddedRevealView,
     'embedded-reveal-view': EmbeddedRevealView,
     'embedded-wallet-auth-choice': EmbeddedAuthChoice,