@dynamic-labs/sdk-react-core 4.64.0 → 4.66.0
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 +29 -0
- package/package.cjs +2 -2
- package/package.js +2 -2
- package/package.json +13 -13
- package/src/index.cjs +4 -0
- package/src/index.d.ts +2 -1
- package/src/index.js +2 -0
- package/src/lib/Main.cjs +1 -0
- package/src/lib/Main.js +1 -0
- package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.cjs +1 -1
- package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.d.ts +5 -1
- package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.js +1 -1
- package/src/lib/components/ShadowDOM/ShadowDOM.cjs +6 -6
- package/src/lib/components/ShadowDOM/ShadowDOM.d.ts +4 -1
- package/src/lib/components/ShadowDOM/ShadowDOM.js +6 -6
- package/src/lib/context/DynamicContext/DynamicContext.cjs +4 -2
- package/src/lib/context/DynamicContext/DynamicContext.js +4 -2
- package/src/lib/context/DynamicContext/types/DynamicContextProps.d.ts +6 -0
- package/src/lib/context/DynamicContext/types/IDynamicContext.d.ts +1 -0
- package/src/lib/context/DynamicContext/types/IInternalDynamicContext.d.ts +5 -1
- package/src/lib/context/ThemeContext/ThemeContext.cjs +3 -3
- package/src/lib/context/ThemeContext/ThemeContext.d.ts +1 -0
- package/src/lib/context/ThemeContext/ThemeContext.js +3 -3
- package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.cjs +8 -2
- package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.d.ts +2 -2
- package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.js +8 -2
- package/src/lib/data/api/wallets/wallets.cjs +62 -11
- package/src/lib/data/api/wallets/wallets.d.ts +1 -0
- package/src/lib/data/api/wallets/wallets.js +62 -12
- package/src/lib/shared/types/connectionAndSignature.d.ts +2 -1
- package/src/lib/shared/types/wallets.d.ts +2 -1
- package/src/lib/utils/functions/compareChains/compareChains.cjs +1 -0
- package/src/lib/utils/functions/compareChains/compareChains.js +1 -0
- package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.cjs +6 -5
- package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.d.ts +3 -1
- package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js +6 -5
- package/src/lib/utils/hooks/index.d.ts +3 -0
- package/src/lib/utils/hooks/useClientSessionKeys/useClientSessionKeys.cjs +4 -1
- package/src/lib/utils/hooks/useClientSessionKeys/useClientSessionKeys.js +4 -1
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.cjs +5 -2
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.d.ts +2 -0
- package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.js +5 -2
- package/src/lib/utils/hooks/useSignEip7702Authorization/index.d.ts +1 -0
- package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.cjs +162 -0
- package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.d.ts +78 -0
- package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.js +158 -0
- package/src/lib/utils/hooks/useStepUpAuthentication/index.d.ts +2 -0
- package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.cjs +197 -0
- package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.d.ts +51 -0
- package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.js +193 -0
- package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.cjs +3 -1
- package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.js +3 -1
- package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs +8 -3
- package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.d.ts +1 -1
- package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js +9 -4
- package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.cjs +53 -1
- package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.d.ts +6 -0
- package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.js +53 -1
- package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.cjs +1 -1
- package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.js +1 -1
- package/src/lib/views/ResetPasswordForSettingsView/ResetPasswordForSettingsView.cjs +5 -21
- package/src/lib/views/ResetPasswordForSettingsView/ResetPasswordForSettingsView.js +5 -21
- package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.cjs +9 -1
- package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.js +9 -1
- package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.cjs +17 -21
- package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.js +17 -21
- package/src/lib/widgets/DynamicWidget/views/ResetPasswordView/ResetPasswordView.cjs +26 -5
- package/src/lib/widgets/DynamicWidget/views/ResetPasswordView/ResetPasswordView.js +26 -5
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.cjs +3 -2
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.d.ts +2 -0
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.js +3 -2
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs +2 -2
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.d.ts +2 -0
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js +2 -2
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.cjs +30 -22
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.d.ts +2 -1
- package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.js +30 -22
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import { __awaiter } from '../../../../_virtual/_tslib.js';
|
|
3
2
|
import { jsx } from 'react/jsx-runtime';
|
|
4
3
|
import { useCallback } from 'react';
|
|
5
4
|
import '../../context/DynamicContext/DynamicContext.js';
|
|
@@ -7,7 +6,7 @@ import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
|
|
|
7
6
|
import '@dynamic-labs/iconic';
|
|
8
7
|
import '@dynamic-labs/wallet-connector-core';
|
|
9
8
|
import '../../context/ViewContext/ViewContext.js';
|
|
10
|
-
import
|
|
9
|
+
import '../../shared/logger.js';
|
|
11
10
|
import '@dynamic-labs/wallet-book';
|
|
12
11
|
import '@dynamic-labs/utils';
|
|
13
12
|
import '../../utils/constants/colors.js';
|
|
@@ -15,6 +14,7 @@ import '../../utils/constants/values.js';
|
|
|
15
14
|
import '@dynamic-labs/sdk-api-core';
|
|
16
15
|
import '../../shared/consts/index.js';
|
|
17
16
|
import '../../events/dynamicEvents.js';
|
|
17
|
+
import '../../../../_virtual/_tslib.js';
|
|
18
18
|
import '../../context/CaptchaContext/CaptchaContext.js';
|
|
19
19
|
import '../../context/ErrorContext/ErrorContext.js';
|
|
20
20
|
import '@dynamic-labs/multi-wallet';
|
|
@@ -38,7 +38,6 @@ import 'react-dom';
|
|
|
38
38
|
import '../../utils/functions/compareChains/compareChains.js';
|
|
39
39
|
import '../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
|
|
40
40
|
import '../../context/ThemeContext/ThemeContext.js';
|
|
41
|
-
import { useSmartWallets } from '../../utils/hooks/useSmartWallets/useSmartWallets.js';
|
|
42
41
|
import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
|
|
43
42
|
import 'bs58';
|
|
44
43
|
import '@dynamic-labs/types';
|
|
@@ -88,7 +87,6 @@ import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
|
|
|
88
87
|
import '../../context/FooterAnimationContext/index.js';
|
|
89
88
|
import '../MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
|
|
90
89
|
import '../../context/PasskeyContext/PasskeyContext.js';
|
|
91
|
-
import { useWalletPassword } from '../../utils/hooks/useWalletPassword/useWalletPassword.js';
|
|
92
90
|
import { ResetPasswordView } from '../../widgets/DynamicWidget/views/ResetPasswordView/ResetPasswordView.js';
|
|
93
91
|
import '../../context/OnrampContext/OnrampContext.js';
|
|
94
92
|
import '../../store/state/sendBalances.js';
|
|
@@ -106,24 +104,10 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
|
|
|
106
104
|
import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
|
|
107
105
|
|
|
108
106
|
const ResetPasswordForSettingsView = () => {
|
|
109
|
-
const {
|
|
110
|
-
const
|
|
111
|
-
const { updatePassword } = useWalletPassword();
|
|
112
|
-
const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
|
|
113
|
-
const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
|
|
114
|
-
const handleComplete = useCallback((oldPassword, newPassword) => __awaiter(void 0, void 0, void 0, function* () {
|
|
115
|
-
if (!(wallet === null || wallet === void 0 ? void 0 : wallet.address) || !(wallet === null || wallet === void 0 ? void 0 : wallet.chain)) {
|
|
116
|
-
logger.error('No wallet address or chain available for password reset');
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
yield updatePassword({
|
|
120
|
-
accountAddress: wallet.address,
|
|
121
|
-
chainName: wallet.chain,
|
|
122
|
-
existingPassword: oldPassword,
|
|
123
|
-
newPassword,
|
|
124
|
-
});
|
|
107
|
+
const { setShowAuthFlow } = useInternalDynamicContext();
|
|
108
|
+
const handleComplete = useCallback(() => {
|
|
125
109
|
setShowAuthFlow(false);
|
|
126
|
-
}
|
|
110
|
+
}, [setShowAuthFlow]);
|
|
127
111
|
return jsx(ResetPasswordView, { onComplete: handleComplete });
|
|
128
112
|
};
|
|
129
113
|
|
package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.cjs
CHANGED
|
@@ -115,9 +115,17 @@ const SetupPasswordForWalletCreationView = () => {
|
|
|
115
115
|
}, [setShowAuthFlow]);
|
|
116
116
|
const handleComplete = React.useCallback((password) => {
|
|
117
117
|
dynamicEvents.dynamicEvents.emit('embeddedWalletPasswordSetupCompleted', password);
|
|
118
|
+
// Return a Promise that resolves when embeddedWalletCreated fires.
|
|
119
|
+
// This keeps the knowledge check screen in loading state while wallet creation
|
|
120
|
+
// is in progress, then transitions to the done screen on success.
|
|
121
|
+
return new Promise((resolve) => {
|
|
122
|
+
dynamicEvents.dynamicEvents.once('embeddedWalletCreated', () => resolve());
|
|
123
|
+
});
|
|
124
|
+
}, []);
|
|
125
|
+
const handleDone = React.useCallback(() => {
|
|
118
126
|
setShowAuthFlow(false);
|
|
119
127
|
}, [setShowAuthFlow]);
|
|
120
|
-
return (jsxRuntime.jsx(SetupPasswordView.SetupPasswordView, { onComplete: handleComplete, onCancel: handleCancel }));
|
|
128
|
+
return (jsxRuntime.jsx(SetupPasswordView.SetupPasswordView, { onComplete: handleComplete, onCancel: handleCancel, onDone: handleDone }));
|
|
121
129
|
};
|
|
122
130
|
|
|
123
131
|
exports.SetupPasswordForWalletCreationView = SetupPasswordForWalletCreationView;
|
package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.js
CHANGED
|
@@ -111,9 +111,17 @@ const SetupPasswordForWalletCreationView = () => {
|
|
|
111
111
|
}, [setShowAuthFlow]);
|
|
112
112
|
const handleComplete = useCallback((password) => {
|
|
113
113
|
dynamicEvents.emit('embeddedWalletPasswordSetupCompleted', password);
|
|
114
|
+
// Return a Promise that resolves when embeddedWalletCreated fires.
|
|
115
|
+
// This keeps the knowledge check screen in loading state while wallet creation
|
|
116
|
+
// is in progress, then transitions to the done screen on success.
|
|
117
|
+
return new Promise((resolve) => {
|
|
118
|
+
dynamicEvents.once('embeddedWalletCreated', () => resolve());
|
|
119
|
+
});
|
|
120
|
+
}, []);
|
|
121
|
+
const handleDone = useCallback(() => {
|
|
114
122
|
setShowAuthFlow(false);
|
|
115
123
|
}, [setShowAuthFlow]);
|
|
116
|
-
return (jsx(SetupPasswordView, { onComplete: handleComplete, onCancel: handleCancel }));
|
|
124
|
+
return (jsx(SetupPasswordView, { onComplete: handleComplete, onCancel: handleCancel, onDone: handleDone }));
|
|
117
125
|
};
|
|
118
126
|
|
|
119
127
|
export { SetupPasswordForWalletCreationView };
|
package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.cjs
CHANGED
|
@@ -7,11 +7,10 @@ var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
|
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var reactI18next = require('react-i18next');
|
|
10
|
-
require('
|
|
11
|
-
require('
|
|
12
|
-
require('../../../../../
|
|
13
|
-
require('
|
|
14
|
-
require('../../../../../config/ApiEndpoint.cjs');
|
|
10
|
+
var Typography = require('../../../../../components/Typography/Typography.cjs');
|
|
11
|
+
var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
|
|
12
|
+
require('../../../../../context/DynamicContext/DynamicContext.cjs');
|
|
13
|
+
require('../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
|
|
15
14
|
require('@dynamic-labs/iconic');
|
|
16
15
|
require('@dynamic-labs/wallet-connector-core');
|
|
17
16
|
var chevronLeft = require('../../../../../shared/assets/chevron-left.cjs');
|
|
@@ -23,23 +22,23 @@ require('@dynamic-labs/wallet-book');
|
|
|
23
22
|
require('@dynamic-labs/utils');
|
|
24
23
|
require('../../../../../utils/constants/colors.cjs');
|
|
25
24
|
require('../../../../../utils/constants/values.cjs');
|
|
25
|
+
require('@dynamic-labs/sdk-api-core');
|
|
26
26
|
require('../../../../../shared/consts/index.cjs');
|
|
27
|
+
require('../../../../../events/dynamicEvents.cjs');
|
|
28
|
+
require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
|
|
29
|
+
require('../../../../../context/ErrorContext/ErrorContext.cjs');
|
|
27
30
|
require('@dynamic-labs/multi-wallet');
|
|
28
31
|
require('react-international-phone');
|
|
29
32
|
require('../../../../../store/state/nonce/nonce.cjs');
|
|
33
|
+
require('@dynamic-labs-sdk/client/core');
|
|
34
|
+
require('../../../../../client/client.cjs');
|
|
35
|
+
require('@dynamic-labs-sdk/client');
|
|
36
|
+
require('../../../../../config/ApiEndpoint.cjs');
|
|
30
37
|
require('@dynamic-labs/locale');
|
|
31
38
|
require('../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
|
|
32
39
|
require('../../../../../store/state/primaryWalletId/primaryWalletId.cjs');
|
|
33
40
|
require('../../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
|
|
34
41
|
require('../../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.cjs');
|
|
35
|
-
require('../../../../../events/dynamicEvents.cjs');
|
|
36
|
-
var useProjectSettings = require('../../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.cjs');
|
|
37
|
-
var Typography = require('../../../../../components/Typography/Typography.cjs');
|
|
38
|
-
var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
|
|
39
|
-
require('../../../../../context/DynamicContext/DynamicContext.cjs');
|
|
40
|
-
require('../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
|
|
41
|
-
require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
|
|
42
|
-
require('../../../../../context/ErrorContext/ErrorContext.cjs');
|
|
43
42
|
require('../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
|
|
44
43
|
require('../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
|
|
45
44
|
require('../../../../../context/UserWalletsContext/UserWalletsContext.cjs');
|
|
@@ -119,14 +118,13 @@ var useIsPasskeysMfaEnabled = require('../../../../../utils/hooks/useIsPasskeysM
|
|
|
119
118
|
var useInternalDynamicContext = require('../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
|
|
120
119
|
|
|
121
120
|
const MfaSection = ({ isLoading }) => {
|
|
122
|
-
var _a, _b
|
|
121
|
+
var _a, _b;
|
|
123
122
|
const { t } = reactI18next.useTranslation();
|
|
124
123
|
const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
|
|
125
124
|
const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
|
|
126
125
|
const { pushView } = ViewContext.useViewContext();
|
|
127
126
|
const { getEOAWallet } = useSmartWallets.useSmartWallets();
|
|
128
|
-
const
|
|
129
|
-
const { updatePassword } = useWalletPassword.useWalletPassword();
|
|
127
|
+
const { setPassword } = useWalletPassword.useWalletPassword();
|
|
130
128
|
const isPasswordEncrypted = useIsPasswordEncrypted.useIsPasswordEncrypted();
|
|
131
129
|
const isMfaEnabled = useIsMfaEnabled.useIsMfaEnabled();
|
|
132
130
|
const isTotpMfaEnabled = useIsTotpMfaEnabled.useIsTotpMfaEnabled();
|
|
@@ -134,8 +132,7 @@ const MfaSection = ({ isLoading }) => {
|
|
|
134
132
|
const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
|
|
135
133
|
const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
|
|
136
134
|
const isWaasWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('dynamicwaas')));
|
|
137
|
-
const
|
|
138
|
-
const shouldShowPasswordSetup = isWaasWallet && isPasscodeRequired;
|
|
135
|
+
const shouldShowPasswordSetup = isWaasWallet;
|
|
139
136
|
const handleTotpMfaClick = React.useCallback(() => setDynamicWidgetView('manage-totp-mfa'), [setDynamicWidgetView]);
|
|
140
137
|
const handlePasskeyMfaClick = React.useCallback(() => setDynamicWidgetView('manage-passkeys-mfa'), [setDynamicWidgetView]);
|
|
141
138
|
const handlePasscodeClick = React.useCallback(() => {
|
|
@@ -145,15 +142,14 @@ const MfaSection = ({ isLoading }) => {
|
|
|
145
142
|
logger.logger.error('No wallet address or chain available for password setup');
|
|
146
143
|
return;
|
|
147
144
|
}
|
|
148
|
-
yield
|
|
145
|
+
yield setPassword({
|
|
149
146
|
accountAddress: wallet.address,
|
|
150
147
|
chainName: wallet.chain,
|
|
151
|
-
existingPassword: '',
|
|
152
148
|
newPassword: password,
|
|
153
149
|
});
|
|
154
150
|
}),
|
|
155
151
|
});
|
|
156
|
-
}, [setDynamicWidgetView, wallet,
|
|
152
|
+
}, [setDynamicWidgetView, wallet, setPassword]);
|
|
157
153
|
const handleResetPasswordClick = React.useCallback(() => {
|
|
158
154
|
setShowAuthFlow(true, {
|
|
159
155
|
ignoreIfIsEmbeddedWidget: false,
|
package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.js
CHANGED
|
@@ -3,11 +3,10 @@ import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
|
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { useCallback } from 'react';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
|
-
import '
|
|
7
|
-
import '
|
|
8
|
-
import '../../../../../
|
|
9
|
-
import '
|
|
10
|
-
import '../../../../../config/ApiEndpoint.js';
|
|
6
|
+
import { Typography } from '../../../../../components/Typography/Typography.js';
|
|
7
|
+
import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
|
|
8
|
+
import '../../../../../context/DynamicContext/DynamicContext.js';
|
|
9
|
+
import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
|
|
11
10
|
import '@dynamic-labs/iconic';
|
|
12
11
|
import '@dynamic-labs/wallet-connector-core';
|
|
13
12
|
import { ReactComponent as SvgChevronLeft } from '../../../../../shared/assets/chevron-left.js';
|
|
@@ -19,23 +18,23 @@ import '@dynamic-labs/wallet-book';
|
|
|
19
18
|
import '@dynamic-labs/utils';
|
|
20
19
|
import '../../../../../utils/constants/colors.js';
|
|
21
20
|
import '../../../../../utils/constants/values.js';
|
|
21
|
+
import '@dynamic-labs/sdk-api-core';
|
|
22
22
|
import '../../../../../shared/consts/index.js';
|
|
23
|
+
import '../../../../../events/dynamicEvents.js';
|
|
24
|
+
import '../../../../../context/CaptchaContext/CaptchaContext.js';
|
|
25
|
+
import '../../../../../context/ErrorContext/ErrorContext.js';
|
|
23
26
|
import '@dynamic-labs/multi-wallet';
|
|
24
27
|
import 'react-international-phone';
|
|
25
28
|
import '../../../../../store/state/nonce/nonce.js';
|
|
29
|
+
import '@dynamic-labs-sdk/client/core';
|
|
30
|
+
import '../../../../../client/client.js';
|
|
31
|
+
import '@dynamic-labs-sdk/client';
|
|
32
|
+
import '../../../../../config/ApiEndpoint.js';
|
|
26
33
|
import '@dynamic-labs/locale';
|
|
27
34
|
import '../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
|
|
28
35
|
import '../../../../../store/state/primaryWalletId/primaryWalletId.js';
|
|
29
36
|
import '../../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
|
|
30
37
|
import '../../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
|
|
31
|
-
import '../../../../../events/dynamicEvents.js';
|
|
32
|
-
import { useProjectSettings } from '../../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.js';
|
|
33
|
-
import { Typography } from '../../../../../components/Typography/Typography.js';
|
|
34
|
-
import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
|
|
35
|
-
import '../../../../../context/DynamicContext/DynamicContext.js';
|
|
36
|
-
import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
|
|
37
|
-
import '../../../../../context/CaptchaContext/CaptchaContext.js';
|
|
38
|
-
import '../../../../../context/ErrorContext/ErrorContext.js';
|
|
39
38
|
import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
|
|
40
39
|
import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
|
|
41
40
|
import '../../../../../context/UserWalletsContext/UserWalletsContext.js';
|
|
@@ -115,14 +114,13 @@ import { useIsPasskeysMfaEnabled } from '../../../../../utils/hooks/useIsPasskey
|
|
|
115
114
|
import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
|
|
116
115
|
|
|
117
116
|
const MfaSection = ({ isLoading }) => {
|
|
118
|
-
var _a, _b
|
|
117
|
+
var _a, _b;
|
|
119
118
|
const { t } = useTranslation();
|
|
120
119
|
const { setDynamicWidgetView } = useWidgetContext();
|
|
121
120
|
const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext();
|
|
122
121
|
const { pushView } = useViewContext();
|
|
123
122
|
const { getEOAWallet } = useSmartWallets();
|
|
124
|
-
const
|
|
125
|
-
const { updatePassword } = useWalletPassword();
|
|
123
|
+
const { setPassword } = useWalletPassword();
|
|
126
124
|
const isPasswordEncrypted = useIsPasswordEncrypted();
|
|
127
125
|
const isMfaEnabled = useIsMfaEnabled();
|
|
128
126
|
const isTotpMfaEnabled = useIsTotpMfaEnabled();
|
|
@@ -130,8 +128,7 @@ const MfaSection = ({ isLoading }) => {
|
|
|
130
128
|
const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
|
|
131
129
|
const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
|
|
132
130
|
const isWaasWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('dynamicwaas')));
|
|
133
|
-
const
|
|
134
|
-
const shouldShowPasswordSetup = isWaasWallet && isPasscodeRequired;
|
|
131
|
+
const shouldShowPasswordSetup = isWaasWallet;
|
|
135
132
|
const handleTotpMfaClick = useCallback(() => setDynamicWidgetView('manage-totp-mfa'), [setDynamicWidgetView]);
|
|
136
133
|
const handlePasskeyMfaClick = useCallback(() => setDynamicWidgetView('manage-passkeys-mfa'), [setDynamicWidgetView]);
|
|
137
134
|
const handlePasscodeClick = useCallback(() => {
|
|
@@ -141,15 +138,14 @@ const MfaSection = ({ isLoading }) => {
|
|
|
141
138
|
logger.error('No wallet address or chain available for password setup');
|
|
142
139
|
return;
|
|
143
140
|
}
|
|
144
|
-
yield
|
|
141
|
+
yield setPassword({
|
|
145
142
|
accountAddress: wallet.address,
|
|
146
143
|
chainName: wallet.chain,
|
|
147
|
-
existingPassword: '',
|
|
148
144
|
newPassword: password,
|
|
149
145
|
});
|
|
150
146
|
}),
|
|
151
147
|
});
|
|
152
|
-
}, [setDynamicWidgetView, wallet,
|
|
148
|
+
}, [setDynamicWidgetView, wallet, setPassword]);
|
|
153
149
|
const handleResetPasswordClick = useCallback(() => {
|
|
154
150
|
setShowAuthFlow(true, {
|
|
155
151
|
ignoreIfIsEmbeddedWidget: false,
|
|
@@ -116,7 +116,7 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
116
116
|
const { t } = reactI18next.useTranslation();
|
|
117
117
|
const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
|
|
118
118
|
const { getEOAWallet } = useSmartWallets.useSmartWallets();
|
|
119
|
-
const { unlockWallet } = useWalletPassword.useWalletPassword();
|
|
119
|
+
const { unlockWallet, updatePassword } = useWalletPassword.useWalletPassword();
|
|
120
120
|
const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
|
|
121
121
|
const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
|
|
122
122
|
const [currentStep, setCurrentStep] = React.useState('current');
|
|
@@ -124,6 +124,8 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
124
124
|
const [newPassword, setNewPassword] = React.useState('');
|
|
125
125
|
const [verifyError, setVerifyError] = React.useState(null);
|
|
126
126
|
const [isVerifying, setIsVerifying] = React.useState(false);
|
|
127
|
+
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
128
|
+
const [submitError, setSubmitError] = React.useState(null);
|
|
127
129
|
const handleCurrentPasswordContinue = React.useCallback((password) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
128
130
|
if (!(wallet === null || wallet === void 0 ? void 0 : wallet.address) || !(wallet === null || wallet === void 0 ? void 0 : wallet.chain)) {
|
|
129
131
|
logger.logger.error('No wallet address or chain available for password verification');
|
|
@@ -156,9 +158,28 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
156
158
|
const handleEnterBack = React.useCallback(() => {
|
|
157
159
|
setCurrentStep('current');
|
|
158
160
|
}, []);
|
|
159
|
-
const handleConfirmContinue = React.useCallback(() => {
|
|
160
|
-
|
|
161
|
-
|
|
161
|
+
const handleConfirmContinue = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
|
|
162
|
+
if (!(wallet === null || wallet === void 0 ? void 0 : wallet.address) || !(wallet === null || wallet === void 0 ? void 0 : wallet.chain)) {
|
|
163
|
+
logger.logger.error('No wallet address or chain available for password reset');
|
|
164
|
+
setSubmitError(t('dyn_reset_password.confirm.error.failed'));
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
setIsSubmitting(true);
|
|
168
|
+
setSubmitError(null);
|
|
169
|
+
const success = yield updatePassword({
|
|
170
|
+
accountAddress: wallet.address,
|
|
171
|
+
chainName: wallet.chain,
|
|
172
|
+
existingPassword: currentPassword,
|
|
173
|
+
newPassword,
|
|
174
|
+
});
|
|
175
|
+
setIsSubmitting(false);
|
|
176
|
+
if (success) {
|
|
177
|
+
setCurrentStep('success');
|
|
178
|
+
}
|
|
179
|
+
else {
|
|
180
|
+
setSubmitError(t('dyn_reset_password.confirm.error.failed'));
|
|
181
|
+
}
|
|
182
|
+
}), [wallet, updatePassword, currentPassword, newPassword, t]);
|
|
162
183
|
const handleConfirmBack = React.useCallback(() => {
|
|
163
184
|
setCurrentStep('enter');
|
|
164
185
|
}, []);
|
|
@@ -171,7 +192,7 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
171
192
|
case 'enter':
|
|
172
193
|
return (jsxRuntime.jsx(SetupPasswordEnterView.SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack, title: t('dyn_reset_password.enter.title'), description: t('dyn_reset_password.enter.description'), oldPassword: currentPassword }));
|
|
173
194
|
case 'confirm':
|
|
174
|
-
return (jsxRuntime.jsx(SetupPasswordConfirmView.SetupPasswordConfirmView, { password: newPassword, onContinue: handleConfirmContinue, onBack: handleConfirmBack, title: t('dyn_reset_password.confirm.title'), description: t('dyn_reset_password.confirm.description'), showAcknowledgment: true }));
|
|
195
|
+
return (jsxRuntime.jsx(SetupPasswordConfirmView.SetupPasswordConfirmView, { password: newPassword, onContinue: handleConfirmContinue, onBack: handleConfirmBack, title: t('dyn_reset_password.confirm.title'), description: t('dyn_reset_password.confirm.description'), showAcknowledgment: true, isLoading: isSubmitting, error: submitError }));
|
|
175
196
|
case 'success':
|
|
176
197
|
return (jsxRuntime.jsx(SetupPasswordSuccessView.SetupPasswordSuccessView, { onDone: handleSuccess, title: t('dyn_reset_password.success.title'), description: t('dyn_reset_password.success.description') }));
|
|
177
198
|
default:
|
|
@@ -112,7 +112,7 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
112
112
|
const { t } = useTranslation();
|
|
113
113
|
const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext();
|
|
114
114
|
const { getEOAWallet } = useSmartWallets();
|
|
115
|
-
const { unlockWallet } = useWalletPassword();
|
|
115
|
+
const { unlockWallet, updatePassword } = useWalletPassword();
|
|
116
116
|
const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
|
|
117
117
|
const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
|
|
118
118
|
const [currentStep, setCurrentStep] = useState('current');
|
|
@@ -120,6 +120,8 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
120
120
|
const [newPassword, setNewPassword] = useState('');
|
|
121
121
|
const [verifyError, setVerifyError] = useState(null);
|
|
122
122
|
const [isVerifying, setIsVerifying] = useState(false);
|
|
123
|
+
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
124
|
+
const [submitError, setSubmitError] = useState(null);
|
|
123
125
|
const handleCurrentPasswordContinue = useCallback((password) => __awaiter(void 0, void 0, void 0, function* () {
|
|
124
126
|
if (!(wallet === null || wallet === void 0 ? void 0 : wallet.address) || !(wallet === null || wallet === void 0 ? void 0 : wallet.chain)) {
|
|
125
127
|
logger.error('No wallet address or chain available for password verification');
|
|
@@ -152,9 +154,28 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
152
154
|
const handleEnterBack = useCallback(() => {
|
|
153
155
|
setCurrentStep('current');
|
|
154
156
|
}, []);
|
|
155
|
-
const handleConfirmContinue = useCallback(() => {
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
const handleConfirmContinue = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
158
|
+
if (!(wallet === null || wallet === void 0 ? void 0 : wallet.address) || !(wallet === null || wallet === void 0 ? void 0 : wallet.chain)) {
|
|
159
|
+
logger.error('No wallet address or chain available for password reset');
|
|
160
|
+
setSubmitError(t('dyn_reset_password.confirm.error.failed'));
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
setIsSubmitting(true);
|
|
164
|
+
setSubmitError(null);
|
|
165
|
+
const success = yield updatePassword({
|
|
166
|
+
accountAddress: wallet.address,
|
|
167
|
+
chainName: wallet.chain,
|
|
168
|
+
existingPassword: currentPassword,
|
|
169
|
+
newPassword,
|
|
170
|
+
});
|
|
171
|
+
setIsSubmitting(false);
|
|
172
|
+
if (success) {
|
|
173
|
+
setCurrentStep('success');
|
|
174
|
+
}
|
|
175
|
+
else {
|
|
176
|
+
setSubmitError(t('dyn_reset_password.confirm.error.failed'));
|
|
177
|
+
}
|
|
178
|
+
}), [wallet, updatePassword, currentPassword, newPassword, t]);
|
|
158
179
|
const handleConfirmBack = useCallback(() => {
|
|
159
180
|
setCurrentStep('enter');
|
|
160
181
|
}, []);
|
|
@@ -167,7 +188,7 @@ const ResetPasswordView = ({ onComplete, }) => {
|
|
|
167
188
|
case 'enter':
|
|
168
189
|
return (jsx(SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack, title: t('dyn_reset_password.enter.title'), description: t('dyn_reset_password.enter.description'), oldPassword: currentPassword }));
|
|
169
190
|
case 'confirm':
|
|
170
|
-
return (jsx(SetupPasswordConfirmView, { password: newPassword, onContinue: handleConfirmContinue, onBack: handleConfirmBack, title: t('dyn_reset_password.confirm.title'), description: t('dyn_reset_password.confirm.description'), showAcknowledgment: true }));
|
|
191
|
+
return (jsx(SetupPasswordConfirmView, { password: newPassword, onContinue: handleConfirmContinue, onBack: handleConfirmBack, title: t('dyn_reset_password.confirm.title'), description: t('dyn_reset_password.confirm.description'), showAcknowledgment: true, isLoading: isSubmitting, error: submitError }));
|
|
171
192
|
case 'success':
|
|
172
193
|
return (jsx(SetupPasswordSuccessView, { onDone: handleSuccess, title: t('dyn_reset_password.success.title'), description: t('dyn_reset_password.success.description') }));
|
|
173
194
|
default:
|
package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.cjs
CHANGED
|
@@ -6,6 +6,7 @@ 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 Alert = require('../../../../components/Alert/Alert.cjs');
|
|
9
10
|
var Checkbox = require('../../../../components/Checkbox/Checkbox.cjs');
|
|
10
11
|
var Icon = require('../../../../components/Icon/Icon.cjs');
|
|
11
12
|
var IconButton = require('../../../../components/IconButton/IconButton.cjs');
|
|
@@ -21,7 +22,7 @@ var secureAction = require('../../../../shared/assets/secure-action.cjs');
|
|
|
21
22
|
require('@dynamic-labs/iconic');
|
|
22
23
|
require('../../../../context/ViewContext/ViewContext.cjs');
|
|
23
24
|
|
|
24
|
-
const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, description, showAcknowledgment = false, }) => {
|
|
25
|
+
const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, description, showAcknowledgment = false, isLoading = false, error = null, }) => {
|
|
25
26
|
const { t } = reactI18next.useTranslation();
|
|
26
27
|
const [confirmPassword, setConfirmPassword] = React.useState('');
|
|
27
28
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
@@ -53,7 +54,7 @@ const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, descrip
|
|
|
53
54
|
: t('dyn_setup_password.confirm.mismatch');
|
|
54
55
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: title !== null && title !== void 0 ? title : t('dyn_setup_password.confirm.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view', children: [jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(secureAction.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: description !== null && description !== void 0 ? description : t('dyn_setup_password.confirm.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsxRuntime.jsx(Input.Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix:
|
|
55
56
|
// eslint-disable-next-line react/jsx-wrap-multilines
|
|
56
|
-
jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsxRuntime.jsx(Icon.Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsxRuntime.jsx(checkCircle.ReactComponent, {})) : (jsxRuntime.jsx(exclamationCircle.ReactComponent, {})) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), showAcknowledgment && (jsxRuntime.jsxs("label", { className: 'setup-password-confirm-view__acknowledgment', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledged, onChange: handleAcknowledgmentChange, ariaLabel: t('dyn_reset_password.confirm.acknowledgment') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_reset_password.confirm.acknowledgment', children: t('dyn_reset_password.confirm.acknowledgment') })] })), jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
|
|
57
|
+
jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsxRuntime.jsx(Icon.Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsxRuntime.jsx(checkCircle.ReactComponent, {})) : (jsxRuntime.jsx(exclamationCircle.ReactComponent, {})) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), showAcknowledgment && (jsxRuntime.jsxs("label", { className: 'setup-password-confirm-view__acknowledgment', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledged, onChange: handleAcknowledgmentChange, ariaLabel: t('dyn_reset_password.confirm.acknowledgment') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_reset_password.confirm.acknowledgment', children: t('dyn_reset_password.confirm.acknowledgment') })] })), error && (jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-confirm-view__error', children: error })), jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid || isLoading, loading: isLoading, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
|
|
57
58
|
color: 'inherit',
|
|
58
59
|
}, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
|
|
59
60
|
};
|
package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useState, useCallback } from 'react';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import { Alert } from '../../../../components/Alert/Alert.js';
|
|
5
6
|
import { Checkbox } from '../../../../components/Checkbox/Checkbox.js';
|
|
6
7
|
import { Icon } from '../../../../components/Icon/Icon.js';
|
|
7
8
|
import { IconButton } from '../../../../components/IconButton/IconButton.js';
|
|
@@ -17,7 +18,7 @@ import { ReactComponent as SvgSecureAction } from '../../../../shared/assets/sec
|
|
|
17
18
|
import '@dynamic-labs/iconic';
|
|
18
19
|
import '../../../../context/ViewContext/ViewContext.js';
|
|
19
20
|
|
|
20
|
-
const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, description, showAcknowledgment = false, }) => {
|
|
21
|
+
const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, description, showAcknowledgment = false, isLoading = false, error = null, }) => {
|
|
21
22
|
const { t } = useTranslation();
|
|
22
23
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
23
24
|
const [showPassword, setShowPassword] = useState(false);
|
|
@@ -49,7 +50,7 @@ const SetupPasswordConfirmView = ({ password, onContinue, onBack, title, descrip
|
|
|
49
50
|
: t('dyn_setup_password.confirm.mismatch');
|
|
50
51
|
return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: title !== null && title !== void 0 ? title : t('dyn_setup_password.confirm.title') }) }), jsxs("div", { className: 'setup-password-confirm-view', children: [jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgSecureAction, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: description !== null && description !== void 0 ? description : t('dyn_setup_password.confirm.description') }), jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsx(Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix:
|
|
51
52
|
// eslint-disable-next-line react/jsx-wrap-multilines
|
|
52
|
-
jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsx(Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsx(SvgCheckCircle, {})) : (jsx(SvgExclamationCircle, {})) }), jsx(Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), showAcknowledgment && (jsxs("label", { className: 'setup-password-confirm-view__acknowledgment', children: [jsx(Checkbox, { checked: acknowledged, onChange: handleAcknowledgmentChange, ariaLabel: t('dyn_reset_password.confirm.acknowledgment') }), jsx(Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_reset_password.confirm.acknowledgment', children: t('dyn_reset_password.confirm.acknowledgment') })] })), jsx("div", { className: 'setup-password-confirm-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
|
|
53
|
+
jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsx(Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsx(SvgCheckCircle, {})) : (jsx(SvgExclamationCircle, {})) }), jsx(Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), showAcknowledgment && (jsxs("label", { className: 'setup-password-confirm-view__acknowledgment', children: [jsx(Checkbox, { checked: acknowledged, onChange: handleAcknowledgmentChange, ariaLabel: t('dyn_reset_password.confirm.acknowledgment') }), jsx(Typography, { variant: 'body_small', color: 'secondary', copykey: 'dyn_reset_password.confirm.acknowledgment', children: t('dyn_reset_password.confirm.acknowledgment') })] })), error && (jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-confirm-view__error', children: error })), jsx("div", { className: 'setup-password-confirm-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid || isLoading, loading: isLoading, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
|
|
53
54
|
color: 'inherit',
|
|
54
55
|
}, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
|
|
55
56
|
};
|
|
@@ -36,7 +36,7 @@ const OPTIONS = [
|
|
|
36
36
|
value: 'c',
|
|
37
37
|
},
|
|
38
38
|
];
|
|
39
|
-
const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
|
|
39
|
+
const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, isLoading = false, error = null }) => {
|
|
40
40
|
const { t } = reactI18next.useTranslation();
|
|
41
41
|
const [selectedAnswer, setSelectedAnswer] = React.useState('');
|
|
42
42
|
const [showError, setShowError] = React.useState(false);
|
|
@@ -67,7 +67,7 @@ const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
|
|
|
67
67
|
: isSelected
|
|
68
68
|
? 'brand-primary'
|
|
69
69
|
: 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
|
|
70
|
-
}) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
|
|
70
|
+
}) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), error && (jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: error })), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer || isLoading, loading: isLoading, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
|
|
71
71
|
color: 'inherit',
|
|
72
72
|
}, expanded: true, children: t('dyn_setup_password.button.confirm') }) })] })] }) })] }));
|
|
73
73
|
};
|
|
@@ -2,5 +2,7 @@ import { FC } from 'react';
|
|
|
2
2
|
export type SetupPasswordKnowledgeCheckViewProps = {
|
|
3
3
|
onContinue: () => void;
|
|
4
4
|
onBack: () => void;
|
|
5
|
+
isLoading?: boolean;
|
|
6
|
+
error?: string | null;
|
|
5
7
|
};
|
|
6
8
|
export declare const SetupPasswordKnowledgeCheckView: FC<SetupPasswordKnowledgeCheckViewProps>;
|
|
@@ -32,7 +32,7 @@ const OPTIONS = [
|
|
|
32
32
|
value: 'c',
|
|
33
33
|
},
|
|
34
34
|
];
|
|
35
|
-
const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
|
|
35
|
+
const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, isLoading = false, error = null }) => {
|
|
36
36
|
const { t } = useTranslation();
|
|
37
37
|
const [selectedAnswer, setSelectedAnswer] = useState('');
|
|
38
38
|
const [showError, setShowError] = useState(false);
|
|
@@ -63,7 +63,7 @@ const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
|
|
|
63
63
|
: isSelected
|
|
64
64
|
? 'brand-primary'
|
|
65
65
|
: 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsx(Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
|
|
66
|
-
}) })] })] }), jsxs("div", { children: [showError && (jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
|
|
66
|
+
}) })] })] }), jsxs("div", { children: [showError && (jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), error && (jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: error })), jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer || isLoading, loading: isLoading, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
|
|
67
67
|
color: 'inherit',
|
|
68
68
|
}, expanded: true, children: t('dyn_setup_password.button.confirm') }) })] })] }) })] }));
|
|
69
69
|
};
|