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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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';