@dynamic-labs/sdk-react-core 2.0.0-alpha.24 → 2.0.0-alpha.25

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 (21) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.cjs +1 -1
  3. package/package.js +1 -1
  4. package/package.json +13 -13
  5. package/src/lib/components/Divider/Divider.cjs +2 -2
  6. package/src/lib/components/Divider/Divider.d.ts +4 -4
  7. package/src/lib/components/Divider/Divider.js +2 -2
  8. package/src/lib/components/EmailForm/EmailForm.cjs +3 -2
  9. package/src/lib/components/EmailForm/EmailForm.d.ts +5 -4
  10. package/src/lib/components/EmailForm/EmailForm.js +3 -2
  11. package/src/lib/styles/index.shadow.cjs +1 -1
  12. package/src/lib/styles/index.shadow.js +1 -1
  13. package/src/lib/views/LoginView/LoginView.cjs +6 -113
  14. package/src/lib/views/LoginView/LoginView.js +6 -113
  15. package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.cjs +123 -0
  16. package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.d.ts +10 -0
  17. package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.js +119 -0
  18. package/src/lib/views/LoginView/LoginViewSection/index.d.ts +1 -0
  19. package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs +2 -2
  20. package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.d.ts +5 -4
  21. package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js +2 -2
package/src/lib/views/LoginView/LoginView.cjs CHANGED
@@ -4,94 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
- var reactI18next = require('react-i18next');
8
7
  var sdkApi = require('@dynamic-labs/sdk-api');
9
8
  var utils = require('@dynamic-labs/utils');
10
- var classNames = require('../../utils/functions/classNames/classNames.cjs');
11
- require('../../events/dynamicEvents.cjs');
12
- require('../../../../_virtual/_tslib.cjs');
13
- require('../../context/DynamicContext/DynamicContext.cjs');
14
- require('../../shared/logger.cjs');
15
- require('@dynamic-labs/iconic');
16
- require('@dynamic-labs/wallet-connector-core');
17
- var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
18
- require('@dynamic-labs/wallet-book');
19
- require('../../utils/constants/colors.cjs');
20
- require('../../utils/constants/values.cjs');
21
- require('../../shared/utils/classes/storage/localStorage.cjs');
22
- require('../../shared/consts/index.cjs');
23
- require('../../context/CaptchaContext/CaptchaContext.cjs');
9
+ var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
24
10
  var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
25
- require('@dynamic-labs/multi-wallet');
26
- require('react-international-phone');
27
- require('viem');
28
- require('viem/chains');
29
- require('i18next');
30
- require('../../config/ApiEndpoint.cjs');
31
- require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
32
- require('../../context/AccountExistsContext/AccountExistsContext.cjs');
33
- require('../../context/VerificationContext/VerificationContext.cjs');
34
- require('react-dom');
35
- require('../../context/WalletContext/WalletContext.cjs');
36
- require('../../context/ThemeContext/ThemeContext.cjs');
37
- require('@dynamic-labs/types');
38
- require('yup');
39
- require('../../context/FieldsStateContext/FieldsStateContext.cjs');
40
- require('../../context/MockContext/MockContext.cjs');
41
- require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
42
- require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
43
- require('@dynamic-labs/rpc-providers');
44
- require('../../context/UserWalletsContext/UserWalletsContext.cjs');
45
- var Typography = require('../../components/Typography/Typography.cjs');
11
+ var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
12
+ var DefaultFooter = require('../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.cjs');
13
+ var classNames = require('../../utils/functions/classNames/classNames.cjs');
46
14
  var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
47
- require('../../components/ShadowDOM/ShadowDOM.cjs');
48
- require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
49
- require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
50
- require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
51
- require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
52
- require('../../context/FooterAnimationContext/index.cjs');
53
- require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
54
- require('../../context/WalletGroupContext/WalletGroupContext.cjs');
55
- require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
56
- require('react-focus-lock');
57
- var Divider = require('../../components/Divider/Divider.cjs');
58
- var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
59
- require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
60
- require('../../components/IconButton/IconButton.cjs');
61
- require('../../components/MenuList/Dropdown/Dropdown.cjs');
62
- var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
63
- require('formik');
64
- require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
65
- require('../../components/Alert/Alert.cjs');
66
- require('../../components/Input/Input.cjs');
67
- require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
68
- require('../../context/PasskeyContext/PasskeyContext.cjs');
69
- require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
70
- require('../../components/InlineWidget/InlineWidget.cjs');
71
- require('../../components/IsBrowser/IsBrowser.cjs');
72
- require('../../components/Popper/Popper/Popper.cjs');
73
- require('../../components/Popper/PopperContext/PopperContext.cjs');
74
- require('qrcode');
75
15
  var WalletList = require('../WalletList/WalletList.cjs');
76
- var LoginEmailForm = require('./sections/EmailSignInSection/LoginEmailForm.cjs');
77
- require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
78
- require('@hcaptcha/react-hcaptcha');
79
- var DefaultFooter = require('../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.cjs');
80
- var PhoneNumberSignInSection = require('./sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
81
- var SocialSignInSection = require('./sections/SocialSignInSection/SocialSignInSection.cjs');
82
- var ToggleableSection = require('./sections/ToggleableSection/ToggleableSection.cjs');
83
- var WalletSignInSection = require('./sections/WalletSignInSection/WalletSignInSection.cjs');
16
+ var LoginViewSection = require('./LoginViewSection/LoginViewSection.cjs');
84
17
  var useLoginView = require('./useLoginView/useLoginView.cjs');
85
18
 
86
19
  const LoginView = () => {
87
20
  var _a;
88
21
  const { error } = ErrorContext.useErrorContext();
89
- const { loading } = LoadingContext.useLoadingContext();
90
22
  const { view, setView } = ViewContext.useViewContext();
91
23
  const { isWalletOnly, loginViewSections } = useLoginView.useLoginView();
92
- const { t } = reactI18next.useTranslation();
93
24
  const [showWalletList, setShowWalletList] = React.useState(isWalletOnly);
94
- const [isLoading, setIsLoading] = React.useState(loading);
95
25
  React.useEffect(() => {
96
26
  // toolkit log in with email was set to false
97
27
  if (isWalletOnly) {
@@ -111,44 +41,7 @@ const LoginView = () => {
111
41
  }, [isWalletOnly, view.type]);
112
42
  const { showDefaultFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
113
43
  const numOfWallets = ((_a = loginViewSections.find((section) => section.type === sdkApi.SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
114
- const renderViewSections = React.useMemo(() => loginViewSections.map((viewSection, index) => {
115
- switch (viewSection.type) {
116
- case sdkApi.SdkViewSectionType.Separator:
117
- return (jsxRuntime.jsx(Divider.Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
118
- case sdkApi.SdkViewSectionType.Email:
119
- return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
120
- case sdkApi.SdkViewSectionType.Phone:
121
- return (jsxRuntime.jsx(PhoneNumberSignInSection.PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
122
- case sdkApi.SdkViewSectionType.EmailAndPhone:
123
- return (jsxRuntime.jsx(ToggleableSection.ToggleableSection, { sections: [
124
- {
125
- button: t('dyn_login.email_or_phone.use_phone'),
126
- buttonCopyKey: 'dyn_login.email_or_phone.use_phone',
127
- component: (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
128
- label: t('dyn_login.email_or_phone.prefer_phone'),
129
- labelCopyKey: 'dyn_login.email_or_phone.prefer_phone',
130
- },
131
- {
132
- button: t('dyn_login.email_or_phone.use_email'),
133
- buttonCopyKey: 'dyn_login.email_or_phone.use_email',
134
- component: (jsxRuntime.jsx(PhoneNumberSignInSection.PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
135
- label: t('dyn_login.email_or_phone.prefer_email'),
136
- labelCopyKey: 'dyn_login.email_or_phone.prefer_email',
137
- },
138
- ] }, `${viewSection.type}_${index}`));
139
- case sdkApi.SdkViewSectionType.Wallet:
140
- return (jsxRuntime.jsx(WalletSignInSection.WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
141
- setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
142
- setShowWalletList(true);
143
- }, isLoading: isLoading }, `${viewSection.type}_${index}`));
144
- case sdkApi.SdkViewSectionType.Social:
145
- return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
146
- case sdkApi.SdkViewSectionType.Text:
147
- return (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }, `${viewSection.type}_${index}`));
148
- default:
149
- return null;
150
- }
151
- }), [loginViewSections, isLoading, t, numOfWallets, setView]);
44
+ const renderViewSections = React.useMemo(() => loginViewSections.map((viewSection, index) => (jsxRuntime.jsx("div", { className: classNames.classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsxRuntime.jsx(LoginViewSection.LoginViewSection, { gotToWalletList: () => setShowWalletList(true), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
152
45
  if (showWalletList) {
153
46
  return jsxRuntime.jsx(WalletList.WalletList, {});
154
47
  }
package/src/lib/views/LoginView/LoginView.js CHANGED
@@ -1,93 +1,23 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { useState, useEffect, useMemo } from 'react';
3
- import { useTranslation } from 'react-i18next';
4
3
  import { SdkViewSectionType } from '@dynamic-labs/sdk-api';
5
4
  import { isMobile } from '@dynamic-labs/utils';
6
- import { classNames } from '../../utils/functions/classNames/classNames.js';
7
- import '../../events/dynamicEvents.js';
8
- import '../../../../_virtual/_tslib.js';
9
- import '../../context/DynamicContext/DynamicContext.js';
10
- import '../../shared/logger.js';
11
- import '@dynamic-labs/iconic';
12
- import '@dynamic-labs/wallet-connector-core';
13
- import { useViewContext } from '../../context/ViewContext/ViewContext.js';
14
- import '@dynamic-labs/wallet-book';
15
- import '../../utils/constants/colors.js';
16
- import '../../utils/constants/values.js';
17
- import '../../shared/utils/classes/storage/localStorage.js';
18
- import '../../shared/consts/index.js';
19
- import '../../context/CaptchaContext/CaptchaContext.js';
5
+ import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
20
6
  import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
21
- import '@dynamic-labs/multi-wallet';
22
- import 'react-international-phone';
23
- import 'viem';
24
- import 'viem/chains';
25
- import 'i18next';
26
- import '../../config/ApiEndpoint.js';
27
- import '../../context/AccessDeniedContext/AccessDeniedContext.js';
28
- import '../../context/AccountExistsContext/AccountExistsContext.js';
29
- import '../../context/VerificationContext/VerificationContext.js';
30
- import 'react-dom';
31
- import '../../context/WalletContext/WalletContext.js';
32
- import '../../context/ThemeContext/ThemeContext.js';
33
- import '@dynamic-labs/types';
34
- import 'yup';
35
- import '../../context/FieldsStateContext/FieldsStateContext.js';
36
- import '../../context/MockContext/MockContext.js';
37
- import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
38
- import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
39
- import '@dynamic-labs/rpc-providers';
40
- import '../../context/UserWalletsContext/UserWalletsContext.js';
41
- import { Typography } from '../../components/Typography/Typography.js';
7
+ import { useViewContext } from '../../context/ViewContext/ViewContext.js';
8
+ import { DefaultFooter } from '../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.js';
9
+ import { classNames } from '../../utils/functions/classNames/classNames.js';
42
10
  import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
43
- import '../../components/ShadowDOM/ShadowDOM.js';
44
- import '../../components/Transition/ZoomTransition/ZoomTransition.js';
45
- import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
46
- import '../../components/Transition/OpacityTransition/OpacityTransition.js';
47
- import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
48
- import '../../context/FooterAnimationContext/index.js';
49
- import '../../context/SocialRedirectContext/SocialRedirectContext.js';
50
- import '../../context/WalletGroupContext/WalletGroupContext.js';
51
- import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
52
- import 'react-focus-lock';
53
- import { Divider } from '../../components/Divider/Divider.js';
54
- import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
55
- import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
56
- import '../../components/IconButton/IconButton.js';
57
- import '../../components/MenuList/Dropdown/Dropdown.js';
58
- import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
59
- import 'formik';
60
- import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
61
- import '../../components/Alert/Alert.js';
62
- import '../../components/Input/Input.js';
63
- import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
64
- import '../../context/PasskeyContext/PasskeyContext.js';
65
- import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
66
- import '../../components/InlineWidget/InlineWidget.js';
67
- import '../../components/IsBrowser/IsBrowser.js';
68
- import '../../components/Popper/Popper/Popper.js';
69
- import '../../components/Popper/PopperContext/PopperContext.js';
70
- import 'qrcode';
71
11
  import { WalletList } from '../WalletList/WalletList.js';
72
- import { LoginEmailForm } from './sections/EmailSignInSection/LoginEmailForm.js';
73
- import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
74
- import '@hcaptcha/react-hcaptcha';
75
- import { DefaultFooter } from '../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.js';
76
- import { PhoneNumberSignInSection } from './sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
77
- import { SocialSignInSection } from './sections/SocialSignInSection/SocialSignInSection.js';
78
- import { ToggleableSection } from './sections/ToggleableSection/ToggleableSection.js';
79
- import { WalletSignInSection } from './sections/WalletSignInSection/WalletSignInSection.js';
12
+ import { LoginViewSection } from './LoginViewSection/LoginViewSection.js';
80
13
  import { useLoginView } from './useLoginView/useLoginView.js';
81
14
 
82
15
  const LoginView = () => {
83
16
  var _a;
84
17
  const { error } = useErrorContext();
85
- const { loading } = useLoadingContext();
86
18
  const { view, setView } = useViewContext();
87
19
  const { isWalletOnly, loginViewSections } = useLoginView();
88
- const { t } = useTranslation();
89
20
  const [showWalletList, setShowWalletList] = useState(isWalletOnly);
90
- const [isLoading, setIsLoading] = useState(loading);
91
21
  useEffect(() => {
92
22
  // toolkit log in with email was set to false
93
23
  if (isWalletOnly) {
@@ -107,44 +37,7 @@ const LoginView = () => {
107
37
  }, [isWalletOnly, view.type]);
108
38
  const { showDefaultFooter } = useAuthLayoutChecks();
109
39
  const numOfWallets = ((_a = loginViewSections.find((section) => section.type === SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
110
- const renderViewSections = useMemo(() => loginViewSections.map((viewSection, index) => {
111
- switch (viewSection.type) {
112
- case SdkViewSectionType.Separator:
113
- return (jsx(Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
114
- case SdkViewSectionType.Email:
115
- return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
116
- case SdkViewSectionType.Phone:
117
- return (jsx(PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
118
- case SdkViewSectionType.EmailAndPhone:
119
- return (jsx(ToggleableSection, { sections: [
120
- {
121
- button: t('dyn_login.email_or_phone.use_phone'),
122
- buttonCopyKey: 'dyn_login.email_or_phone.use_phone',
123
- component: (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
124
- label: t('dyn_login.email_or_phone.prefer_phone'),
125
- labelCopyKey: 'dyn_login.email_or_phone.prefer_phone',
126
- },
127
- {
128
- button: t('dyn_login.email_or_phone.use_email'),
129
- buttonCopyKey: 'dyn_login.email_or_phone.use_email',
130
- component: (jsx(PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
131
- label: t('dyn_login.email_or_phone.prefer_email'),
132
- labelCopyKey: 'dyn_login.email_or_phone.prefer_email',
133
- },
134
- ] }, `${viewSection.type}_${index}`));
135
- case SdkViewSectionType.Wallet:
136
- return (jsx(WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
137
- setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
138
- setShowWalletList(true);
139
- }, isLoading: isLoading }, `${viewSection.type}_${index}`));
140
- case SdkViewSectionType.Social:
141
- return (jsx(SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
142
- case SdkViewSectionType.Text:
143
- return (jsx(Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }, `${viewSection.type}_${index}`));
144
- default:
145
- return null;
146
- }
147
- }), [loginViewSections, isLoading, t, numOfWallets, setView]);
40
+ const renderViewSections = useMemo(() => loginViewSections.map((viewSection, index) => (jsx("div", { className: classNames('login-view__scroll__section', `login-view__scroll__section--${viewSection.type}`), children: jsx(LoginViewSection, { gotToWalletList: () => setShowWalletList(true), index: index, viewSection: viewSection, walletCount: numOfWallets }) }, `${viewSection.type}__${index}`))), [loginViewSections, numOfWallets]);
148
41
  if (showWalletList) {
149
42
  return jsx(WalletList, {});
150
43
  }
package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.cjs ADDED
@@ -0,0 +1,123 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var reactI18next = require('react-i18next');
8
+ var sdkApi = require('@dynamic-labs/sdk-api');
9
+ require('../../../events/dynamicEvents.cjs');
10
+ require('../../../../../_virtual/_tslib.cjs');
11
+ require('@dynamic-labs/utils');
12
+ require('../../../context/DynamicContext/DynamicContext.cjs');
13
+ require('../../../shared/logger.cjs');
14
+ require('@dynamic-labs/iconic');
15
+ require('@dynamic-labs/wallet-connector-core');
16
+ var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
17
+ require('@dynamic-labs/wallet-book');
18
+ require('../../../utils/constants/colors.cjs');
19
+ require('../../../utils/constants/values.cjs');
20
+ require('../../../shared/utils/classes/storage/localStorage.cjs');
21
+ require('../../../shared/consts/index.cjs');
22
+ require('../../../context/CaptchaContext/CaptchaContext.cjs');
23
+ require('../../../context/ErrorContext/ErrorContext.cjs');
24
+ require('@dynamic-labs/multi-wallet');
25
+ require('react-international-phone');
26
+ require('viem');
27
+ require('viem/chains');
28
+ require('i18next');
29
+ require('../../../config/ApiEndpoint.cjs');
30
+ require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
31
+ require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
32
+ require('../../../context/VerificationContext/VerificationContext.cjs');
33
+ require('react-dom');
34
+ require('../../../context/WalletContext/WalletContext.cjs');
35
+ require('../../../context/ThemeContext/ThemeContext.cjs');
36
+ require('@dynamic-labs/types');
37
+ require('yup');
38
+ require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
39
+ require('../../../context/MockContext/MockContext.cjs');
40
+ require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
41
+ require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
42
+ require('@dynamic-labs/rpc-providers');
43
+ require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
44
+ var Typography = require('../../../components/Typography/Typography.cjs');
45
+ require('../../../context/FooterAnimationContext/index.cjs');
46
+ require('../../../components/ShadowDOM/ShadowDOM.cjs');
47
+ require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
48
+ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
49
+ require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
50
+ require('../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
51
+ require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
52
+ require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
53
+ require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
54
+ require('react-focus-lock');
55
+ var Divider = require('../../../components/Divider/Divider.cjs');
56
+ var LoadingContext = require('../../../context/LoadingContext/LoadingContext.cjs');
57
+ require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
58
+ require('../../../components/IconButton/IconButton.cjs');
59
+ require('../../../components/MenuList/Dropdown/Dropdown.cjs');
60
+ require('formik');
61
+ require('../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
62
+ require('../../../components/Alert/Alert.cjs');
63
+ require('../../../components/Input/Input.cjs');
64
+ require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
65
+ require('../../../context/PasskeyContext/PasskeyContext.cjs');
66
+ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
67
+ require('../../../components/InlineWidget/InlineWidget.cjs');
68
+ require('../../../components/IsBrowser/IsBrowser.cjs');
69
+ require('../../../components/Popper/Popper/Popper.cjs');
70
+ require('../../../components/Popper/PopperContext/PopperContext.cjs');
71
+ require('qrcode');
72
+ require('../../WalletList/WalletList.cjs');
73
+ var LoginEmailForm = require('../sections/EmailSignInSection/LoginEmailForm.cjs');
74
+ require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
75
+ require('@hcaptcha/react-hcaptcha');
76
+ var PhoneNumberSignInSection = require('../sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
77
+ var SocialSignInSection = require('../sections/SocialSignInSection/SocialSignInSection.cjs');
78
+ var ToggleableSection = require('../sections/ToggleableSection/ToggleableSection.cjs');
79
+ var WalletSignInSection = require('../sections/WalletSignInSection/WalletSignInSection.cjs');
80
+
81
+ const LoginViewSection = ({ viewSection, index, walletCount, gotToWalletList, }) => {
82
+ const { loading } = LoadingContext.useLoadingContext();
83
+ const { t } = reactI18next.useTranslation();
84
+ const { setView } = ViewContext.useViewContext();
85
+ const [isLoading, setIsLoading] = React.useState(loading);
86
+ switch (viewSection.type) {
87
+ case sdkApi.SdkViewSectionType.Separator:
88
+ return jsxRuntime.jsx(Divider.Divider, { text: viewSection.label });
89
+ case sdkApi.SdkViewSectionType.Email:
90
+ return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
91
+ case sdkApi.SdkViewSectionType.Phone:
92
+ return (jsxRuntime.jsx(PhoneNumberSignInSection.PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
93
+ case sdkApi.SdkViewSectionType.EmailAndPhone:
94
+ return (jsxRuntime.jsx(ToggleableSection.ToggleableSection, { sections: [
95
+ {
96
+ button: t('dyn_login.email_or_phone.use_phone'),
97
+ buttonCopyKey: 'dyn_login.email_or_phone.use_phone',
98
+ component: (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
99
+ label: t('dyn_login.email_or_phone.prefer_phone'),
100
+ labelCopyKey: 'dyn_login.email_or_phone.prefer_phone',
101
+ },
102
+ {
103
+ button: t('dyn_login.email_or_phone.use_email'),
104
+ buttonCopyKey: 'dyn_login.email_or_phone.use_email',
105
+ component: (jsxRuntime.jsx(PhoneNumberSignInSection.PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
106
+ label: t('dyn_login.email_or_phone.prefer_email'),
107
+ labelCopyKey: 'dyn_login.email_or_phone.prefer_email',
108
+ },
109
+ ] }));
110
+ case sdkApi.SdkViewSectionType.Wallet:
111
+ return (jsxRuntime.jsx(WalletSignInSection.WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
112
+ // this view is just to show the back button
113
+ setView('login-with-email-or-wallet-full-wallet-list');
114
+ gotToWalletList();
115
+ }, isLoading: isLoading }));
116
+ case sdkApi.SdkViewSectionType.Social:
117
+ return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { collapsedLayout: walletCount > 1, sectionData: viewSection }));
118
+ case sdkApi.SdkViewSectionType.Text:
119
+ return (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }));
120
+ }
121
+ };
122
+
123
+ exports.LoginViewSection = LoginViewSection;
package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { FC } from 'react';
2
+ import { SdkViewSection } from '@dynamic-labs/sdk-api';
3
+ type LoginViewSectionProps = {
4
+ viewSection: SdkViewSection;
5
+ index: number;
6
+ walletCount: number;
7
+ gotToWalletList: VoidFunction;
8
+ };
9
+ export declare const LoginViewSection: FC<LoginViewSectionProps>;
10
+ export {};
package/src/lib/views/LoginView/LoginViewSection/LoginViewSection.js ADDED
@@ -0,0 +1,119 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useState } from 'react';
3
+ import { useTranslation } from 'react-i18next';
4
+ import { SdkViewSectionType } from '@dynamic-labs/sdk-api';
5
+ import '../../../events/dynamicEvents.js';
6
+ import '../../../../../_virtual/_tslib.js';
7
+ import '@dynamic-labs/utils';
8
+ import '../../../context/DynamicContext/DynamicContext.js';
9
+ import '../../../shared/logger.js';
10
+ import '@dynamic-labs/iconic';
11
+ import '@dynamic-labs/wallet-connector-core';
12
+ import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
13
+ import '@dynamic-labs/wallet-book';
14
+ import '../../../utils/constants/colors.js';
15
+ import '../../../utils/constants/values.js';
16
+ import '../../../shared/utils/classes/storage/localStorage.js';
17
+ import '../../../shared/consts/index.js';
18
+ import '../../../context/CaptchaContext/CaptchaContext.js';
19
+ import '../../../context/ErrorContext/ErrorContext.js';
20
+ import '@dynamic-labs/multi-wallet';
21
+ import 'react-international-phone';
22
+ import 'viem';
23
+ import 'viem/chains';
24
+ import 'i18next';
25
+ import '../../../config/ApiEndpoint.js';
26
+ import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
27
+ import '../../../context/AccountExistsContext/AccountExistsContext.js';
28
+ import '../../../context/VerificationContext/VerificationContext.js';
29
+ import 'react-dom';
30
+ import '../../../context/WalletContext/WalletContext.js';
31
+ import '../../../context/ThemeContext/ThemeContext.js';
32
+ import '@dynamic-labs/types';
33
+ import 'yup';
34
+ import '../../../context/FieldsStateContext/FieldsStateContext.js';
35
+ import '../../../context/MockContext/MockContext.js';
36
+ import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
37
+ import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
38
+ import '@dynamic-labs/rpc-providers';
39
+ import '../../../context/UserWalletsContext/UserWalletsContext.js';
40
+ import { Typography } from '../../../components/Typography/Typography.js';
41
+ import '../../../context/FooterAnimationContext/index.js';
42
+ import '../../../components/ShadowDOM/ShadowDOM.js';
43
+ import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
44
+ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
45
+ import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
46
+ import '../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
47
+ import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
48
+ import '../../../context/WalletGroupContext/WalletGroupContext.js';
49
+ import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
50
+ import 'react-focus-lock';
51
+ import { Divider } from '../../../components/Divider/Divider.js';
52
+ import { useLoadingContext } from '../../../context/LoadingContext/LoadingContext.js';
53
+ import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
54
+ import '../../../components/IconButton/IconButton.js';
55
+ import '../../../components/MenuList/Dropdown/Dropdown.js';
56
+ import 'formik';
57
+ import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
58
+ import '../../../components/Alert/Alert.js';
59
+ import '../../../components/Input/Input.js';
60
+ import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
61
+ import '../../../context/PasskeyContext/PasskeyContext.js';
62
+ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
63
+ import '../../../components/InlineWidget/InlineWidget.js';
64
+ import '../../../components/IsBrowser/IsBrowser.js';
65
+ import '../../../components/Popper/Popper/Popper.js';
66
+ import '../../../components/Popper/PopperContext/PopperContext.js';
67
+ import 'qrcode';
68
+ import '../../WalletList/WalletList.js';
69
+ import { LoginEmailForm } from '../sections/EmailSignInSection/LoginEmailForm.js';
70
+ import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
71
+ import '@hcaptcha/react-hcaptcha';
72
+ import { PhoneNumberSignInSection } from '../sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
73
+ import { SocialSignInSection } from '../sections/SocialSignInSection/SocialSignInSection.js';
74
+ import { ToggleableSection } from '../sections/ToggleableSection/ToggleableSection.js';
75
+ import { WalletSignInSection } from '../sections/WalletSignInSection/WalletSignInSection.js';
76
+
77
+ const LoginViewSection = ({ viewSection, index, walletCount, gotToWalletList, }) => {
78
+ const { loading } = useLoadingContext();
79
+ const { t } = useTranslation();
80
+ const { setView } = useViewContext();
81
+ const [isLoading, setIsLoading] = useState(loading);
82
+ switch (viewSection.type) {
83
+ case SdkViewSectionType.Separator:
84
+ return jsx(Divider, { text: viewSection.label });
85
+ case SdkViewSectionType.Email:
86
+ return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
87
+ case SdkViewSectionType.Phone:
88
+ return (jsx(PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
89
+ case SdkViewSectionType.EmailAndPhone:
90
+ return (jsx(ToggleableSection, { sections: [
91
+ {
92
+ button: t('dyn_login.email_or_phone.use_phone'),
93
+ buttonCopyKey: 'dyn_login.email_or_phone.use_phone',
94
+ component: (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
95
+ label: t('dyn_login.email_or_phone.prefer_phone'),
96
+ labelCopyKey: 'dyn_login.email_or_phone.prefer_phone',
97
+ },
98
+ {
99
+ button: t('dyn_login.email_or_phone.use_email'),
100
+ buttonCopyKey: 'dyn_login.email_or_phone.use_email',
101
+ component: (jsx(PhoneNumberSignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading })),
102
+ label: t('dyn_login.email_or_phone.prefer_email'),
103
+ labelCopyKey: 'dyn_login.email_or_phone.prefer_email',
104
+ },
105
+ ] }));
106
+ case SdkViewSectionType.Wallet:
107
+ return (jsx(WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
108
+ // this view is just to show the back button
109
+ setView('login-with-email-or-wallet-full-wallet-list');
110
+ gotToWalletList();
111
+ }, isLoading: isLoading }));
112
+ case SdkViewSectionType.Social:
113
+ return (jsx(SocialSignInSection, { collapsedLayout: walletCount > 1, sectionData: viewSection }));
114
+ case SdkViewSectionType.Text:
115
+ return (jsx(Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }));
116
+ }
117
+ };
118
+
119
+ export { LoginViewSection };
package/src/lib/views/LoginView/LoginViewSection/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './LoginViewSection';
package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs CHANGED
@@ -77,7 +77,7 @@ require('@hcaptcha/react-hcaptcha');
77
77
  require('../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
78
78
  var EmailForm = require('../../../../components/EmailForm/EmailForm.cjs');
79
79
 
80
- const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
80
+ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, className, style, }) => {
81
81
  var _a, _b;
82
82
  const { walletConnectorOptions, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
83
83
  const { view, setView } = ViewContext.useViewContext();
@@ -131,7 +131,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
131
131
  logger.logger.error('Failed to render EmailSignInSection - no sign in provider enabled');
132
132
  return null;
133
133
  }
134
- return (jsxRuntime.jsx(EmailForm.EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail }));
134
+ return (jsxRuntime.jsx(EmailForm.EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail, className: className, style: style }));
135
135
  };
136
136
 
137
137
  exports.LoginEmailForm = LoginEmailForm;
package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- /// <reference types="react" />
1
+ import { FC } from 'react';
2
2
  import { LoginWidgetProps } from '../LoginWidget';
3
- interface Props extends LoginWidgetProps {
3
+ import { ClassStyleProps } from '../../../../utils/types';
4
+ type LoginEmailFormProps = LoginWidgetProps & ClassStyleProps & {
4
5
  currentEmail?: string;
5
- }
6
- export declare const LoginEmailForm: React.FC<Props>;
6
+ };
7
+ export declare const LoginEmailForm: FC<LoginEmailFormProps>;
7
8
  export {};
package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js CHANGED
@@ -73,7 +73,7 @@ import '@hcaptcha/react-hcaptcha';
73
73
  import '../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
74
74
  import { EmailForm } from '../../../../components/EmailForm/EmailForm.js';
75
75
 
76
- const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
76
+ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, className, style, }) => {
77
77
  var _a, _b;
78
78
  const { walletConnectorOptions, projectSettings } = useInternalDynamicContext();
79
79
  const { view, setView } = useViewContext();
@@ -127,7 +127,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
127
127
  logger.error('Failed to render EmailSignInSection - no sign in provider enabled');
128
128
  return null;
129
129
  }
130
- return (jsx(EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail }));
130
+ return (jsx(EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail, className: className, style: style }));
131
131
  };
132
132
 
133
133
  export { LoginEmailForm };