@dynamic-labs/sdk-react-core 2.0.0-alpha.3 → 2.0.0-alpha.4

package/src/lib/views/LoginView/useLoginView/getLoginViewStructure/getLoginViewStructure.d.ts

@@ -0,0 +1,28 @@
+import { SdkViewSection, SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+/** Allows us to define the specific order we want to show our login sections in */
+export type SectionRecipe = {
+    condition: boolean;
+    section: SdkViewSection;
+    /** Allows not showing a divisor before or after this section */
+    hideSeparator?: 'above' | 'below';
+};
+export type LoginViewStructureParams = {
+    showWallets: boolean;
+    showSocial: boolean;
+    showEmail: boolean;
+    showPhone: boolean;
+    /** Whether social appears right above or right below the email/phone section */
+    socialAboveEmail: boolean;
+    /** In web2, wallets come last, in web3, they come first */
+    web3Layout: boolean;
+    /** Whether to not display a divisor between email/phone and socials */
+    splitEmailAndSocial: boolean;
+    /** How many wallets to display in the wallet section. 0 still shows the section */
+    numOfWalletsToDisplay: number;
+    /** The default item to sue for social */
+    defaultSocialItem: SocialSignInProviderEnum;
+};
+/**
+ * Defines in which order each section shows, and under which conditions
+ */
+export declare const getLoginViewStructure: ({ socialAboveEmail, showWallets, web3Layout, numOfWalletsToDisplay, showEmail, showPhone, showSocial, splitEmailAndSocial, defaultSocialItem, }: LoginViewStructureParams) => SectionRecipe[];

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

@@ -0,0 +1,58 @@
+import { SdkViewSectionType } from '@dynamic-labs/sdk-api';
+
+const getWalletsSection = (numOfWalletsToDisplay) => ({
+    numOfItemsToDisplay: numOfWalletsToDisplay,
+    type: SdkViewSectionType.Wallet,
+});
+const getSocialsSection = (numOfSocialsToDisplay, defaultItem) => ({
+    defaultItem,
+    numOfItemsToDisplay: numOfSocialsToDisplay,
+    type: SdkViewSectionType.Social,
+});
+const getSimpleSection = (type) => ({ type });
+/**
+ * Defines in which order each section shows, and under which conditions
+ */
+const getLoginViewStructure = ({ socialAboveEmail, showWallets, web3Layout, numOfWalletsToDisplay, showEmail, showPhone, showSocial, splitEmailAndSocial, defaultSocialItem, }) => {
+    const joinEmailAndSocial = !splitEmailAndSocial && (showEmail || showPhone);
+    const defaultSocial = splitEmailAndSocial ? defaultSocialItem : undefined;
+    return [
+        // Web 3 layout wallets
+        {
+            condition: showWallets && web3Layout,
+            section: getWalletsSection(numOfWalletsToDisplay),
+        },
+        // Social before email
+        {
+            condition: showSocial && socialAboveEmail,
+            hideSeparator: joinEmailAndSocial ? 'below' : undefined,
+            section: getSocialsSection(5, defaultSocial),
+        },
+        // Email and/or phone
+        {
+            condition: showEmail && !showPhone,
+            section: getSimpleSection(SdkViewSectionType.Email),
+        },
+        {
+            condition: !showEmail && showPhone,
+            section: getSimpleSection(SdkViewSectionType.Phone),
+        },
+        {
+            condition: showEmail && showPhone,
+            section: getSimpleSection(SdkViewSectionType.EmailAndPhone),
+        },
+        // Social after email
+        {
+            condition: showSocial && !socialAboveEmail,
+            hideSeparator: joinEmailAndSocial ? 'above' : undefined,
+            section: getSocialsSection(5, defaultSocial),
+        },
+        // Web 2 layout wallets
+        {
+            condition: showWallets && !web3Layout,
+            section: getWalletsSection(numOfWalletsToDisplay),
+        },
+    ];
+};
+
+export { getLoginViewStructure };

package/src/lib/views/LoginView/useLoginView/getLoginViewStructure/index.d.ts

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

package/src/lib/views/LoginView/useLoginView/index.d.ts

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

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

@@ -0,0 +1,201 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactI18next = require('react-i18next');
+var sdkApi = require('@dynamic-labs/sdk-api');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../utils/constants/colors.cjs');
+require('../../../utils/constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('../../../../../_virtual/_tslib.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+var isPhoneNumberProviderEnabled = require('../../../utils/functions/isPhoneNumberProviderEnabled/isPhoneNumberProviderEnabled.cjs');
+var isEmailProviderEnabled = require('../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
+require('viem/chains');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/Input/Input.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('../../WalletList/WalletList.cjs');
+require('../../../context/WalletContext/WalletContext.cjs');
+require('formik');
+require('qrcode');
+require('@hcaptcha/react-hcaptcha');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+var SocialRedirectContext = require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('i18next');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('react-international-phone');
+require('../sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
+var getLoginViewStructure = require('./getLoginViewStructure/getLoginViewStructure.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useViewSettings = require('../../../utils/hooks/useViewSettings/useViewSettings.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+/* eslint-disable multiline-comment-style */
+const NUMBER_OF_WALLETS = 3;
+const useLoginView = () => {
+    const loginView = useViewSettings.useViewSettings(sdkApi.SdkViewType.Login);
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletConnectorOptions, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
+    const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
+    const hasSocialProvidersEnabled = Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length);
+    const hasEmailProviderEnabled = isEmailProviderEnabled.isEmailProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
+    /** Takes from wallets only those that can be selected in the wallet list by the user.
+     * Should filter out embedded wallets
+     * WHY: when we decide whether to show wallets or not, we need to know how many wallets
+     * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
+     * wallets and then display an empty wallet list (since turnkey doesn't render)
+     */
+    const selectableWallets = (walletsFilter
+        ? walletsFilter(walletConnectorOptions)
+        : walletConnectorOptions).filter(({ key }) => key !== 'turnkey');
+    const isWalletOnly = React.useMemo(() => {
+        var _a;
+        if (!projectSettings) {
+            return false;
+        }
+        // if both loginWithEmail AND hasSocialProvidersEnabled are false, it's wallet only
+        if (!loginWithEmail && !hasSocialProvidersEnabled) {
+            return true;
+        }
+        // backwards compatibility for those that didn't set up login view sections
+        if (!((_a = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _a === void 0 ? void 0 : _a.length)) {
+            return !hasEmailProviderEnabled && !hasSocialProvidersEnabled;
+        }
+        return (loginView.sections.length === 1 && loginView.sections[0].type === 'wallet');
+    }, [
+        loginView === null || loginView === void 0 ? void 0 : loginView.sections,
+        projectSettings,
+        loginWithEmail,
+        hasSocialProvidersEnabled,
+        hasEmailProviderEnabled,
+    ]);
+    // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
+    /**
+     * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
+     * @param sections
+     * @returns
+     */
+    const filterLoginViewSections = React.useCallback((sections) => {
+        var _a;
+        const hasEnabledNetwork = (chain) => { var _a; return (_a = chain.networks) === null || _a === void 0 ? void 0 : _a.some((network) => network.enabled); };
+        const hasEnabledChain = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains) === null || _a === void 0 ? void 0 : _a.some((chain) => chain.enabled && hasEnabledNetwork(chain));
+        if (!hasEnabledChain &&
+            sections.find((section) => section.type === 'wallet')) {
+            logger.logger.error('Failed to render WalletSignInSection - no chains enabled');
+        }
+        if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
+            return sections;
+        }
+        return sections.filter((section) => section.type !== 'wallet');
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
+    /**
+     * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
+     * and has backwards compatibility with project settings design.modal props
+     */
+    const loginViewSections = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        // If client provides the sections explicitly, we use their definitions
+        if ((_a = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _a === void 0 ? void 0 : _a.length) {
+            return filterLoginViewSections(loginView === null || loginView === void 0 ? void 0 : loginView.sections);
+        }
+        // If not, we build it using the default structure
+        const { splitEmailAndSocial = false, socialAboveEmail = false } = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) !== null && _b !== void 0 ? _b : {};
+        const sections = [];
+        const sectionRecipes = getLoginViewStructure.getLoginViewStructure({
+            defaultSocialItem: enabledSocialProviders[0],
+            numOfWalletsToDisplay: ((_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton)
+                ? 0
+                : NUMBER_OF_WALLETS,
+            showEmail: hasEmailProviderEnabled,
+            showPhone: isPhoneNumberProviderEnabled.isPhoneNumberProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers),
+            showSocial: Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length),
+            // is email only is set in the project settings when the "Email (Web2) only" is toggled on in the dashboard
+            showWallets: Boolean(selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) &&
+                !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
+            socialAboveEmail,
+            splitEmailAndSocial,
+            web3Layout: authorizationViewDisplayOrder === 'web3',
+        });
+        const separator = {
+            label: t('dyn_login.separators.default'),
+            type: sdkApi.SdkViewSectionType.Separator,
+        };
+        let skipSeparator = false;
+        for (const recipe of sectionRecipes) {
+            if (!recipe.condition)
+                continue;
+            // First we add the separator
+            if (sections.length > 0 &&
+                !skipSeparator &&
+                recipe.hideSeparator !== 'above')
+                sections.push(separator);
+            sections.push(recipe.section);
+            skipSeparator = recipe.hideSeparator === 'below';
+        }
+        return sections;
+    }, [
+        authorizationViewDisplayOrder,
+        enabledSocialProviders,
+        filterLoginViewSections,
+        hasEmailProviderEnabled,
+        loginView === null || loginView === void 0 ? void 0 : loginView.sections,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+        t,
+    ]);
+    return {
+        isWalletOnly,
+        loginViewSections,
+    };
+};
+
+exports.NUMBER_OF_WALLETS = NUMBER_OF_WALLETS;
+exports.useLoginView = useLoginView;

package/src/lib/views/LoginView/{useLoginView.d.ts → useLoginView/useLoginView.d.ts}

@@ -2,5 +2,5 @@ import { SdkViewSection } from '@dynamic-labs/sdk-api';
 export declare const NUMBER_OF_WALLETS = 3;
 export declare const useLoginView: () => {
     isWalletOnly: boolean;
-    logingViewSections: SdkViewSection[];
+    loginViewSections: SdkViewSection[];
 };

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

@@ -0,0 +1,196 @@
+import { useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SdkViewType, SdkViewSectionType } from '@dynamic-labs/sdk-api';
+import '../../../context/DynamicContext/DynamicContext.js';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../../utils/constants/colors.js';
+import '../../../utils/constants/values.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '@dynamic-labs/utils';
+import '../../../shared/consts/index.js';
+import '../../../events/dynamicEvents.js';
+import '../../../../../_virtual/_tslib.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import { isPhoneNumberProviderEnabled } from '../../../utils/functions/isPhoneNumberProviderEnabled/isPhoneNumberProviderEnabled.js';
+import { isEmailProviderEnabled } from '../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
+import 'viem/chains';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import '../../WalletList/WalletList.js';
+import '../../../context/WalletContext/WalletContext.js';
+import 'formik';
+import 'qrcode';
+import '@hcaptcha/react-hcaptcha';
+import '../../../context/LoadingContext/LoadingContext.js';
+import { useSocialRedirectContext } from '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'i18next';
+import '../../../context/FooterAnimationContext/index.js';
+import 'react-international-phone';
+import '../sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
+import { getLoginViewStructure } from './getLoginViewStructure/getLoginViewStructure.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useViewSettings } from '../../../utils/hooks/useViewSettings/useViewSettings.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+
+/* eslint-disable multiline-comment-style */
+const NUMBER_OF_WALLETS = 3;
+const useLoginView = () => {
+    const loginView = useViewSettings(SdkViewType.Login);
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletConnectorOptions, walletsFilter, } = useInternalDynamicContext();
+    const { t } = useTranslation();
+    const { enabledSocialProviders } = useSocialRedirectContext();
+    const hasSocialProvidersEnabled = Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length);
+    const hasEmailProviderEnabled = isEmailProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
+    /** Takes from wallets only those that can be selected in the wallet list by the user.
+     * Should filter out embedded wallets
+     * WHY: when we decide whether to show wallets or not, we need to know how many wallets
+     * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
+     * wallets and then display an empty wallet list (since turnkey doesn't render)
+     */
+    const selectableWallets = (walletsFilter
+        ? walletsFilter(walletConnectorOptions)
+        : walletConnectorOptions).filter(({ key }) => key !== 'turnkey');
+    const isWalletOnly = useMemo(() => {
+        var _a;
+        if (!projectSettings) {
+            return false;
+        }
+        // if both loginWithEmail AND hasSocialProvidersEnabled are false, it's wallet only
+        if (!loginWithEmail && !hasSocialProvidersEnabled) {
+            return true;
+        }
+        // backwards compatibility for those that didn't set up login view sections
+        if (!((_a = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _a === void 0 ? void 0 : _a.length)) {
+            return !hasEmailProviderEnabled && !hasSocialProvidersEnabled;
+        }
+        return (loginView.sections.length === 1 && loginView.sections[0].type === 'wallet');
+    }, [
+        loginView === null || loginView === void 0 ? void 0 : loginView.sections,
+        projectSettings,
+        loginWithEmail,
+        hasSocialProvidersEnabled,
+        hasEmailProviderEnabled,
+    ]);
+    // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
+    /**
+     * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
+     * @param sections
+     * @returns
+     */
+    const filterLoginViewSections = useCallback((sections) => {
+        var _a;
+        const hasEnabledNetwork = (chain) => { var _a; return (_a = chain.networks) === null || _a === void 0 ? void 0 : _a.some((network) => network.enabled); };
+        const hasEnabledChain = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains) === null || _a === void 0 ? void 0 : _a.some((chain) => chain.enabled && hasEnabledNetwork(chain));
+        if (!hasEnabledChain &&
+            sections.find((section) => section.type === 'wallet')) {
+            logger.error('Failed to render WalletSignInSection - no chains enabled');
+        }
+        if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
+            return sections;
+        }
+        return sections.filter((section) => section.type !== 'wallet');
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
+    /**
+     * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
+     * and has backwards compatibility with project settings design.modal props
+     */
+    const loginViewSections = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        // If client provides the sections explicitly, we use their definitions
+        if ((_a = loginView === null || loginView === void 0 ? void 0 : loginView.sections) === null || _a === void 0 ? void 0 : _a.length) {
+            return filterLoginViewSections(loginView === null || loginView === void 0 ? void 0 : loginView.sections);
+        }
+        // If not, we build it using the default structure
+        const { splitEmailAndSocial = false, socialAboveEmail = false } = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) !== null && _b !== void 0 ? _b : {};
+        const sections = [];
+        const sectionRecipes = getLoginViewStructure({
+            defaultSocialItem: enabledSocialProviders[0],
+            numOfWalletsToDisplay: ((_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton)
+                ? 0
+                : NUMBER_OF_WALLETS,
+            showEmail: hasEmailProviderEnabled,
+            showPhone: isPhoneNumberProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers),
+            showSocial: Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length),
+            // is email only is set in the project settings when the "Email (Web2) only" is toggled on in the dashboard
+            showWallets: Boolean(selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) &&
+                !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
+            socialAboveEmail,
+            splitEmailAndSocial,
+            web3Layout: authorizationViewDisplayOrder === 'web3',
+        });
+        const separator = {
+            label: t('dyn_login.separators.default'),
+            type: SdkViewSectionType.Separator,
+        };
+        let skipSeparator = false;
+        for (const recipe of sectionRecipes) {
+            if (!recipe.condition)
+                continue;
+            // First we add the separator
+            if (sections.length > 0 &&
+                !skipSeparator &&
+                recipe.hideSeparator !== 'above')
+                sections.push(separator);
+            sections.push(recipe.section);
+            skipSeparator = recipe.hideSeparator === 'below';
+        }
+        return sections;
+    }, [
+        authorizationViewDisplayOrder,
+        enabledSocialProviders,
+        filterLoginViewSections,
+        hasEmailProviderEnabled,
+        loginView === null || loginView === void 0 ? void 0 : loginView.sections,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+        t,
+    ]);
+    return {
+        isWalletOnly,
+        loginViewSections,
+    };
+};
+
+export { NUMBER_OF_WALLETS, useLoginView };

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.cjs

@@ -43,11 +43,11 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
@@ -55,28 +55,32 @@ require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidge
 require('react-focus-lock');
 require('../../context/LoadingContext/LoadingContext.cjs');
 var Icon = require('../../components/Icon/Icon.cjs');
+require('../../context/WalletContext/WalletContext.cjs');
 require('i18next');
+var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
 var Button = require('../../components/Button/Button.cjs');
-require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/Input/Input.cjs');
 require('../../components/IsBrowser/IsBrowser.cjs');
-require('../../components/MenuList/Dropdown/Dropdown.cjs');
-var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('react-international-phone');
+require('../LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.js

@@ -39,11 +39,11 @@ import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../components/ShadowDOM/ShadowDOM.js';
-import '../../components/OverlayCard/OverlayCard.context.js';
+import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
@@ -51,28 +51,32 @@ import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidget
 import 'react-focus-lock';
 import '../../context/LoadingContext/LoadingContext.js';
 import { Icon } from '../../components/Icon/Icon.js';
+import '../../context/WalletContext/WalletContext.js';
 import 'i18next';
+import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
 import { Button } from '../../components/Button/Button.js';
-import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/Input/Input.js';
 import '../../components/IsBrowser/IsBrowser.js';
-import '../../components/MenuList/Dropdown/Dropdown.js';
-import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import '../WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext();