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

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

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

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

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

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

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

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

@@ -0,0 +1,64 @@
+'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 = () => {
+    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* () {
+        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, { onClick: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, setSelectedProvider: setSocialProvider, isLoading: isLoading, testId: 'magic-social-sign-in' }));
+};
+
+exports.MagicSocialSignIn = MagicSocialSignIn;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MagicSocialSignIn: () => JSX.Element;

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

@@ -0,0 +1,60 @@
+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 = () => {
+    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* () {
+        yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
+        return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+    }));
+    return (jsx(SocialSignIn, { onClick: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, setSelectedProvider: setSocialProvider, isLoading: isLoading, testId: 'magic-social-sign-in' }));
+};
+
+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,35 @@
+'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 MagicSocialSignIn = require('./MagicSocialSignIn/MagicSocialSignIn.cjs');
+
+const SocialSignInSection = () => {
+    var _a, _b;
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const isMagicEnabled = isProviderEnabled.isProviderEnabled((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [], sdkApi.ProviderEnum.MagicLink);
+    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, {});
+    }
+    return null;
+};
+
+exports.SocialSignInSection = SocialSignInSection;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SocialSignInSection: () => JSX.Element | null;

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

@@ -0,0 +1,31 @@
+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 { MagicSocialSignIn } from './MagicSocialSignIn/MagicSocialSignIn.js';
+
+const SocialSignInSection = () => {
+    var _a, _b;
+    const { projectSettings } = useInternalDynamicContext();
+    const isMagicEnabled = isProviderEnabled((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [], ProviderEnum.MagicLink);
+    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, {});
+    }
+    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,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
@@ -46,8 +47,12 @@ 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(Button.Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { 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,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
@@ -42,8 +43,12 @@ 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(Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { 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) {
@@ -45,7 +47,7 @@ const useLoginView = () => {
             });
             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.email_or_social'),
                     type: sdkApi.SdkViewSectionType.Separator,
                 });
             }
@@ -77,7 +79,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';
+        const label = loginItem === 'email'
+            ? t('dyn_login.separators.email_or_wallets')
+            : t('dyn_login.separators.wallets_or_email');
         return [
             {
                 label,

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

@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { SdkViewType, SdkViewSectionType } from '@dynamic-labs/sdk-api';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
     const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext();
+    const { t } = useTranslation();
     const isWalletOnly = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!projectSettings) {
@@ -41,7 +43,7 @@ const useLoginView = () => {
             });
             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.email_or_social'),
                     type: SdkViewSectionType.Separator,
                 });
             }
@@ -73,7 +75,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';
+        const label = loginItem === 'email'
+            ? t('dyn_login.separators.email_or_wallets')
+            : t('dyn_login.separators.wallets_or_email');
         return [
             {
                 label,

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

@@ -55,6 +55,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 MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -51,6 +51,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 MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext();

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.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');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');
 var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var SelectNetworkButton = require('../../components/SelectNetworkButton/SelectNetworkButton.cjs');

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.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';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
 import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { SelectNetworkButton } from '../../components/SelectNetworkButton/SelectNetworkButton.js';

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.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');
 var useApplyWalletConnectorNetwork = require('../../utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.cjs');
 
 //   The component notifies the user about the required manual network change,

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.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';
 import { useApplyWalletConnectorNetwork } from '../../utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.js';
 
 //   The component notifies the user about the required manual network change,

package/src/lib/views/NoAccess/NoAccess.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');
 var StatusDot = require('../../components/StatusDot/StatusDot.cjs');
 var getSocialNetworkIcon = require('../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.cjs');
 var AuthProviderIcon = require('../../components/AuthProviderIcon/AuthProviderIcon.cjs');

package/src/lib/views/NoAccess/NoAccess.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';
 import { StatusDot } from '../../components/StatusDot/StatusDot.js';
 import { getSocialNetworkIcon } from '../../utils/functions/getSocialNetworkIcon/getSocialNetworkIcon.js';
 import { AuthProviderIcon } from '../../components/AuthProviderIcon/AuthProviderIcon.js';

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.cjs

@@ -47,6 +47,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 getBrowserIcon = require('../../shared/utils/functions/getBrowserIcon/getBrowserIcon.cjs');
 var WalletHelpLink = require('./WalletHelpLink.cjs');
 

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.js

@@ -43,6 +43,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 { getBrowserIcon } from '../../shared/utils/functions/getBrowserIcon/getBrowserIcon.js';
 import { WalletHelpLink } from './WalletHelpLink.js';
 

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.cjs

@@ -46,6 +46,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 capitalize = (value) => value[0].toUpperCase() + value.slice(1);
 const WalletHelpLink = ({ name, link, Icon }) => (jsxRuntime.jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxRuntime.jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Icon, { style: {

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.js

@@ -42,6 +42,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 capitalize = (value) => value[0].toUpperCase() + value.slice(1);
 const WalletHelpLink = ({ name, link, Icon }) => (jsx("div", Object.assign({ className: 'wallet-help-link' }, { children: jsxs("a", Object.assign({ className: 'wallet-help-link__anchor', href: link, target: '_blank', rel: 'noreferrer' }, { children: [jsx(Icon, { style: {

package/src/lib/views/PendingConnectView/PendingConnectView.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');
 
 const PendingConnectView = () => {
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/views/PendingConnectView/PendingConnectView.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';
 
 const PendingConnectView = () => {
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext();