@dynamic-labs/sdk-react-core 0.18.0-RC.12 → 0.18.0-RC.14

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

@@ -16,9 +16,8 @@ import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 
 const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
     const { error } = useErrorContext();
-    const [email, setEmail] = useState('');
     const [loading, setLoading] = useState(false);
-    const connectWithEmail = () => __awaiter(void 0, void 0, void 0, function* () {
+    const connectWithEmail = (email) => __awaiter(void 0, void 0, void 0, function* () {
         if (!email || !emailWalletConnector || loading)
             return;
         setLoading(true);
@@ -38,9 +37,7 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
     }, [error, loading]);
     return {
         connectWithEmail,
-        email,
         loading,
-        setEmail,
     };
 };
 

package/src/lib/utils/hooks/useEmailProvider/index.d.ts

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

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var sdkApi = require('@dynamic-labs/sdk-api');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var EmailVerificationContext = require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var useWalletItemActions = require('../useWalletItemActions/useWalletItemActions.cjs');
+var useConnectWithEmail = require('../useConnectWithEmail/useConnectWithEmail.cjs');
+var api = require('../../../data/api.cjs');
+
+const useEmailProvider = ({ emailWalletConnector }) => {
+    const { projectSettings, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setEmail: setEmailForVerification, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
+    const { setView } = ViewContext.useViewContext();
+    const { handleInstalledExtensionClick } = useWalletItemActions.useWalletItemActions();
+    const { connectWithEmail, loading: isEmailProviderLoading } = useConnectWithEmail.useConnectWithEmail({
+        emailWalletConnector,
+        handleConnect: handleInstalledExtensionClick,
+    });
+    const { providers } = projectSettings || {};
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
+        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => provider.provider === sdkApi.ProviderEnum.MagicLink ||
+            provider.provider === sdkApi.ProviderEnum.Blocto).length);
+    const handleEmailOnlyLoginSubmit = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const { email, verificationUUID } = yield api.createEmailVerification({
+            email: emailInput,
+            environmentId,
+        });
+        setView('login-with-email-verification');
+        setEmailForVerification(email);
+        setVerificationUUID(verificationUUID);
+    });
+    const handleMagicLinkOrBloctoSubmit = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        yield connectWithEmail(emailInput);
+    });
+    const submitEmail = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (isMagicOrBloctoEnabled) {
+            yield handleMagicLinkOrBloctoSubmit(emailInput);
+            return;
+        }
+        yield handleEmailOnlyLoginSubmit(emailInput);
+    });
+    return {
+        handleEmailOnlyLoginSubmit,
+        isEmailProviderLoading,
+        submitEmail,
+    };
+};
+
+exports.useEmailProvider = useEmailProvider;

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

@@ -0,0 +1,10 @@
+import { IEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
+type Props = {
+    emailWalletConnector: IEmailWalletConnector | undefined;
+};
+export declare const useEmailProvider: ({ emailWalletConnector }: Props) => {
+    handleEmailOnlyLoginSubmit: (emailInput: string) => Promise<void>;
+    isEmailProviderLoading: boolean;
+    submitEmail: (emailInput: string) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,50 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useEmailVerificationContext } from '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { useWalletItemActions } from '../useWalletItemActions/useWalletItemActions.js';
+import { useConnectWithEmail } from '../useConnectWithEmail/useConnectWithEmail.js';
+import { createEmailVerification } from '../../../data/api.js';
+
+const useEmailProvider = ({ emailWalletConnector }) => {
+    const { projectSettings, environmentId } = useInternalDynamicContext();
+    const { setEmail: setEmailForVerification, setVerificationUUID } = useEmailVerificationContext();
+    const { setView } = useViewContext();
+    const { handleInstalledExtensionClick } = useWalletItemActions();
+    const { connectWithEmail, loading: isEmailProviderLoading } = useConnectWithEmail({
+        emailWalletConnector,
+        handleConnect: handleInstalledExtensionClick,
+    });
+    const { providers } = projectSettings || {};
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
+        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => provider.provider === ProviderEnum.MagicLink ||
+            provider.provider === ProviderEnum.Blocto).length);
+    const handleEmailOnlyLoginSubmit = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        const { email, verificationUUID } = yield createEmailVerification({
+            email: emailInput,
+            environmentId,
+        });
+        setView('login-with-email-verification');
+        setEmailForVerification(email);
+        setVerificationUUID(verificationUUID);
+    });
+    const handleMagicLinkOrBloctoSubmit = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        yield connectWithEmail(emailInput);
+    });
+    const submitEmail = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isMagicOrBloctoEnabled) {
+            yield handleMagicLinkOrBloctoSubmit(emailInput);
+            return;
+        }
+        yield handleEmailOnlyLoginSubmit(emailInput);
+    });
+    return {
+        handleEmailOnlyLoginSubmit,
+        isEmailProviderLoading,
+        submitEmail,
+    };
+};
+
+export { useEmailProvider };

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

@@ -40,6 +40,9 @@ const useValidateSession = ({ handleLogOut, user, authToken, walletConnectV1Brid
         let currentWalletConnectV1Bridge;
         if (walletConnectors) {
             for (const connector of walletConnectors) {
+                if (!connector.isWalletConnect) {
+                    continue;
+                }
                 const session = yield connector.getSession();
                 const bridge = session && (session === null || session === void 0 ? void 0 : session.bridge);
                 if (bridge) {

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

@@ -36,6 +36,9 @@ const useValidateSession = ({ handleLogOut, user, authToken, walletConnectV1Brid
         let currentWalletConnectV1Bridge;
         if (walletConnectors) {
             for (const connector of walletConnectors) {
+                if (!connector.isWalletConnect) {
+                    continue;
+                }
                 const session = yield connector.getSession();
                 const bridge = session && (session === null || session === void 0 ? void 0 : session.bridge);
                 if (bridge) {

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useWalletConnectorEvents = (walletConnector, listeners) => {
+    React.useEffect(() => {
+        if (!walletConnector || !listeners) {
+            return;
+        }
+        walletConnector.setupEventListeners(listeners);
+        return () => walletConnector.teardownEventListeners();
+    }, [walletConnector, listeners]);
+};
+
+exports.useWalletConnectorEvents = useWalletConnectorEvents;

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

@@ -0,0 +1,2 @@
+import { WalletConnector, WalletEventListeners } from '@dynamic-labs/wallet-connector-core';
+export declare const useWalletConnectorEvents: (walletConnector?: WalletConnector | null, listeners?: Partial<WalletEventListeners>) => void;

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

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useWalletConnectorEvents = (walletConnector, listeners) => {
+    useEffect(() => {
+        if (!walletConnector || !listeners) {
+            return;
+        }
+        walletConnector.setupEventListeners(listeners);
+        return () => walletConnector.teardownEventListeners();
+    }, [walletConnector, listeners]);
+};
+
+export { useWalletConnectorEvents };

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

@@ -28,7 +28,7 @@ var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndS
 var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, setIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
     const { mockedSDK } = MockContext.useMockContext();
     const { setError } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
@@ -79,7 +79,7 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const connectedAccounts = yield walletConnector.getConnectedAccounts();
-        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         if (activeAccountAlreadyLinked) {
             setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
         }
@@ -112,7 +112,7 @@ const useWalletItemActions = () => {
             yield walletConnector.endSession();
         }
         setIsVerifying(false);
-        if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+        if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);

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

@@ -24,7 +24,7 @@ import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAn
 import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, setIsVerifying, } = useInternalDynamicContext();
     const { mockedSDK } = useMockContext();
     const { setError } = useErrorContext();
     const { setView } = useViewContext();
@@ -75,7 +75,7 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         const connectedAccounts = yield walletConnector.getConnectedAccounts();
-        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         if (activeAccountAlreadyLinked) {
             setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
         }
@@ -108,7 +108,7 @@ const useWalletItemActions = () => {
             yield walletConnector.endSession();
         }
         setIsVerifying(false);
-        if (isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+        if (isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs

@@ -7,113 +7,86 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var sdkApi = require('@dynamic-labs/sdk-api');
-require('@dynamic-labs/utils');
-var api = require('../../../../data/api.cjs');
 var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+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');
-require('@dynamic-labs/multi-wallet');
-require('@dynamic-labs/rpc-providers');
-require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
-var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
-require('react-dom');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Input = require('../../../../components/Input/Input.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');
-var Button = require('../../../../components/Button/Button.cjs');
+var api = require('../../../../data/api.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
+var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
-var useWalletItemActions = require('../../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var useConnectWithEmail = require('../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.cjs');
-var EmailVerificationContext = require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var LoadingContext = require('../../../../context/LoadingContext/LoadingContext.cjs');
+var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginWithEmailForm = () => {
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
-    const { setEmail: setEmailForVerification, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const [emailInput, setEmailInput] = React.useState('');
     const [emailError, setEmailError] = React.useState(false);
     const emailWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)
         .find(walletConnectorCore.isEmailWalletConnector);
-    const { handleInstalledExtensionClick } = useWalletItemActions.useWalletItemActions();
-    const { connectWithEmail, email: magicEmail, setEmail: setEmailForMagic, loading: isMagicLoading, } = useConnectWithEmail.useConnectWithEmail({
+    const { handleEmailOnlyLoginSubmit, submitEmail, isEmailProviderLoading } = useEmailProvider.useEmailProvider({
         emailWalletConnector,
-        handleConnect: handleInstalledExtensionClick,
     });
-    const isLoading = React.useMemo(() => isMagicLoading || loading, [isMagicLoading, loading]);
-    const handleMagicOnChangeEvent = (event) => {
-        const { value } = event.currentTarget;
-        setEmailForMagic(value);
-    };
+    const isLoading = React.useMemo(() => isEmailProviderLoading || loading, [isEmailProviderLoading, loading]);
     const handleEmailOnChangeEvent = (event) => {
         const { value } = event.currentTarget;
         setEmailInput(value);
     };
-    const handleMagicLinkSubmit = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        yield connectWithEmail();
-    });
-    const handleEmailLoginSubmit = (emailInputOverride) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const emailToVerify = emailInputOverride !== null && emailInputOverride !== void 0 ? emailInputOverride : emailInput;
-        const { email, verificationUUID } = yield api.createEmailVerification({
-            email: emailToVerify,
-            environmentId,
-        });
-        setView('login-with-email-verification');
-        setEmailForVerification(email);
-        setVerificationUUID(verificationUUID);
-    });
-    const magicLinkEnabled = emailWalletConnector !== undefined;
-    const submitHandler = magicLinkEnabled
-        ? handleMagicLinkSubmit
-        : handleEmailLoginSubmit;
-    const onChangeHandler = magicLinkEnabled
-        ? handleMagicOnChangeEvent
-        : handleEmailOnChangeEvent;
-    const emailValue = magicLinkEnabled ? magicEmail : emailInput;
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const onChangeHandler = handleEmailOnChangeEvent;
     const handleSubmit = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
-        if (!EMAIL_REGEX.test(emailValue)) {
+        if (!EMAIL_REGEX.test(emailInput)) {
             setEmailError(true);
             return;
         }
         try {
             setLoading(true);
-            if (magicLinkEnabled &&
+            if (isInjectedWalletProviderEnabled &&
                 (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.confirmEmailProviderForVerify)) {
                 // see: https://linear.app/dynamic-labs/issue/DYN-2517
                 // if confirmWalletTransfers setting is true, check api first to confirm emailProvider
                 const { emailProvider } = yield api.getEmailProvider({
-                    email: emailValue,
+                    email: emailInput,
                     environmentId,
                 });
                 if (emailProvider === sdkApi.ProviderEnum.EmailOnly) {
-                    yield handleEmailLoginSubmit(emailValue);
+                    yield handleEmailOnlyLoginSubmit(emailInput);
                     return;
                 }
             }
-            yield submitHandler();
+            yield submitEmail(emailInput);
         }
         catch (error) {
             logger.logger.debug(error);
@@ -124,7 +97,7 @@ const LoginWithEmailForm = () => {
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsxRuntime.jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
+    return (jsxRuntime.jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
 };
 
 exports.EMAIL_REGEX = EMAIL_REGEX;

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js

@@ -3,113 +3,86 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
-import '@dynamic-labs/utils';
-import { getEmailProvider, createEmailVerification } from '../../../../data/api.js';
 import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+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 '@dynamic-labs/multi-wallet';
-import '@dynamic-labs/rpc-providers';
-import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
-import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
-import 'react-dom';
+import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { Input } from '../../../../components/Input/Input.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 { Button } from '../../../../components/Button/Button.js';
+import { getEmailProvider } from '../../../../data/api.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../components/IconButton/IconButton.js';
+import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
-import { useWalletItemActions } from '../../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
-import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { useConnectWithEmail } from '../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.js';
-import { useEmailVerificationContext } from '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useLoadingContext } from '../../../../context/LoadingContext/LoadingContext.js';
+import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEmailProvider.js';
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginWithEmailForm = () => {
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext();
-    const { setView } = useViewContext();
     const { loading, setLoading } = useLoadingContext();
     const { setErrorMessage } = useErrorContext();
-    const { setEmail: setEmailForVerification, setVerificationUUID } = useEmailVerificationContext();
     const [emailInput, setEmailInput] = useState('');
     const [emailError, setEmailError] = useState(false);
     const emailWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)
         .find(isEmailWalletConnector);
-    const { handleInstalledExtensionClick } = useWalletItemActions();
-    const { connectWithEmail, email: magicEmail, setEmail: setEmailForMagic, loading: isMagicLoading, } = useConnectWithEmail({
+    const { handleEmailOnlyLoginSubmit, submitEmail, isEmailProviderLoading } = useEmailProvider({
         emailWalletConnector,
-        handleConnect: handleInstalledExtensionClick,
     });
-    const isLoading = useMemo(() => isMagicLoading || loading, [isMagicLoading, loading]);
-    const handleMagicOnChangeEvent = (event) => {
-        const { value } = event.currentTarget;
-        setEmailForMagic(value);
-    };
+    const isLoading = useMemo(() => isEmailProviderLoading || loading, [isEmailProviderLoading, loading]);
     const handleEmailOnChangeEvent = (event) => {
         const { value } = event.currentTarget;
         setEmailInput(value);
     };
-    const handleMagicLinkSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
-        yield connectWithEmail();
-    });
-    const handleEmailLoginSubmit = (emailInputOverride) => __awaiter(void 0, void 0, void 0, function* () {
-        const emailToVerify = emailInputOverride !== null && emailInputOverride !== void 0 ? emailInputOverride : emailInput;
-        const { email, verificationUUID } = yield createEmailVerification({
-            email: emailToVerify,
-            environmentId,
-        });
-        setView('login-with-email-verification');
-        setEmailForVerification(email);
-        setVerificationUUID(verificationUUID);
-    });
-    const magicLinkEnabled = emailWalletConnector !== undefined;
-    const submitHandler = magicLinkEnabled
-        ? handleMagicLinkSubmit
-        : handleEmailLoginSubmit;
-    const onChangeHandler = magicLinkEnabled
-        ? handleMagicOnChangeEvent
-        : handleEmailOnChangeEvent;
-    const emailValue = magicLinkEnabled ? magicEmail : emailInput;
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const onChangeHandler = handleEmailOnChangeEvent;
     const handleSubmit = (e) => __awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
-        if (!EMAIL_REGEX.test(emailValue)) {
+        if (!EMAIL_REGEX.test(emailInput)) {
             setEmailError(true);
             return;
         }
         try {
             setLoading(true);
-            if (magicLinkEnabled &&
+            if (isInjectedWalletProviderEnabled &&
                 (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.confirmEmailProviderForVerify)) {
                 // see: https://linear.app/dynamic-labs/issue/DYN-2517
                 // if confirmWalletTransfers setting is true, check api first to confirm emailProvider
                 const { emailProvider } = yield getEmailProvider({
-                    email: emailValue,
+                    email: emailInput,
                     environmentId,
                 });
                 if (emailProvider === ProviderEnum.EmailOnly) {
-                    yield handleEmailLoginSubmit(emailValue);
+                    yield handleEmailOnlyLoginSubmit(emailInput);
                     return;
                 }
             }
-            yield submitHandler();
+            yield submitEmail(emailInput);
         }
         catch (error) {
             logger.debug(error);
@@ -120,7 +93,7 @@ const LoginWithEmailForm = () => {
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsx(Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsx(Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
+    return (jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsx(Input, { id: 'email_field', value: emailInput, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsx(Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
 };
 
 export { EMAIL_REGEX, LoginWithEmailForm };

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.cjs

@@ -24,9 +24,9 @@ var ListItemButton = require('../ListItemButton/ListItemButton.cjs');
 const NUMBER_OF_WALLETS = 3;
 const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = ViewContext.useViewContext();
-    const { projectSettings, connectedWallets } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const isUsingMultiWallet = Boolean(localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER));
-    return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 exports.LoginWithEmailWalletList = LoginWithEmailWalletList;

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.js

@@ -20,9 +20,9 @@ import { ListItemButton } from '../ListItemButton/ListItemButton.js';
 const NUMBER_OF_WALLETS = 3;
 const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = useViewContext();
-    const { projectSettings, connectedWallets } = useInternalDynamicContext();
+    const { projectSettings } = useInternalDynamicContext();
     const isUsingMultiWallet = Boolean(LocalStorage.getFromLS(AUTH_USER));
-    return !projectSettings ? (jsx(Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    return !projectSettings ? (jsx(Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 export { LoginWithEmailWalletList, NUMBER_OF_WALLETS };