@dynamic-labs/sdk-react-core 0.19.0-alpha.6 → 0.19.0-alpha.8

package/src/lib/views/AccountExistsView/AccountExistsView.cjs

@@ -19,6 +19,7 @@ require('ethers');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+var getSocialSignInProviderForProviderEnum = require('../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -52,16 +53,18 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var LoginEmailForm = require('../LoginView/components/EmailSignIn/LoginEmailForm.cjs');
+var LoginEmailForm = require('../LoginView/sections/EmailSignInSection/LoginEmailForm.cjs');
 
 const AccountExistsView = () => {
     const { existentAccountData } = AccountExistsContext.useAccountExistsContext();
     const { email, embeddedSocialSigninProvider } = existentAccountData || {};
+    const existingSocialSignInProvider = getSocialSignInProviderForProviderEnum.getSocialSignInProviderForProviderEnum(embeddedSocialSigninProvider);
     const { socialProvider, setSocialProvider, socialWalletConnector } = SocialRedirectContext.useSocialRedirectContext();
     const findSocialIcon = useFindSocialIcon.useFindSocialIcon();
     const { mutate: handleNewLoging } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setSocialProvider(embeddedSocialSigninProvider);
+        setSocialProvider(existingSocialSignInProvider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(embeddedSocialSigninProvider);
     }));
@@ -71,7 +74,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["It looks like an account already exists using ", jsxRuntime.jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === existingSocialSignInProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 exports.AccountExistsView = AccountExistsView;

package/src/lib/views/AccountExistsView/AccountExistsView.js

@@ -15,6 +15,7 @@ import 'ethers';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import { getSocialSignInProviderForProviderEnum } from '../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -48,16 +49,18 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { LoginEmailForm } from '../LoginView/components/EmailSignIn/LoginEmailForm.js';
+import { LoginEmailForm } from '../LoginView/sections/EmailSignInSection/LoginEmailForm.js';
 
 const AccountExistsView = () => {
     const { existentAccountData } = useAccountExistsContext();
     const { email, embeddedSocialSigninProvider } = existentAccountData || {};
+    const existingSocialSignInProvider = getSocialSignInProviderForProviderEnum(embeddedSocialSigninProvider);
     const { socialProvider, setSocialProvider, socialWalletConnector } = useSocialRedirectContext();
     const findSocialIcon = useFindSocialIcon();
     const { mutate: handleNewLoging } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
-        setSocialProvider(embeddedSocialSigninProvider);
+        setSocialProvider(existingSocialSignInProvider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(embeddedSocialSigninProvider);
     }));
@@ -67,7 +70,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxs(Fragment, { children: ["It looks like an account already exists using ", jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === existingSocialSignInProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 export { AccountExistsView };

package/src/lib/views/BridgeSummaryView/BridgeSummaryView.cjs

@@ -34,7 +34,7 @@ const BridgeSummaryView = () => {
     const createPrimaryWalletCard = (wallet) => {
         const PrimaryWalletChainIcon = getChainIcon.getChainIcon(wallet.chain);
         const primaryWalletChainInfo = walletConnectorCore.getChainInfo(wallet.chain);
-        return (jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletName: wallet.connector.name, walletAddress: wallet.address, walletBalance: 
+        return (jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletKey: wallet.connector.key, walletAddress: wallet.address, walletBalance: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxRuntime.jsx(Balance.Balance, { address: wallet.address, connector: wallet.connector, network: wallet.chain }) }) })));
     };

package/src/lib/views/BridgeSummaryView/BridgeSummaryView.js

@@ -30,7 +30,7 @@ const BridgeSummaryView = () => {
     const createPrimaryWalletCard = (wallet) => {
         const PrimaryWalletChainIcon = getChainIcon(wallet.chain);
         const primaryWalletChainInfo = getChainInfo(wallet.chain);
-        return (jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: wallet.connector.name, walletAddress: wallet.address, walletBalance: 
+        return (jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletKey: wallet.connector.key, walletAddress: wallet.address, walletBalance: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsx(Balance, { address: wallet.address, connector: wallet.connector, network: wallet.chain }) }) })));
     };

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.cjs

@@ -48,6 +48,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var Captcha = require('../../components/Captcha/Captcha.cjs');
 
 const CaptchaVerifyUser = () => {

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.js

@@ -44,6 +44,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { Captcha } from '../../components/Captcha/Captcha.js';
 
 const CaptchaVerifyUser = () => {

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

@@ -50,6 +50,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');
 var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var useFetchNameService = require('../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');

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

@@ -46,6 +46,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
 import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { useFetchNameService } from '../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';

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

@@ -50,9 +50,10 @@ require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, internalSetShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView, view } = ViewContext.useViewContext();
     const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
@@ -71,9 +72,9 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
             setView(view);
             return;
         }
-        setShowAuthFlow(false);
+        internalSetShowAuthFlow(false);
         setCallback('authSuccess');
-    }), [setCallback, setShowAuthFlow, setView, updateUser]);
+    }), [setCallback, internalSetShowAuthFlow, setView, updateUser]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm.useUserDataForm({
         fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
         onSubmit,

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

@@ -46,9 +46,10 @@ import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.context.js';
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, internalSetShowAuthFlow, setCallback, } = useInternalDynamicContext();
     const { setView, view } = useViewContext();
     const decodedJwt = decodeJwt(onboardingOnlyJwt);
     const { updateUser } = useUserUpdateRequestInternal({
@@ -67,9 +68,9 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
             setView(view);
             return;
         }
-        setShowAuthFlow(false);
+        internalSetShowAuthFlow(false);
         setCallback('authSuccess');
-    }), [setCallback, setShowAuthFlow, setView, updateUser]);
+    }), [setCallback, internalSetShowAuthFlow, setView, updateUser]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm({
         fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],
         onSubmit,

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

@@ -52,6 +52,7 @@ require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
         const { label, type } = index.getValueByKey(fieldsConfig.fieldsConfig, name);

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

@@ -48,6 +48,7 @@ import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.context.js';
 
 const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required, enabled }) => {
         const { label, type } = getValueByKey(fieldsConfig, name);

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

@@ -48,6 +48,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var OnboardingUserDataForm = require('../CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs');
 
 const CollectUserDataViewLoginWithEmail = () => {

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

@@ -44,6 +44,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { OnboardingUserDataForm } from '../CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js';
 
 const CollectUserDataViewLoginWithEmail = () => {

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

@@ -51,6 +51,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 
 const EmailConfirmationWaitingView = () => {
     const { setView } = ViewContext.useViewContext();

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

@@ -47,6 +47,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 
 const EmailConfirmationWaitingView = () => {
     const { setView } = useViewContext();

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

@@ -50,6 +50,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 
 const EmailUpdate = () => {

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

@@ -46,6 +46,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
 
 const EmailUpdate = () => {

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -5,15 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var iconic = require('@dynamic-labs/iconic');
 var utils = require('@dynamic-labs/utils');
 var Typography = require('../../components/Typography/Typography.cjs');
 var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var close = require('../../shared/assets/close.cjs');
 var check = require('../../shared/assets/check.cjs');
 var checkCircle = require('../../shared/assets/check-circle.cjs');
+var signInWithEmail = require('../../shared/assets/sign-in-with-email.cjs');
 var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
@@ -27,6 +28,7 @@ require('@dynamic-labs/sdk-api');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -64,6 +66,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 
@@ -259,9 +262,13 @@ const EmailVerification = () => {
         setView('update-email');
     };
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: close$1, type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: isValidated ? (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent }) }))) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: classNames.classNames({
+    const EmailIcon = React.useMemo(() => {
+        const EmailIcon = (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signInWithEmail.ReactComponent, Object.assign({}, props)) })));
+        return EmailIcon;
+    }, []);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: isValidated ? (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 50, InnerIcon: check.ReactComponent }) }))) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: classNames.classNames({
                         'email-verification__icon-with-spinner': Boolean(!error),
-                    }), Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: updateEmail, className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
+                    }), Icon: EmailIcon, iconSize: 80, isSpinning: true })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: updateEmail, className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
 };
 
 exports.EmailVerification = EmailVerification;

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

@@ -1,15 +1,16 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
-import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import { UserHasAccountWithEmailError, NoAccessError, AccountExistsError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgCheckCircle } from '../../shared/assets/check-circle.js';
+import { ReactComponent as SvgSignInWithEmail } from '../../shared/assets/sign-in-with-email.js';
 import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
@@ -23,6 +24,7 @@ import '@dynamic-labs/sdk-api';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { Icon } from '../../components/Icon/Icon.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -60,6 +62,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
 
@@ -255,9 +258,13 @@ const EmailVerification = () => {
         setView('update-email');
     };
     const closeButton = (jsx(IconButton, Object.assign({ onClick: close, type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
-    return (jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), jsx(ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: isValidated ? (jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck }) }))) : (jsx(IconWithSpinner, { className: classNames({
+    const EmailIcon = useMemo(() => {
+        const EmailIcon = (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignInWithEmail, Object.assign({}, props)) })));
+        return EmailIcon;
+    }, []);
+    return (jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), jsx(ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: isValidated ? (jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 50, InnerIcon: SvgCheck }) }))) : (jsx(IconWithSpinner, { className: classNames({
                         'email-verification__icon-with-spinner': Boolean(!error),
-                    }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: updateEmail, className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsx(PoweredByDynamic, {})] })));
+                    }), Icon: EmailIcon, iconSize: 80, isSpinning: true })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: updateEmail, className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsx(PoweredByDynamic, {})] })));
 };
 
 export { EmailVerification };

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

@@ -39,6 +39,7 @@ require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
 require('../CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -35,6 +35,7 @@ import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
 import '../CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/views/LoginView/LoginView.cjs

@@ -12,9 +12,9 @@ var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuth
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var WalletList = require('../WalletList/WalletList.cjs');
-var SocialSignIn = require('./components/SocialSignIn/SocialSignIn.cjs');
-var WalletSignIn = require('./components/WalletSignIn/WalletSignIn.cjs');
-var LoginEmailForm = require('./components/EmailSignIn/LoginEmailForm.cjs');
+var LoginEmailForm = require('./sections/EmailSignInSection/LoginEmailForm.cjs');
+var WalletSignInSection = require('./sections/WalletSignInSection/WalletSignInSection.cjs');
+var SocialSignInSection = require('./sections/SocialSignInSection/SocialSignInSection.cjs');
 var useLoginView = require('./useLoginView.cjs');
 
 const LoginView = () => {
@@ -49,14 +49,14 @@ const LoginView = () => {
             case 'email':
                 return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'wallet':
-                return (jsxRuntime.jsx(WalletSignIn.WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                return (jsxRuntime.jsx(WalletSignInSection.WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
                         setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'social':
-                return jsxRuntime.jsx(SocialSignIn.SocialSignIn, {}, `${viewSection.type}_${index}`);
+                return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { sectionData: viewSection }, `${viewSection.type}_${index}`));
             default:
-                return;
+                return null;
         }
     }), [logingViewSections, isLoading, setView]);
     if (showWalletList) {

package/src/lib/views/LoginView/LoginView.js

@@ -8,9 +8,9 @@ import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAu
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { WalletList } from '../WalletList/WalletList.js';
-import { SocialSignIn } from './components/SocialSignIn/SocialSignIn.js';
-import { WalletSignIn } from './components/WalletSignIn/WalletSignIn.js';
-import { LoginEmailForm } from './components/EmailSignIn/LoginEmailForm.js';
+import { LoginEmailForm } from './sections/EmailSignInSection/LoginEmailForm.js';
+import { WalletSignInSection } from './sections/WalletSignInSection/WalletSignInSection.js';
+import { SocialSignInSection } from './sections/SocialSignInSection/SocialSignInSection.js';
 import { useLoginView } from './useLoginView.js';
 
 const LoginView = () => {
@@ -45,14 +45,14 @@ const LoginView = () => {
             case 'email':
                 return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'wallet':
-                return (jsx(WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                return (jsx(WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
                         setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'social':
-                return jsx(SocialSignIn, {}, `${viewSection.type}_${index}`);
+                return (jsx(SocialSignInSection, { sectionData: viewSection }, `${viewSection.type}_${index}`));
             default:
-                return;
+                return null;
         }
     }), [logingViewSections, isLoading, setView]);
     if (showWalletList) {

package/src/lib/views/LoginView/{components/EmailSignIn → sections/EmailSignInSection}/LoginEmailForm.cjs

@@ -48,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

package/src/lib/views/LoginView/{components/EmailSignIn → sections/EmailSignInSection}/LoginEmailForm.js

@@ -44,6 +44,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEmailProvider.js';
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

package/src/lib/views/LoginView/sections/LoginWidget.d.ts

@@ -0,0 +1,10 @@
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+export interface LoginWidgetProps {
+    onSubmit?: () => void;
+    onSubmitError?: () => void;
+    isLoading: boolean;
+}
+export interface SocialSectionProps {
+    defaultProvider?: SocialSignInProviderEnum;
+    numOfItemsToDisplay?: number;
+}

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+var ViewContext = require('../../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../../utils/constants/colors.cjs');
+require('../../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+var getProviderEnumForSocialSignInProvider = require('../../../../../utils/functions/getProviderEnumForSocialSignInProvider/getProviderEnumForSocialSignInProvider.cjs');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+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');
+require('../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../../../CollectUserDataView/fieldsConfig.cjs');
+require('../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+var useSocialAuth = require('../../../../../utils/hooks/useSocialAuth/useSocialAuth.cjs');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.cjs');
+var SocialRedirectContext = require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+
+const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSocialProvider, socialProvider, enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
+    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { isProcessing, connectSocialAccount } = useSocialAuth.useSocialAuth({
+        authMode: 'signin',
+        onError: () => {
+            goToInitialView();
+        },
+        onSettled: () => {
+            setSocialProvider(undefined);
+        },
+        sessionTimeout: 10000,
+    });
+    const onSelectProvider = (provider) => {
+        const providerEnum = getProviderEnumForSocialSignInProvider.getProviderEnumForSocialSignInProvider(provider);
+        setSocialProvider(provider);
+        setView('social-redirect-view');
+        setShowAuthFlow(true);
+        connectSocialAccount(providerEnum);
+    };
+    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+};
+
+exports.DynamicSocialSignIn = DynamicSocialSignIn;

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SocialSectionProps } from '../../LoginWidget';
+export declare const DynamicSocialSignIn: React.FC<SocialSectionProps>;