@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.
Files changed (77) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/package.cjs +2 -2
  3. package/package.js +2 -2
  4. package/package.json +13 -13
  5. package/src/index.cjs +4 -0
  6. package/src/index.d.ts +2 -1
  7. package/src/index.js +2 -0
  8. package/src/lib/Main.cjs +1 -0
  9. package/src/lib/Main.js +1 -0
  10. package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.cjs +1 -1
  11. package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.d.ts +5 -1
  12. package/src/lib/components/LegacySafariCssOverrides/LegacySafariCssOverrides.js +1 -1
  13. package/src/lib/components/ShadowDOM/ShadowDOM.cjs +6 -6
  14. package/src/lib/components/ShadowDOM/ShadowDOM.d.ts +4 -1
  15. package/src/lib/components/ShadowDOM/ShadowDOM.js +6 -6
  16. package/src/lib/context/DynamicContext/DynamicContext.cjs +4 -2
  17. package/src/lib/context/DynamicContext/DynamicContext.js +4 -2
  18. package/src/lib/context/DynamicContext/types/DynamicContextProps.d.ts +6 -0
  19. package/src/lib/context/DynamicContext/types/IDynamicContext.d.ts +1 -0
  20. package/src/lib/context/DynamicContext/types/IInternalDynamicContext.d.ts +5 -1
  21. package/src/lib/context/ThemeContext/ThemeContext.cjs +3 -3
  22. package/src/lib/context/ThemeContext/ThemeContext.d.ts +1 -0
  23. package/src/lib/context/ThemeContext/ThemeContext.js +3 -3
  24. package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.cjs +8 -2
  25. package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.d.ts +2 -2
  26. package/src/lib/context/ThemeContext/utils/stylesheetBuilder/stylesheetBuilder.js +8 -2
  27. package/src/lib/data/api/wallets/wallets.cjs +62 -11
  28. package/src/lib/data/api/wallets/wallets.d.ts +1 -0
  29. package/src/lib/data/api/wallets/wallets.js +62 -12
  30. package/src/lib/shared/types/connectionAndSignature.d.ts +2 -1
  31. package/src/lib/shared/types/wallets.d.ts +2 -1
  32. package/src/lib/utils/functions/compareChains/compareChains.cjs +1 -0
  33. package/src/lib/utils/functions/compareChains/compareChains.js +1 -0
  34. package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.cjs +6 -5
  35. package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.d.ts +3 -1
  36. package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js +6 -5
  37. package/src/lib/utils/hooks/index.d.ts +3 -0
  38. package/src/lib/utils/hooks/useClientSessionKeys/useClientSessionKeys.cjs +4 -1
  39. package/src/lib/utils/hooks/useClientSessionKeys/useClientSessionKeys.js +4 -1
  40. package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.cjs +5 -2
  41. package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.d.ts +2 -0
  42. package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.js +5 -2
  43. package/src/lib/utils/hooks/useSignEip7702Authorization/index.d.ts +1 -0
  44. package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.cjs +162 -0
  45. package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.d.ts +78 -0
  46. package/src/lib/utils/hooks/useSignEip7702Authorization/useSignEip7702Authorization.js +158 -0
  47. package/src/lib/utils/hooks/useStepUpAuthentication/index.d.ts +2 -0
  48. package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.cjs +197 -0
  49. package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.d.ts +51 -0
  50. package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.js +193 -0
  51. package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.cjs +3 -1
  52. package/src/lib/utils/hooks/useSyncDynamicWaas/useSyncDynamicWaas.js +3 -1
  53. package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs +8 -3
  54. package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.d.ts +1 -1
  55. package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js +9 -4
  56. package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.cjs +53 -1
  57. package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.d.ts +6 -0
  58. package/src/lib/utils/hooks/useWalletPassword/useWalletPassword.js +53 -1
  59. package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.cjs +1 -1
  60. package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.js +1 -1
  61. package/src/lib/views/ResetPasswordForSettingsView/ResetPasswordForSettingsView.cjs +5 -21
  62. package/src/lib/views/ResetPasswordForSettingsView/ResetPasswordForSettingsView.js +5 -21
  63. package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.cjs +9 -1
  64. package/src/lib/views/SetupPasswordForWalletCreationView/SetupPasswordForWalletCreationView.js +9 -1
  65. package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.cjs +17 -21
  66. package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.js +17 -21
  67. package/src/lib/widgets/DynamicWidget/views/ResetPasswordView/ResetPasswordView.cjs +26 -5
  68. package/src/lib/widgets/DynamicWidget/views/ResetPasswordView/ResetPasswordView.js +26 -5
  69. package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.cjs +3 -2
  70. package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.d.ts +2 -0
  71. package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.js +3 -2
  72. package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs +2 -2
  73. package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.d.ts +2 -0
  74. package/src/lib/widgets/DynamicWidget/views/SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js +2 -2
  75. package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.cjs +30 -22
  76. package/src/lib/widgets/DynamicWidget/views/SetupPasswordView/SetupPasswordView.d.ts +2 -1
  77. 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 { logger } from '../../shared/logger.js';
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 { primaryWallet, setShowAuthFlow } = useInternalDynamicContext();
110
- const { getEOAWallet } = useSmartWallets();
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
- }), [wallet, updatePassword, setShowAuthFlow]);
110
+ }, [setShowAuthFlow]);
127
111
  return jsx(ResetPasswordView, { onComplete: handleComplete });
128
112
  };
129
113
 
@@ -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;
@@ -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 };
@@ -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('@dynamic-labs-sdk/client/core');
11
- require('@dynamic-labs/sdk-api-core');
12
- require('../../../../../client/client.cjs');
13
- require('@dynamic-labs-sdk/client');
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, _c;
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 projectSettings = useProjectSettings.useProjectSettings();
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 isPasscodeRequired = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.waas) === null || _c === void 0 ? void 0 : _c.passcodeRequired;
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 updatePassword({
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, updatePassword]);
152
+ }, [setDynamicWidgetView, wallet, setPassword]);
157
153
  const handleResetPasswordClick = React.useCallback(() => {
158
154
  setShowAuthFlow(true, {
159
155
  ignoreIfIsEmbeddedWidget: false,
@@ -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 '@dynamic-labs-sdk/client/core';
7
- import '@dynamic-labs/sdk-api-core';
8
- import '../../../../../client/client.js';
9
- import '@dynamic-labs-sdk/client';
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, _c;
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 projectSettings = useProjectSettings();
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 isPasscodeRequired = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.waas) === null || _c === void 0 ? void 0 : _c.passcodeRequired;
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 updatePassword({
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, updatePassword]);
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
- setCurrentStep('success');
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
- setCurrentStep('success');
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:
@@ -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
  };
@@ -6,5 +6,7 @@ export type SetupPasswordConfirmViewProps = {
6
6
  title?: string;
7
7
  description?: string;
8
8
  showAcknowledgment?: boolean;
9
+ isLoading?: boolean;
10
+ error?: string | null;
9
11
  };
10
12
  export declare const SetupPasswordConfirmView: FC<SetupPasswordConfirmViewProps>;
@@ -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
  };