@dynamic-labs/sdk-react-core 4.0.0-alpha.17 → 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 +14 -0
- package/package.cjs +2 -2
- package/package.js +2 -2
- package/package.json +12 -12
- 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
- package/src/lib/views/MobileWalletRedirectView/MobileWalletRedirectView.cjs +6 -7
- package/src/lib/views/MobileWalletRedirectView/MobileWalletRedirectView.js +6 -7
|
@@ -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 };
|
|
@@ -6,9 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var reactI18next = require('react-i18next');
|
|
9
|
-
var walletBook = require('@dynamic-labs/wallet-book');
|
|
10
9
|
var utils = require('@dynamic-labs/utils');
|
|
10
|
+
var walletBook = require('@dynamic-labs/wallet-book');
|
|
11
|
+
var Icon = require('../../components/Icon/Icon.cjs');
|
|
11
12
|
var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
|
|
13
|
+
var Typography = require('../../components/Typography/Typography.cjs');
|
|
14
|
+
var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
|
|
12
15
|
require('../../context/DynamicContext/DynamicContext.cjs');
|
|
13
16
|
require('@dynamic-labs/sdk-api-core');
|
|
14
17
|
require('../../shared/logger.cjs');
|
|
@@ -16,7 +19,6 @@ require('@dynamic-labs/iconic');
|
|
|
16
19
|
require('@dynamic-labs/wallet-connector-core');
|
|
17
20
|
require('../../context/ViewContext/ViewContext.cjs');
|
|
18
21
|
var externalLink = require('../../shared/assets/externalLink.cjs');
|
|
19
|
-
var footerInfoIcon = require('../../shared/assets/footer-info-icon.cjs');
|
|
20
22
|
require('../../utils/constants/colors.cjs');
|
|
21
23
|
require('../../utils/constants/values.cjs');
|
|
22
24
|
require('../../store/state/loadingAndLifecycle.cjs');
|
|
@@ -52,10 +54,7 @@ require('@dynamic-labs/rpc-providers');
|
|
|
52
54
|
require('../../store/state/environmentId.cjs');
|
|
53
55
|
require('../../store/state/walletConnectorOptions.cjs');
|
|
54
56
|
require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
|
|
55
|
-
|
|
56
|
-
var Typography = require('../../components/Typography/Typography.cjs');
|
|
57
|
-
var Icon = require('../../components/Icon/Icon.cjs');
|
|
58
|
-
var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
|
|
57
|
+
require('../../components/Alert/Alert.cjs');
|
|
59
58
|
require('../../components/ShadowDOM/ShadowDOM.cjs');
|
|
60
59
|
require('../../components/IconButton/IconButton.cjs');
|
|
61
60
|
require('../../components/InlineWidget/InlineWidget.cjs');
|
|
@@ -116,7 +115,7 @@ const MobileWalletRedirectView = ({ onRetry, }) => {
|
|
|
116
115
|
height: pixelToRem.pixelToRem(size),
|
|
117
116
|
width: pixelToRem.pixelToRem(size),
|
|
118
117
|
} }));
|
|
119
|
-
return (jsxRuntime.jsxs("div", { className: 'mobile-wallet-redirect', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: makeIcon(94 * IconWithSpinner.iconRatio), iconSize: 94, isSpinning: true, className: 'mobile-wallet-redirect__icon-with-spinner' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', className: 'mobile-wallet-redirect__copy-text', copykey: 'dyn_login.mobile_wallet_redirect.prompt', children: t('dyn_login.mobile_wallet_redirect.prompt') }), jsxRuntime.jsxs(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', typographyProps: { color: 'white', variant: 'button_secondary' }, onClick: onRetry, buttonPadding: 'small', children: [t('dyn_login.mobile_wallet_redirect.open_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] }), jsxRuntime.jsx(
|
|
118
|
+
return (jsxRuntime.jsxs("div", { className: 'mobile-wallet-redirect', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: makeIcon(94 * IconWithSpinner.iconRatio), iconSize: 94, isSpinning: true, className: 'mobile-wallet-redirect__icon-with-spinner' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', className: 'mobile-wallet-redirect__copy-text', copykey: 'dyn_login.mobile_wallet_redirect.prompt', children: t('dyn_login.mobile_wallet_redirect.prompt') }), jsxRuntime.jsxs(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', typographyProps: { color: 'white', variant: 'button_secondary' }, onClick: onRetry, buttonPadding: 'small', children: [t('dyn_login.mobile_wallet_redirect.open_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'mobile-wallet-redirect__alert', children: t('dyn_login.mobile_wallet_redirect.redirect_fail_message', {
|
|
120
119
|
walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
|
|
121
120
|
}) }), storeName && (jsxRuntime.jsxs("div", { className: 'mobile-wallet-redirect__wallet-app', onClick: openWalletApp, children: [jsxRuntime.jsxs("div", { className: 'mobile-wallet-redirect__wallet-app__group', children: [makeIcon(26), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', weight: 'bold', children: [t('dyn_login.mobile_wallet_redirect.get_app_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] })] }), jsxRuntime.jsxs("div", { className: 'mobile-wallet-redirect__wallet-app__group', children: [jsxRuntime.jsx(Typography.Typography, { className: 'mobile-wallet-redirect__wallet-app__group__app-store', variant: 'body_small', weight: 'bold', color: 'secondary', children: storeName }), jsxRuntime.jsx(Icon.Icon, { color: 'text-secondary', size: 'small', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) })] })] }))] }));
|
|
122
121
|
};
|
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
|
-
import { useWalletBookContext, getWalletLinks, WalletIcon } from '@dynamic-labs/wallet-book';
|
|
6
5
|
import { isIOS, isAndroid, isSamsungBrowser } from '@dynamic-labs/utils';
|
|
6
|
+
import { useWalletBookContext, getWalletLinks, WalletIcon } from '@dynamic-labs/wallet-book';
|
|
7
|
+
import { Icon } from '../../components/Icon/Icon.js';
|
|
7
8
|
import { IconWithSpinner, iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.js';
|
|
9
|
+
import { Typography } from '../../components/Typography/Typography.js';
|
|
10
|
+
import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
|
|
8
11
|
import '../../context/DynamicContext/DynamicContext.js';
|
|
9
12
|
import '@dynamic-labs/sdk-api-core';
|
|
10
13
|
import '../../shared/logger.js';
|
|
@@ -12,7 +15,6 @@ import '@dynamic-labs/iconic';
|
|
|
12
15
|
import '@dynamic-labs/wallet-connector-core';
|
|
13
16
|
import '../../context/ViewContext/ViewContext.js';
|
|
14
17
|
import { ReactComponent as SvgExternalLink } from '../../shared/assets/externalLink.js';
|
|
15
|
-
import { ReactComponent as SvgFooterInfoIcon } from '../../shared/assets/footer-info-icon.js';
|
|
16
18
|
import '../../utils/constants/colors.js';
|
|
17
19
|
import '../../utils/constants/values.js';
|
|
18
20
|
import '../../store/state/loadingAndLifecycle.js';
|
|
@@ -48,10 +50,7 @@ import '@dynamic-labs/rpc-providers';
|
|
|
48
50
|
import '../../store/state/environmentId.js';
|
|
49
51
|
import '../../store/state/walletConnectorOptions.js';
|
|
50
52
|
import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
|
|
51
|
-
import
|
|
52
|
-
import { Typography } from '../../components/Typography/Typography.js';
|
|
53
|
-
import { Icon } from '../../components/Icon/Icon.js';
|
|
54
|
-
import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
|
|
53
|
+
import '../../components/Alert/Alert.js';
|
|
55
54
|
import '../../components/ShadowDOM/ShadowDOM.js';
|
|
56
55
|
import '../../components/IconButton/IconButton.js';
|
|
57
56
|
import '../../components/InlineWidget/InlineWidget.js';
|
|
@@ -112,7 +111,7 @@ const MobileWalletRedirectView = ({ onRetry, }) => {
|
|
|
112
111
|
height: pixelToRem(size),
|
|
113
112
|
width: pixelToRem(size),
|
|
114
113
|
} }));
|
|
115
|
-
return (jsxs("div", { className: 'mobile-wallet-redirect', children: [jsx(IconWithSpinner, { Icon: makeIcon(94 * iconRatio), iconSize: 94, isSpinning: true, className: 'mobile-wallet-redirect__icon-with-spinner' }), jsx(Typography, { variant: 'body_normal', weight: 'regular', className: 'mobile-wallet-redirect__copy-text', copykey: 'dyn_login.mobile_wallet_redirect.prompt', children: t('dyn_login.mobile_wallet_redirect.prompt') }), jsxs(TypographyButton, { buttonVariant: 'brand-primary', typographyProps: { color: 'white', variant: 'button_secondary' }, onClick: onRetry, buttonPadding: 'small', children: [t('dyn_login.mobile_wallet_redirect.open_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] }), jsx(
|
|
114
|
+
return (jsxs("div", { className: 'mobile-wallet-redirect', children: [jsx(IconWithSpinner, { Icon: makeIcon(94 * iconRatio), iconSize: 94, isSpinning: true, className: 'mobile-wallet-redirect__icon-with-spinner' }), jsx(Typography, { variant: 'body_normal', weight: 'regular', className: 'mobile-wallet-redirect__copy-text', copykey: 'dyn_login.mobile_wallet_redirect.prompt', children: t('dyn_login.mobile_wallet_redirect.prompt') }), jsxs(TypographyButton, { buttonVariant: 'brand-primary', typographyProps: { color: 'white', variant: 'button_secondary' }, onClick: onRetry, buttonPadding: 'small', children: [t('dyn_login.mobile_wallet_redirect.open_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] }), jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'mobile-wallet-redirect__alert', children: t('dyn_login.mobile_wallet_redirect.redirect_fail_message', {
|
|
116
115
|
walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
|
|
117
116
|
}) }), storeName && (jsxs("div", { className: 'mobile-wallet-redirect__wallet-app', onClick: openWalletApp, children: [jsxs("div", { className: 'mobile-wallet-redirect__wallet-app__group', children: [makeIcon(26), jsxs(Typography, { variant: 'body_small', weight: 'bold', children: [t('dyn_login.mobile_wallet_redirect.get_app_prompt'), ' ', selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name] })] }), jsxs("div", { className: 'mobile-wallet-redirect__wallet-app__group', children: [jsx(Typography, { className: 'mobile-wallet-redirect__wallet-app__group__app-store', variant: 'body_small', weight: 'bold', color: 'secondary', children: storeName }), jsx(Icon, { color: 'text-secondary', size: 'small', children: jsx(SvgExternalLink, {}) })] })] }))] }));
|
|
118
117
|
};
|