@dynamic-labs/sdk-react-core 0.19.0-alpha.17 → 0.19.0-alpha.19

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -32,9 +32,9 @@ import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: warningMessage && (jsx("div", { className: 'transaction-confirmation__warning', children: jsx(Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: warningMessage && (jsx("div", { className: 'transaction-confirmation__warning', children: jsx(Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, children: "Cancel" })), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
                                     onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
-                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Confirm" })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+                                }, expanded: true, loading: isLoading, disabled: disableSendButton, children: "Confirm" })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -69,7 +69,7 @@ var TransactionRow = require('../TransactionConfirmationPageLayout/components/Tr
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const networkIcon = (jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) }), jsxRuntime.jsxs("div", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) }), jsxRuntime.jsxs("div", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -65,7 +65,7 @@ import { TransactionRow } from '../TransactionConfirmationPageLayout/components/
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsx(SvgClose, {}) }));
     const networkIcon = (jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 export { TransactionStatusLayout };

package/src/lib/components/Typography/Typography.cjs

@@ -17,7 +17,6 @@ const Typography = (_a) => {
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
         numbers_medium: 'typography--numbers-medium',
-        numbers_small: 'typography--numbers-small',
         title: 'typography--title',
     };
     const weightClassNameMap = {

package/src/lib/components/Typography/Typography.js

@@ -13,7 +13,6 @@ const Typography = (_a) => {
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
         numbers_medium: 'typography--numbers-medium',
-        numbers_small: 'typography--numbers-small',
         title: 'typography--title',
     };
     const weightClassNameMap = {

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
 export type TypographyTag = ElementType;
-export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium' | 'numbers_small';
+export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium';
 export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip' | 'green-1';
 export type TypographyWeight = 'regular' | 'medium' | 'bold';
 export type TypographyTransform = 'uppercase';

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs

@@ -21,7 +21,7 @@ var classNames = require('../../../../../../utils/functions/classNames/className
 var Tooltip = require('../../../../../Tooltip/Tooltip.cjs');
 var Typography = require('../../../../../Typography/Typography.cjs');
 
-const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_small', color: 'tooltip', children: "This email is verified" }));
+const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_medium', color: 'tooltip', children: "This email is verified" }));
 const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js

@@ -17,7 +17,7 @@ import { classNames } from '../../../../../../utils/functions/classNames/classNa
 import { Tooltip } from '../../../../../Tooltip/Tooltip.js';
 import { Typography } from '../../../../../Typography/Typography.js';
 
-const VerifiedEmailTooltip = (jsx(Typography, { variant: 'numbers_small', color: 'tooltip', children: "This email is verified" }));
+const VerifiedEmailTooltip = (jsx(Typography, { variant: 'numbers_medium', color: 'tooltip', children: "This email is verified" }));
 const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -74,7 +74,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
     const isActiveCredential = !primaryWallet &&
         connectedAccountInfo &&
         (connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.id) === (user === null || user === void 0 ? void 0 : user.lastVerifiedCredentialId);
-    const renderButton = () => (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => isProviderLinked
+    const renderButton = () => (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonPadding: 'none', onClick: () => isProviderLinked
             ? unlinkSocialAccount(provider)
             : linkSocialAccount(provider), loading: isProcessing, dataTestId: `social-account-${isProviderLinked ? 'disconnect' : 'connect'}-button`, typographyProps: {
             color: 'secondary',

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -70,7 +70,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
     const isActiveCredential = !primaryWallet &&
         connectedAccountInfo &&
         (connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.id) === (user === null || user === void 0 ? void 0 : user.lastVerifiedCredentialId);
-    const renderButton = () => (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => isProviderLinked
+    const renderButton = () => (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonPadding: 'none', onClick: () => isProviderLinked
             ? unlinkSocialAccount(provider)
             : linkSocialAccount(provider), loading: isProcessing, dataTestId: `social-account-${isProviderLinked ? 'disconnect' : 'connect'}-button`, typographyProps: {
             color: 'secondary',

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

@@ -48,7 +48,7 @@ const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, on
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    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 }))] }));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!options.hideCancelButton && (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: fetch, 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, 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, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true, children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxRuntime.jsxs(formik.Form, { className: classNames.classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm', children: [jsxRuntime.jsx("div", { 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))] })) }));
 };
 

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

@@ -44,7 +44,7 @@ const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, on
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    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 }))] }));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxs(Fragment, { children: [!options.hideCancelButton && (jsx(Button, Object.assign({ disabled: fetch, 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, 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, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true, children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxs(Form, { className: classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm', children: [jsx("div", { 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))] })) }));
 };
 

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

@@ -202,8 +202,9 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
         clearPrimaryWalletId,
         enableVisitTrackingOnConnectOnly,
         environmentId,
+        isBridgeFlow,
         onBeforeConnectSuccessConfirmation: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onBeforeConnectSuccessConfirmation,
-        onUnlink: (wallet, connectedWalletsInfo) => handleDisconnectWallet.handleDisconnectWallet({
+        onUnlink: (connectedWalletsInfo, wallet) => handleDisconnectWallet.handleDisconnectWallet({
             connectedWalletsInfo,
             eventsCallbacks,
             setWalletsToConnectByChain,
@@ -398,7 +399,6 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
             onConnectSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnectSuccess,
             onEmailVerificationFailure,
             onEmailVerificationSuccess,
-            onEmbeddedWalletCreated: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmbeddedWalletCreated,
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },
@@ -724,13 +724,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, { initialView: helpers.getInitialView({
-                                connectedWallets,
-                                isAuthenticated,
-                                isBridgeFlow,
-                                isFullyConnected,
-                                isMultiWalletEnabled: multiWallet,
-                            }), children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, { initialView: helpers.getInitialView({
+                                    connectedWallets,
+                                    isAuthenticated,
+                                    isBridgeFlow,
+                                    isFullyConnected,
+                                    isMultiWalletEnabled: multiWallet,
+                                }), children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 
 exports.DynamicContext = DynamicContext;

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

@@ -198,8 +198,9 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         clearPrimaryWalletId,
         enableVisitTrackingOnConnectOnly,
         environmentId,
+        isBridgeFlow,
         onBeforeConnectSuccessConfirmation: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onBeforeConnectSuccessConfirmation,
-        onUnlink: (wallet, connectedWalletsInfo) => handleDisconnectWallet({
+        onUnlink: (connectedWalletsInfo, wallet) => handleDisconnectWallet({
             connectedWalletsInfo,
             eventsCallbacks,
             setWalletsToConnectByChain,
@@ -394,7 +395,6 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             onConnectSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnectSuccess,
             onEmailVerificationFailure,
             onEmailVerificationSuccess,
-            onEmbeddedWalletCreated: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmbeddedWalletCreated,
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },
@@ -720,13 +720,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, { initialView: getInitialView({
-                                connectedWallets,
-                                isAuthenticated,
-                                isBridgeFlow,
-                                isFullyConnected,
-                                isMultiWalletEnabled: multiWallet,
-                            }), children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { canSync: didConnectedStateLoad, children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsxs(UserFieldEditorContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), jsx(SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(ViewContextProvider, { initialView: getInitialView({
+                                    connectedWallets,
+                                    isAuthenticated,
+                                    isBridgeFlow,
+                                    isFullyConnected,
+                                    isMultiWalletEnabled: multiWallet,
+                                }), children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { canSync: didConnectedStateLoad, children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsxs(UserFieldEditorContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), jsx(SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 
 export { DynamicContext, DynamicContextProvider, PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID };

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

@@ -21,6 +21,19 @@ const handleDisconnectWallet = ({ wallet, connectedWalletsInfo, walletsByChain,
     var _a;
     const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
     setWalletsToConnectByChain(missingChains);
+    // there might not be a wallet to disconnect because
+    // the connectedWallets state may never have been initialized.
+    // this is because we asyncronously init the connectedWallets,
+    // and as part of the async init we fetch the address and network.
+    // if either of these fails, we consider the wallet disconnected,
+    // and call this function.
+    //
+    // ideally, we would syncronously populate connectedWallets
+    // based off the connectedWalletsInfo, and then async update it
+    // with the network and address from the wallet
+    if (!wallet) {
+        return;
+    }
     try {
         (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, {
             walletConnector: wallet.connector,

package/src/lib/context/DynamicContext/handleDisconnectWallet/handleDisconnectWallet.d.ts

@@ -3,7 +3,7 @@ import { DynamicEventsCallbacks, Wallet } from '../../../shared';
 import { ConnectedWalletConnectorType } from '../../../utils/hooks/useConnectWallet/useConnectWallet';
 import { ChainsToConnect } from '../types';
 type HandleDisconnectWalletArgs = {
-    wallet: Wallet;
+    wallet?: Wallet;
     connectedWalletsInfo: ConnectedWalletConnectorType[];
     walletsByChain: ChainsToConnect[] | undefined;
     setWalletsToConnectByChain: Dispatch<SetStateAction<ChainsToConnect[] | undefined>>;

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

@@ -17,6 +17,19 @@ const handleDisconnectWallet = ({ wallet, connectedWalletsInfo, walletsByChain,
     var _a;
     const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
     setWalletsToConnectByChain(missingChains);
+    // there might not be a wallet to disconnect because
+    // the connectedWallets state may never have been initialized.
+    // this is because we asyncronously init the connectedWallets,
+    // and as part of the async init we fetch the address and network.
+    // if either of these fails, we consider the wallet disconnected,
+    // and call this function.
+    //
+    // ideally, we would syncronously populate connectedWallets
+    // based off the connectedWalletsInfo, and then async update it
+    // with the network and address from the wallet
+    if (!wallet) {
+        return;
+    }
     try {
         (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onDisconnect) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, {
             walletConnector: wallet.connector,

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -62,7 +62,7 @@ require('../UserFieldEditorContext/UserFieldEditorContext.cjs');
 const SocialRedirectContext = React.createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
@@ -82,7 +82,10 @@ const SocialRedirectContextProvider = ({ children, }) => {
         .find(walletConnectorCore.isSocialWalletConnector);
     const [redirectStatus, setRedirectStatus] = React.useState('idle');
     const [socialProvider, setSocialProvider] = React.useState();
-    const wallet = secondaryWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
+    const userWallets = primaryWallet
+        ? [primaryWallet, ...secondaryWallets]
+        : secondaryWallets;
+    const wallet = userWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
     const socialAccount = React.useMemo(() => (wallet ? getReferencedAccount.getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
     const handleError = React.useCallback((message) => {
         logger.logger.error(message);
@@ -143,12 +146,32 @@ const SocialRedirectContextProvider = ({ children, }) => {
                     if (!socialAccount) {
                         throw new Error('Social account not found');
                     }
+                    /**
+                     * consider google: a user may have multiple google accounts.
+                     * we need to make sure they connected with the same google account
+                     * that they originally used to authenticate
+                     *
+                     * there are two known scenarios that we enter this branch:
+                     * 1. the user is reconnected a social wallet:
+                     *   a. the user signed in with social
+                     *   b. the user then linked another wallet (for ex: metamask)
+                     *   c. the user signed out
+                     *   d. the user signed in with metamask
+                     *   e. the user selects their social wallet as their primary wallet
+                     *   f. we need to reconnect the social wallet and put the user in the social oauth redirect flow
+                     *
+                     * 2. for an unknown reason, the magic search params get put back into the url and this component rerenders,
+                     *    causing us to think the user is reconnecting.
+                     *    see: https://dynamiclabsgroup.slack.com/archives/C0473MNEP0T/p1697503460754999
+                     */
                     if (socialAccount.oauthAccountId === session.oauthId) {
-                        // justification: socialAccount is defined if and only if wallet is also defined
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        setPrimaryWalletId(wallet.id);
-                        setShowAuthFlow(false);
-                        setShowDynamicUserProfile(true);
+                        if ((wallet === null || wallet === void 0 ? void 0 : wallet.id) !== (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id)) {
+                            // justification: socialAccount is defined if and only if wallet is also defined
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            setPrimaryWalletId(wallet.id);
+                            setShowAuthFlow(false);
+                            setShowDynamicUserProfile(true);
+                        }
                     }
                     else {
                         yield socialWalletConnector.endSession();
@@ -200,6 +223,7 @@ const SocialRedirectContextProvider = ({ children, }) => {
         wallet,
         handleError,
         connectWallet,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
     ]);
     return (jsxRuntime.jsx(SocialRedirectContext.Provider, { value: {
             enabledSocialProviders,

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -58,7 +58,7 @@ import '../UserFieldEditorContext/UserFieldEditorContext.js';
 const SocialRedirectContext = createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, } = useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, } = useInternalDynamicContext();
     const { setErrorMessage } = useErrorContext();
     const { setView } = useViewContext();
     const verifyWallet = useVerifyWallet({
@@ -78,7 +78,10 @@ const SocialRedirectContextProvider = ({ children, }) => {
         .find(isSocialWalletConnector);
     const [redirectStatus, setRedirectStatus] = useState('idle');
     const [socialProvider, setSocialProvider] = useState();
-    const wallet = secondaryWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
+    const userWallets = primaryWallet
+        ? [primaryWallet, ...secondaryWallets]
+        : secondaryWallets;
+    const wallet = userWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
     const socialAccount = useMemo(() => (wallet ? getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
     const handleError = useCallback((message) => {
         logger.error(message);
@@ -139,12 +142,32 @@ const SocialRedirectContextProvider = ({ children, }) => {
                     if (!socialAccount) {
                         throw new Error('Social account not found');
                     }
+                    /**
+                     * consider google: a user may have multiple google accounts.
+                     * we need to make sure they connected with the same google account
+                     * that they originally used to authenticate
+                     *
+                     * there are two known scenarios that we enter this branch:
+                     * 1. the user is reconnected a social wallet:
+                     *   a. the user signed in with social
+                     *   b. the user then linked another wallet (for ex: metamask)
+                     *   c. the user signed out
+                     *   d. the user signed in with metamask
+                     *   e. the user selects their social wallet as their primary wallet
+                     *   f. we need to reconnect the social wallet and put the user in the social oauth redirect flow
+                     *
+                     * 2. for an unknown reason, the magic search params get put back into the url and this component rerenders,
+                     *    causing us to think the user is reconnecting.
+                     *    see: https://dynamiclabsgroup.slack.com/archives/C0473MNEP0T/p1697503460754999
+                     */
                     if (socialAccount.oauthAccountId === session.oauthId) {
-                        // justification: socialAccount is defined if and only if wallet is also defined
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        setPrimaryWalletId(wallet.id);
-                        setShowAuthFlow(false);
-                        setShowDynamicUserProfile(true);
+                        if ((wallet === null || wallet === void 0 ? void 0 : wallet.id) !== (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id)) {
+                            // justification: socialAccount is defined if and only if wallet is also defined
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            setPrimaryWalletId(wallet.id);
+                            setShowAuthFlow(false);
+                            setShowDynamicUserProfile(true);
+                        }
                     }
                     else {
                         yield socialWalletConnector.endSession();
@@ -196,6 +219,7 @@ const SocialRedirectContextProvider = ({ children, }) => {
         wallet,
         handleError,
         connectWallet,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
     ]);
     return (jsx(SocialRedirectContext.Provider, { value: {
             enabledSocialProviders,

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

@@ -35,6 +35,7 @@ var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.
 var index = require('../../context/FooterAnimationContext/index.cjs');
 var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var useDynamicLayoutData = require('../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs');
+var DynamicFooter = require('../../components/DynamicFooter/DynamicFooter.cjs');
 var header = require('./Header/header.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 var HelpContent = require('./HelpContent/HelpContent.cjs');
@@ -75,7 +76,8 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
         view,
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
-    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    const { showDynamicFooter } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
+    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsxRuntime.jsx(DynamicFooter.DynamicFooter, {}), showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 exports.DynamicAuthLayout = DynamicAuthLayout;

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

@@ -31,6 +31,7 @@ import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarge
 import { useFooterAnimationContext } from '../../context/FooterAnimationContext/index.js';
 import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { useDynamicLayoutData } from '../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js';
+import { DynamicFooter } from '../../components/DynamicFooter/DynamicFooter.js';
 import { Header } from './Header/header.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import { HelpContent } from './HelpContent/HelpContent.js';
@@ -71,7 +72,8 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
         view,
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks(walletConnector);
-    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    const { showDynamicFooter } = useAuthLayoutChecks(walletConnector);
+    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsx(DynamicFooter, {}), showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 export { DynamicAuthLayout };

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

@@ -10,8 +10,8 @@ require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var arrowLeft = require('../../../shared/assets/arrow-left.cjs');
 var close = require('../../../shared/assets/close.cjs');
-var chevronLeft = require('../../../shared/assets/chevron-left.cjs');
 var footerInfoIcon = require('../../../shared/assets/footer-info-icon.cjs');
 var questionMark = require('../../../shared/assets/question-mark.cjs');
 require('@dynamic-labs/wallet-book');
@@ -70,8 +70,8 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const { setError } = ErrorContext.useErrorContext();
     const { setShowQrCodeImage } = QrCodeContext.useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
-    const { view, goToInitialView } = ViewContext.useViewContext();
-    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
+    const { goToInitialView } = ViewContext.useViewContext();
+    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const handleBackClick = React.useCallback(() => {
         goToInitialView();
@@ -93,28 +93,15 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         if (showBackButton) {
             buttons = [
                 ...buttons,
-                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }, 'back-button'),
-            ];
-        }
-        if (showHelpContent) {
-            buttons = [
-                ...buttons,
-                jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'),
+                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'),
             ];
         }
         return buttons;
-    }, [
-        handleBackClick,
-        isFooterExpanded,
-        isWalletListTypeView,
-        setIsFooterExpanded,
-        showBackButton,
-        showHelpContent,
-    ]);
+    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    const infoButton = showHelpContent && (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));
     const qrCodePreHeader = (jsxRuntime.jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsxRuntime.jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    const positionAbsolute = view === 'login-with-email-verification';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 exports.Header = Header;

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

@@ -6,8 +6,8 @@ import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgArrowLeft } from '../../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgClose } from '../../../shared/assets/close.js';
-import { ReactComponent as SvgChevronLeft } from '../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgQuestionMark } from '../../../shared/assets/question-mark.js';
 import '@dynamic-labs/wallet-book';
@@ -66,8 +66,8 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const { setError } = useErrorContext();
     const { setShowQrCodeImage } = useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
-    const { view, goToInitialView } = useViewContext();
-    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, } = useAuthLayoutChecks(walletConnector);
+    const { goToInitialView } = useViewContext();
+    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks(walletConnector);
     const { setExistentAccountData } = useAccountExistsContext();
     const handleBackClick = useCallback(() => {
         goToInitialView();
@@ -89,28 +89,15 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         if (showBackButton) {
             buttons = [
                 ...buttons,
-                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgChevronLeft, {}) }, 'back-button'),
-            ];
-        }
-        if (showHelpContent) {
-            buttons = [
-                ...buttons,
-                jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'),
+                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'),
             ];
         }
         return buttons;
-    }, [
-        handleBackClick,
-        isFooterExpanded,
-        isWalletListTypeView,
-        setIsFooterExpanded,
-        showBackButton,
-        showHelpContent,
-    ]);
+    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsx(IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsx(SvgClose, {}) }));
+    const infoButton = showHelpContent && (jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));
     const qrCodePreHeader = (jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsx(Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    const positionAbsolute = view === 'login-with-email-verification';
-    return (jsxs(Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsx(ModalHeader, { leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 export { Header };