@dynamic-labs/sdk-react-core 4.0.0-alpha.18 → 4.0.0-alpha.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +11 -11
- package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.cjs +4 -2
- package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.js +4 -2
- package/src/lib/locale/en/translation.cjs +7 -4
- package/src/lib/locale/en/translation.d.ts +4 -1
- package/src/lib/locale/en/translation.js +7 -4
- package/src/lib/styles/index.shadow.cjs +1 -1
- package/src/lib/styles/index.shadow.js +1 -1
- package/src/lib/utils/hooks/index.d.ts +1 -0
- package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.cjs +6 -11
- package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.js +6 -11
- package/src/lib/utils/hooks/useDebounce/index.d.ts +1 -0
- package/src/lib/utils/hooks/useDebounce/useDebounce.cjs +22 -0
- package/src/lib/utils/hooks/useDebounce/useDebounce.d.ts +1 -0
- package/src/lib/utils/hooks/useDebounce/useDebounce.js +18 -0
- package/src/lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.cjs +5 -2
- package/src/lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.d.ts +1 -1
- package/src/lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.js +5 -2
- package/src/lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs +2 -0
- package/src/lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.d.ts +1 -0
- package/src/lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js +2 -0
- package/src/lib/utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.cjs +58 -16
- package/src/lib/utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.d.ts +4 -1
- package/src/lib/utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.js +59 -17
- package/src/lib/utils/hooks/useUserAuth/useUserAuth.cjs +5 -4
- package/src/lib/utils/hooks/useUserAuth/useUserAuth.js +5 -4
- package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs +23 -10
- package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.d.ts +1 -0
- package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js +23 -10
|
@@ -97,12 +97,14 @@ require('../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs')
|
|
|
97
97
|
require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
|
|
98
98
|
require('../../../../index.cjs');
|
|
99
99
|
require('../../../store/state/tokenBalances.cjs');
|
|
100
|
+
var useSyncEmbeddedWalletFlow = require('../../../utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.cjs');
|
|
100
101
|
require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
101
102
|
var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
|
|
102
103
|
|
|
103
|
-
const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
104
|
+
const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) => {
|
|
104
105
|
var _a, _b, _c, _d;
|
|
105
106
|
const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
|
|
107
|
+
const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow.useSyncEmbeddedWalletFlow();
|
|
106
108
|
const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
|
|
107
109
|
const { shadowRoot } = ShadowDOM.useShadowDOMContext();
|
|
108
110
|
const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
|
|
@@ -145,6 +147,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
145
147
|
}));
|
|
146
148
|
const { mutate: handleExportWallet, isLoading, error, data, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
147
149
|
var _g, _h, _j;
|
|
150
|
+
handleAcknowledgeExportPrompt();
|
|
148
151
|
if (isCoinbaseMpcWallet) {
|
|
149
152
|
return (wallet === null || wallet === void 0 ? void 0 : wallet.connector).exportWalletKeys();
|
|
150
153
|
}
|
|
@@ -216,7 +219,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
216
219
|
!error && (jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsxRuntime.jsx(info.ReactComponent, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsxRuntime.jsx("button", { onClick: () => {
|
|
217
220
|
setShowAuthFlow(false);
|
|
218
221
|
setDynamicWidgetView('send-balance');
|
|
219
|
-
}, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) })) })] }));
|
|
222
|
+
}, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header__hero', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) }) })) })] }));
|
|
220
223
|
React.useEffect(() => {
|
|
221
224
|
var _a;
|
|
222
225
|
if (((_a = iframeContainerRef === null || iframeContainerRef === void 0 ? void 0 : iframeContainerRef.current) === null || _a === void 0 ? void 0 : _a.children) && data) {
|
|
@@ -232,21 +235,31 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
232
235
|
const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
|
|
233
236
|
? t('dyn_embedded_reveal.private_key_title')
|
|
234
237
|
: t('dyn_embedded_reveal.recovery_phrase_title');
|
|
235
|
-
const
|
|
236
|
-
|
|
237
|
-
|
|
238
|
+
const getTitle = () => {
|
|
239
|
+
if (hasInjectedCredential) {
|
|
240
|
+
return credentialTitle;
|
|
241
|
+
}
|
|
242
|
+
if (isPromptForExport) {
|
|
243
|
+
return t('dyn_embedded_reveal.prompt_for_export_title');
|
|
244
|
+
}
|
|
245
|
+
return t('dyn_embedded_reveal.agreement_title');
|
|
246
|
+
};
|
|
247
|
+
const title = getTitle();
|
|
238
248
|
// this element needs to be on the DOM before the reveal occurs
|
|
239
249
|
// so we can inject the key into it once it's fetched from coinbase.
|
|
240
250
|
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: {
|
|
241
251
|
borderRadius: '0.75rem',
|
|
242
252
|
}, allow: 'clipboard-write' }));
|
|
243
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: 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: {
|
|
253
|
+
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: {
|
|
244
254
|
color: 'inherit',
|
|
245
|
-
}, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.
|
|
246
|
-
|
|
247
|
-
|
|
255
|
+
}, 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: () => {
|
|
256
|
+
handleAcknowledgeExportPrompt();
|
|
257
|
+
setShowAuthFlow(false);
|
|
258
|
+
}, 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: {
|
|
248
259
|
color: 'inherit',
|
|
249
|
-
}, onClick: () => handleExportWallet(), disabled: !acknowledgement1 || exportLoading, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label',
|
|
260
|
+
}, onClick: () => handleExportWallet(), disabled: !acknowledgement1 || exportLoading, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', style: { width: '100%' }, className: 'embedded-reveal-view__body__button', expanded: true, children: isPromptForExport
|
|
261
|
+
? t('dyn_embedded_reveal.backup_button_label')
|
|
262
|
+
: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
|
|
250
263
|
};
|
|
251
264
|
|
|
252
265
|
exports.EmbeddedRevealView = EmbeddedRevealView;
|
|
@@ -93,12 +93,14 @@ import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
|
|
|
93
93
|
import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
|
|
94
94
|
import '../../../../index.js';
|
|
95
95
|
import '../../../store/state/tokenBalances.js';
|
|
96
|
+
import { useSyncEmbeddedWalletFlow } from '../../../utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.js';
|
|
96
97
|
import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
97
98
|
import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
|
|
98
99
|
|
|
99
|
-
const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
100
|
+
const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) => {
|
|
100
101
|
var _a, _b, _c, _d;
|
|
101
102
|
const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext();
|
|
103
|
+
const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow();
|
|
102
104
|
const { isTurnkeyWallet } = useIsTurnkeyWallet();
|
|
103
105
|
const { shadowRoot } = useShadowDOMContext();
|
|
104
106
|
const { setDynamicWidgetView } = useWidgetContext();
|
|
@@ -141,6 +143,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
141
143
|
}));
|
|
142
144
|
const { mutate: handleExportWallet, isLoading, error, data, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
143
145
|
var _g, _h, _j;
|
|
146
|
+
handleAcknowledgeExportPrompt();
|
|
144
147
|
if (isCoinbaseMpcWallet) {
|
|
145
148
|
return (wallet === null || wallet === void 0 ? void 0 : wallet.connector).exportWalletKeys();
|
|
146
149
|
}
|
|
@@ -212,7 +215,7 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
212
215
|
!error && (jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsx(SvgInfo, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsx(Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxs(Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsx("button", { onClick: () => {
|
|
213
216
|
setShowAuthFlow(false);
|
|
214
217
|
setDynamicWidgetView('send-balance');
|
|
215
|
-
}, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsx("div", { className: 'embedded-reveal-view__header', children: jsx(SvgExportEmbeddedHero, {}) })) })] }));
|
|
218
|
+
}, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsx("div", { className: 'embedded-reveal-view__header', children: jsx("div", { className: 'embedded-reveal-view__header__hero', children: jsx(SvgExportEmbeddedHero, {}) }) })) })] }));
|
|
216
219
|
useEffect(() => {
|
|
217
220
|
var _a;
|
|
218
221
|
if (((_a = iframeContainerRef === null || iframeContainerRef === void 0 ? void 0 : iframeContainerRef.current) === null || _a === void 0 ? void 0 : _a.children) && data) {
|
|
@@ -228,21 +231,31 @@ const EmbeddedRevealView = ({ exportPrivateKey, }) => {
|
|
|
228
231
|
const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
|
|
229
232
|
? t('dyn_embedded_reveal.private_key_title')
|
|
230
233
|
: t('dyn_embedded_reveal.recovery_phrase_title');
|
|
231
|
-
const
|
|
232
|
-
|
|
233
|
-
|
|
234
|
+
const getTitle = () => {
|
|
235
|
+
if (hasInjectedCredential) {
|
|
236
|
+
return credentialTitle;
|
|
237
|
+
}
|
|
238
|
+
if (isPromptForExport) {
|
|
239
|
+
return t('dyn_embedded_reveal.prompt_for_export_title');
|
|
240
|
+
}
|
|
241
|
+
return t('dyn_embedded_reveal.agreement_title');
|
|
242
|
+
};
|
|
243
|
+
const title = getTitle();
|
|
234
244
|
// this element needs to be on the DOM before the reveal occurs
|
|
235
245
|
// so we can inject the key into it once it's fetched from coinbase.
|
|
236
246
|
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: {
|
|
237
247
|
borderRadius: '0.75rem',
|
|
238
248
|
}, allow: 'clipboard-write' }));
|
|
239
|
-
return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: 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: {
|
|
249
|
+
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: {
|
|
240
250
|
color: 'inherit',
|
|
241
|
-
}, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxs(Fragment, { children: [
|
|
242
|
-
|
|
243
|
-
|
|
251
|
+
}, 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: () => {
|
|
252
|
+
handleAcknowledgeExportPrompt();
|
|
253
|
+
setShowAuthFlow(false);
|
|
254
|
+
}, 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: {
|
|
244
255
|
color: 'inherit',
|
|
245
|
-
}, onClick: () => handleExportWallet(), disabled: !acknowledgement1 || exportLoading, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label',
|
|
256
|
+
}, onClick: () => handleExportWallet(), disabled: !acknowledgement1 || exportLoading, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', style: { width: '100%' }, className: 'embedded-reveal-view__body__button', expanded: true, children: isPromptForExport
|
|
257
|
+
? t('dyn_embedded_reveal.backup_button_label')
|
|
258
|
+
: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
|
|
246
259
|
};
|
|
247
260
|
|
|
248
261
|
export { EmbeddedRevealView };
|