@dynamic-labs/sdk-react-core 3.0.0-alpha.55 → 3.0.0-alpha.56

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 (15) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.cjs +2 -2
  3. package/package.js +2 -2
  4. package/package.json +13 -13
  5. package/src/lib/locale/en/translation.cjs +2 -0
  6. package/src/lib/locale/en/translation.d.ts +2 -0
  7. package/src/lib/locale/en/translation.js +2 -0
  8. package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.cjs +5 -1
  9. package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.js +5 -1
  10. package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.cjs +2 -2
  11. package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.d.ts +3 -1
  12. package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.js +2 -2
  13. package/src/lib/views/viewToComponentMap.d.ts +3 -1
  14. package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.cjs +8 -3
  15. package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.js +8 -3
package/CHANGELOG.md CHANGED
@@ -1,4 +1,11 @@
1
1
 
2
+ ## [3.0.0-alpha.56](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.55...v3.0.0-alpha.56) (2024-09-03)
3
+
4
+
5
+ ### Bug Fixes
6
+
7
+ * pass `authCode` for telegram from sdk to `signin` and `verify` calls ([#6777](https://github.com/dynamic-labs/DynamicAuth/issues/6777)) ([43d09dd](https://github.com/dynamic-labs/DynamicAuth/commit/43d09dd3ea82fd13f1c798c0745aa0fef2051f90))
8
+
2
9
  ## [3.0.0-alpha.55](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.54...v3.0.0-alpha.55) (2024-09-02)
3
10
 
4
11
 
package/package.cjs CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
5
5
 
6
- var version = "3.0.0-alpha.55";
6
+ var version = "3.0.0-alpha.56";
7
7
  var dependencies = {
8
- "@dynamic-labs/sdk-api-core": "0.0.524",
8
+ "@dynamic-labs/sdk-api-core": "0.0.525",
9
9
  "@hcaptcha/react-hcaptcha": "1.4.4",
10
10
  "country-list": "2.3.0",
11
11
  formik: "2.2.9",
package/package.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client'
2
- var version = "3.0.0-alpha.55";
2
+ var version = "3.0.0-alpha.56";
3
3
  var dependencies = {
4
- "@dynamic-labs/sdk-api-core": "0.0.524",
4
+ "@dynamic-labs/sdk-api-core": "0.0.525",
5
5
  "@hcaptcha/react-hcaptcha": "1.4.4",
6
6
  "country-list": "2.3.0",
7
7
  formik: "2.2.9",
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@dynamic-labs/sdk-react-core",
3
- "version": "3.0.0-alpha.55",
3
+ "version": "3.0.0-alpha.56",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
7
7
  "directory": "packages/sdk-react-core"
8
8
  },
9
9
  "dependencies": {
10
- "@dynamic-labs/sdk-api-core": "0.0.524",
10
+ "@dynamic-labs/sdk-api-core": "0.0.525",
11
11
  "@hcaptcha/react-hcaptcha": "1.4.4",
12
12
  "country-list": "2.3.0",
13
13
  "formik": "2.2.9",
@@ -17,17 +17,17 @@
17
17
  "react-i18next": "13.5.0",
18
18
  "yup": "0.32.11",
19
19
  "react-international-phone": "4.2.5",
20
- "@dynamic-labs/global-wallet": "3.0.0-alpha.55",
21
- "@dynamic-labs/iconic": "3.0.0-alpha.55",
22
- "@dynamic-labs/logger": "3.0.0-alpha.55",
23
- "@dynamic-labs/message-transport": "3.0.0-alpha.55",
24
- "@dynamic-labs/multi-wallet": "3.0.0-alpha.55",
25
- "@dynamic-labs/rpc-providers": "3.0.0-alpha.55",
26
- "@dynamic-labs/store": "3.0.0-alpha.55",
27
- "@dynamic-labs/types": "3.0.0-alpha.55",
28
- "@dynamic-labs/utils": "3.0.0-alpha.55",
29
- "@dynamic-labs/wallet-book": "3.0.0-alpha.55",
30
- "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.55",
20
+ "@dynamic-labs/global-wallet": "3.0.0-alpha.56",
21
+ "@dynamic-labs/iconic": "3.0.0-alpha.56",
22
+ "@dynamic-labs/logger": "3.0.0-alpha.56",
23
+ "@dynamic-labs/message-transport": "3.0.0-alpha.56",
24
+ "@dynamic-labs/multi-wallet": "3.0.0-alpha.56",
25
+ "@dynamic-labs/rpc-providers": "3.0.0-alpha.56",
26
+ "@dynamic-labs/store": "3.0.0-alpha.56",
27
+ "@dynamic-labs/types": "3.0.0-alpha.56",
28
+ "@dynamic-labs/utils": "3.0.0-alpha.56",
29
+ "@dynamic-labs/wallet-book": "3.0.0-alpha.56",
30
+ "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.56",
31
31
  "eventemitter3": "5.0.1"
32
32
  },
33
33
  "devDependencies": {
package/src/lib/locale/en/translation.cjs CHANGED
@@ -905,12 +905,14 @@ const translation = {
905
905
  title: 'Authenticator App',
906
906
  add_mfa_button: 'Authenticator App',
907
907
  no_devices: 'No authenticator apps configured',
908
+ generate_backup_codes_button: 'Get new backup codes',
908
909
  },
909
910
  */
910
911
  dyn_manage_mfa: {
911
912
  title: 'Authenticator App',
912
913
  add_mfa_button: 'Authenticator App',
913
914
  no_devices: 'No authenticator apps configured',
915
+ generate_backup_codes_button: 'Get new backup codes',
914
916
  },
915
917
  /**
916
918
  * @description copy keys for mfa views
package/src/lib/locale/en/translation.d.ts CHANGED
@@ -901,12 +901,14 @@ export declare const translation: {
901
901
  title: 'Authenticator App',
902
902
  add_mfa_button: 'Authenticator App',
903
903
  no_devices: 'No authenticator apps configured',
904
+ generate_backup_codes_button: 'Get new backup codes',
904
905
  },
905
906
  */
906
907
  dyn_manage_mfa: {
907
908
  title: string;
908
909
  add_mfa_button: string;
909
910
  no_devices: string;
911
+ generate_backup_codes_button: string;
910
912
  };
911
913
  /**
912
914
  * @description copy keys for mfa views
package/src/lib/locale/en/translation.js CHANGED
@@ -901,12 +901,14 @@ const translation = {
901
901
  title: 'Authenticator App',
902
902
  add_mfa_button: 'Authenticator App',
903
903
  no_devices: 'No authenticator apps configured',
904
+ generate_backup_codes_button: 'Get new backup codes',
904
905
  },
905
906
  */
906
907
  dyn_manage_mfa: {
907
908
  title: 'Authenticator App',
908
909
  add_mfa_button: 'Authenticator App',
909
910
  no_devices: 'No authenticator apps configured',
911
+ generate_backup_codes_button: 'Get new backup codes',
910
912
  },
911
913
  /**
912
914
  * @description copy keys for mfa views
package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.cjs CHANGED
@@ -289,6 +289,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
289
289
  if (authMode === 'signin') {
290
290
  if (provider === sdkApiCore.ProviderEnum.Telegram) {
291
291
  const apiCall = () => oauth.telegramSignIn(environmentId, {
292
+ code: authCode,
292
293
  sessionPublicKey,
293
294
  state,
294
295
  });
@@ -307,7 +308,10 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
307
308
  }
308
309
  else {
309
310
  if (provider === sdkApiCore.ProviderEnum.Telegram) {
310
- const apiCall = () => oauth.telegramVerify(environmentId, { state });
311
+ const apiCall = () => oauth.telegramVerify(environmentId, {
312
+ code: authCode,
313
+ state,
314
+ });
311
315
  yield linkAccount(provider, apiCall);
312
316
  }
313
317
  else {
package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.js CHANGED
@@ -285,6 +285,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
285
285
  if (authMode === 'signin') {
286
286
  if (provider === ProviderEnum.Telegram) {
287
287
  const apiCall = () => telegramSignIn(environmentId, {
288
+ code: authCode,
288
289
  sessionPublicKey,
289
290
  state,
290
291
  });
@@ -303,7 +304,10 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
303
304
  }
304
305
  else {
305
306
  if (provider === ProviderEnum.Telegram) {
306
- const apiCall = () => telegramVerify(environmentId, { state });
307
+ const apiCall = () => telegramVerify(environmentId, {
308
+ code: authCode,
309
+ state,
310
+ });
307
311
  yield linkAccount(provider, apiCall);
308
312
  }
309
313
  else {
package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.cjs CHANGED
@@ -100,7 +100,7 @@ var CopyButton = require('../../components/CopyButton/CopyButton.cjs');
100
100
  require('../../components/InlineWidget/InlineWidget.cjs');
101
101
  require('qrcode');
102
102
 
103
- const MfaDisplayBackupCodesView = () => {
103
+ const MfaDisplayBackupCodesView = ({ regenerateCodes = false, }) => {
104
104
  const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
105
105
  const [acknowledgement, setAcknowledgement] = React.useState(false);
106
106
  const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
@@ -108,7 +108,7 @@ const MfaDisplayBackupCodesView = () => {
108
108
  });
109
109
  const { t } = reactI18next.useTranslation();
110
110
  const { getRecoveryCodes } = useMfa.useMfa();
111
- const { data: codes, isLoading } = usePromise.usePromise(() => getRecoveryCodes());
111
+ const { data: codes, isLoading } = usePromise.usePromise(() => getRecoveryCodes(regenerateCodes));
112
112
  const codesAsString = (codes || []).join('\n');
113
113
  const completeAcknowledgement = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
114
114
  setShowAuthFlow(false);
package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  /// <reference types="react" />
2
- export declare const MfaDisplayBackupCodesView: () => JSX.Element;
2
+ export declare const MfaDisplayBackupCodesView: ({ regenerateCodes, }: {
3
+ regenerateCodes: boolean;
4
+ }) => JSX.Element;
package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.js CHANGED
@@ -96,7 +96,7 @@ import { CopyButton } from '../../components/CopyButton/CopyButton.js';
96
96
  import '../../components/InlineWidget/InlineWidget.js';
97
97
  import 'qrcode';
98
98
 
99
- const MfaDisplayBackupCodesView = () => {
99
+ const MfaDisplayBackupCodesView = ({ regenerateCodes = false, }) => {
100
100
  const { setShowAuthFlow } = useInternalDynamicContext();
101
101
  const [acknowledgement, setAcknowledgement] = useState(false);
102
102
  const { updateUser } = useUserUpdateRequestInternal({
@@ -104,7 +104,7 @@ const MfaDisplayBackupCodesView = () => {
104
104
  });
105
105
  const { t } = useTranslation();
106
106
  const { getRecoveryCodes } = useMfa();
107
- const { data: codes, isLoading } = usePromise(() => getRecoveryCodes());
107
+ const { data: codes, isLoading } = usePromise(() => getRecoveryCodes(regenerateCodes));
108
108
  const codesAsString = (codes || []).join('\n');
109
109
  const completeAcknowledgement = () => __awaiter(void 0, void 0, void 0, function* () {
110
110
  setShowAuthFlow(false);
package/src/lib/views/viewToComponentMap.d.ts CHANGED
@@ -29,7 +29,9 @@ export declare const viewToComponentMap: {
29
29
  'merge-user-accounts-conflicts': import("react").FC<import("./MergeUserAccountsConflictsView/MergeUserAccountsConflictsView").MergeUserAccountsConflictsViewProps>;
30
30
  'merge-user-accounts-with-same-email': import("react").FC<import("./MergeUserAccountsWithSameEmailView/MergeUserAccountsWithSameEmailView").MergeUserAccountsWithSameEmailViewProps>;
31
31
  'mfa-choose-device': import("react").FC<import("./MfaChooseDeviceView").MfaChooseDeviceViewProps>;
32
- 'mfa-display-backup-codes': () => JSX.Element;
32
+ 'mfa-display-backup-codes': ({ regenerateCodes, }: {
33
+ regenerateCodes: boolean;
34
+ }) => JSX.Element;
33
35
  'mfa-recovery': import("react").FC;
34
36
  'mfa-secure-device': ({ type, isInitialSetup, }: import("./MfaSecureDeviceView").MfaSecureDeviceViewProps) => JSX.Element;
35
37
  'mfa-secure-device-help': ({ uri, secret, }: {
package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.cjs CHANGED
@@ -17,7 +17,7 @@ require('@dynamic-labs/sdk-api-core');
17
17
  require('../../../../shared/logger.cjs');
18
18
  require('@dynamic-labs/iconic');
19
19
  require('@dynamic-labs/wallet-connector-core');
20
- require('../../../../context/ViewContext/ViewContext.cjs');
20
+ var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
21
21
  var add = require('../../../../shared/assets/add.cjs');
22
22
  var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
23
23
  require('@dynamic-labs/wallet-book');
@@ -107,9 +107,10 @@ const ManageMfaWidgetView = () => {
107
107
  const [loading, setLoading] = React.useState(false);
108
108
  const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
109
109
  const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals.useDynamicModals();
110
+ const { setView } = ViewContext.useViewContext();
110
111
  const { getUserDevices, deleteUserDevice } = useMfa.useMfa();
111
112
  const { t } = reactI18next.useTranslation();
112
- const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
113
+ const { projectSettings, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
113
114
  const isMfaRequired = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.mfa) === null || _a === void 0 ? void 0 : _a.required);
114
115
  const getDevices = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
115
116
  setLoading(true);
@@ -139,7 +140,11 @@ const ManageMfaWidgetView = () => {
139
140
  getDevices();
140
141
  });
141
142
  const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
142
- return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsxRuntime.jsx(UserDeviceTile.UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
143
+ const handleGenerateBackupCodes = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
144
+ setShowAuthFlow(true);
145
+ setView('mfa-display-backup-codes', { regenerateCodes: true });
146
+ });
147
+ return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsxRuntime.jsx(UserDeviceTile.UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: userDevices.length > 0 ? (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: handleGenerateBackupCodes, copykey: 'dyn_manage_mfa.generate_backup_codes_button', children: t('dyn_manage_mfa.generate_backup_codes_button') })) : (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: t('dyn_manage_mfa.add_mfa_button') })) })] }));
143
148
  };
144
149
 
145
150
  exports.ManageMfaWidgetView = ManageMfaWidgetView;
package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.js CHANGED
@@ -13,7 +13,7 @@ import '@dynamic-labs/sdk-api-core';
13
13
  import '../../../../shared/logger.js';
14
14
  import '@dynamic-labs/iconic';
15
15
  import '@dynamic-labs/wallet-connector-core';
16
- import '../../../../context/ViewContext/ViewContext.js';
16
+ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
17
17
  import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
18
18
  import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
19
19
  import '@dynamic-labs/wallet-book';
@@ -103,9 +103,10 @@ const ManageMfaWidgetView = () => {
103
103
  const [loading, setLoading] = useState(false);
104
104
  const { setDynamicWidgetView } = useWidgetContext();
105
105
  const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals();
106
+ const { setView } = useViewContext();
106
107
  const { getUserDevices, deleteUserDevice } = useMfa();
107
108
  const { t } = useTranslation();
108
- const { projectSettings } = useInternalDynamicContext();
109
+ const { projectSettings, setShowAuthFlow } = useInternalDynamicContext();
109
110
  const isMfaRequired = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.mfa) === null || _a === void 0 ? void 0 : _a.required);
110
111
  const getDevices = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
111
112
  setLoading(true);
@@ -135,7 +136,11 @@ const ManageMfaWidgetView = () => {
135
136
  getDevices();
136
137
  });
137
138
  const backButton = (jsx(IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
138
- return (jsxs("div", { className: 'manage-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsx(MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsx(Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsx(UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsx(SvgAdd, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
139
+ const handleGenerateBackupCodes = () => __awaiter(void 0, void 0, void 0, function* () {
140
+ setShowAuthFlow(true);
141
+ setView('mfa-display-backup-codes', { regenerateCodes: true });
142
+ });
143
+ return (jsxs("div", { className: 'manage-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsx(MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsx(Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsx(UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: userDevices.length > 0 ? (jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: handleGenerateBackupCodes, copykey: 'dyn_manage_mfa.generate_backup_codes_button', children: t('dyn_manage_mfa.generate_backup_codes_button') })) : (jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsx(SvgAdd, {}), children: t('dyn_manage_mfa.add_mfa_button') })) })] }));
139
144
  };
140
145
 
141
146
  export { ManageMfaWidgetView };