@dynamic-labs/sdk-react-core 2.1.0-alpha.19 → 2.1.0-alpha.20

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';
@@ -35,11 +35,14 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 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';
@@ -74,26 +77,71 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { Select } from '../../../../components/Select/Select.js';
 
-const UserField = ({ fieldData: { key, label, type, autoComplete }, 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, autoComplete: autoComplete }, 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]), autoComplete: autoComplete }, 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

@@ -39,11 +39,14 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 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');
@@ -59,6 +62,7 @@ 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

@@ -35,11 +35,14 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 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';
@@ -55,6 +58,7 @@ 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

@@ -29,6 +29,11 @@ require('viem/chains');
 require('../../config/ApiEndpoint.cjs');
 require('../../locale/locale.cjs');
 
+const customFieldValidationMap = {
+    checkbox: yup.boolean(),
+    select: yup.string(),
+    text: yup.string(),
+};
 const useFields = () => {
     const { t } = reactI18next.useTranslation();
     const { selectedPhoneCountry } = FieldsStateContext.useFieldsState();
@@ -119,4 +124,5 @@ const useFields = () => {
     return { fieldsConfig };
 };
 
+exports.customFieldValidationMap = customFieldValidationMap;
 exports.useFields = useFields;

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

@@ -1,10 +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: {

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';
@@ -25,6 +25,11 @@ import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
 
+const customFieldValidationMap = {
+    checkbox: boolean(),
+    select: string(),
+    text: string(),
+};
 const useFields = () => {
     const { t } = useTranslation();
     const { selectedPhoneCountry } = useFieldsState();
@@ -115,4 +120,4 @@ const useFields = () => {
     return { fieldsConfig };
 };
 
-export { useFields };
+export { customFieldValidationMap, useFields };

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

@@ -43,9 +43,12 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
@@ -63,6 +66,7 @@ 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

@@ -39,9 +39,12 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/FooterAnimationContext/index.js';
@@ -59,6 +62,7 @@ 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

@@ -45,9 +45,12 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 var Typography = require('../../../components/Typography/Typography.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
@@ -65,6 +68,7 @@ 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');

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

@@ -41,9 +41,12 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { Typography } from '../../../components/Typography/Typography.js';
 import '../../../context/FooterAnimationContext/index.js';
@@ -61,6 +64,7 @@ import { IconButton } from '../../../components/IconButton/IconButton.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { ErrorContainer } from '../../../components/ErrorContainer/ErrorContainer.js';
 import 'formik';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import { TypographyButton } from '../../../components/TypographyButton/TypographyButton.js';
 import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';

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

@@ -42,9 +42,12 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 require('../../components/Alert/Alert.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
@@ -63,6 +66,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 require('qrcode');
 require('formik');
+require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../WalletList/WalletList.cjs');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');

package/src/lib/views/CreatePasswordView/CreatePasswordView.js

@@ -38,9 +38,12 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import '../../components/Alert/Alert.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
@@ -59,6 +62,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 import 'qrcode';
 import 'formik';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../WalletList/WalletList.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';

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

@@ -45,9 +45,12 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 var helpers = require('../../../widgets/DynamicWidget/helpers/helpers.cjs');
 var Typography = require('../../../components/Typography/Typography.cjs');
@@ -66,6 +69,7 @@ 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');

package/src/lib/views/CreatePasswordView/SavePasswordStep/SavePasswordStep.js

@@ -41,9 +41,12 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { copyToClipboard } from '../../../widgets/DynamicWidget/helpers/helpers.js';
 import { Typography } from '../../../components/Typography/Typography.js';
@@ -62,6 +65,7 @@ import { IconButton } from '../../../components/IconButton/IconButton.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { ErrorContainer } from '../../../components/ErrorContainer/ErrorContainer.js';
 import 'formik';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import { TypographyButton } from '../../../components/TypographyButton/TypographyButton.js';
 import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -41,9 +41,12 @@ 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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
@@ -63,6 +66,7 @@ var IconButton = require('../../components/IconButton/IconButton.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var Typography = require('../../components/Typography/Typography.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/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -37,9 +37,12 @@ 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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../context/FooterAnimationContext/index.js';
@@ -59,6 +62,7 @@ import { IconButton } from '../../components/IconButton/IconButton.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { Typography } from '../../components/Typography/Typography.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/EmailVerification/EmailVerification.cjs

@@ -26,6 +26,7 @@ require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+var createUserProfile = require('../../utils/functions/createUserProfile/createUserProfile.cjs');
 var findEmbeddedWalletFromVerifiedCredentials = require('../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
@@ -52,9 +53,12 @@ require('@dynamic-labs/types');
 var useUserAuth = require('../../utils/hooks/useUserAuth/useUserAuth.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('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
@@ -76,6 +80,7 @@ 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');
 require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/Input/Input.cjs');
@@ -161,7 +166,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
                 // additional email validation step as part of onboarding
                 // cannot rely on newUser JWT field here due to session being counted twice
                 // when authentication happens followed by a separate email kyc step
-                const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(updateUserProfileResponse.jwt);
+                const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(createUserProfile.createUserProfileFromSdkUser(updateUserProfileResponse.user));
                 if (!embeddedWalletVerifiedCredential) {
                     throw new Error('Could not find an embedded wallet');
                 }

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -22,6 +22,7 @@ import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import { createUserProfileFromSdkUser } from '../../utils/functions/createUserProfile/createUserProfile.js';
 import { findEmbeddedWalletFromVerifiedCredentials } from '../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
@@ -48,9 +49,12 @@ import '@dynamic-labs/types';
 import { useUserAuth } from '../../utils/hooks/useUserAuth/useUserAuth.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 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/FooterAnimationContext/index.js';
@@ -72,6 +76,7 @@ import '../../components/IconButton/IconButton.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import 'formik';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../components/Alert/Alert.js';
 import '../../components/Input/Input.js';
@@ -157,7 +162,7 @@ const EmailVerification = ({ isEmailRecoveryFlow = false, showRetryButton: _show
                 // additional email validation step as part of onboarding
                 // cannot rely on newUser JWT field here due to session being counted twice
                 // when authentication happens followed by a separate email kyc step
-                const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(updateUserProfileResponse.jwt);
+                const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(createUserProfileFromSdkUser(updateUserProfileResponse.user));
                 if (!embeddedWalletVerifiedCredential) {
                     throw new Error('Could not find an embedded wallet');
                 }

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -41,11 +41,14 @@ 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('../CollectUserDataView/useFields.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
+require('react-i18next');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -60,6 +63,7 @@ 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/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -37,11 +37,14 @@ 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 '../CollectUserDataView/useFields.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
+import 'react-i18next';
 import '../../context/FooterAnimationContext/index.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -56,6 +59,7 @@ 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';