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

package/src/lib/utils/hooks/useUserUpdateRequest/useUpdateUserWithModal/useUpdateUserWithModal.js

@@ -7,17 +7,19 @@ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { validateUpdateRequest } from './validateUpdateRequest/validateUpdateRequest.js';
 
 /** Saves the values updated by the user */
-const saveUserValues = ({ fields: newValues, updateUserResult: { isEmailVerificationRequired }, }, internalEvents, setShowAuthFlow, setView, resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+const saveUserValues = ({ fields: newValues, updateUserResult: { isEmailVerificationRequired }, }, internalEvents, internalSetShowAuthFlow, setView, resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
     // If no verification is needed, we are done
     if (!isEmailVerificationRequired) {
         resolve(newValues);
         return;
     }
     // Show email verification view
-    setShowAuthFlow(true);
+    internalSetShowAuthFlow(true);
     setView('verify-email');
     // Subscribe to email verification result
-    internalEvents.current.once('emailVerificationResult', (wasSuccessful) => {
+    internalEvents.current.once('emailVerificationResult', (wasSuccessful, newEmail) => {
+        // Make sure we're using the correct, updated email. User might have changed it mid-OTP
+        newValues.email = newEmail;
         wasSuccessful
             ? resolve(newValues)
             : reject('Failed to verify email, no fields were updated');
@@ -28,7 +30,7 @@ const saveUserValues = ({ fields: newValues, updateUserResult: { isEmailVerifica
  * The fields must have been previously enabled in the dashboard
  */
 const useUpdateUserWithModal = (updateUser) => {
-    const { user, projectSettings, setShowAuthFlow, internalEvents } = useInternalDynamicContext();
+    const { user, projectSettings, internalSetShowAuthFlow, internalEvents } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const editorContext = useContext(UserFieldEditorContext);
     if (!editorContext)
@@ -48,7 +50,7 @@ const useUpdateUserWithModal = (updateUser) => {
             subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             title: options === null || options === void 0 ? void 0 : options.title,
         }, updateUser)
-            .then((updateValues) => saveUserValues(updateValues, internalEvents, setShowAuthFlow, setView, resolve, reject))
+            .then((updateValues) => saveUserValues(updateValues, internalEvents, internalSetShowAuthFlow, setView, resolve, reject))
             .catch((error) => {
             if (/email already exists/gi.test(error))
                 throw error;
@@ -59,7 +61,7 @@ const useUpdateUserWithModal = (updateUser) => {
         projectSettings,
         promptUserForValues,
         updateUser,
-        setShowAuthFlow,
+        internalSetShowAuthFlow,
         setView,
         internalEvents,
     ]);

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.cjs

@@ -19,11 +19,6 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         /**
          * Initialize the event listeners for the wallet connectors
          * to ensure they were initialized before listening to events
-         *
-         * This will be removed when all wallets are migrated to
-         * use the event emitter "emit" method
-         *
-         * Ticket todo - QNTM-88
          */
         eventEmittersArray.forEach((connector) => connector.initEventListener());
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.js

@@ -15,11 +15,6 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         /**
          * Initialize the event listeners for the wallet connectors
          * to ensure they were initialized before listening to events
-         *
-         * This will be removed when all wallets are migrated to
-         * use the event emitter "emit" method
-         *
-         * Ticket todo - QNTM-88
          */
         eventEmittersArray.forEach((connector) => connector.initEventListener());
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.cjs

@@ -50,8 +50,6 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
      * initialize the bridge between the old event listeners and the new event emitter.
      * When the wallet connectors are migrated to the new event emitter, there will be no
      * need to initialize or teardown event listeners, then we can remove this useEffect.
-     * @todo remove this useEffect
-     * Ticket todo - QNTM-88
      */
     React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js

@@ -46,8 +46,6 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
      * initialize the bridge between the old event listeners and the new event emitter.
      * When the wallet connectors are migrated to the new event emitter, there will be no
      * need to initialize or teardown event listeners, then we can remove this useEffect.
-     * @todo remove this useEffect
-     * Ticket todo - QNTM-88
      */
     useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.cjs

@@ -131,6 +131,13 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
     }));
     useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
         logger.logger.debug('secondary wallet disconnect');
+        // argent sends a disconnect event when the user adds a new account
+        if (authMode === 'connect-only' &&
+            secondaryWallets.length &&
+            secondaryWallets[0].connector.key === 'argentx') {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
         computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.js

@@ -127,6 +127,13 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
     }));
     useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
         logger.debug('secondary wallet disconnect');
+        // argent sends a disconnect event when the user adds a new account
+        if (authMode === 'connect-only' &&
+            secondaryWallets.length &&
+            secondaryWallets[0].connector.key === 'argentx') {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
         computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.cjs

@@ -49,6 +49,7 @@ require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
     const confirmationStateRef = React.useRef('enabled');

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.js

@@ -45,6 +45,7 @@ import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.context.js';
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
     const confirmationStateRef = useRef('enabled');

package/src/lib/utils/hooks/useWallets/useWallets.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 var verifyMagicIsSetup = require('./utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = React.useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -14,6 +14,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             appLogoUrl,
             appName,
             customerApiProviders: projectSettings.providers || [],
+            deepLinkPreference,
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
@@ -26,6 +27,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             appLogoUrl,
             appName,
             customerApiProviders: projectSettings.providers || [],
+            deepLinkPreference,
             flowNetwork,
             networkConfigurations,
             skipMemo: true,

package/src/lib/utils/hooks/useWallets/useWallets.d.ts

@@ -1,10 +1,11 @@
 import { ProjectSettings } from '@dynamic-labs/sdk-api';
 import { NetworkConfigurationMap, WalletUiUtils } from '@dynamic-labs/types';
-import { WalletConnector, WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
+import { DeepLinkVariant, WalletConnector, WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
 import { WalletBookSchema } from '@dynamic-labs/wallet-book';
 type Props = {
     appLogoUrl?: string;
     appName?: string;
+    deepLinkPreference?: DeepLinkVariant;
     flowNetwork?: 'mainnet' | 'testnet';
     networkConfigurations: NetworkConfigurationMap | undefined;
     projectSettings: ProjectSettings | undefined;
@@ -13,7 +14,7 @@ type Props = {
     walletConnectorsProp?: WalletConnectorsMethod[];
     walletUiUtils: WalletUiUtils<WalletConnector>;
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: import("../../../shared").WalletOption[];
 };
 export {};

package/src/lib/utils/hooks/useWallets/useWallets.js

@@ -2,7 +2,7 @@ import { useMemo, useEffect } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
 import { verifyMagicIsSetup } from './utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -10,6 +10,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             appLogoUrl,
             appName,
             customerApiProviders: projectSettings.providers || [],
+            deepLinkPreference,
             flowNetwork,
             networkConfigurations,
             skipMemo: true,
@@ -22,6 +23,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             appLogoUrl,
             appName,
             customerApiProviders: projectSettings.providers || [],
+            deepLinkPreference,
             flowNetwork,
             networkConfigurations,
             skipMemo: true,

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

@@ -52,8 +52,9 @@ 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();

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

@@ -48,8 +48,9 @@ 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();

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, {}, `${viewSection.type}_${index}`);
             default:
-                return;
+                return null;
         }
     }), [logingViewSections, isLoading, setView]);
     if (showWalletList) {