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

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

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import { useViewContext } from '../../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import '../../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import { getProviderEnumForSocialSignInProvider } from '../../../../../utils/functions/getProviderEnumForSocialSignInProvider/getProviderEnumForSocialSignInProvider.js';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../CollectUserDataView/fieldsConfig.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import { useSocialAuth } from '../../../../../utils/hooks/useSocialAuth/useSocialAuth.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
+import { useSocialRedirectContext } from '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+
+const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { setSocialProvider, socialProvider, enabledSocialProviders } = useSocialRedirectContext();
+    const { setView, goToInitialView } = useViewContext();
+    const { isProcessing, connectSocialAccount } = useSocialAuth({
+        authMode: 'signin',
+        onError: () => {
+            goToInitialView();
+        },
+        onSettled: () => {
+            setSocialProvider(undefined);
+        },
+        sessionTimeout: 10000,
+    });
+    const onSelectProvider = (provider) => {
+        const providerEnum = getProviderEnumForSocialSignInProvider(provider);
+        setSocialProvider(provider);
+        setView('social-redirect-view');
+        setShowAuthFlow(true);
+        connectSocialAccount(providerEnum);
+    };
+    return (jsx(SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+};
+
+export { DynamicSocialSignIn };

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

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

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

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
+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');
+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');
+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');
+var useMutation = require('../../../../../utils/hooks/useMutation/useMutation.cjs');
+require('@dynamic-labs/types');
+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 MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+    const { socialProvidersFilter = (providers) => providers } = useInternalDynamicContext.useInternalDynamicContext();
+    const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = SocialRedirectContext.useSocialRedirectContext();
+    const socialProviders = socialProvidersFilter(enabledSocialProviders);
+    const { mutate: onClickProvider, isLoading } = useMutation.useMutation((provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setSocialProvider(provider);
+        yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
+        return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+    }));
+    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+};
+
+exports.MagicSocialSignIn = MagicSocialSignIn;

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

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

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.js

@@ -0,0 +1,61 @@
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import '../../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../CollectUserDataView/fieldsConfig.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useMutation } from '../../../../../utils/hooks/useMutation/useMutation.js';
+import '@dynamic-labs/types';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
+import { useSocialRedirectContext } from '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+
+const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+    const { socialProvidersFilter = (providers) => providers } = useInternalDynamicContext();
+    const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = useSocialRedirectContext();
+    const socialProviders = socialProvidersFilter(enabledSocialProviders);
+    const { mutate: onClickProvider, isLoading } = useMutation((provider) => __awaiter(void 0, void 0, void 0, function* () {
+        setSocialProvider(provider);
+        yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
+        return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+    }));
+    return (jsx(SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+};
+
+export { MagicSocialSignIn };

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/index.d.ts

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

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

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdkApi = require('@dynamic-labs/sdk-api');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+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');
+require('@dynamic-labs/multi-wallet');
+var isProviderEnabled = require('../../../../utils/functions/isProviderEnabled/isProviderEnabled.cjs');
+var getSocialSignInProviderFromString = require('../../../../utils/functions/getSocialSignInProviderFromString/getSocialSignInProviderFromString.cjs');
+var MagicSocialSignIn = require('./MagicSocialSignIn/MagicSocialSignIn.cjs');
+var DynamicSocialSignIn = require('./DynamicSocialSignIn/DynamicSocialSignIn.cjs');
+
+const SocialSignInSection = ({ sectionData }) => {
+    var _a, _b, _c;
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
+    const componentProps = {
+        defaultProvider: getSocialSignInProviderFromString.getSocialSignInProviderFromString(sectionData.defaultItem),
+        numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
+    };
+    const isMagicEnabled = isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.MagicLink);
+    const isDynamicEnabled = isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.Dynamic) ||
+        isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.EmailOnly);
+    if (isMagicEnabled &&
+        ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _b === void 0 ? void 0 : _b.signInProvider) ===
+            sdkApi.SignInProviderEnum.MagicLink) {
+        return jsxRuntime.jsx(MagicSocialSignIn.MagicSocialSignIn, Object.assign({}, componentProps));
+    }
+    if (isDynamicEnabled &&
+        ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _c === void 0 ? void 0 : _c.signInProvider) ===
+            sdkApi.SignInProviderEnum.Dynamic) {
+        return jsxRuntime.jsx(DynamicSocialSignIn.DynamicSocialSignIn, Object.assign({}, componentProps));
+    }
+    return null;
+};
+
+exports.SocialSignInSection = SocialSignInSection;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SdkViewSection } from '@dynamic-labs/sdk-api';
+type Props = {
+    sectionData: SdkViewSection;
+};
+export declare const SocialSignInSection: ({ sectionData }: Props) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { ProviderEnum, SignInProviderEnum } from '@dynamic-labs/sdk-api';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { isProviderEnabled } from '../../../../utils/functions/isProviderEnabled/isProviderEnabled.js';
+import { getSocialSignInProviderFromString } from '../../../../utils/functions/getSocialSignInProviderFromString/getSocialSignInProviderFromString.js';
+import { MagicSocialSignIn } from './MagicSocialSignIn/MagicSocialSignIn.js';
+import { DynamicSocialSignIn } from './DynamicSocialSignIn/DynamicSocialSignIn.js';
+
+const SocialSignInSection = ({ sectionData }) => {
+    var _a, _b, _c;
+    const { projectSettings } = useInternalDynamicContext();
+    const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
+    const componentProps = {
+        defaultProvider: getSocialSignInProviderFromString(sectionData.defaultItem),
+        numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
+    };
+    const isMagicEnabled = isProviderEnabled(providers, ProviderEnum.MagicLink);
+    const isDynamicEnabled = isProviderEnabled(providers, ProviderEnum.Dynamic) ||
+        isProviderEnabled(providers, ProviderEnum.EmailOnly);
+    if (isMagicEnabled &&
+        ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _b === void 0 ? void 0 : _b.signInProvider) ===
+            SignInProviderEnum.MagicLink) {
+        return jsx(MagicSocialSignIn, Object.assign({}, componentProps));
+    }
+    if (isDynamicEnabled &&
+        ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _c === void 0 ? void 0 : _c.signInProvider) ===
+            SignInProviderEnum.Dynamic) {
+        return jsx(DynamicSocialSignIn, Object.assign({}, componentProps));
+    }
+    return null;
+};
+
+export { SocialSignInSection };

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

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

package/src/lib/views/LoginView/{components/WalletSignIn → sections/WalletSignInSection}/ListItemButton/ListItemButton.cjs

@@ -49,6 +49,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 Badge = require('../../../../../components/Badge/Badge.cjs');
 
 const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) => {

package/src/lib/views/LoginView/{components/WalletSignIn → sections/WalletSignInSection}/ListItemButton/ListItemButton.js

@@ -45,6 +45,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 { Badge } from '../../../../../components/Badge/Badge.js';
 
 const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) => {

package/src/lib/views/LoginView/{components/WalletSignIn/WalletSignIn.cjs → sections/WalletSignInSection/WalletSignInSection.cjs}

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
@@ -31,7 +33,6 @@ require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
-var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('formik');
 require('yup');
@@ -42,12 +43,17 @@ require('../../../../context/EmailVerificationContext/EmailVerificationContext.c
 require('@dynamic-labs/types');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var IconListTile = require('../../../../components/IconListTile/IconListTile.cjs');
 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 WalletSimpleSignIn = require('./WalletSimpleSignIn/WalletSimpleSignIn.cjs');
 
-const WalletSignIn = ({ numberOfItensToShow, isLoading, onSubmit, }) => numberOfItensToShow > 0 ? (jsxRuntime.jsx(WalletSimpleSignIn.WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { children: "Connect with Wallet" })));
+const WalletSignInSection = ({ numberOfItensToShow, isLoading, onSubmit, }) => {
+    const { t } = reactI18next.useTranslation();
+    return numberOfItensToShow > 0 ? (jsxRuntime.jsx(WalletSimpleSignIn.WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading, className: 'connect-with-wallet-button' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: t('dyn_login.wallet_list.button_only') })) })));
+};
 
-exports.WalletSignIn = WalletSignIn;
+exports.WalletSignInSection = WalletSignInSection;

package/src/lib/views/LoginView/{components/WalletSignIn/WalletSignIn.d.ts → sections/WalletSignInSection/WalletSignInSection.d.ts}

@@ -3,5 +3,5 @@ import { LoginWidgetProps } from '../LoginWidget';
 interface WalletLoginProps extends LoginWidgetProps {
     numberOfItensToShow: number;
 }
-export declare const WalletSignIn: React.FC<WalletLoginProps>;
+export declare const WalletSignInSection: React.FC<WalletLoginProps>;
 export {};

package/src/lib/views/LoginView/{components/WalletSignIn/WalletSignIn.js → sections/WalletSignInSection/WalletSignInSection.js}

@@ -1,5 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import 'react';
+import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -27,7 +29,6 @@ import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../components/IconButton/IconButton.js';
-import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/Alert/Alert.js';
 import 'formik';
 import 'yup';
@@ -38,12 +39,17 @@ import '../../../../context/EmailVerificationContext/EmailVerificationContext.js
 import '@dynamic-labs/types';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { IconListTile } from '../../../../components/IconListTile/IconListTile.js';
 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 { WalletSimpleSignIn } from './WalletSimpleSignIn/WalletSimpleSignIn.js';
 
-const WalletSignIn = ({ numberOfItensToShow, isLoading, onSubmit, }) => numberOfItensToShow > 0 ? (jsx(WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsx(Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { children: "Connect with Wallet" })));
+const WalletSignInSection = ({ numberOfItensToShow, isLoading, onSubmit, }) => {
+    const { t } = useTranslation();
+    return numberOfItensToShow > 0 ? (jsx(WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsx(IconListTile, Object.assign({ onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading, className: 'connect-with-wallet-button' }, { children: jsx(Typography, Object.assign({ variant: 'button_primary' }, { children: t('dyn_login.wallet_list.button_only') })) })));
+};
 
-export { WalletSignIn };
+export { WalletSignInSection };

package/src/lib/views/LoginView/{components/WalletSignIn → sections/WalletSignInSection}/WalletSimpleSignIn/WalletSimpleSignIn.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
 var Skeleton = require('../../../../../components/Skeleton/Skeleton.cjs');
 var useInternalDynamicContext = require('../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -23,6 +24,7 @@ var ListItemButton = require('../ListItemButton/ListItemButton.cjs');
 var walletListBuilder = require('../../../../../utils/functions/walletListBuilder/walletListBuilder.cjs');
 
 const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllWallets, }) => {
+    const { t } = reactI18next.useTranslation();
     const { wallets, projectSettings, walletsFilter, signWithEmailWalletName } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
@@ -41,7 +43,7 @@ const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllW
     return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: previewWalletsNumber + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container', "data-testid": 'top-wallets-list' }, { children: [walletsList.map((wallet) => {
                 var _a;
                 return (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, disabled: disabled }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
-            }), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
+            }), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: t('dyn_wallet_list.view_all'), onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
 };
 
 exports.WalletSimpleSignIn = WalletSimpleSignIn;

package/src/lib/views/LoginView/{components/WalletSignIn → sections/WalletSignInSection}/WalletSimpleSignIn/WalletSimpleSignIn.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { useWalletBookContext } from '@dynamic-labs/wallet-book';
 import { Skeleton } from '../../../../../components/Skeleton/Skeleton.js';
 import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
@@ -19,6 +20,7 @@ import { ListItemButton } from '../ListItemButton/ListItemButton.js';
 import { walletListBuilder } from '../../../../../utils/functions/walletListBuilder/walletListBuilder.js';
 
 const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllWallets, }) => {
+    const { t } = useTranslation();
     const { wallets, projectSettings, walletsFilter, signWithEmailWalletName } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const { numberOfWallets, walletsList } = walletListBuilder({
@@ -37,7 +39,7 @@ const WalletSimpleSignIn = ({ previewWalletsNumber, disabled = false, onshowAllW
     return !projectSettings ? (jsx(Skeleton, { count: previewWalletsNumber + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container', "data-testid": 'top-wallets-list' }, { children: [walletsList.map((wallet) => {
                 var _a;
                 return (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, disabled: disabled }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
-            }), jsx(ListItemButton, { text: 'View all wallets', onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
+            }), jsx(ListItemButton, { text: t('dyn_wallet_list.view_all'), onClick: onshowAllWallets, numberOfWallets: numberOfWallets, disabled: disabled })] })));
 };
 
 export { WalletSimpleSignIn };

package/src/lib/views/LoginView/sections/WalletSignInSection/index.d.ts

@@ -0,0 +1 @@
+export { WalletSignInSection } from './WalletSignInSection';

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

@@ -0,0 +1,4 @@
+export * from './EmailSignInSection';
+export * from './LoginWidget';
+export * from './WalletSignInSection';
+export * from './SocialSignInSection';

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactI18next = require('react-i18next');
 var sdkApi = require('@dynamic-labs/sdk-api');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
     const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
     const isWalletOnly = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!projectSettings) {
@@ -37,17 +39,19 @@ const useLoginView = () => {
                 type: sdkApi.SdkViewSectionType.Email,
             },
         ];
-        const numOfProvidersToDisplay = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled).length;
-        if (numOfProvidersToDisplay) {
+        const enabledProviders = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled);
+        if (enabledProviders === null || enabledProviders === void 0 ? void 0 : enabledProviders.length) {
             loginViewSections.push({
-                numOfItemsToDisplay: numOfProvidersToDisplay,
+                numOfItemsToDisplay: 5,
                 type: sdkApi.SdkViewSectionType.Social,
             });
             if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
                 loginViewSections.splice(1, 0, {
-                    label: 'Or',
+                    label: t('dyn_login.separators.default'),
                     type: sdkApi.SdkViewSectionType.Separator,
                 });
+                loginViewSections[loginViewSections.length - 1].defaultItem =
+                    enabledProviders[0].provider;
             }
         }
         if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
@@ -77,10 +81,9 @@ const useLoginView = () => {
             !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
             return [];
         }
-        const label = loginItem === 'email' ? 'Or continue with a wallet' : 'Or continue with';
         return [
             {
-                label,
+                label: t('dyn_login.separators.default'),
                 type: sdkApi.SdkViewSectionType.Separator,
             },
         ];
@@ -96,7 +99,7 @@ const useLoginView = () => {
             if (loginItem === 'email' && ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _a === void 0 ? void 0 : _a.length)) {
                 loginViewSections = loginViewSections.concat(getEmailViewSectionDefinition(), 
                 // add separator if wallets defined
-                addSeparator(index, loginItem));
+                addSeparator(index));
             }
             if (loginItem === 'wallet' && (wallets === null || wallets === void 0 ? void 0 : wallets.length)) {
                 // if showWalletsButton is true, it should show "Connec with Wallet" button
@@ -110,7 +113,7 @@ const useLoginView = () => {
                     },
                 ], 
                 // add separator if email providers defined
-                addSeparator(index, loginItem));
+                addSeparator(index));
             }
         });
         return loginViewSections;