@dynamic-labs/sdk-react-core 1.0.2 → 1.0.3

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

@@ -84,11 +84,11 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                        t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        t('dyn_collect_user_data.description') })] })) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: t('dyn_collect_user_data.log_out_button') })] })] }));
+                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        t('dyn_collect_user_data.description') })] })) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };
 
 exports.CollectUserDataView = CollectUserDataView;

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

@@ -80,11 +80,11 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                        t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        t('dyn_collect_user_data.description') })] })) }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: t('dyn_collect_user_data.log_out_button') })] })] }));
+                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        t('dyn_collect_user_data.description') })] })) }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };
 
 export { CollectUserDataView };

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var formik = require('formik');
+var reactI18next = require('react-i18next');
 require('react');
 require('@dynamic-labs/utils');
 require('../../../context/DynamicContext/DynamicContext.cjs');
@@ -35,7 +36,6 @@ require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.c
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('react-i18next');
 require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
@@ -68,25 +68,26 @@ var Select = require('../../../components/Select/Select.cjs');
 
 const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => {
     const { fieldsConfig } = useFields.useFields();
+    const { t } = reactI18next.useTranslation();
     return (jsxRuntime.jsx("div", { className: 'user-data-fields__fields-column', children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
-            const { label, type } = index.getValueByKey(fieldsConfig, name);
+            const { label, type, key } = index.getValueByKey(fieldsConfig, name);
             if (name === 'tShirtSize') {
-                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.tShirtSizes.map((size) => (jsxRuntime.jsx("option", { value: size, children: size }, size))) }, name));
+                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]), children: index$1.tShirtSizes.map((size) => (jsxRuntime.jsx("option", { value: size, children: size }, size))) }, name));
             }
             else if (name === 'team') {
-                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.teamNames.map((teamName) => (jsxRuntime.jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
+                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]), children: index$1.teamNames.map((teamName) => (jsxRuntime.jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
             }
             else if (name === 'country') {
-                return (jsxRuntime.jsx(formik.Field, { as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]), children: index$1.countryCodes.map((countryCode) => (jsxRuntime.jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
+                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]), children: index$1.countryCodes.map((countryCode) => (jsxRuntime.jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
             }
             else if (name === 'policiesConsent') {
-                return (jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
+                return (jsxRuntime.jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsxRuntime.jsx(formik.Field, { copykey: key, as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
             }
             else if (name === 'email' && !enabled) {
-                return (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip', children: jsxRuntime.jsx(formik.Field, { disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
+                return (jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_collect_user_data.update_email_tooltip'), className: 'user-data-fields__tooltip', copykey: 'dyn_collect_user_data.update_email_tooltip', children: jsxRuntime.jsx(formik.Field, { copykey: key, disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
             }
             else {
-                return (jsxRuntime.jsx(formik.Field, { disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
+                return (jsxRuntime.jsx(formik.Field, { copykey: key, disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
             }
         }) }));
 };

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
 import 'react';
 import '@dynamic-labs/utils';
 import '../../../context/DynamicContext/DynamicContext.js';
@@ -31,7 +32,6 @@ import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
-import 'react-i18next';
 import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
@@ -64,25 +64,26 @@ import { Select } from '../../../components/Select/Select.js';
 
 const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => {
     const { fieldsConfig } = useFields();
+    const { t } = useTranslation();
     return (jsx("div", { className: 'user-data-fields__fields-column', children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
-            const { label, type } = getValueByKey(fieldsConfig, name);
+            const { label, type, key } = getValueByKey(fieldsConfig, name);
             if (name === 'tShirtSize') {
-                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: tShirtSizes.map((size) => (jsx("option", { value: size, children: size }, size))) }, name));
+                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]), children: tShirtSizes.map((size) => (jsx("option", { value: size, children: size }, size))) }, name));
             }
             else if (name === 'team') {
-                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: teamNames.map((teamName) => (jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
+                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]), children: teamNames.map((teamName) => (jsx("option", { value: teamName, children: teamName }, teamName))) }, name));
             }
             else if (name === 'country') {
-                return (jsx(Field, { as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]), children: countryCodes.map((countryCode) => (jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
+                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]), children: countryCodes.map((countryCode) => (jsx("option", { value: countryCode.code, children: countryCode.name }, countryCode.code))) }, name));
             }
             else if (name === 'policiesConsent') {
-                return (jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
+                return (jsx("div", { role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container', children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", { className: 'user-data-fields__consent-checkbox', children: [jsx(Field, { copykey: key, as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", { htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label', children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: component }) })] }, `policiesConsent_${index}`))) }, 'policiesConsentGroup'));
             }
             else if (name === 'email' && !enabled) {
-                return (jsx(Tooltip, { content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip', children: jsx(Field, { disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
+                return (jsx(Tooltip, { content: t('dyn_collect_user_data.update_email_tooltip'), className: 'user-data-fields__tooltip', copykey: 'dyn_collect_user_data.update_email_tooltip', children: jsx(Field, { copykey: key, disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }, 'disabled-email-tooltip'));
             }
             else {
-                return (jsx(Field, { disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
+                return (jsx(Field, { copykey: key, disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
             }
         }) }));
 };

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

@@ -22,56 +22,67 @@ const useFields = () => {
     const { t } = reactI18next.useTranslation();
     const fieldsConfig = {
         alias: {
+            key: 'dyn_collect_user_data.fields.alias.label',
             label: t('dyn_collect_user_data.fields.alias.label'),
             type: 'string',
             validation: yup.string().trim(),
         },
         country: {
+            key: 'dyn_collect_user_data.fields.country.label',
             label: t('dyn_collect_user_data.fields.country.label'),
             type: 'select',
             validation: yup.string().oneOf(index.countryCodes.map((c) => c.code)),
         },
         email: {
+            key: 'dyn_collect_user_data.fields.email.label',
             label: t('dyn_collect_user_data.fields.email.label'),
             type: 'email',
             validation: yup.string().email(t('dyn_collect_user_data.fields.email.validation')),
         },
         firstName: {
+            key: 'dyn_collect_user_data.fields.first_name.label',
             label: t('dyn_collect_user_data.fields.first_name.label'),
             type: 'string',
             validation: yup.string().trim(),
         },
         jobTitle: {
+            key: 'dyn_collect_user_data.fields.job_title.label',
             label: t('dyn_collect_user_data.fields.job_title.label'),
             type: 'string',
             validation: yup.string().trim(),
         },
         lastName: {
+            key: 'dyn_collect_user_data.fields.last_name.label',
             label: t('dyn_collect_user_data.fields.last_name.label'),
             type: 'string',
             validation: yup.string().trim(),
         },
         phoneNumber: {
+            key: 'dyn_collect_user_data.fields.phone_number.label',
             label: t('dyn_collect_user_data.fields.phone_number.label'),
             type: 'string',
             validation: yup.string().matches(/^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/, t('dyn_collect_user_data.fields.phone_number.validation')),
         },
         policiesConsent: {
+            key: 'dyn_collect_user_data.fields.policies_consent.label',
             label: t('dyn_collect_user_data.fields.policies_consent.label'),
             type: 'boolean',
             validation: yup.boolean(),
         },
         tShirtSize: {
+            key: 'dyn_collect_user_data.fields.t_shirt_size.label',
             label: t('dyn_collect_user_data.fields.t_shirt_size.label'),
             type: 'select',
             validation: yup.string().oneOf(index.tShirtSizes),
         },
         team: {
+            key: 'dyn_collect_user_data.fields.team.label',
             label: t('dyn_collect_user_data.fields.team.label'),
             type: 'select',
             validation: yup.string().oneOf(index.teamNames),
         },
         username: {
+            key: 'dyn_collect_user_data.fields.username.label',
             label: t('dyn_collect_user_data.fields.username.label'),
             type: 'string',
             // From chatGPT:

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

@@ -1,56 +1,67 @@
 export declare const useFields: () => {
     fieldsConfig: {
         alias: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         country: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         email: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         firstName: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         jobTitle: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         lastName: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         phoneNumber: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         policiesConsent: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
         };
         tShirtSize: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         team: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         };
         username: {
+            key: string;
             label: string;
             type: string;
             validation: import("yup").StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;

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

@@ -18,56 +18,67 @@ const useFields = () => {
     const { t } = useTranslation();
     const fieldsConfig = {
         alias: {
+            key: 'dyn_collect_user_data.fields.alias.label',
             label: t('dyn_collect_user_data.fields.alias.label'),
             type: 'string',
             validation: string().trim(),
         },
         country: {
+            key: 'dyn_collect_user_data.fields.country.label',
             label: t('dyn_collect_user_data.fields.country.label'),
             type: 'select',
             validation: string().oneOf(countryCodes.map((c) => c.code)),
         },
         email: {
+            key: 'dyn_collect_user_data.fields.email.label',
             label: t('dyn_collect_user_data.fields.email.label'),
             type: 'email',
             validation: string().email(t('dyn_collect_user_data.fields.email.validation')),
         },
         firstName: {
+            key: 'dyn_collect_user_data.fields.first_name.label',
             label: t('dyn_collect_user_data.fields.first_name.label'),
             type: 'string',
             validation: string().trim(),
         },
         jobTitle: {
+            key: 'dyn_collect_user_data.fields.job_title.label',
             label: t('dyn_collect_user_data.fields.job_title.label'),
             type: 'string',
             validation: string().trim(),
         },
         lastName: {
+            key: 'dyn_collect_user_data.fields.last_name.label',
             label: t('dyn_collect_user_data.fields.last_name.label'),
             type: 'string',
             validation: string().trim(),
         },
         phoneNumber: {
+            key: 'dyn_collect_user_data.fields.phone_number.label',
             label: t('dyn_collect_user_data.fields.phone_number.label'),
             type: 'string',
             validation: string().matches(/^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/, t('dyn_collect_user_data.fields.phone_number.validation')),
         },
         policiesConsent: {
+            key: 'dyn_collect_user_data.fields.policies_consent.label',
             label: t('dyn_collect_user_data.fields.policies_consent.label'),
             type: 'boolean',
             validation: boolean(),
         },
         tShirtSize: {
+            key: 'dyn_collect_user_data.fields.t_shirt_size.label',
             label: t('dyn_collect_user_data.fields.t_shirt_size.label'),
             type: 'select',
             validation: string().oneOf(tShirtSizes),
         },
         team: {
+            key: 'dyn_collect_user_data.fields.team.label',
             label: t('dyn_collect_user_data.fields.team.label'),
             type: 'select',
             validation: string().oneOf(teamNames),
         },
         username: {
+            key: 'dyn_collect_user_data.fields.username.label',
             label: t('dyn_collect_user_data.fields.username.label'),
             type: 'string',
             // From chatGPT:

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.cjs

@@ -72,9 +72,9 @@ const CollectUserDataViewLoginWithEmail = () => {
         return null;
     }
     const userProfile = createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: userProfile }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { userProfile: userProfile, children: jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                        t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        t('dyn_collect_user_data.description') })] }) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, children: t('dyn_collect_user_data.log_out_button') })] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: userProfile }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { userProfile: userProfile, children: jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        t('dyn_collect_user_data.description') })] }) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };
 
 exports.CollectUserDataViewLoginWithEmail = CollectUserDataViewLoginWithEmail;

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.js

@@ -68,9 +68,9 @@ const CollectUserDataViewLoginWithEmail = () => {
         return null;
     }
     const userProfile = createUserProfile(decodedOnboardingOnlyToken);
-    return (jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsx(UserAvatar, { user: userProfile }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { userProfile: userProfile, children: jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                        t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        t('dyn_collect_user_data.description') })] }) }), jsx(TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, children: t('dyn_collect_user_data.log_out_button') })] })] }));
+    return (jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsx(UserAvatar, { user: userProfile }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { userProfile: userProfile, children: jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        t('dyn_collect_user_data.description') })] }) }), jsx(TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };
 
 export { CollectUserDataViewLoginWithEmail };

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

@@ -77,7 +77,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', children: t('dyn_email_confirmation.title') }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', children: t('dyn_email_confirmation.description') }), jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: t('dyn_email_confirmation.note') }) }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
+    return (jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', copykey: 'dyn_email_confirmation.title', children: t('dyn_email_confirmation.title') }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', copykey: 'dyn_email_confirmation.description', children: t('dyn_email_confirmation.description') }), jsxRuntime.jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_email_confirmation.note', children: t('dyn_email_confirmation.note') }) }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
 };
 
 exports.EmailConfirmationWaitingView = EmailConfirmationWaitingView;

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -73,7 +73,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', children: t('dyn_email_confirmation.title') }), jsx(Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', children: t('dyn_email_confirmation.description') }), jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsx(IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) })] }), jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsx(Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: t('dyn_email_confirmation.note') }) }), jsx(PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
+    return (jsxs("div", { className: 'email-confirmation-waiting-view', children: [jsx("div", { className: 'email-confirmation-waiting-view__header-icon', children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) }), jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title', copykey: 'dyn_email_confirmation.title', children: t('dyn_email_confirmation.title') }), jsx(Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', copykey: 'dyn_email_confirmation.description', children: t('dyn_email_confirmation.description') }), jsxs("div", { className: 'email-confirmation-waiting-view__email-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email }), jsx(IconButton, { onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) })] }), jsx("div", { className: 'email-confirmation-waiting-view__note', children: jsx(Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_email_confirmation.note', children: t('dyn_email_confirmation.note') }) }), jsx(PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] }));
 };
 
 export { EmailConfirmationWaitingView };

package/src/lib/views/EmailUpdate/EmailUpdate.cjs

@@ -111,9 +111,9 @@ const EmailUpdate = () => {
             setLoading(false);
         }
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: t('dyn_email_update.title') }) }), jsxRuntime.jsxs("div", { className: 'email-update__container', children: [jsxRuntime.jsxs("div", { className: 'email-update__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_email_update.current_email') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsxRuntime.jsx(Input.Input, { id: 'email_field', onChange: (e) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: 'dyn_email_update.title', children: t('dyn_email_update.title') }) }), jsxRuntime.jsxs("div", { className: 'email-update__container', children: [jsxRuntime.jsxs("div", { className: 'email-update__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_email_update.current_email', children: t('dyn_email_update.current_email') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsxRuntime.jsx(Input.Input, { id: 'email_field', onChange: (e) => {
                             setUpdatedEmail(e.target.value);
-                        }, type: 'email', label: t('dyn_email_update.label'), className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: t('dyn_email_update.send_verification') })] })] }));
+                        }, type: 'email', copykey: 'dyn_email_update.label', label: t('dyn_email_update.label'), className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, copykey: 'dyn_email_update.send_verification', children: t('dyn_email_update.send_verification') })] })] }));
 };
 
 exports.EmailUpdate = EmailUpdate;

package/src/lib/views/EmailUpdate/EmailUpdate.js

@@ -107,9 +107,9 @@ const EmailUpdate = () => {
             setLoading(false);
         }
     });
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: t('dyn_email_update.title') }) }), jsxs("div", { className: 'email-update__container', children: [jsxs("div", { className: 'email-update__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_email_update.current_email') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsx(Input, { id: 'email_field', onChange: (e) => {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: 'dyn_email_update.title', children: t('dyn_email_update.title') }) }), jsxs("div", { className: 'email-update__container', children: [jsxs("div", { className: 'email-update__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_email_update.current_email', children: t('dyn_email_update.current_email') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsx(Input, { id: 'email_field', onChange: (e) => {
                             setUpdatedEmail(e.target.value);
-                        }, type: 'email', label: t('dyn_email_update.label'), className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: t('dyn_email_update.send_verification') })] })] }));
+                        }, type: 'email', copykey: 'dyn_email_update.label', label: t('dyn_email_update.label'), className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, copykey: 'dyn_email_update.send_verification', children: t('dyn_email_update.send_verification') })] })] }));
 };
 
 export { EmailUpdate };