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

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -38,12 +38,16 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useFindSocialIcon } from '../../utils/hooks/useFindSocialIcon/useFindSocialIcon.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
-const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
+const getMagicEmailOrSocialIcon = ({ findSocialIcon, wallet, jwt, }) => {
     if (isEmailOTPWalletConnector(wallet.connector)) {
         return SignInWithEmailIcon;
     }
@@ -55,7 +59,7 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
         }
         const { oauthProvider } = socialAccountDataForWallet;
         try {
-            const MagicSocialWalletIcon = getSocialIcon(oauthProvider);
+            const MagicSocialWalletIcon = findSocialIcon(oauthProvider);
             return MagicSocialWalletIcon;
         }
         catch (err) {
@@ -67,10 +71,13 @@ const getMagicEmailOrSocialIcon = ({ getSocialIcon, wallet, jwt, }) => {
 const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
     const { primaryWallet, selectedWalletConnector } = useInternalDynamicContext();
     const { deniedOauthProvider, deniedAddress } = useAccessDeniedContext();
-    const getSocialIcon = useGetSocialIcon();
+    const findSocialIcon = useFindSocialIcon();
     // when access is denied we don't have jwt set, so we're getting this value out of useAccessDeniedContext
     if (deniedOauthProvider) {
-        const MagicSocialWalletIcon = getSocialIcon(deniedOauthProvider);
+        const MagicSocialWalletIcon = findSocialIcon(deniedOauthProvider);
+        if (!MagicSocialWalletIcon) {
+            return null;
+        }
         return (jsx(MagicSocialWalletIcon, { style: {
                 height: pixelToRem(iconSize),
                 width: pixelToRem(iconSize),
@@ -85,7 +92,7 @@ const AuthProviderIcon = ({ jwt, iconSize = 64, showStatus, wallet, }) => {
         return null;
     }
     const MagicEmailOrSocialIcon = getMagicEmailOrSocialIcon({
-        getSocialIcon,
+        findSocialIcon,
         jwt,
         wallet: walletForIcon,
     });

package/src/lib/components/Button/Button.cjs

@@ -36,12 +36,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -52,7 +55,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsxRuntime.jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container', "data-testid": 'button__spinner' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
 };
 
 exports.Button = Button;

package/src/lib/components/Button/Button.d.ts

@@ -1,9 +1,9 @@
-import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode } from 'react';
 import { TypographyProps } from '../Typography/Typography.types';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonPadding = 'small' | 'medium' | 'large' | 'none';
 type ButtonRounded = 'default' | 'medium' | 'small';
-type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     buttonClassName?: string;
     buttonPadding?: ButtonPadding;
     buttonRounded?: ButtonRounded;
@@ -18,5 +18,5 @@ type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     typographyProps?: Omit<TypographyProps, 'as'>;
     onClick?: MouseEventHandler<HTMLButtonElement> | (() => Promise<void>);
 };
-export declare const Button: ({ buttonClassName, buttonPadding, buttonVariant, buttonRounded, children, feedback, expanded, dataTestId, disabled, loading, onClick, type, startSlot, endSlot, typographyProps, }: Props) => JSX.Element;
+export declare const Button: FC<ButtonProps>;
 export {};

package/src/lib/components/Button/Button.js

@@ -32,12 +32,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => __awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -48,7 +51,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxs(Fragment, { children: [startSlot && jsx("div", Object.assign({ className: 'button__start-slot' }, { children: startSlot })), (feedback || children) && (jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsx("div", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container', "data-testid": 'button__spinner' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
 };
 
 export { Button };

package/src/lib/components/Divider/Divider.cjs

@@ -34,13 +34,17 @@ require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('formik');
-require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 

package/src/lib/components/Divider/Divider.js

@@ -30,13 +30,17 @@ import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import 'formik';
-import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
 

package/src/lib/components/DynamicConnectButton/components/ConnectButton.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../../Button/Button.cjs');
 var classNames = require('../../../utils/functions/classNames/classNames.cjs');
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 exports.ConnectButton = ConnectButton;

package/src/lib/components/DynamicConnectButton/components/ConnectButton.js

@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../Button/Button.js';
 import { classNames } from '../../../utils/functions/classNames/classNames.js';
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 export { ConnectButton };

package/src/lib/components/ErrorContainer/ErrorContainer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-type Variant = 'error' | 'info';
+type Variant = 'error' | 'info' | 'success';
 type Props = {
     children: ReactNode;
     className?: string;

package/src/lib/components/Icon/Icon.cjs

@@ -14,6 +14,7 @@ const Icon = ({ children, className = '', color, size, }) => {
         'text-tertiary': 'icon--color-text-tertiary',
     };
     const sizeClassNameMap = {
+        large: 'icon--size-large',
         medium: 'icon--size-medium',
         small: 'icon--size-small',
         xsmall: 'icon--size-xsmall',

package/src/lib/components/Icon/Icon.js

@@ -10,6 +10,7 @@ const Icon = ({ children, className = '', color, size, }) => {
         'text-tertiary': 'icon--color-text-tertiary',
     };
     const sizeClassNameMap = {
+        large: 'icon--size-large',
         medium: 'icon--size-medium',
         small: 'icon--size-small',
         xsmall: 'icon--size-xsmall',

package/src/lib/components/Icon/Icon.types.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 export type IconColor = 'text-primary' | 'text-secondary' | 'text-tertiary' | 'text-error' | 'brand-primary';
-export type IconSize = 'xsmall' | 'small' | 'medium';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large';
 export type IconProps = {
     children: ReactElement;
     className?: string;

package/src/lib/components/IconWithSpinner/IconWithSpinner.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { Iconic } from '@dynamic-labs/iconic';
 import { Icon } from '../../shared';
 type Props = {
-    Icon?: Icon | Iconic | ReactElement;
+    Icon?: Icon | Iconic | ReactElement | null;
     className?: string;
     customSpinnerColor?: string;
     iconSize?: number;

package/src/lib/components/ListTile/ListTile.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.js

@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 export { ListTile };

package/src/lib/components/ListTile/ListTile.types.d.ts

@@ -4,6 +4,7 @@ export type ListTileProps = {
     dataTestId?: string;
     leading?: ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
     style?: CSSProperties;
     trailing?: ReactNode;
 };

package/src/lib/components/MenuList/Dropdown/Dropdown.cjs

@@ -43,9 +43,13 @@ require('../../Alert/Alert.cjs');
 require('formik');
 require('yup');
 require('../../InlineWidget/InlineWidget.cjs');
+require('../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 
 const IN_DURATION = 300;
 const OUT_DURATION = 300;

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -39,9 +39,13 @@ import '../../Alert/Alert.js';
 import 'formik';
 import 'yup';
 import '../../InlineWidget/InlineWidget.js';
+import '../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
-import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
 const IN_DURATION = 300;
 const OUT_DURATION = 300;

package/src/lib/components/Modal/Modal.cjs

@@ -39,9 +39,13 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 
 const Modal = ({ children, className, isShown = true, transitionProps, }) => (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal', className) }, { children: jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, Object.assign({}, transitionProps, { isShown: isShown }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'modal__items' }, { children: children })) })) })));
 

package/src/lib/components/Modal/Modal.js

@@ -35,9 +35,13 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
 const Modal = ({ children, className, isShown = true, transitionProps, }) => (jsx("div", Object.assign({ className: classNames('modal', className) }, { children: jsx(SlideInUpTransition, Object.assign({}, transitionProps, { isShown: isShown }, { children: jsx("div", Object.assign({ className: 'modal__items' }, { children: children })) })) })));
 

package/src/lib/components/ModalHeader/ModalHeader.cjs

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
         'modal-header--absolute': positionAbsolute,
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+    }), style: style }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
 
 exports.ModalHeader = ModalHeader;

package/src/lib/components/ModalHeader/ModalHeader.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
         'modal-header--absolute': positionAbsolute,
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }) }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+    }), style: style }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
 
 export { ModalHeader };

package/src/lib/components/ModalHeader/ModalHeader.types.d.ts

@@ -1,9 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 export type ModalHeaderProps = {
     alignContent?: 'bottom';
     children?: ReactNode;
     leading?: ReactElement | ReactElement[];
     positionAbsolute?: boolean;
     trailing?: ReactNode;
+    style?: CSSProperties;
 };
 export type ModalHeaderComponent = (props: ModalHeaderProps) => ReactElement;

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.cjs

@@ -13,9 +13,11 @@ var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/V
 
 const typographyColor = {
     error: 'error-1',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+            'modal-header-banner__success': type === 'success',
+        }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false }, { children: message })) }))) })));
 
 exports.ModalHeaderBanner = ModalHeaderBanner;

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.d.ts

@@ -1,8 +1,9 @@
 import { FC } from 'react';
-type ModalHeaderBannerType = 'error';
+type ModalHeaderBannerType = 'error' | 'success';
 export type ModalHeaderBannerProps = {
     message?: string;
     type?: ModalHeaderBannerType;
+    disableTruncate?: boolean;
 };
 export declare const ModalHeaderBanner: FC<ModalHeaderBannerProps>;
 export {};

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.js

@@ -9,9 +9,11 @@ import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition
 
 const typographyColor = {
     error: 'error-1',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+            'modal-header-banner__success': type === 'success',
+        }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false }, { children: message })) }))) })));
 
 export { ModalHeaderBanner };

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -41,10 +41,14 @@ require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
+require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 var MenuList = require('../MenuList/MenuList/MenuList.cjs');
 var NetworkAction = require('./components/NetworkAction/NetworkAction.cjs');
 var NetworkControl = require('./components/NetworkControl/NetworkControl.cjs');
@@ -76,7 +80,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker' }, { children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) })))] })));
 };
 

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -37,10 +37,14 @@ import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
+import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import { MenuList } from '../MenuList/MenuList/MenuList.js';
 import { NetworkAction } from './components/NetworkAction/NetworkAction.js';
 import { NetworkControl } from './components/NetworkControl/NetworkControl.js';
@@ -72,7 +76,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxs("div", Object.assign({ className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsx(MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+    return (jsxs("div", Object.assign({ className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker' }, { children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, style: { marginTop: 5, position: 'absolute' } }), shouldAllowOpenDropdown && (jsx(MenuList, Object.assign({ className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: { anchorOrigin: 'bottom-left', anchorRef }, mobileTitle: 'Select network' }, { children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) })))] })));
 };
 

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs

@@ -36,13 +36,17 @@ require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
-require('formik');
-require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs');

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.js

@@ -32,13 +32,17 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
-import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
-import 'formik';
-import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
 import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.js';

package/src/lib/components/NetworkPicker/components/Network/Network.cjs

@@ -37,13 +37,17 @@ require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../IconButton/IconButton.cjs');
 var Spinner = require('../../../IconWithSpinner/Spinner/Spinner.cjs');
 require('../../../Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
-require('formik');
-require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 

package/src/lib/components/NetworkPicker/components/Network/Network.js

@@ -33,13 +33,17 @@ import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../IconButton/IconButton.js';
 import { Spinner } from '../../../IconWithSpinner/Spinner/Spinner.js';
 import '../../../Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
-import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
-import 'formik';
-import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
 import '../../../MenuList/Dropdown/Dropdown.js';