@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.21

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

@@ -13,14 +13,17 @@ import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.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 { setIsVerificationInProgress } = useInternalDynamicContext();
+    const connectWithEmail = (email) => __awaiter(void 0, void 0, void 0, function* () {
         if (!email || !emailWalletConnector || loading)
             return;
+        // Indicate auth verification process start
+        setIsVerificationInProgress(true);
         setLoading(true);
         emailWalletConnector.setEmail(email);
         try {
@@ -28,6 +31,7 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
         }
         catch (e) {
             logger.error(e);
+            setIsVerificationInProgress(false);
             setLoading(false);
         }
     });
@@ -38,9 +42,7 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
     }, [error, loading]);
     return {
         connectWithEmail,
-        email,
         loading,
-        setEmail,
     };
 };
 

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

@@ -2,27 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
+var usePromise = require('../usePromise/usePromise.cjs');
 
 const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const [wallet, setWallet] = React.useState();
-    React.useEffect(() => {
-        const getConnectedAccounts = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const { data: wallet } = usePromise.usePromise(() => {
+        if (!connector) {
+            return;
+        }
+        return connector
+            .getConnectedAccounts()
+            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
             var _a;
-            if (!connector) {
-                setWallet(undefined);
-                return;
-            }
-            const connectedAccounts = (_a = (yield connector.getConnectedAccounts())) !== null && _a !== void 0 ? _a : [];
-            const connectedWallet = secondaryWallets.find((secondaryWallet) => {
-                var _a;
-                return secondaryWallet.address.toLowerCase() ===
-                    ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            });
-            setWallet(connectedWallet);
-        });
-        getConnectedAccounts();
+            return secondaryWallet.address.toLowerCase() ===
+                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        }));
     }, [connector, secondaryWallets]);
     return wallet;
 };

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

@@ -1,24 +1,17 @@
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { usePromise } from '../usePromise/usePromise.js';
 
 const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const [wallet, setWallet] = useState();
-    useEffect(() => {
-        const getConnectedAccounts = () => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: wallet } = usePromise(() => {
+        if (!connector) {
+            return;
+        }
+        return connector
+            .getConnectedAccounts()
+            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
             var _a;
-            if (!connector) {
-                setWallet(undefined);
-                return;
-            }
-            const connectedAccounts = (_a = (yield connector.getConnectedAccounts())) !== null && _a !== void 0 ? _a : [];
-            const connectedWallet = secondaryWallets.find((secondaryWallet) => {
-                var _a;
-                return secondaryWallet.address.toLowerCase() ===
-                    ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            });
-            setWallet(connectedWallet);
-        });
-        getConnectedAccounts();
+            return secondaryWallet.address.toLowerCase() ===
+                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        }));
     }, [connector, secondaryWallets]);
     return wallet;
 };

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
+var isProgrammableNetworkSwitchSupported = require('../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
+
+const useConnectedWalletsNetworkValidation = () => {
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnector, setShowAuthFlow, showAuthFlow, walletsToConnectByChain, isBridgeFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view, setView } = ViewContext.useViewContext();
+    React.useEffect(() => {
+        if (!isBridgeFlow) {
+            return;
+        }
+        const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
+            const isChainInWalletsToConnect = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.some((walletToConnectByChain) => walletToConnectByChain.chain === connectedWallet.chain);
+            const isSupported = isSupportedNetwork.isSupportedNetwork({
+                network: connectedWallet.network,
+                walletConnector: connectedWallet.connector,
+            });
+            return !isChainInWalletsToConnect && !isSupported;
+        });
+        if (connectedWalletsWithInvalidNetwork.length) {
+            // If we found wallets that require a change of network
+            // then, one by one, in the first one we require a change of network.
+            const [connectedWalletWithInvalidNetwork] = connectedWalletsWithInvalidNetwork;
+            // Keeps the first wallet connectedWallet in setSelectedWalletConnector
+            // This is required because NetworkNotSupported uses walletConnector to display wallet icon, address etc.
+            if (connectedWalletWithInvalidNetwork.connector.name !==
+                (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name)) {
+                setSelectedWalletConnector(connectedWalletWithInvalidNetwork.connector);
+            }
+            const networkNotSupportedView = isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
+                ? 'network-not-supported'
+                : 'network-not-supported-manual';
+            if (!showAuthFlow) {
+                setShowAuthFlow(true);
+            }
+            setView(networkNotSupportedView);
+        }
+    }, [
+        isBridgeFlow,
+        connectedWallets,
+        view,
+        selectedWalletConnector,
+        walletsToConnectByChain,
+        showAuthFlow,
+        setView,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+    ]);
+};
+
+exports.useConnectedWalletsNetworkValidation = useConnectedWalletsNetworkValidation;

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

@@ -0,0 +1 @@
+export declare const useConnectedWalletsNetworkValidation: () => void;

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

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
+import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
+
+const useConnectedWalletsNetworkValidation = () => {
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnector, setShowAuthFlow, showAuthFlow, walletsToConnectByChain, isBridgeFlow, } = useInternalDynamicContext();
+    const { view, setView } = useViewContext();
+    useEffect(() => {
+        if (!isBridgeFlow) {
+            return;
+        }
+        const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
+            const isChainInWalletsToConnect = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.some((walletToConnectByChain) => walletToConnectByChain.chain === connectedWallet.chain);
+            const isSupported = isSupportedNetwork({
+                network: connectedWallet.network,
+                walletConnector: connectedWallet.connector,
+            });
+            return !isChainInWalletsToConnect && !isSupported;
+        });
+        if (connectedWalletsWithInvalidNetwork.length) {
+            // If we found wallets that require a change of network
+            // then, one by one, in the first one we require a change of network.
+            const [connectedWalletWithInvalidNetwork] = connectedWalletsWithInvalidNetwork;
+            // Keeps the first wallet connectedWallet in setSelectedWalletConnector
+            // This is required because NetworkNotSupported uses walletConnector to display wallet icon, address etc.
+            if (connectedWalletWithInvalidNetwork.connector.name !==
+                (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name)) {
+                setSelectedWalletConnector(connectedWalletWithInvalidNetwork.connector);
+            }
+            const networkNotSupportedView = isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
+                ? 'network-not-supported'
+                : 'network-not-supported-manual';
+            if (!showAuthFlow) {
+                setShowAuthFlow(true);
+            }
+            setView(networkNotSupportedView);
+        }
+    }, [
+        isBridgeFlow,
+        connectedWallets,
+        view,
+        selectedWalletConnector,
+        walletsToConnectByChain,
+        showAuthFlow,
+        setView,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+    ]);
+};
+
+export { useConnectedWalletsNetworkValidation };

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = React.useState(seconds);
+    const timeoutRef = React.useRef();
+    const startCountdown = () => {
+        if (timeoutRef.current) {
+            return setRemainingSeconds(seconds);
+        }
+        runCountdown();
+    };
+    const stopCountdown = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const runCountdown = () => {
+        timeoutRef.current = setTimeout(() => {
+            setRemainingSeconds((prevSeconds) => prevSeconds - 1);
+        }, 1000);
+    };
+    React.useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+exports.useCountdown = useCountdown;

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

@@ -0,0 +1,11 @@
+type Prop = {
+    callback?: () => void;
+    seconds: number;
+};
+export interface UseCountdown {
+    remainingSeconds: number;
+    startCountdown: () => void;
+    stopCountdown: () => void;
+}
+export declare const useCountdown: ({ callback, seconds }: Prop) => UseCountdown;
+export {};

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

@@ -0,0 +1,35 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = useState(seconds);
+    const timeoutRef = useRef();
+    const startCountdown = () => {
+        if (timeoutRef.current) {
+            return setRemainingSeconds(seconds);
+        }
+        runCountdown();
+    };
+    const stopCountdown = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const runCountdown = () => {
+        timeoutRef.current = setTimeout(() => {
+            setRemainingSeconds((prevSeconds) => prevSeconds - 1);
+        }, 1000);
+    };
+    useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+export { useCountdown };

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
@@ -24,18 +25,18 @@ require('@dynamic-labs/sdk-api');
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
     const { goToInitialView } = ViewContext.useViewContext();
-    const createUserProfileByJWT = React.useCallback((jwt) => {
+    const createUserProfileByJWT = React.useCallback((jwt) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const decodedJWT = decodeJwt.decodeJwt(jwt);
         if (!decodedJWT) {
-            handleLogOut();
+            yield handleLogOut();
             goToInitialView();
             return;
         }
+        index.storeAuthToken(jwt);
         const userProfile = createUserProfile.createUserProfile(decodedJWT);
         setUser(userProfile);
-        index.storeAuthToken(jwt);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }), []);
     return { createUserProfileByJWT };
 };
 

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

@@ -1,3 +1,3 @@
 export declare const useCreateUserProfileByJWTCallback: () => {
-    createUserProfileByJWT: (jwt: string) => void;
+    createUserProfileByJWT: (jwt: string) => Promise<void>;
 };

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

@@ -1,3 +1,4 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
@@ -20,18 +21,18 @@ import '@dynamic-labs/sdk-api';
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext();
     const { goToInitialView } = useViewContext();
-    const createUserProfileByJWT = useCallback((jwt) => {
+    const createUserProfileByJWT = useCallback((jwt) => __awaiter(void 0, void 0, void 0, function* () {
         const decodedJWT = decodeJwt(jwt);
         if (!decodedJWT) {
-            handleLogOut();
+            yield handleLogOut();
             goToInitialView();
             return;
         }
+        storeAuthToken(jwt);
         const userProfile = createUserProfile(decodedJWT);
         setUser(userProfile);
-        storeAuthToken(jwt);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }), []);
     return { createUserProfileByJWT };
 };
 

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

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

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+// This hook can be used to get all of the user's scopes (nft/token gates)
+// and check if the user has a specific scopes with some logic AND/OR (nft/token gate)
+const useDynamicScopes = () => {
+    const { decodedAuthToken } = useInternalDynamicContext.useInternalDynamicContext();
+    const userScopes = React.useMemo(() => {
+        const { scope } = decodedAuthToken || {};
+        if (!scope)
+            return [];
+        // We need to split the scopes string into an array of scopes
+        // because the scopes string is a space separated string of scopes
+        // e.g. '"scope": "customerservice marketing tech"'
+        return scope.split(' ');
+    }, [decodedAuthToken]);
+    // If customer will set scopes to an empty string it will return false
+    const userHasScopes = (scopes, logicOperator = 'OR') => {
+        if (!scopes.length)
+            return false;
+        if (typeof scopes === 'string')
+            scopes = scopes.split(' ');
+        if (logicOperator === 'AND') {
+            // If the logic operator is AND, the user must have all of the scopes
+            // If the logic operator is OR, the user must have at least one of the scopes
+            return scopes.every((scope) => Boolean(userScopes.includes(scope)));
+        }
+        return scopes.some((scope) => Boolean(userScopes.includes(scope)));
+    };
+    return {
+        userHasScopes,
+        userScopes,
+    };
+};
+
+exports.useDynamicScopes = useDynamicScopes;

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

@@ -0,0 +1,6 @@
+type LogicGateOperators = 'AND' | 'OR';
+export declare const useDynamicScopes: () => {
+    userHasScopes: (scopes: string[] | string, logicOperator?: LogicGateOperators) => boolean;
+    userScopes: string[];
+};
+export {};

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+
+// This hook can be used to get all of the user's scopes (nft/token gates)
+// and check if the user has a specific scopes with some logic AND/OR (nft/token gate)
+const useDynamicScopes = () => {
+    const { decodedAuthToken } = useInternalDynamicContext();
+    const userScopes = useMemo(() => {
+        const { scope } = decodedAuthToken || {};
+        if (!scope)
+            return [];
+        // We need to split the scopes string into an array of scopes
+        // because the scopes string is a space separated string of scopes
+        // e.g. '"scope": "customerservice marketing tech"'
+        return scope.split(' ');
+    }, [decodedAuthToken]);
+    // If customer will set scopes to an empty string it will return false
+    const userHasScopes = (scopes, logicOperator = 'OR') => {
+        if (!scopes.length)
+            return false;
+        if (typeof scopes === 'string')
+            scopes = scopes.split(' ');
+        if (logicOperator === 'AND') {
+            // If the logic operator is AND, the user must have all of the scopes
+            // If the logic operator is OR, the user must have at least one of the scopes
+            return scopes.every((scope) => Boolean(userScopes.includes(scope)));
+        }
+        return scopes.some((scope) => Boolean(userScopes.includes(scope)));
+    };
+    return {
+        userHasScopes,
+        userScopes,
+    };
+};
+
+export { useDynamicScopes };

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/useEventListener/index.d.ts

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useEventListener = (eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = React.useRef(handler);
+    React.useEffect(() => {
+        // Define the listening target
+        const targetElement = window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => savedHandler.current(event);
+        targetElement.addEventListener(eventName, listener);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+};
+
+exports.useEventListener = useEventListener;

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

@@ -0,0 +1 @@
+export declare const useEventListener: (eventName: string, handler: (event: Event) => Promise<void> | void) => void;