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

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.cjs

@@ -8,19 +8,23 @@ var Typography = require('../Typography/Typography.cjs');
 require('react');
 var dynamicLogo = require('../../assets/dynamic-logo.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var DynamicWidgetFooter = require('../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
 
 const URL = 'https://dynamic.xyz';
 const alignClassNames = {
     center: 'powered-by-dynamic--center',
     right: 'powered-by-dynamic--right',
 };
-const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, asFooter, }) => {
     var _a;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
-    return (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+    const content = (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+    if (asFooter)
+        return jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: content });
+    return content;
 };
 
 exports.PoweredByDynamic = PoweredByDynamic;

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

@@ -4,6 +4,7 @@ type PoweredByDynamicProps = {
     classNameLogo?: string;
     classNameRoot?: string;
     classNameText?: string;
+    asFooter?: boolean;
 };
 export declare const PoweredByDynamic: React.FC<PoweredByDynamicProps>;
 export {};

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.js

@@ -4,19 +4,23 @@ import { Typography } from '../Typography/Typography.js';
 import 'react';
 import { ReactComponent as SvgDynamicLogo } from '../../assets/dynamic-logo.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { DynamicWidgetFooter } from '../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.js';
 
 const URL = 'https://dynamic.xyz';
 const alignClassNames = {
     center: 'powered-by-dynamic--center',
     right: 'powered-by-dynamic--right',
 };
-const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, asFooter, }) => {
     var _a;
     const { projectSettings } = useInternalDynamicContext();
     if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
-    return (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+    const content = (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+    if (asFooter)
+        return jsx(DynamicWidgetFooter, { children: content });
+    return content;
 };
 
 export { PoweredByDynamic };

package/src/lib/components/UserProfileForm/UserProfileForm.cjs

@@ -3,20 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var formik = require('formik');
 var useUserDataForm = require('../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
-var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
-var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
-var classNames = require('../../utils/functions/classNames/classNames.cjs');
-var index = require('../../views/CollectUserDataView/UserDataFields/index.cjs');
-var DynamicWidgetFooter = require('../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
-var Button = require('../Button/Button.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
 var check = require('../../shared/assets/check.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
@@ -24,20 +18,38 @@ require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var index = require('../../views/CollectUserDataView/UserDataFields/index.cjs');
+var DynamicWidgetFooter = require('../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
+var Button = require('../Button/Button.cjs');
 
-const UserProfileForm = ({ formClassName, onEditProfileSubmit, onEditProfileCancel, options = { shouldEnforcePolicies: false }, }) => {
+const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, onEditProfileSubmit, onEditProfileCancel, options = {
+    buttonsAsFooter: true,
+    cancelText: 'Cancel',
+    shouldEnforcePolicies: false,
+    submitText: 'Save',
+}, }) => {
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
-    const allUserFields = getUserProfileFields.getUserProfileFields({
-        projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
-        user,
-    });
+    const targetFields = React.useMemo(() => {
+        const allUserFields = getUserProfileFields.getUserProfileFields({
+            projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
+            user,
+        });
+        if (!filterFields)
+            return allUserFields;
+        return allUserFields.filter(({ name }) => filterFields.includes(name));
+    }, [filterFields, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc, user]);
     const { fetch, formikInitialValues, formikValidationSchema, onFormSubmit } = useUserDataForm.useUserDataForm({
-        fields: allUserFields,
+        fields: targetFields,
         onSubmit: onEditProfileSubmit,
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    return (jsxRuntime.jsx(formik.Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true }, { children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: classNames.classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'dynamic-widget-edit-profile-view__fields' }, { children: jsxRuntime.jsx(index.UserDataFields, { errors: errors, fields: allUserFields, touched: touched }) })), jsxRuntime.jsxs(DynamicWidgetFooter.DynamicWidgetFooter, { children: [jsxRuntime.jsx(Button.Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel }, { children: "Cancel" })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsxRuntime.jsx(check.ReactComponent, {}) }, { children: "Save" }))] })] }))) })));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!options.hideCancelButton && (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsxRuntime.jsx(check.ReactComponent, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
+    return (jsxRuntime.jsx(formik.Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true }, { children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: classNames.classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'dynamic-widget-edit-profile-view__fields', style: fieldsContainerStyle }, { children: jsxRuntime.jsx(index.UserDataFields, { errors: errors, fields: targetFields, touched: touched }) })), options.buttonsAsFooter ? (jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: makeButtonsContent(isSubmitting, isValid, dirty) })) : (makeButtonsContent(isSubmitting, isValid, dirty))] }))) })));
 };
 
 exports.UserProfileForm = UserProfileForm;

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

@@ -1,11 +1,22 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
+import { UserFields } from '@dynamic-labs/sdk-api';
 import { UserDataFormValues } from '../../utils/hooks/useUserDataForm/useUserDataForm';
+import { ButtonProps } from '../Button/Button';
 export type UserProfileFormProps = {
+    onEditProfileSubmit?: (formValues: UserDataFormValues) => void;
+    onEditProfileCancel?: () => void;
+    /** Which fields should be made available for editing. Undefined means all */
+    filterFields?: (keyof UserFields)[];
     formClassName?: string;
-    onEditProfileCancel: () => void;
-    onEditProfileSubmit: (formValues: UserDataFormValues) => void;
+    fieldsContainerStyle?: CSSProperties;
     options?: {
         shouldEnforcePolicies?: boolean;
+        submitButtonProps?: ButtonProps;
+        cancelButtonProps?: ButtonProps;
+        hideCancelButton?: boolean;
+        buttonsAsFooter?: boolean;
+        submitText?: string;
+        cancelText?: string;
     };
 };
 export declare const UserProfileForm: FC<UserProfileFormProps>;

package/src/lib/components/UserProfileForm/UserProfileForm.js

@@ -1,18 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { useUserDataForm } from '../../utils/hooks/useUserDataForm/useUserDataForm.js';
-import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
-import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
-import { classNames } from '../../utils/functions/classNames/classNames.js';
-import { UserDataFields } from '../../views/CollectUserDataView/UserDataFields/index.js';
-import { DynamicWidgetFooter } from '../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.js';
-import { Button } from '../Button/Button.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import 'react';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
@@ -20,20 +14,38 @@ import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { UserDataFields } from '../../views/CollectUserDataView/UserDataFields/index.js';
+import { DynamicWidgetFooter } from '../../widgets/DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.js';
+import { Button } from '../Button/Button.js';
 
-const UserProfileForm = ({ formClassName, onEditProfileSubmit, onEditProfileCancel, options = { shouldEnforcePolicies: false }, }) => {
+const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, onEditProfileSubmit, onEditProfileCancel, options = {
+    buttonsAsFooter: true,
+    cancelText: 'Cancel',
+    shouldEnforcePolicies: false,
+    submitText: 'Save',
+}, }) => {
     const { projectSettings, user } = useInternalDynamicContext();
-    const allUserFields = getUserProfileFields({
-        projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
-        user,
-    });
+    const targetFields = useMemo(() => {
+        const allUserFields = getUserProfileFields({
+            projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
+            user,
+        });
+        if (!filterFields)
+            return allUserFields;
+        return allUserFields.filter(({ name }) => filterFields.includes(name));
+    }, [filterFields, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc, user]);
     const { fetch, formikInitialValues, formikValidationSchema, onFormSubmit } = useUserDataForm({
-        fields: allUserFields,
+        fields: targetFields,
         onSubmit: onEditProfileSubmit,
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    return (jsx(Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true }, { children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxs(Form, Object.assign({ className: classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm' }, { children: [jsx("div", Object.assign({ className: 'dynamic-widget-edit-profile-view__fields' }, { children: jsx(UserDataFields, { errors: errors, fields: allUserFields, touched: touched }) })), jsxs(DynamicWidgetFooter, { children: [jsx(Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel }, { children: "Cancel" })), jsx(Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsx(SvgCheck, {}) }, { children: "Save" }))] })] }))) })));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxs(Fragment, { children: [!options.hideCancelButton && (jsx(Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsx(Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsx(SvgCheck, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
+    return (jsx(Formik, Object.assign({ onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true }, { children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxs(Form, Object.assign({ className: classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm' }, { children: [jsx("div", Object.assign({ className: 'dynamic-widget-edit-profile-view__fields', style: fieldsContainerStyle }, { children: jsx(UserDataFields, { errors: errors, fields: targetFields, touched: touched }) })), options.buttonsAsFooter ? (jsx(DynamicWidgetFooter, { children: makeButtonsContent(isSubmitting, isValid, dirty) })) : (makeButtonsContent(isSubmitting, isValid, dirty))] }))) })));
 };
 
 export { UserProfileForm };

package/src/lib/components/UserProfileForm/index.d.ts

@@ -0,0 +1 @@
+export * from './UserProfileForm';

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -250,6 +250,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         localStorage.LocalStorage.removeFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            localStorage.LocalStorage.removeFromLS(localStorage$1.IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken.getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -357,9 +360,12 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         user,
     });
     const sendWagmiSettings = (settings) => {
-        api.sendDynamicProps(environmentId, {
-            dynamicWagmiSettings: settings.dynamicWagmiSettings,
-        });
+        const { dynamicWagmiSettings } = settings;
+        if (dynamicWagmiSettings) {
+            api.sendDynamicProps(environmentId, {
+                dynamicWagmiSettings: { dynamicWagmiSettings },
+            });
+        }
     };
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -10,7 +10,7 @@ import { Toolkit } from '../../components/Toolkit/Toolkit.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
 import { logger } from '../../shared/logger.js';
-import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY } from '../../utils/constants/localStorage.js';
+import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY, IS_MULTI_WALLET_ENABLED } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
 import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.js';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
@@ -246,6 +246,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         LocalStorage.removeFromLS(WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            LocalStorage.removeFromLS(IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -353,9 +356,12 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         user,
     });
     const sendWagmiSettings = (settings) => {
-        sendDynamicProps(environmentId, {
-            dynamicWagmiSettings: settings.dynamicWagmiSettings,
-        });
+        const { dynamicWagmiSettings } = settings;
+        if (dynamicWagmiSettings) {
+            sendDynamicProps(environmentId, {
+                dynamicWagmiSettings: { dynamicWagmiSettings },
+            });
+        }
     };
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');

package/src/lib/context/ViewContext/ViewContext.d.ts

@@ -1,5 +1,5 @@
 import { SetStateAction, Dispatch, PropsWithChildren, FC } from 'react';
-export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts';
 export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/data/api.cjs

@@ -128,6 +128,9 @@ const verifyEmail = ({ verificationToken, verificationUUID, environmentId, }, us
     catch (e) {
         const data = yield e.json();
         logger.logger.error(data.error);
+        if (data.code === sdkApi$1.UnprocessableEntityErrorCode.UserHasAlreadyAccountWithEmail) {
+            throw new utils.UserHasAccountWithEmailError(data.error);
+        }
         throw new utils.EmailVerificationError(data.code);
     }
 });
@@ -396,6 +399,18 @@ const sendDynamicProps = (environmentId, settingsToSend) => _tslib.__awaiter(voi
     catch (e) {
         logger.logger.error(e);
     }
+});
+const mergeUserAccounts = (userJwt, environmentId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).mergeUsers({
+            environmentId,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.logger.error(e);
+        throw e;
+    }
 });
 
 exports.createEmailVerification = createEmailVerification;
@@ -409,6 +424,7 @@ exports.linkWallet = linkWallet;
 exports.mapAuthModeTypeToEnum = mapAuthModeTypeToEnum;
 exports.mapChainToChainEnum = mapChainToChainEnum;
 exports.mapProviderToProviderEnum = mapProviderToProviderEnum;
+exports.mergeUserAccounts = mergeUserAccounts;
 exports.retryEmailVerification = retryEmailVerification;
 exports.revokeSession = revokeSession;
 exports.sendDynamicProps = sendDynamicProps;

package/src/lib/data/api.d.ts

@@ -66,3 +66,4 @@ export declare const sendDynamicProps: (environmentId: string, settingsToSend: {
     dynamicContextProps?: object;
     dynamicWagmiSettings?: object;
 }) => Promise<void>;
+export declare const mergeUserAccounts: (userJwt: string, environmentId: string) => Promise<string | undefined>;

package/src/lib/data/api.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../_virtual/_tslib.js';
-import { NoAccessError, AccountExistsError, EmailVerificationError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError } from '@dynamic-labs/utils';
-import { SDKApi, Configuration, VerifyRequestFromJSON, ChainEnum, WalletProviderEnum, AuthModeEnum } from '@dynamic-labs/sdk-api';
+import { NoAccessError, AccountExistsError, EmailVerificationError, UserHasAccountWithEmailError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError } from '@dynamic-labs/utils';
+import { UnprocessableEntityErrorCode, SDKApi, Configuration, VerifyRequestFromJSON, ChainEnum, WalletProviderEnum, AuthModeEnum } from '@dynamic-labs/sdk-api';
 import { VERSION, API_VERSION } from '../../version.js';
 import ApiEndpoint from '../config/ApiEndpoint.js';
 import { logger } from '../shared/logger.js';
@@ -124,6 +124,9 @@ const verifyEmail = ({ verificationToken, verificationUUID, environmentId, }, us
     catch (e) {
         const data = yield e.json();
         logger.error(data.error);
+        if (data.code === UnprocessableEntityErrorCode.UserHasAlreadyAccountWithEmail) {
+            throw new UserHasAccountWithEmailError(data.error);
+        }
         throw new EmailVerificationError(data.code);
     }
 });
@@ -392,6 +395,18 @@ const sendDynamicProps = (environmentId, settingsToSend) => __awaiter(void 0, vo
     catch (e) {
         logger.error(e);
     }
+});
+const mergeUserAccounts = (userJwt, environmentId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).mergeUsers({
+            environmentId,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.error(e);
+        throw e;
+    }
 });
 
-export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, retryEmailVerification, revokeSession, sendDynamicProps, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };
+export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, mergeUserAccounts, retryEmailVerification, revokeSession, sendDynamicProps, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -32,7 +32,7 @@ require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs'
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-require('../../../context/ErrorContext/ErrorContext.cjs');
+var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var AccountExistsContext = require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');
@@ -55,6 +55,7 @@ var index = require('../../../context/FooterAnimationContext/index.cjs');
 
 const Header = ({ onClose: handleClose, heading, projectSettings, walletConnector, }) => {
     const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setError } = ErrorContext.useErrorContext();
     const { setShowQrCodeImage } = QrCodeContext.useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
     const { view, goToInitialView } = ViewContext.useViewContext();
@@ -63,11 +64,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const handleBackClick = React.useCallback(() => {
         goToInitialView();
         setExistentAccountData(undefined);
+        setError(undefined);
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
+    }, [
+        goToInitialView,
+        setExistentAccountData,
+        setError,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        clearStatesOnBackClick,
+    ]);
     const leadingButtons = React.useMemo(() => {
         let buttons = [];
         if (showBackButton) {

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -28,7 +28,7 @@ import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import '../../../context/ErrorContext/ErrorContext.js';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useAccountExistsContext } from '../../../context/AccountExistsContext/AccountExistsContext.js';
 import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';
@@ -51,6 +51,7 @@ import { useFooterAnimationContext } from '../../../context/FooterAnimationConte
 
 const Header = ({ onClose: handleClose, heading, projectSettings, walletConnector, }) => {
     const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext();
+    const { setError } = useErrorContext();
     const { setShowQrCodeImage } = useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
     const { view, goToInitialView } = useViewContext();
@@ -59,11 +60,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const handleBackClick = useCallback(() => {
         goToInitialView();
         setExistentAccountData(undefined);
+        setError(undefined);
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
+    }, [
+        goToInitialView,
+        setExistentAccountData,
+        setError,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        clearStatesOnBackClick,
+    ]);
     const leadingButtons = useMemo(() => {
         let buttons = [];
         if (showBackButton) {

package/src/lib/shared/assets/double-arrow-right.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgDoubleArrowRight = function SvgDoubleArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.862 2.862c.26-.26.682-.26.943 0L8.47 7.529a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943L7.057 8 2.862 3.805a.667.667 0 0 1 0-.943Zm5.333 0c.26-.26.683-.26.943 0l4.667 4.667c.26.26.26.682 0 .942l-4.667 4.667a.667.667 0 0 1-.943-.943L12.39 8 8.195 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgDoubleArrowRight;

package/src/lib/shared/assets/double-arrow-right.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgDoubleArrowRight = function SvgDoubleArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.862 2.862c.26-.26.682-.26.943 0L8.47 7.529a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943L7.057 8 2.862 3.805a.667.667 0 0 1 0-.943Zm5.333 0c.26-.26.683-.26.943 0l4.667 4.667c.26.26.26.682 0 .942l-4.667 4.667a.667.667 0 0 1-.943-.943L12.39 8 8.195 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgDoubleArrowRight as ReactComponent };

package/src/lib/shared/assets/index.d.ts

@@ -34,3 +34,4 @@ export { ReactComponent as SwitchHorizontalIcon } from './switch-horizontal.svg'
 export { ReactComponent as DotsHorizontalIcon } from './dots-horizontal.svg';
 export { ReactComponent as SendIcon } from './send.svg';
 export { ReactComponent as QuestionMarkIcon } from './question-mark.svg';
+export { ReactComponent as DoubleArrowRightIcon } from './double-arrow-right.svg';