@dynamic-labs/sdk-react-core 2.1.0-alpha.3 → 2.1.0-alpha.30

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

@@ -10,12 +10,11 @@ var formik = require('formik');
 require('../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../../context/DynamicContext/DynamicContext.cjs');
-var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../utils/constants/colors.cjs');
 require('../../../utils/constants/values.cjs');
@@ -23,27 +22,28 @@ require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../../context/ErrorContext/ErrorContext.cjs');
+var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('viem');
 require('viem/chains');
 require('../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
 require('../../../locale/locale.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
 require('../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
-var useEmbeddedWallet = require('../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
 require('../../../context/WalletContext/WalletContext.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('@dynamic-labs/types');
-var useHandleVerifiedUser = require('../../../utils/hooks/useHandleVerifiedUser/useHandleVerifiedUser.cjs');
+var useUserAuth = require('../../../utils/hooks/useUserAuth/useUserAuth.cjs');
 var useUserDataForm = require('../../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
 var useUserUpdateRequest = require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../context/MockContext/MockContext.cjs');
 require('react-i18next');
@@ -55,18 +55,19 @@ require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs'
 require('../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../context/MfaSettingsContext/MfaSettingsContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 require('../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('yup');
-require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../useFields.cjs');
 var UserDataFields = require('../UserDataFields/UserDataFields.cjs');
 var TypographyButton = require('../../../components/TypographyButton/TypographyButton.cjs');
 require('../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
-require('../../../components/Alert/Alert.cjs');
+var Alert = require('../../../components/Alert/Alert.cjs');
+require('yup');
 require('../../../components/Input/Input.cjs');
 require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../context/PasskeyContext/PasskeyContext.cjs');
@@ -80,55 +81,22 @@ require('../../WalletList/WalletList.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { handleVerifiedUserWithJWT } = useHandleVerifiedUser.useHandleVerifiedUser();
-    const { setView, view } = ViewContext.useViewContext();
-    const { createEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
-    const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
+    const { policiesConsentInnerComponent, unauthenticatedUser } = useInternalDynamicContext.useInternalDynamicContext();
+    const { error } = ErrorContext.useErrorContext();
+    const { completeAuth } = useUserAuth.useUserAuth({});
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
     });
     const onSubmit = React.useCallback((formValues) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const { isEmailVerificationRequired, missingFields, isSmsVerificationRequired, updateUserProfileResponse, } = yield updateUser(formValues);
-        if (isEmailVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'email') {
-            setView('verify-email');
-            return;
-        }
-        else if (isSmsVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'phoneNumber') {
-            setView('verify-sms');
-            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.type);
-            return;
-        }
-        yield handleVerifiedUserWithJWT(updateUserProfileResponse.jwt);
-        setCallback('authSuccess');
-        if (!((_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.embeddedWallets) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation)) {
-            setShowAuthFlow(false);
-            return;
-        }
-        // this function will check turnkey wallet enabled and create wallet if needed
-        // if not enabled, it will throw an error.
-        yield createEmbeddedWallet().catch(() => setShowAuthFlow(false));
-    }), [
-        updateUser,
-        setCallback,
-        setView,
-        view,
-        createEmbeddedWallet,
-        setShowAuthFlow,
-        projectSettings,
-    ]);
+        yield completeAuth({
+            updateJwtFunction: () => _tslib.__awaiter(void 0, void 0, void 0, function* () { return updateUser(formValues); }),
+        });
+    }), [completeAuth, updateUser]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm.useUserDataForm({
-        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
+        fields: (unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) || [],
         onSubmit,
         userProfile,
     });
@@ -141,7 +109,7 @@ const OnboardingUserDataForm = ({ children, userProfile, 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(UserDataFields.UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(TypographyButton.TypographyButton, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
+            return (jsxRuntime.jsx(formik.Form, { className: 'user-data-form__form', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, error && (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', className: 'user-data-form__error', children: error })), jsxRuntime.jsx(UserDataFields.UserDataFields, { fields: unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(TypographyButton.TypographyButton, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
         } }));
 };
 

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

@@ -6,12 +6,11 @@ import { Formik, Form } from 'formik';
 import '../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../context/DynamicContext/DynamicContext.js';
-import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../utils/constants/colors.js';
 import '../../../utils/constants/values.js';
@@ -19,27 +18,28 @@ import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
-import '../../../context/ErrorContext/ErrorContext.js';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import 'viem';
 import 'viem/chains';
 import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/store';
 import '../../../locale/locale.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
 import '../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
-import { useEmbeddedWallet } from '../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
 import '../../../context/WalletContext/WalletContext.js';
 import '../../../context/ThemeContext/ThemeContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import '@dynamic-labs/types';
-import { useHandleVerifiedUser } from '../../../utils/hooks/useHandleVerifiedUser/useHandleVerifiedUser.js';
+import { useUserAuth } from '../../../utils/hooks/useUserAuth/useUserAuth.js';
 import { useUserDataForm } from '../../../utils/hooks/useUserDataForm/useUserDataForm.js';
 import { useUserUpdateRequestInternal } from '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../context/MockContext/MockContext.js';
 import 'react-i18next';
@@ -51,18 +51,19 @@ import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../context/MfaSettingsContext/MfaSettingsContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../context/LoadingContext/LoadingContext.js';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
-import 'yup';
-import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../useFields.js';
 import { UserDataFields } from '../UserDataFields/UserDataFields.js';
 import { TypographyButton } from '../../../components/TypographyButton/TypographyButton.js';
 import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
-import '../../../components/Alert/Alert.js';
+import { Alert } from '../../../components/Alert/Alert.js';
+import 'yup';
 import '../../../components/Input/Input.js';
 import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
@@ -76,55 +77,22 @@ import '../../WalletList/WalletList.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext();
-    const { handleVerifiedUserWithJWT } = useHandleVerifiedUser();
-    const { setView, view } = useViewContext();
-    const { createEmbeddedWallet } = useEmbeddedWallet();
-    const decodedJwt = decodeJwt(onboardingOnlyJwt);
+    const { policiesConsentInnerComponent, unauthenticatedUser } = useInternalDynamicContext();
+    const { error } = useErrorContext();
+    const { completeAuth } = useUserAuth({});
     const { updateUser } = useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
     });
     const onSubmit = useCallback((formValues) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const { isEmailVerificationRequired, missingFields, isSmsVerificationRequired, updateUserProfileResponse, } = yield updateUser(formValues);
-        if (isEmailVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'email') {
-            setView('verify-email');
-            return;
-        }
-        else if (isSmsVerificationRequired &&
-            missingFields.map((field) => field.name).toString() === 'phoneNumber') {
-            setView('verify-sms');
-            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.type);
-            return;
-        }
-        yield handleVerifiedUserWithJWT(updateUserProfileResponse.jwt);
-        setCallback('authSuccess');
-        if (!((_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.embeddedWallets) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation)) {
-            setShowAuthFlow(false);
-            return;
-        }
-        // this function will check turnkey wallet enabled and create wallet if needed
-        // if not enabled, it will throw an error.
-        yield createEmbeddedWallet().catch(() => setShowAuthFlow(false));
-    }), [
-        updateUser,
-        setCallback,
-        setView,
-        view,
-        createEmbeddedWallet,
-        setShowAuthFlow,
-        projectSettings,
-    ]);
+        yield completeAuth({
+            updateJwtFunction: () => __awaiter(void 0, void 0, void 0, function* () { return updateUser(formValues); }),
+        });
+    }), [completeAuth, updateUser]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm({
-        fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
+        fields: (unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) || [],
         onSubmit,
         userProfile,
     });
@@ -137,7 +105,7 @@ const OnboardingUserDataForm = ({ children, userProfile, 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(TypographyButton, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
+            return (jsx(Form, { className: 'user-data-form__form', children: jsxs(Fragment, { children: [children, error && (jsx(Alert, { icon: 'error', variant: 'error', className: 'user-data-form__error', children: error })), jsx(UserDataFields, { fields: unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsx(TypographyButton, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'login-screen-height', children: "Continue" })] }) }));
         } }));
 };
 

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

@@ -6,8 +6,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
-var Tooltip = require('../../../components/Tooltip/Tooltip.cjs');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 var useFields = require('../useFields.cjs');
+var Tooltip = require('../../../components/Tooltip/Tooltip.cjs');
 var UserField = require('./UserField/UserField.cjs');
 
 /**
@@ -48,7 +49,20 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
                 lockForVerification,
                 name,
             });
-            const fieldConfig = fieldsConfig[name];
+            let fieldConfig;
+            if (fieldSettings.type !== sdkApiCore.KycFieldType.Custom) {
+                fieldConfig = fieldsConfig[name];
+            }
+            else {
+                fieldConfig = {
+                    isCustom: true,
+                    key: fieldSettings.name,
+                    label: fieldSettings.name,
+                    type: fieldSettings.validationType,
+                    validation: useFields.customFieldValidationMap[fieldSettings.validationType],
+                    validationRules: fieldSettings.validationRules,
+                };
+            }
             const userField = (jsxRuntime.jsx(UserField.UserField, { disabled: Boolean(disabled), errors: errors, fieldData: fieldConfig, fieldSettings: fieldSettings, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }, fieldConfig.key));
             if (tooltipCopyKey)
                 return (jsxRuntime.jsx(Tooltip.Tooltip, { content: t(tooltipCopyKey), className: 'user-data-fields__tooltip', copykey: tooltipCopyKey, children: userField }, fieldConfig.key + '__tooltip'));

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

@@ -2,8 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { KycFieldType } from '@dynamic-labs/sdk-api-core';
+import { useFields, customFieldValidationMap } from '../useFields.js';
 import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
-import { useFields } from '../useFields.js';
 import { UserField } from './UserField/UserField.js';
 
 /**
@@ -44,7 +45,20 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
                 lockForVerification,
                 name,
             });
-            const fieldConfig = fieldsConfig[name];
+            let fieldConfig;
+            if (fieldSettings.type !== KycFieldType.Custom) {
+                fieldConfig = fieldsConfig[name];
+            }
+            else {
+                fieldConfig = {
+                    isCustom: true,
+                    key: fieldSettings.name,
+                    label: fieldSettings.name,
+                    type: fieldSettings.validationType,
+                    validation: customFieldValidationMap[fieldSettings.validationType],
+                    validationRules: fieldSettings.validationRules,
+                };
+            }
             const userField = (jsx(UserField, { disabled: Boolean(disabled), errors: errors, fieldData: fieldConfig, fieldSettings: fieldSettings, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }, fieldConfig.key));
             if (tooltipCopyKey)
                 return (jsx(Tooltip, { content: t(tooltipCopyKey), className: 'user-data-fields__tooltip', copykey: tooltipCopyKey, children: userField }, fieldConfig.key + '__tooltip'));

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var formik = require('formik');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 require('react');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
-require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
@@ -27,6 +27,7 @@ require('react-international-phone');
 require('viem');
 require('viem/chains');
 require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
 require('../../../../locale/locale.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
@@ -35,14 +36,16 @@ require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('@dynamic-labs/types');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
 require('../../../../context/MockContext/MockContext.cjs');
-require('react-i18next');
+require('../../useFields.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('react-i18next');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -52,9 +55,9 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../context/MfaSettingsContext/MfaSettingsContext.cjs');
 require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
-require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -76,28 +79,74 @@ require('../../../WalletList/WalletList.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 var Select = require('../../../../components/Select/Select.cjs');
 
-const UserField = ({ fieldData: { key, label, type, autoComplete }, fieldSettings: { enabled, name, required, verify }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
-    if (name === 'tShirtSize') {
-        return (jsxRuntime.jsx(formik.Field, { copykey: key, 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]), disabled: disabled, children: index.tShirtSizes.map((size) => (jsxRuntime.jsx("option", { value: size, children: size }, size))) }, name));
-    }
-    else if (name === 'team') {
-        return (jsxRuntime.jsx(formik.Field, { copykey: key, 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]), disabled: disabled, children: index.teamNames.map((teamName) => (jsxRuntime.jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
-    }
-    else if (name === 'country') {
-        return (jsxRuntime.jsx(formik.Field, { copykey: key, 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]), disabled: disabled, children: index.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-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-field__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { copykey: key, as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
-    }
-    else if (name === 'phoneNumber') {
-        return (jsxRuntime.jsx(formik.Field, { name: name, as: UserPhoneField.UserPhoneField, disabled: disabled, label: label, required: required, error: touched[name] && errors[name]
-                ? getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name])
-                : undefined, verify: verify, autoComplete: autoComplete }, name));
+const renderSelectField = ({ key, name, label, type, options, disabled, dataTestId }, { errors, touched }) => (jsxRuntime.jsx(formik.Field, { copykey: key, as: Select.Select, type: type, id: name, name: name, label: label, error: Boolean(errors[name] && touched[name]), selectDataTestId: dataTestId, message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), disabled: disabled, children: options.map((option) => typeof option === 'string' ? (jsxRuntime.jsx("option", { value: option, children: option }, option)) : (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }, name));
+const renderCheckboxGroup = (key, name, label, validationRules, errors, touched, disabled) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: `user-field__checkbox-container ${errors[name] && touched[name]
+                ? 'user-field__checkbox-container--error'
+                : ''}`, children: (validationRules === null || validationRules === void 0 ? void 0 : validationRules.checkboxText) && (jsxRuntime.jsxs("div", { className: 'user-field__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: key, name: name, type: 'checkbox', value: '0', disabled: disabled, selectDataTestId: 'customFieldCheckbox' }, key), jsxRuntime.jsx("label", { htmlFor: key, className: 'user-field__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: validationRules.checkboxText }) })] }, key)) }, 'customConsentGroup'), touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', className: 'user-field__error-message', children: `${name.charAt(0).toUpperCase() + name.slice(1)} is required` }))] }));
+const renderPoliciesConsentGroup = (key, policiesConsentInnerComponentArray, disabled) => (jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-field__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { copykey: key, as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
+const UserField = ({ fieldData: { validationRules, isCustom, key, label, type, autoComplete }, fieldSettings: { enabled, name, required, verify }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
+    if (isCustom) {
+        if (type === sdkApiCore.CustomFieldType.Select && (validationRules === null || validationRules === void 0 ? void 0 : validationRules.validOptions)) {
+            const options = validationRules.validOptions.map((opt) => opt.label);
+            return renderSelectField({
+                dataTestId: 'customFieldSelect',
+                disabled,
+                key,
+                label,
+                name,
+                options,
+                type,
+            }, { errors, touched });
+        }
+        else if (type === sdkApiCore.CustomFieldType.Checkbox) {
+            return renderCheckboxGroup(key, name, label, validationRules, errors, touched, disabled);
+        }
     }
-    else {
-        return (jsxRuntime.jsx(formik.Field, { copykey: key, disabled: disabled, 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]), autoComplete: autoComplete }, name));
+    switch (name) {
+        case 'tShirtSize':
+            return renderSelectField({
+                dataTestId: 'tShirtSizeSelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: index.tShirtSizes,
+                type,
+            }, { errors, touched });
+        case 'team':
+            return renderSelectField({
+                dataTestId: 'teamSelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: index.teamNames,
+                type,
+            }, { errors, touched });
+        case 'country':
+            return renderSelectField({
+                dataTestId: 'countrySelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: index.countryCodes.map((countryCode) => ({
+                    label: countryCode.name,
+                    value: countryCode.code,
+                })),
+                type,
+            }, { errors, touched });
+        case 'policiesConsent':
+            return renderPoliciesConsentGroup(key, policiesConsentInnerComponentArray, disabled);
+        case 'phoneNumber':
+            return (jsxRuntime.jsx(formik.Field, { name: name, as: UserPhoneField.UserPhoneField, disabled: disabled, label: label, required: required, error: touched[name] && errors[name]
+                    ? getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name])
+                    : undefined, verify: verify, autoComplete: autoComplete }, name));
+        default:
+            return (jsxRuntime.jsx(formik.Field, { copykey: key, disabled: disabled, 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]), autoComplete: autoComplete }, name));
     }
 };