@dynamic-labs/sdk-react-core 0.19.0-alpha.9 → 1.0.0-alpha.0

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs

@@ -15,12 +15,11 @@ require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
-require('ethers');
+require('viem');
 require('../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/sdk-api');
-require('../../../config/ApiEndpoint.cjs');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -28,69 +27,101 @@ require('react-focus-lock');
 require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../components/IconButton/IconButton.cjs');
-var Button = require('../../../components/Button/Button.cjs');
-require('../../../components/Alert/Alert.cjs');
-var useUserDataForm = require('../../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
-var index = require('../UserDataFields/index.cjs');
+require('react-i18next');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../context/MockContext/MockContext.cjs');
+require('../../../context/QrCodeContext/QrCodeContext.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('qrcode');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('yup');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');
+var useEmbeddedWallet = require('../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
 var useUserUpdateRequest = require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useUserDataForm = require('../../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
+var index = require('../UserDataFields/index.cjs');
+var Button = require('../../../components/Button/Button.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/Alert/Alert.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
-require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('../../../components/OverlayCard/OverlayCard.context.cjs');
 
-const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, internalSetShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView, view } = ViewContext.useViewContext();
-    const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
-    const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
-        validationSchemaStripUnknown: false,
-    });
-    const onSubmit = React.useCallback((formValues) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
-        if (isEmailVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'email') {
-            setView('verify-email');
-            return;
-        }
-        else if (missingFields.length > 0) {
-            // make sure we capture the fields that are required and still missing!
-            // do not change the view, just use the current one
-            setView(view);
-            return;
-        }
-        internalSetShowAuthFlow(false);
-        setCallback('authSuccess');
-    }), [setCallback, internalSetShowAuthFlow, setView, updateUser]);
-    const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm.useUserDataForm({
-        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
-        onSubmit,
-        userProfile,
-    });
-    const policiesConsentInnerComponentArray = [
-        policiesConsentInnerComponent,
-    ].flat();
-    return (jsxRuntime.jsx(formik.Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema }, { children: ({ errors, touched, values }) => {
-            var _a;
-            const isSubmitBtnDisabled = disableSubmit ||
-                (enforcePolicies &&
-                    (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
-                        ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
-            return (jsxRuntime.jsx(formik.Form, Object.assign({ className: 'user-data-form__form' }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(index.UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(Button.Button, Object.assign({ type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: "Continue" }))] }) })));
-        } })));
+const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView, view } = ViewContext.useViewContext();
+    const { createEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
+    const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
+    const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
+        validationSchemaStripUnknown: false,
+    });
+    const onSubmit = React.useCallback((formValues) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
+        if (isEmailVerificationRequired &&
+            missingFields.map((field) => field.name).toString() === 'email') {
+            setView('verify-email');
+            return;
+        }
+        else if (missingFields.length > 0) {
+            // make sure we capture the fields that are required and still missing!
+            // do not change the view, just use the current one
+            setView(view);
+            return;
+        }
+        setCallback('authSuccess');
+        if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation)) {
+            setShowAuthFlow(false);
+            return;
+        }
+        try {
+            // this function will check turnkey wallet enabled and create wallet if needed
+            // if not enabled, it will throw an error.
+            yield createEmbeddedWallet();
+        }
+        catch (e) {
+            setShowAuthFlow(false);
+        }
+    }), [
+        updateUser,
+        setCallback,
+        setView,
+        view,
+        createEmbeddedWallet,
+        setShowAuthFlow,
+        projectSettings,
+    ]);
+    const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm.useUserDataForm({
+        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
+        onSubmit,
+        userProfile,
+    });
+    const policiesConsentInnerComponentArray = [
+        policiesConsentInnerComponent,
+    ].flat();
+    return (jsxRuntime.jsx(formik.Formik, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, children: ({ errors, touched, values }) => {
+            var _a;
+            const isSubmitBtnDisabled = disableSubmit ||
+                (enforcePolicies &&
+                    (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
+                        ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
+            return (jsxRuntime.jsx(formik.Form, { className: 'user-data-form__form', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(index.UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(Button.Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
+        } }));
 };
 
 exports.OnboardingUserDataForm = OnboardingUserDataForm;

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { UserProfile } from '../../../shared/types';
-export type UserDataFormProps = {
-    children?: ReactNode;
-    disableSubmit?: boolean;
-    userProfile: UserProfile | undefined;
-};
-export declare const OnboardingUserDataForm: ({ children, userProfile, disableSubmit, }: UserDataFormProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { UserProfile } from '../../../shared/types';
+export type UserDataFormProps = {
+    children?: ReactNode;
+    disableSubmit?: boolean;
+    userProfile: UserProfile | undefined;
+};
+export declare const OnboardingUserDataForm: ({ children, userProfile, disableSubmit, }: UserDataFormProps) => JSX.Element;

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js

@@ -11,12 +11,11 @@ import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../utils/constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
+import 'viem';
 import '../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
-import '../../../config/ApiEndpoint.js';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -24,69 +23,101 @@ import 'react-focus-lock';
 import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../components/IconButton/IconButton.js';
-import { Button } from '../../../components/Button/Button.js';
-import '../../../components/Alert/Alert.js';
-import { useUserDataForm } from '../../../utils/hooks/useUserDataForm/useUserDataForm.js';
-import { UserDataFields } from '../UserDataFields/index.js';
+import 'react-i18next';
+import '../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../context/FooterAnimationContext/index.js';
 import '../../../context/MockContext/MockContext.js';
+import '../../../context/QrCodeContext/QrCodeContext.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'qrcode';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import 'yup';
+import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
+import { useEmbeddedWallet } from '../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
 import { useUserUpdateRequestInternal } from '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useUserDataForm } from '../../../utils/hooks/useUserDataForm/useUserDataForm.js';
+import { UserDataFields } from '../UserDataFields/index.js';
+import { Button } from '../../../components/Button/Button.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/Alert/Alert.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
-import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
-import '../../../components/OverlayCard/OverlayCard.context.js';
 
-const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, internalSetShowAuthFlow, setCallback, } = useInternalDynamicContext();
-    const { setView, view } = useViewContext();
-    const decodedJwt = decodeJwt(onboardingOnlyJwt);
-    const { updateUser } = useUserUpdateRequestInternal({
-        validationSchemaStripUnknown: false,
-    });
-    const onSubmit = useCallback((formValues) => __awaiter(void 0, void 0, void 0, function* () {
-        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
-        if (isEmailVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'email') {
-            setView('verify-email');
-            return;
-        }
-        else if (missingFields.length > 0) {
-            // make sure we capture the fields that are required and still missing!
-            // do not change the view, just use the current one
-            setView(view);
-            return;
-        }
-        internalSetShowAuthFlow(false);
-        setCallback('authSuccess');
-    }), [setCallback, internalSetShowAuthFlow, setView, updateUser]);
-    const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm({
-        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
-        onSubmit,
-        userProfile,
-    });
-    const policiesConsentInnerComponentArray = [
-        policiesConsentInnerComponent,
-    ].flat();
-    return (jsx(Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema }, { children: ({ errors, touched, values }) => {
-            var _a;
-            const isSubmitBtnDisabled = disableSubmit ||
-                (enforcePolicies &&
-                    (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
-                        ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
-            return (jsx(Form, Object.assign({ className: 'user-data-form__form' }, { children: jsxs(Fragment, { children: [children, jsx(UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsx(Button, Object.assign({ type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large' }, { children: "Continue" }))] }) })));
-        } })));
+const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext();
+    const { setView, view } = useViewContext();
+    const { createEmbeddedWallet } = useEmbeddedWallet();
+    const decodedJwt = decodeJwt(onboardingOnlyJwt);
+    const { updateUser } = useUserUpdateRequestInternal({
+        validationSchemaStripUnknown: false,
+    });
+    const onSubmit = useCallback((formValues) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
+        if (isEmailVerificationRequired &&
+            missingFields.map((field) => field.name).toString() === 'email') {
+            setView('verify-email');
+            return;
+        }
+        else if (missingFields.length > 0) {
+            // make sure we capture the fields that are required and still missing!
+            // do not change the view, just use the current one
+            setView(view);
+            return;
+        }
+        setCallback('authSuccess');
+        if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation)) {
+            setShowAuthFlow(false);
+            return;
+        }
+        try {
+            // this function will check turnkey wallet enabled and create wallet if needed
+            // if not enabled, it will throw an error.
+            yield createEmbeddedWallet();
+        }
+        catch (e) {
+            setShowAuthFlow(false);
+        }
+    }), [
+        updateUser,
+        setCallback,
+        setView,
+        view,
+        createEmbeddedWallet,
+        setShowAuthFlow,
+        projectSettings,
+    ]);
+    const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm({
+        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
+        onSubmit,
+        userProfile,
+    });
+    const policiesConsentInnerComponentArray = [
+        policiesConsentInnerComponent,
+    ].flat();
+    return (jsx(Formik, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, children: ({ errors, touched, values }) => {
+            var _a;
+            const isSubmitBtnDisabled = disableSubmit ||
+                (enforcePolicies &&
+                    (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
+                        ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
+            return (jsx(Form, { className: 'user-data-form__form', children: jsxs(Fragment, { children: [children, jsx(UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsx(Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
+        } }));
 };
 
 export { OnboardingUserDataForm };

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/index.d.ts

@@ -1 +1 @@
-export { OnboardingUserDataForm } from './OnboardingUserDataForm';
+export { OnboardingUserDataForm } from './OnboardingUserDataForm';

package/src/lib/views/CollectUserDataView/UserDataFields/index.cjs

@@ -16,11 +16,10 @@ var index = require('../../../shared/utils/functions/getValueByKey/index.cjs');
 require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
-require('ethers');
+require('viem');
 var index$1 = require('../../../shared/consts/index.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-require('../../../config/ApiEndpoint.cjs');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
 var Input = require('../../../components/Input/Input.cjs');
@@ -31,49 +30,62 @@ require('react-focus-lock');
 require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../components/IconButton/IconButton.cjs');
-require('../../../components/Alert/Alert.cjs');
-require('yup');
-var fieldsConfig = require('../fieldsConfig.cjs');
+require('react-i18next');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../context/MockContext/MockContext.cjs');
+require('../../../context/QrCodeContext/QrCodeContext.cjs');
 var Tooltip = require('../../../components/Tooltip/Tooltip.cjs');
-var getDisplayErrorMessage = require('./utils/getDisplayErrorMessage/getDisplayErrorMessage.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('qrcode');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+var useFields = require('../useFields.cjs');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');
 require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('yup');
+var getDisplayErrorMessage = require('./utils/getDisplayErrorMessage/getDisplayErrorMessage.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/Alert/Alert.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('../../../components/OverlayCard/OverlayCard.context.cjs');
 
-const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
-        const { label, type } = index.getValueByKey(fieldsConfig.fieldsConfig, name);
-        if (name === 'tShirtSize') {
-            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.tShirtSizes.map((size) => (jsxRuntime.jsx("option", Object.assign({ value: size }, { children: size }), size))) }), name));
-        }
-        else if (name === 'team') {
-            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.teamNames.map((teamName) => (jsxRuntime.jsx("option", Object.assign({ value: teamName }, { children: teamName }), teamName))) }), name));
-        }
-        else if (name === 'country') {
-            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.countryCodes.map((countryCode) => (jsxRuntime.jsx("option", Object.assign({ value: countryCode.code }, { children: countryCode.name }), countryCode.code))) }), name));
-        }
-        else if (name === 'policiesConsent') {
-            return (jsxRuntime.jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
-        }
-        else if (name === 'email' && !enabled) {
-            return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsxRuntime.jsx(formik.Field, { disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
-        }
-        else {
-            return (jsxRuntime.jsx(formik.Field, { disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
-        }
-    }) })));
+const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => {
+    const { fieldsConfig } = useFields.useFields();
+    return (jsxRuntime.jsx("div", { className: 'user-data-fields__fields-column', children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
+            const { label, type } = index.getValueByKey(fieldsConfig, name);
+            if (name === 'tShirtSize') {
+                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.tShirtSizes.map((size) => (jsxRuntime.jsx("option", { value: size, children: size }, size))) }, name));
+            }
+            else if (name === 'team') {
+                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.teamNames.map((teamName) => (jsxRuntime.jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
+            }
+            else if (name === 'country') {
+                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.countryCodes.map((countryCode) => (jsxRuntime.jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
+            }
+            else if (name === 'policiesConsent') {
+                return (jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
+            }
+            else if (name === 'email' && !enabled) {
+                return (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip', children: jsxRuntime.jsx(formik.Field, { disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
+            }
+            else {
+                return (jsxRuntime.jsx(formik.Field, { disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
+            }
+        }) }));
+};
 
 exports.UserDataFields = UserDataFields;

package/src/lib/views/CollectUserDataView/UserDataFields/index.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-import { FormikErrors, FormikTouched } from 'formik';
-import { ProjectSettingsKyc } from '@dynamic-labs/sdk-api';
-type UserDataFieldsProps = {
-    errors: FormikErrors<Record<string, string>>;
-    fields?: ProjectSettingsKyc[];
-    policiesConsentInnerComponentArray?: ReactNode[];
-    touched: FormikTouched<Record<string, string>>;
-};
-export declare const UserDataFields: ({ errors, policiesConsentInnerComponentArray, fields, touched, }: UserDataFieldsProps) => JSX.Element;
-export {};
+import { ReactNode } from 'react';
+import { FormikErrors, FormikTouched } from 'formik';
+import { ProjectSettingsKyc } from '@dynamic-labs/sdk-api';
+type UserDataFieldsProps = {
+    errors: FormikErrors<Record<string, string>>;
+    fields?: ProjectSettingsKyc[];
+    policiesConsentInnerComponentArray?: ReactNode[];
+    touched: FormikTouched<Record<string, string>>;
+};
+export declare const UserDataFields: ({ errors, policiesConsentInnerComponentArray, fields, touched, }: UserDataFieldsProps) => JSX.Element;
+export {};

package/src/lib/views/CollectUserDataView/UserDataFields/index.js

@@ -12,11 +12,10 @@ import { getValueByKey } from '../../../shared/utils/functions/getValueByKey/ind
 import '@dynamic-labs/utils';
 import '../../../utils/constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
+import 'viem';
 import { tShirtSizes, teamNames, countryCodes } from '../../../shared/consts/index.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import '../../../config/ApiEndpoint.js';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../context/ThemeContext/ThemeContext.js';
 import { Input } from '../../../components/Input/Input.js';
@@ -27,49 +26,62 @@ import 'react-focus-lock';
 import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../components/IconButton/IconButton.js';
-import '../../../components/Alert/Alert.js';
-import 'yup';
-import { fieldsConfig } from '../fieldsConfig.js';
+import 'react-i18next';
+import '../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../context/FooterAnimationContext/index.js';
 import '../../../context/MockContext/MockContext.js';
+import '../../../context/QrCodeContext/QrCodeContext.js';
 import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
-import { getDisplayErrorMessage } from './utils/getDisplayErrorMessage/getDisplayErrorMessage.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'qrcode';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { useFields } from '../useFields.js';
+import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
 import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import 'yup';
+import { getDisplayErrorMessage } from './utils/getDisplayErrorMessage/getDisplayErrorMessage.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/Alert/Alert.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
-import '../../../components/OverlayCard/OverlayCard.context.js';
 
-const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
-        const { label, type } = getValueByKey(fieldsConfig, name);
-        if (name === 'tShirtSize') {
-            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: tShirtSizes.map((size) => (jsx("option", Object.assign({ value: size }, { children: size }), size))) }), name));
-        }
-        else if (name === 'team') {
-            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: teamNames.map((teamName) => (jsx("option", Object.assign({ value: teamName }, { children: teamName }), teamName))) }), name));
-        }
-        else if (name === 'country') {
-            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: countryCodes.map((countryCode) => (jsx("option", Object.assign({ value: countryCode.code }, { children: countryCode.name }), countryCode.code))) }), name));
-        }
-        else if (name === 'policiesConsent') {
-            return (jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
-        }
-        else if (name === 'email' && !enabled) {
-            return (jsx(Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsx(Field, { disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
-        }
-        else {
-            return (jsx(Field, { disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
-        }
-    }) })));
+const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => {
+    const { fieldsConfig } = useFields();
+    return (jsx("div", { className: 'user-data-fields__fields-column', children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
+            const { label, type } = getValueByKey(fieldsConfig, name);
+            if (name === 'tShirtSize') {
+                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: tShirtSizes.map((size) => (jsx("option", { value: size, children: size }, size))) }, name));
+            }
+            else if (name === 'team') {
+                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: teamNames.map((teamName) => (jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
+            }
+            else if (name === 'country') {
+                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: countryCodes.map((countryCode) => (jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
+            }
+            else if (name === 'policiesConsent') {
+                return (jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
+            }
+            else if (name === 'email' && !enabled) {
+                return (jsx(Tooltip, { content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip', children: jsx(Field, { disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
+            }
+            else {
+                return (jsx(Field, { disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
+            }
+        }) }));
+};
 
 export { UserDataFields };