@dynamic-labs/sdk-react-core 4.0.0-alpha.21 → 4.0.0-alpha.23
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 +19 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +11 -11
- package/src/lib/components/NetworkPicker/NetworkPicker.cjs +1 -1
- package/src/lib/components/NetworkPicker/NetworkPicker.js +1 -1
- package/src/lib/components/index.d.ts +1 -0
- package/src/lib/context/ViewContext/types/index.d.ts +1 -1
- package/src/lib/data/api/embeddedWallets/embeddedWallets.cjs +29 -0
- package/src/lib/data/api/embeddedWallets/embeddedWallets.d.ts +14 -0
- package/src/lib/data/api/embeddedWallets/embeddedWallets.js +28 -1
- package/src/lib/locale/en/translation.cjs +52 -1
- package/src/lib/locale/en/translation.d.ts +52 -1
- package/src/lib/locale/en/translation.js +52 -1
- package/src/lib/shared/assets/delete-embedded-hero.cjs +57 -0
- package/src/lib/shared/assets/delete-embedded-hero.js +33 -0
- package/src/lib/shared/assets/eye-outline.cjs +54 -0
- package/src/lib/shared/assets/eye-outline.js +30 -0
- package/src/lib/shared/assets/index.d.ts +2 -0
- package/src/lib/styles/index.shadow.cjs +1 -1
- package/src/lib/styles/index.shadow.js +1 -1
- package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs +4 -0
- package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js +4 -0
- package/src/lib/views/EmbeddedDeleteView/EmbeddedDeleteView.cjs +154 -0
- package/src/lib/views/EmbeddedDeleteView/EmbeddedDeleteView.d.ts +2 -0
- package/src/lib/views/EmbeddedDeleteView/EmbeddedDeleteView.js +150 -0
- package/src/lib/views/EmbeddedDeleteView/index.d.ts +1 -0
- package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs +9 -3
- package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js +9 -3
- package/src/lib/views/viewToComponentMap.cjs +2 -0
- package/src/lib/views/viewToComponentMap.d.ts +1 -0
- package/src/lib/views/viewToComponentMap.js +2 -0
- package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs +20 -11
- package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js +20 -11
- package/src/lib/widgets/DynamicWidget/components/WalletDetailsCard/WalletDetailsCard.cjs +99 -0
- package/src/lib/widgets/DynamicWidget/components/WalletDetailsCard/WalletDetailsCard.d.ts +12 -0
- package/src/lib/widgets/DynamicWidget/components/WalletDetailsCard/WalletDetailsCard.js +95 -0
- package/src/lib/widgets/DynamicWidget/components/WalletDetailsCard/index.d.ts +1 -0
|
@@ -136,6 +136,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
|
|
|
136
136
|
copykey: 'dyn_chainalysis_blocked_wallet.title',
|
|
137
137
|
heading: t('dyn_chainalysis_blocked_wallet.title'),
|
|
138
138
|
},
|
|
139
|
+
'embedded-delete-view': {
|
|
140
|
+
copykey: 'dyn_embedded_delete.title',
|
|
141
|
+
heading: t('dyn_embedded_delete.title'),
|
|
142
|
+
},
|
|
139
143
|
'farcaster-connect-view': {
|
|
140
144
|
copykey: 'dyn_login.qr_code.title',
|
|
141
145
|
heading: t('dyn_login.qr_code.title'),
|
|
@@ -132,6 +132,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
|
|
|
132
132
|
copykey: 'dyn_chainalysis_blocked_wallet.title',
|
|
133
133
|
heading: t('dyn_chainalysis_blocked_wallet.title'),
|
|
134
134
|
},
|
|
135
|
+
'embedded-delete-view': {
|
|
136
|
+
copykey: 'dyn_embedded_delete.title',
|
|
137
|
+
heading: t('dyn_embedded_delete.title'),
|
|
138
|
+
},
|
|
135
139
|
'farcaster-connect-view': {
|
|
136
140
|
copykey: 'dyn_login.qr_code.title',
|
|
137
141
|
heading: t('dyn_login.qr_code.title'),
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
+
|
|
6
|
+
var _tslib = require('../../../../_virtual/_tslib.cjs');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var React = require('react');
|
|
9
|
+
var reactI18next = require('react-i18next');
|
|
10
|
+
var utils = require('@dynamic-labs/utils');
|
|
11
|
+
require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
|
|
12
|
+
require('../../components/Alert/Alert.cjs');
|
|
13
|
+
require('../../events/dynamicEvents.cjs');
|
|
14
|
+
require('../../context/DynamicContext/DynamicContext.cjs');
|
|
15
|
+
require('@dynamic-labs/sdk-api-core');
|
|
16
|
+
require('../../shared/logger.cjs');
|
|
17
|
+
require('@dynamic-labs/iconic');
|
|
18
|
+
require('@dynamic-labs/wallet-connector-core');
|
|
19
|
+
require('../../context/ViewContext/ViewContext.cjs');
|
|
20
|
+
var deleteEmbeddedHero = require('../../shared/assets/delete-embedded-hero.cjs');
|
|
21
|
+
require('@dynamic-labs/wallet-book');
|
|
22
|
+
require('../../utils/constants/colors.cjs');
|
|
23
|
+
require('../../utils/constants/values.cjs');
|
|
24
|
+
require('../../store/state/loadingAndLifecycle.cjs');
|
|
25
|
+
require('../../shared/consts/index.cjs');
|
|
26
|
+
var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
|
|
27
|
+
require('../../context/CaptchaContext/CaptchaContext.cjs');
|
|
28
|
+
require('../../context/ErrorContext/ErrorContext.cjs');
|
|
29
|
+
require('@dynamic-labs/multi-wallet');
|
|
30
|
+
require('react-international-phone');
|
|
31
|
+
require('../../config/ApiEndpoint.cjs');
|
|
32
|
+
var embeddedWallets = require('../../data/api/embeddedWallets/embeddedWallets.cjs');
|
|
33
|
+
require('../../store/state/user/user.cjs');
|
|
34
|
+
require('../../locale/locale.cjs');
|
|
35
|
+
require('../../store/state/projectSettings/projectSettings.cjs');
|
|
36
|
+
require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
|
|
37
|
+
require('../../context/AccountExistsContext/AccountExistsContext.cjs');
|
|
38
|
+
require('../../context/UserWalletsContext/UserWalletsContext.cjs');
|
|
39
|
+
require('../../context/VerificationContext/VerificationContext.cjs');
|
|
40
|
+
require('react-dom');
|
|
41
|
+
require('../../context/WalletContext/WalletContext.cjs');
|
|
42
|
+
var useSmartWallets = require('../../utils/hooks/useSmartWallets/useSmartWallets.cjs');
|
|
43
|
+
require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
|
|
44
|
+
require('../../context/ThemeContext/ThemeContext.cjs');
|
|
45
|
+
require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
|
|
46
|
+
require('@dynamic-labs/types');
|
|
47
|
+
require('../../context/LoadingContext/LoadingContext.cjs');
|
|
48
|
+
require('yup');
|
|
49
|
+
require('../../context/MockContext/MockContext.cjs');
|
|
50
|
+
require('../CollectUserDataView/useFields.cjs');
|
|
51
|
+
require('../../context/FieldsStateContext/FieldsStateContext.cjs');
|
|
52
|
+
require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
|
|
53
|
+
require('@dynamic-labs/rpc-providers');
|
|
54
|
+
require('../../store/state/environmentId.cjs');
|
|
55
|
+
require('../../store/state/walletConnectorOptions.cjs');
|
|
56
|
+
var Typography = require('../../components/Typography/Typography.cjs');
|
|
57
|
+
require('../../context/FooterAnimationContext/index.cjs');
|
|
58
|
+
require('../../components/ShadowDOM/ShadowDOM.cjs');
|
|
59
|
+
require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
|
|
60
|
+
require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
|
|
61
|
+
require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
|
|
62
|
+
require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
|
|
63
|
+
require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
|
|
64
|
+
require('../../context/WalletGroupContext/WalletGroupContext.cjs');
|
|
65
|
+
require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
|
|
66
|
+
require('react-focus-lock');
|
|
67
|
+
require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
|
|
68
|
+
require('../../components/IconButton/IconButton.cjs');
|
|
69
|
+
require('../../components/MenuList/Dropdown/Dropdown.cjs');
|
|
70
|
+
var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
|
|
71
|
+
var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
|
|
72
|
+
require('formik');
|
|
73
|
+
require('../../store/state/sendBalances.cjs');
|
|
74
|
+
require('../../components/Input/Input.cjs');
|
|
75
|
+
require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
|
|
76
|
+
require('../../context/PasskeyContext/PasskeyContext.cjs');
|
|
77
|
+
require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
|
|
78
|
+
var getProperErrorMessage = require('../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
|
|
79
|
+
require('../../../index.cjs');
|
|
80
|
+
require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
|
|
81
|
+
require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
|
|
82
|
+
require('@hcaptcha/react-hcaptcha');
|
|
83
|
+
var Checkbox = require('../../components/Checkbox/Checkbox.cjs');
|
|
84
|
+
require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
|
|
85
|
+
require('../../store/state/tokenBalances.cjs');
|
|
86
|
+
require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
87
|
+
require('../../components/InlineWidget/InlineWidget.cjs');
|
|
88
|
+
require('../../components/IsBrowser/IsBrowser.cjs');
|
|
89
|
+
require('../../components/Popper/Popper/Popper.cjs');
|
|
90
|
+
require('../../components/Popper/PopperContext/PopperContext.cjs');
|
|
91
|
+
require('qrcode');
|
|
92
|
+
|
|
93
|
+
const EmbeddedDeleteView = () => {
|
|
94
|
+
const { primaryWallet, setShowAuthFlow, environmentId, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
|
|
95
|
+
const [isAcknowledgementChecked, setIsAcknowledgementChecked] = React.useState(false);
|
|
96
|
+
const [error, setError] = React.useState(undefined);
|
|
97
|
+
const { t } = reactI18next.useTranslation();
|
|
98
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
|
99
|
+
const { isSmartWallet, getEOAWallet } = useSmartWallets.useSmartWallets();
|
|
100
|
+
const errorText = React.useMemo(() => {
|
|
101
|
+
if (!error) {
|
|
102
|
+
return undefined;
|
|
103
|
+
}
|
|
104
|
+
if (error instanceof utils.DynamicError) {
|
|
105
|
+
return error.message;
|
|
106
|
+
}
|
|
107
|
+
try {
|
|
108
|
+
return getProperErrorMessage.getProperErrorMessage(error);
|
|
109
|
+
}
|
|
110
|
+
catch (e) {
|
|
111
|
+
return 'An unexpected error occured while deleting your embedded wallets.';
|
|
112
|
+
}
|
|
113
|
+
}, [error]);
|
|
114
|
+
const handleDeleteEmbeddedWallets = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
115
|
+
var _a;
|
|
116
|
+
if (!primaryWallet) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
setIsLoading(true);
|
|
120
|
+
try {
|
|
121
|
+
const deleteEmbeddedWalletsRawPayload = yield embeddedWallets.getDeleteEmbeddedWalletsRequest({
|
|
122
|
+
environmentId,
|
|
123
|
+
});
|
|
124
|
+
const connector = isSmartWallet(primaryWallet)
|
|
125
|
+
? (_a = getEOAWallet(primaryWallet)) === null || _a === void 0 ? void 0 : _a.connector
|
|
126
|
+
: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
|
|
127
|
+
const signedDeleteWalletsRequest = yield connector.stampDeleteSubOrganizationRequest({
|
|
128
|
+
request: deleteEmbeddedWalletsRawPayload,
|
|
129
|
+
});
|
|
130
|
+
yield embeddedWallets.deleteEmbeddedWallets({
|
|
131
|
+
deleteEmbeddedWalletsRequest: signedDeleteWalletsRequest,
|
|
132
|
+
environmentId,
|
|
133
|
+
});
|
|
134
|
+
handleLogOut();
|
|
135
|
+
}
|
|
136
|
+
catch (error) {
|
|
137
|
+
setError(error);
|
|
138
|
+
}
|
|
139
|
+
finally {
|
|
140
|
+
setIsLoading(false);
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
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, {}) }) }) }));
|
|
144
|
+
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: {
|
|
145
|
+
color: 'inherit',
|
|
146
|
+
}, 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: {
|
|
147
|
+
color: 'inherit',
|
|
148
|
+
style: {
|
|
149
|
+
fontSize: '13px',
|
|
150
|
+
},
|
|
151
|
+
}, 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') })] })] }));
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
exports.EmbeddedDeleteView = EmbeddedDeleteView;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
import { __awaiter } from '../../../../_virtual/_tslib.js';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
import { useState, useMemo } from 'react';
|
|
5
|
+
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import { DynamicError } from '@dynamic-labs/utils';
|
|
7
|
+
import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
|
|
8
|
+
import '../../components/Alert/Alert.js';
|
|
9
|
+
import '../../events/dynamicEvents.js';
|
|
10
|
+
import '../../context/DynamicContext/DynamicContext.js';
|
|
11
|
+
import '@dynamic-labs/sdk-api-core';
|
|
12
|
+
import '../../shared/logger.js';
|
|
13
|
+
import '@dynamic-labs/iconic';
|
|
14
|
+
import '@dynamic-labs/wallet-connector-core';
|
|
15
|
+
import '../../context/ViewContext/ViewContext.js';
|
|
16
|
+
import { ReactComponent as SvgDeleteEmbeddedHero } from '../../shared/assets/delete-embedded-hero.js';
|
|
17
|
+
import '@dynamic-labs/wallet-book';
|
|
18
|
+
import '../../utils/constants/colors.js';
|
|
19
|
+
import '../../utils/constants/values.js';
|
|
20
|
+
import '../../store/state/loadingAndLifecycle.js';
|
|
21
|
+
import '../../shared/consts/index.js';
|
|
22
|
+
import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
|
|
23
|
+
import '../../context/CaptchaContext/CaptchaContext.js';
|
|
24
|
+
import '../../context/ErrorContext/ErrorContext.js';
|
|
25
|
+
import '@dynamic-labs/multi-wallet';
|
|
26
|
+
import 'react-international-phone';
|
|
27
|
+
import '../../config/ApiEndpoint.js';
|
|
28
|
+
import { getDeleteEmbeddedWalletsRequest, deleteEmbeddedWallets } from '../../data/api/embeddedWallets/embeddedWallets.js';
|
|
29
|
+
import '../../store/state/user/user.js';
|
|
30
|
+
import '../../locale/locale.js';
|
|
31
|
+
import '../../store/state/projectSettings/projectSettings.js';
|
|
32
|
+
import '../../context/AccessDeniedContext/AccessDeniedContext.js';
|
|
33
|
+
import '../../context/AccountExistsContext/AccountExistsContext.js';
|
|
34
|
+
import '../../context/UserWalletsContext/UserWalletsContext.js';
|
|
35
|
+
import '../../context/VerificationContext/VerificationContext.js';
|
|
36
|
+
import 'react-dom';
|
|
37
|
+
import '../../context/WalletContext/WalletContext.js';
|
|
38
|
+
import { useSmartWallets } from '../../utils/hooks/useSmartWallets/useSmartWallets.js';
|
|
39
|
+
import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
|
|
40
|
+
import '../../context/ThemeContext/ThemeContext.js';
|
|
41
|
+
import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
|
|
42
|
+
import '@dynamic-labs/types';
|
|
43
|
+
import '../../context/LoadingContext/LoadingContext.js';
|
|
44
|
+
import 'yup';
|
|
45
|
+
import '../../context/MockContext/MockContext.js';
|
|
46
|
+
import '../CollectUserDataView/useFields.js';
|
|
47
|
+
import '../../context/FieldsStateContext/FieldsStateContext.js';
|
|
48
|
+
import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
|
|
49
|
+
import '@dynamic-labs/rpc-providers';
|
|
50
|
+
import '../../store/state/environmentId.js';
|
|
51
|
+
import '../../store/state/walletConnectorOptions.js';
|
|
52
|
+
import { Typography } from '../../components/Typography/Typography.js';
|
|
53
|
+
import '../../context/FooterAnimationContext/index.js';
|
|
54
|
+
import '../../components/ShadowDOM/ShadowDOM.js';
|
|
55
|
+
import '../../components/Transition/ZoomTransition/ZoomTransition.js';
|
|
56
|
+
import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
|
|
57
|
+
import '../../components/Transition/OpacityTransition/OpacityTransition.js';
|
|
58
|
+
import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
|
|
59
|
+
import '../../context/SocialRedirectContext/SocialRedirectContext.js';
|
|
60
|
+
import '../../context/WalletGroupContext/WalletGroupContext.js';
|
|
61
|
+
import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
|
|
62
|
+
import 'react-focus-lock';
|
|
63
|
+
import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
|
|
64
|
+
import '../../components/IconButton/IconButton.js';
|
|
65
|
+
import '../../components/MenuList/Dropdown/Dropdown.js';
|
|
66
|
+
import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
|
|
67
|
+
import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
|
|
68
|
+
import 'formik';
|
|
69
|
+
import '../../store/state/sendBalances.js';
|
|
70
|
+
import '../../components/Input/Input.js';
|
|
71
|
+
import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
|
|
72
|
+
import '../../context/PasskeyContext/PasskeyContext.js';
|
|
73
|
+
import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
|
|
74
|
+
import { getProperErrorMessage } from '../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
|
|
75
|
+
import '../../../index.js';
|
|
76
|
+
import '../../context/IpConfigurationContext/IpConfigurationContext.js';
|
|
77
|
+
import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
|
|
78
|
+
import '@hcaptcha/react-hcaptcha';
|
|
79
|
+
import { Checkbox } from '../../components/Checkbox/Checkbox.js';
|
|
80
|
+
import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
|
|
81
|
+
import '../../store/state/tokenBalances.js';
|
|
82
|
+
import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
83
|
+
import '../../components/InlineWidget/InlineWidget.js';
|
|
84
|
+
import '../../components/IsBrowser/IsBrowser.js';
|
|
85
|
+
import '../../components/Popper/Popper/Popper.js';
|
|
86
|
+
import '../../components/Popper/PopperContext/PopperContext.js';
|
|
87
|
+
import 'qrcode';
|
|
88
|
+
|
|
89
|
+
const EmbeddedDeleteView = () => {
|
|
90
|
+
const { primaryWallet, setShowAuthFlow, environmentId, handleLogOut } = useInternalDynamicContext();
|
|
91
|
+
const [isAcknowledgementChecked, setIsAcknowledgementChecked] = useState(false);
|
|
92
|
+
const [error, setError] = useState(undefined);
|
|
93
|
+
const { t } = useTranslation();
|
|
94
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
95
|
+
const { isSmartWallet, getEOAWallet } = useSmartWallets();
|
|
96
|
+
const errorText = useMemo(() => {
|
|
97
|
+
if (!error) {
|
|
98
|
+
return undefined;
|
|
99
|
+
}
|
|
100
|
+
if (error instanceof DynamicError) {
|
|
101
|
+
return error.message;
|
|
102
|
+
}
|
|
103
|
+
try {
|
|
104
|
+
return getProperErrorMessage(error);
|
|
105
|
+
}
|
|
106
|
+
catch (e) {
|
|
107
|
+
return 'An unexpected error occured while deleting your embedded wallets.';
|
|
108
|
+
}
|
|
109
|
+
}, [error]);
|
|
110
|
+
const handleDeleteEmbeddedWallets = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
111
|
+
var _a;
|
|
112
|
+
if (!primaryWallet) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
setIsLoading(true);
|
|
116
|
+
try {
|
|
117
|
+
const deleteEmbeddedWalletsRawPayload = yield getDeleteEmbeddedWalletsRequest({
|
|
118
|
+
environmentId,
|
|
119
|
+
});
|
|
120
|
+
const connector = isSmartWallet(primaryWallet)
|
|
121
|
+
? (_a = getEOAWallet(primaryWallet)) === null || _a === void 0 ? void 0 : _a.connector
|
|
122
|
+
: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
|
|
123
|
+
const signedDeleteWalletsRequest = yield connector.stampDeleteSubOrganizationRequest({
|
|
124
|
+
request: deleteEmbeddedWalletsRawPayload,
|
|
125
|
+
});
|
|
126
|
+
yield deleteEmbeddedWallets({
|
|
127
|
+
deleteEmbeddedWalletsRequest: signedDeleteWalletsRequest,
|
|
128
|
+
environmentId,
|
|
129
|
+
});
|
|
130
|
+
handleLogOut();
|
|
131
|
+
}
|
|
132
|
+
catch (error) {
|
|
133
|
+
setError(error);
|
|
134
|
+
}
|
|
135
|
+
finally {
|
|
136
|
+
setIsLoading(false);
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
const contentHeader = (jsx("div", { children: jsx("div", { className: 'embedded-delete-view__body__description', children: jsx("div", { className: 'embedded-delete-view__header', children: jsx(SvgDeleteEmbeddedHero, {}) }) }) }));
|
|
140
|
+
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: {
|
|
141
|
+
color: 'inherit',
|
|
142
|
+
}, 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: {
|
|
143
|
+
color: 'inherit',
|
|
144
|
+
style: {
|
|
145
|
+
fontSize: '13px',
|
|
146
|
+
},
|
|
147
|
+
}, 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') })] })] }));
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export { EmbeddedDeleteView };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { EmbeddedDeleteView } from './EmbeddedDeleteView';
|
|
@@ -250,9 +250,15 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
|
|
|
250
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: {
|
|
251
251
|
borderRadius: '0.75rem',
|
|
252
252
|
}, allow: 'clipboard-write' }));
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
253
|
+
const handleClickUnlink = () => {
|
|
254
|
+
setView('embedded-delete-view');
|
|
255
|
+
};
|
|
256
|
+
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: {
|
|
257
|
+
color: 'inherit',
|
|
258
|
+
}, 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: {
|
|
259
|
+
color: 'secondary',
|
|
260
|
+
variant: 'button_tertiary',
|
|
261
|
+
}, 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: () => {
|
|
256
262
|
handleAcknowledgeExportPrompt();
|
|
257
263
|
setShowAuthFlow(false);
|
|
258
264
|
}, 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: {
|
|
@@ -246,9 +246,15 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
|
|
|
246
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: {
|
|
247
247
|
borderRadius: '0.75rem',
|
|
248
248
|
}, allow: 'clipboard-write' }));
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
249
|
+
const handleClickUnlink = () => {
|
|
250
|
+
setView('embedded-delete-view');
|
|
251
|
+
};
|
|
252
|
+
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: {
|
|
253
|
+
color: 'inherit',
|
|
254
|
+
}, 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: {
|
|
255
|
+
color: 'secondary',
|
|
256
|
+
variant: 'button_tertiary',
|
|
257
|
+
}, 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: () => {
|
|
252
258
|
handleAcknowledgeExportPrompt();
|
|
253
259
|
setShowAuthFlow(false);
|
|
254
260
|
}, 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: {
|
|
@@ -125,6 +125,7 @@ var WalletLockedView = require('./WalletLockedView/WalletLockedView.cjs');
|
|
|
125
125
|
var WalletRedirectView = require('./WalletRedirectView/WalletRedirectView.cjs');
|
|
126
126
|
var WalletSignSpinnerView = require('./WalletSignSpinnerView/WalletSignSpinnerView.cjs');
|
|
127
127
|
var WalletUsedView = require('./WalletUsedView/WalletUsedView.cjs');
|
|
128
|
+
var EmbeddedDeleteView = require('./EmbeddedDeleteView/EmbeddedDeleteView.cjs');
|
|
128
129
|
require('../store/state/tokenBalances.cjs');
|
|
129
130
|
require('../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
|
|
130
131
|
require('../components/InlineWidget/InlineWidget.cjs');
|
|
@@ -147,6 +148,7 @@ const viewToComponentMap = {
|
|
|
147
148
|
'collect-user-data-login-no-wallet': CollectUserDataViewNoWallet.CollectUserDataViewNoWallet,
|
|
148
149
|
'create-password-view': CreatePasswordView.CreatePasswordView,
|
|
149
150
|
'email-wallet-otp-verification-view': EmailWalletOTPVerificationView.EmailWalletOTPVerificationView,
|
|
151
|
+
'embedded-delete-view': EmbeddedDeleteView.EmbeddedDeleteView,
|
|
150
152
|
'embedded-reveal-account-view': EmbeddedRevealView.EmbeddedRevealView,
|
|
151
153
|
'embedded-reveal-view': EmbeddedRevealView.EmbeddedRevealView,
|
|
152
154
|
'embedded-wallet-auth-choice': EmbeddedAuthChoice.EmbeddedAuthChoice,
|
|
@@ -14,6 +14,7 @@ export declare const viewToComponentMap: {
|
|
|
14
14
|
}>;
|
|
15
15
|
'create-password-view': import("react").FC<import("./CreatePasswordView/CreatePasswordView").CreatePasswordViewProps>;
|
|
16
16
|
'email-wallet-otp-verification-view': () => JSX.Element;
|
|
17
|
+
'embedded-delete-view': () => JSX.Element;
|
|
17
18
|
'embedded-reveal-account-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
|
|
18
19
|
'embedded-reveal-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
|
|
19
20
|
'embedded-wallet-auth-choice': import("react").FC<import("./Passkey/EmbeddedAuthChoice/EmbeddedAuthChoice").EmbeddedAuthChoiceProps>;
|
|
@@ -121,6 +121,7 @@ import { WalletLockedView } from './WalletLockedView/WalletLockedView.js';
|
|
|
121
121
|
import { WalletRedirectView } from './WalletRedirectView/WalletRedirectView.js';
|
|
122
122
|
import { WalletSignSpinnerView } from './WalletSignSpinnerView/WalletSignSpinnerView.js';
|
|
123
123
|
import { WalletUsedView } from './WalletUsedView/WalletUsedView.js';
|
|
124
|
+
import { EmbeddedDeleteView } from './EmbeddedDeleteView/EmbeddedDeleteView.js';
|
|
124
125
|
import '../store/state/tokenBalances.js';
|
|
125
126
|
import '../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
126
127
|
import '../components/InlineWidget/InlineWidget.js';
|
|
@@ -143,6 +144,7 @@ const viewToComponentMap = {
|
|
|
143
144
|
'collect-user-data-login-no-wallet': CollectUserDataViewNoWallet,
|
|
144
145
|
'create-password-view': CreatePasswordView,
|
|
145
146
|
'email-wallet-otp-verification-view': EmailWalletOTPVerificationView,
|
|
147
|
+
'embedded-delete-view': EmbeddedDeleteView,
|
|
146
148
|
'embedded-reveal-account-view': EmbeddedRevealView,
|
|
147
149
|
'embedded-reveal-view': EmbeddedRevealView,
|
|
148
150
|
'embedded-wallet-auth-choice': EmbeddedAuthChoice,
|
package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs
CHANGED
|
@@ -19,6 +19,10 @@ var logger = require('../../../../shared/logger.cjs');
|
|
|
19
19
|
require('@dynamic-labs/iconic');
|
|
20
20
|
require('../../../../context/ViewContext/ViewContext.cjs');
|
|
21
21
|
var chevronDown = require('../../../../shared/assets/chevron-down.cjs');
|
|
22
|
+
var copy = require('../../../../shared/assets/copy.cjs');
|
|
23
|
+
var eyeOutline = require('../../../../shared/assets/eye-outline.cjs');
|
|
24
|
+
var key = require('../../../../shared/assets/key.cjs');
|
|
25
|
+
var walletV2 = require('../../../../shared/assets/wallet-v2.cjs');
|
|
22
26
|
require('@dynamic-labs/wallet-book');
|
|
23
27
|
require('../../../../utils/constants/colors.cjs');
|
|
24
28
|
require('../../../../utils/constants/values.cjs');
|
|
@@ -95,17 +99,20 @@ require('../../../../components/Popper/Popper/Popper.cjs');
|
|
|
95
99
|
require('../../../../components/Popper/PopperContext/PopperContext.cjs');
|
|
96
100
|
require('qrcode');
|
|
97
101
|
var isMultiAssetSupportedNetwork = require('../../../../utils/functions/isMultiAssetSupportedNetwork/isMultiAssetSupportedNetwork.cjs');
|
|
102
|
+
var WalletDetailsCard = require('../WalletDetailsCard/WalletDetailsCard.cjs');
|
|
98
103
|
var ActiveBitcoinWalletAddresses = require('./ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.cjs');
|
|
99
104
|
var ActiveWalletAddress = require('./ActiveWalletAddress/ActiveWalletAddress.cjs');
|
|
100
105
|
var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
|
|
101
106
|
|
|
102
107
|
const ICON_SIZE = 28;
|
|
108
|
+
const DROPDOWN_ICON_SIZE = 16;
|
|
103
109
|
const ActiveWalletInformation = ({ isLoading = false, }) => {
|
|
104
110
|
var _a, _b, _c, _d, _e;
|
|
105
111
|
const { t } = reactI18next.useTranslation();
|
|
106
112
|
const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
|
|
107
113
|
const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
|
|
108
114
|
const [hasShadow, setHasShadow] = React.useState(false);
|
|
115
|
+
const [detailsCardOpen, setDetailsCardOpen] = React.useState(false);
|
|
109
116
|
const contentRef = React.useRef(null);
|
|
110
117
|
const { primaryWallet, network, projectSettings, user, authMode, showFiat, multiAsset, } = useInternalDynamicContext.useInternalDynamicContext();
|
|
111
118
|
const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
|
|
@@ -130,30 +137,32 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
|
|
|
130
137
|
((_e = (_d = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _d === void 0 ? void 0 : _d.key) === null || _e === void 0 ? void 0 : _e.startsWith('coinbasempc'))));
|
|
131
138
|
const options = [
|
|
132
139
|
{
|
|
133
|
-
Icon:
|
|
140
|
+
Icon: jsxRuntime.jsx(copy.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE }),
|
|
134
141
|
callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
|
|
135
142
|
hide: !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
|
|
136
|
-
text: '
|
|
143
|
+
text: t('dyn_active_wallet_info.options.copy_ens'),
|
|
137
144
|
},
|
|
138
145
|
{
|
|
139
|
-
Icon:
|
|
140
|
-
callback: () =>
|
|
146
|
+
Icon: (jsxRuntime.jsx(eyeOutline.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
|
|
147
|
+
callback: () => {
|
|
148
|
+
setDetailsCardOpen(true);
|
|
149
|
+
},
|
|
141
150
|
hide: !address,
|
|
142
|
-
text: '
|
|
151
|
+
text: t('dyn_active_wallet_info.options.view_address'),
|
|
143
152
|
},
|
|
144
153
|
{
|
|
145
|
-
Icon:
|
|
154
|
+
Icon: (jsxRuntime.jsx(walletV2.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
|
|
146
155
|
callback: () => setDynamicWidgetView('settings'),
|
|
147
156
|
endSlot: showAlert() ? jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'yellow' }) : undefined,
|
|
148
157
|
hide: !isEmbeddedWallet,
|
|
149
|
-
text: '
|
|
158
|
+
text: t('dyn_active_wallet_info.options.settings'),
|
|
150
159
|
},
|
|
151
160
|
{
|
|
152
|
-
Icon:
|
|
161
|
+
Icon: (jsxRuntime.jsx(key.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
|
|
153
162
|
callback: exportKeysOption ||
|
|
154
163
|
(() => logger.logger.info('No option to export private keys')),
|
|
155
164
|
hide: !exportKeysOption,
|
|
156
|
-
text: '
|
|
165
|
+
text: t('dyn_active_wallet_info.options.export'),
|
|
157
166
|
},
|
|
158
167
|
];
|
|
159
168
|
const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
|
|
@@ -189,7 +198,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
|
|
|
189
198
|
if (!isLoadingTokenBalances) {
|
|
190
199
|
setBalanceIsExpanded(!balanceIsExpanded);
|
|
191
200
|
}
|
|
192
|
-
}, className: 'balance-header', children: [jsxRuntime.jsxs("div", { className: 'balance-header__title', children: [jsxRuntime.
|
|
201
|
+
}, className: 'balance-header', children: [jsxRuntime.jsxs("div", { className: 'balance-header__title', children: [jsxRuntime.jsxs(Typography.Typography, { color: 'secondary', variant: 'body_small', style: { marginRight: '8px' }, children: [t('dyn_active_wallet_info.balance'), ":"] }), showFiat ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: totalValue === 0 || totalValue >= 0.01
|
|
193
202
|
? currencyFormatter.format(parseFloat(totalValue.toFixed(2)))
|
|
194
203
|
: '<$0.01' })) : (primaryWalletNativeBalance())] }), jsxRuntime.jsx("div", { className: balanceIsExpanded ? 'balance-header__chevron' : '', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) })] }) }), jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: balanceIsExpanded, className: `multi-asset-balance-container__accordion ${'multi-asset-balance-container__accordion' +
|
|
195
204
|
(balanceIsExpanded ? '--expanded' : '--collapsed')}`, handleScroll: handleScroll, ref: contentRef, children: jsxRuntime.jsx(TokenBalanceList.TokenBalanceList, { tokenBalances: filteredTokenBalances }) })] }));
|
|
@@ -198,7 +207,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
|
|
|
198
207
|
}
|
|
199
208
|
return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar__name-service', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: ICON_SIZE }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsx("div", { className: classNames.classNames('active-wallet-information__addresses-container', {
|
|
200
209
|
'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
|
|
201
|
-
}), children: activeWalletAddress() }), !shouldHideNetwork && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading }))] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children:
|
|
210
|
+
}), children: activeWalletAddress() }), address && (jsxRuntime.jsx(WalletDetailsCard.WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading }))] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
|
|
202
211
|
};
|
|
203
212
|
|
|
204
213
|
exports.ActiveWalletInformation = ActiveWalletInformation;
|