@dynamic-labs/sdk-react-core 2.1.0-alpha.2 → 2.1.0-alpha.21

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');
@@ -28,6 +28,7 @@ require('viem');
 require('viem/chains');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -36,13 +37,14 @@ require('react-dom');
 require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
 require('../../../../context/MockContext/MockContext.cjs');
-require('react-i18next');
-require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../useFields.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');
@@ -54,7 +56,6 @@ require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.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');
@@ -78,26 +79,71 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var Select = require('../../../../components/Select/Select.cjs');
 
-const UserField = ({ fieldData: { key, label, type }, 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 }, 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]) }, 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));
     }
 };
 

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

@@ -1,12 +1,12 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Field } from 'formik';
+import { CustomFieldType } from '@dynamic-labs/sdk-api-core';
 import 'react';
 import '../../../../events/dynamicEvents.js';
 import '../../../../../../_virtual/_tslib.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
-import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
@@ -15,7 +15,7 @@ import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
-import { tShirtSizes, teamNames, countryCodes } from '../../../../shared/consts/index.js';
+import { countryCodes, teamNames, tShirtSizes } from '../../../../shared/consts/index.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -24,6 +24,7 @@ import 'viem';
 import 'viem/chains';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -32,13 +33,14 @@ import 'react-dom';
 import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
+import '../../../../context/LoadingContext/LoadingContext.js';
 import 'yup';
 import '../../../../context/MockContext/MockContext.js';
-import 'react-i18next';
-import '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../useFields.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import 'react-i18next';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -50,7 +52,6 @@ import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.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';
@@ -74,26 +75,71 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { Select } from '../../../../components/Select/Select.js';
 
-const UserField = ({ fieldData: { key, label, type }, fieldSettings: { enabled, name, required, verify }, errors, touched, disabled, policiesConsentInnerComponentArray, }) => {
-    if (name === 'tShirtSize') {
-        return (jsx(Field, { copykey: key, as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), disabled: disabled, children: tShirtSizes.map((size) => (jsx("option", { value: size, children: size }, size))) }, name));
-    }
-    else if (name === 'team') {
-        return (jsx(Field, { copykey: key, as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), disabled: disabled, children: teamNames.map((teamName) => (jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
-    }
-    else if (name === 'country') {
-        return (jsx(Field, { copykey: key, as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), disabled: disabled, 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-field__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { copykey: key, as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
-    }
-    else if (name === 'phoneNumber') {
-        return (jsx(Field, { name: name, as: UserPhoneField, disabled: disabled, label: label, required: required, error: touched[name] && errors[name]
-                ? getDisplayErrorMessage(label, errors[name])
-                : undefined, verify: verify }, name));
+const renderSelectField = ({ key, name, label, type, options, disabled, dataTestId }, { errors, touched }) => (jsx(Field, { copykey: key, as: Select, type: type, id: name, name: name, label: label, error: Boolean(errors[name] && touched[name]), selectDataTestId: dataTestId, message: touched[name] && getDisplayErrorMessage(label, errors[name]), disabled: disabled, children: options.map((option) => typeof option === 'string' ? (jsx("option", { value: option, children: option }, option)) : (jsx("option", { value: option.value, children: option.label }, option.value))) }, name));
+const renderCheckboxGroup = (key, name, label, validationRules, errors, touched, disabled) => (jsxs("div", { children: [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) && (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { as: Checkbox, id: key, name: name, type: 'checkbox', value: '0', disabled: disabled, selectDataTestId: 'customFieldCheckbox' }, key), jsx("label", { htmlFor: key, className: 'user-field__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: validationRules.checkboxText }) })] }, key)) }, 'customConsentGroup'), touched[name] && getDisplayErrorMessage(label, errors[name]) && (jsx(Typography, { variant: 'body_mini', className: 'user-field__error-message', children: `${name.charAt(0).toUpperCase() + name.slice(1)} is required` }))] }));
+const renderPoliciesConsentGroup = (key, policiesConsentInnerComponentArray, disabled) => (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) => (jsxs("div", { className: 'user-field__consent-checkbox', children: [jsx(Field, { copykey: key, as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}`, disabled: disabled }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-field__checkbox-label', children: jsx(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 === 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 === CustomFieldType.Checkbox) {
+            return renderCheckboxGroup(key, name, label, validationRules, errors, touched, disabled);
+        }
     }
-    else {
-        return (jsx(Field, { copykey: key, disabled: disabled, 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));
+    switch (name) {
+        case 'tShirtSize':
+            return renderSelectField({
+                dataTestId: 'tShirtSizeSelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: tShirtSizes,
+                type,
+            }, { errors, touched });
+        case 'team':
+            return renderSelectField({
+                dataTestId: 'teamSelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: teamNames,
+                type,
+            }, { errors, touched });
+        case 'country':
+            return renderSelectField({
+                dataTestId: 'countrySelect',
+                disabled,
+                key,
+                label,
+                name,
+                options: countryCodes.map((countryCode) => ({
+                    label: countryCode.name,
+                    value: countryCode.code,
+                })),
+                type,
+            }, { errors, touched });
+        case 'policiesConsent':
+            return renderPoliciesConsentGroup(key, policiesConsentInnerComponentArray, disabled);
+        case 'phoneNumber':
+            return (jsx(Field, { name: name, as: UserPhoneField, disabled: disabled, label: label, required: required, error: touched[name] && errors[name]
+                    ? getDisplayErrorMessage(label, errors[name])
+                    : undefined, verify: verify, autoComplete: autoComplete }, name));
+        default:
+            return (jsx(Field, { copykey: key, disabled: disabled, 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]), autoComplete: autoComplete }, name));
     }
 };
 

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

@@ -28,6 +28,7 @@ require('viem');
 require('viem/chains');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -36,13 +37,14 @@ require('react-dom');
 require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
 require('../../../../context/MockContext/MockContext.cjs');
-require('react-i18next');
-var FieldsStateContext = require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../useFields.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');
@@ -54,11 +56,11 @@ require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.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('formik');
+var FieldsStateContext = require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/Input/Input.cjs');

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

@@ -24,6 +24,7 @@ import 'viem';
 import 'viem/chains';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -32,13 +33,14 @@ import 'react-dom';
 import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
+import '../../../../context/LoadingContext/LoadingContext.js';
 import 'yup';
 import '../../../../context/MockContext/MockContext.js';
-import 'react-i18next';
-import { useFieldsState } from '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../useFields.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import 'react-i18next';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -50,11 +52,11 @@ import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.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 'formik';
+import { useFieldsState } from '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/Input/Input.js';

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

@@ -28,7 +28,13 @@ require('viem');
 require('viem/chains');
 require('../../config/ApiEndpoint.cjs');
 require('../../locale/locale.cjs');
+require('@dynamic-labs/store');
 
+const customFieldValidationMap = {
+    checkbox: yup.boolean(),
+    select: yup.string(),
+    text: yup.string(),
+};
 const useFields = () => {
     const { t } = reactI18next.useTranslation();
     const { selectedPhoneCountry } = FieldsStateContext.useFieldsState();
@@ -46,6 +52,7 @@ const useFields = () => {
             validation: yup.string().oneOf(index.countryCodes.map((c) => c.code)),
         },
         email: {
+            autoComplete: 'email',
             key: 'dyn_collect_user_data.fields.email.label',
             label: t('dyn_collect_user_data.fields.email.label'),
             type: 'email',
@@ -118,4 +125,5 @@ const useFields = () => {
     return { fieldsConfig };
 };
 
+exports.customFieldValidationMap = customFieldValidationMap;
 exports.useFields = useFields;

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

@@ -1,9 +1,18 @@
 import { BooleanSchema, StringSchema } from 'yup';
+import { CustomFieldValidationRules } from '@dynamic-labs/sdk-api-core';
 export type FieldConfig = {
     label: string;
     key: string;
     type: string;
     validation: StringSchema | BooleanSchema;
+    autoComplete?: string;
+    isCustom?: boolean;
+    validationRules?: CustomFieldValidationRules;
+};
+export declare const customFieldValidationMap: {
+    checkbox: BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
+    select: StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    text: StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
 };
 export declare const useFields: () => {
     fieldsConfig: {
@@ -20,6 +29,7 @@ export declare const useFields: () => {
             validation: StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         email: {
+            autoComplete: string;
             key: string;
             label: string;
             type: string;

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

@@ -1,7 +1,7 @@
 'use client'
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { string, boolean } from 'yup';
+import { boolean, string } from 'yup';
 import { useFieldsState } from '../../context/FieldsStateContext/FieldsStateContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
@@ -24,7 +24,13 @@ import 'viem';
 import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
+import '@dynamic-labs/store';
 
+const customFieldValidationMap = {
+    checkbox: boolean(),
+    select: string(),
+    text: string(),
+};
 const useFields = () => {
     const { t } = useTranslation();
     const { selectedPhoneCountry } = useFieldsState();
@@ -42,6 +48,7 @@ const useFields = () => {
             validation: string().oneOf(countryCodes.map((c) => c.code)),
         },
         email: {
+            autoComplete: 'email',
             key: 'dyn_collect_user_data.fields.email.label',
             label: t('dyn_collect_user_data.fields.email.label'),
             type: 'email',
@@ -114,4 +121,4 @@ const useFields = () => {
     return { fieldsConfig };
 };
 
-export { useFields };
+export { customFieldValidationMap, useFields };

package/src/lib/views/CollectUserDataViewNoWallet/CollectUserDataViewNoWallet.cjs

@@ -32,6 +32,7 @@ require('viem');
 require('viem/chains');
 require('../../config/ApiEndpoint.cjs');
 require('../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -40,9 +41,10 @@ require('react-dom');
 require('../../context/WalletContext/WalletContext.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
+require('../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
 require('../../context/MockContext/MockContext.cjs');
-require('../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../CollectUserDataView/useFields.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
@@ -57,12 +59,12 @@ require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
-require('../../context/LoadingContext/LoadingContext.cjs');
 var Icon = require('../../components/Icon/Icon.cjs');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/Input/Input.cjs');

package/src/lib/views/CollectUserDataViewNoWallet/CollectUserDataViewNoWallet.js

@@ -28,6 +28,7 @@ import 'viem';
 import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
@@ -36,9 +37,10 @@ import 'react-dom';
 import '../../context/WalletContext/WalletContext.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
+import '../../context/LoadingContext/LoadingContext.js';
 import 'yup';
 import '../../context/MockContext/MockContext.js';
-import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../CollectUserDataView/useFields.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
@@ -53,12 +55,12 @@ import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
-import '../../context/LoadingContext/LoadingContext.js';
 import { Icon } from '../../components/Icon/Icon.js';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../components/Alert/Alert.js';
 import '../../components/Input/Input.js';

package/src/lib/views/CreatePasswordView/CreatePasswordStep/CreatePasswordStep.cjs

@@ -34,6 +34,7 @@ require('viem');
 require('viem/chains');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -42,9 +43,10 @@ require('react-dom');
 require('../../../context/WalletContext/WalletContext.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
+require('../../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
 require('../../../context/MockContext/MockContext.cjs');
-require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../CollectUserDataView/useFields.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
@@ -59,12 +61,12 @@ require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
-require('../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 var ErrorContainer = require('../../../components/ErrorContainer/ErrorContainer.cjs');
 require('formik');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 var TypographyButton = require('../../../components/TypographyButton/TypographyButton.cjs');
 require('../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');