@dynamic-labs/sdk-react-core 1.1.0-alpha.3 → 1.1.0-alpha.4

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## [1.1.0-alpha.4](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.3...v1.1.0-alpha.4) (2023-12-21)
+
+
+### Features
+
+* add bitcoin integration ([#4216](https://github.com/dynamic-labs/DynamicAuth/issues/4216)) ([9584f1c](https://github.com/dynamic-labs/DynamicAuth/commit/9584f1cc3133835049ad1c53da980192263b8f21))
+* add default footer to wallet list when tos and pp not enabled ([#4224](https://github.com/dynamic-labs/DynamicAuth/issues/4224)) ([0ad81c4](https://github.com/dynamic-labs/DynamicAuth/commit/0ad81c409bcb4aafb0dc565685525d620a95efce))
+* adds useConnectWithEmailOtp ([#4234](https://github.com/dynamic-labs/DynamicAuth/issues/4234)) ([4a4e50a](https://github.com/dynamic-labs/DynamicAuth/commit/4a4e50ac8651c2a249d5125ae6bcf49aaf49be8c))
+
 ## [1.1.0-alpha.3](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.2...v1.1.0-alpha.3) (2023-12-19)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.1.0-alpha.3";
+var version = "1.1.0-alpha.4";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.47",
 	"@dynamic-labs/sdk-api": "0.0.333",

package/package.js

@@ -1,4 +1,4 @@
-var version = "1.1.0-alpha.3";
+var version = "1.1.0-alpha.4";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.47",
 	"@dynamic-labs/sdk-api": "0.0.333",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.1.0-alpha.3",
+  "version": "1.1.0-alpha.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,15 +17,15 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.1.0-alpha.3",
-    "@dynamic-labs/logger": "1.1.0-alpha.3",
-    "@dynamic-labs/multi-wallet": "1.1.0-alpha.3",
-    "@dynamic-labs/rpc-providers": "1.1.0-alpha.3",
-    "@dynamic-labs/types": "1.1.0-alpha.3",
-    "@dynamic-labs/utils": "1.1.0-alpha.3",
-    "@dynamic-labs/viem-utils": "1.1.0-alpha.3",
-    "@dynamic-labs/wallet-book": "1.1.0-alpha.3",
-    "@dynamic-labs/wallet-connector-core": "1.1.0-alpha.3",
+    "@dynamic-labs/ethereum": "1.1.0-alpha.4",
+    "@dynamic-labs/logger": "1.1.0-alpha.4",
+    "@dynamic-labs/multi-wallet": "1.1.0-alpha.4",
+    "@dynamic-labs/rpc-providers": "1.1.0-alpha.4",
+    "@dynamic-labs/types": "1.1.0-alpha.4",
+    "@dynamic-labs/utils": "1.1.0-alpha.4",
+    "@dynamic-labs/viem-utils": "1.1.0-alpha.4",
+    "@dynamic-labs/wallet-book": "1.1.0-alpha.4",
+    "@dynamic-labs/wallet-connector-core": "1.1.0-alpha.4",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -181,6 +181,7 @@ var index$3 = require('./lib/utils/functions/walletFilters/index.cjs');
 var SendBalanceContext = require('./lib/context/SendBalanceContext/SendBalanceContext.cjs');
 require('./lib/context/FundingContext/FundingContext.cjs');
 var useFunding = require('./lib/context/FundingContext/useFunding/useFunding.cjs');
+var useConnectWithEmailOtp = require('./lib/utils/hooks/useConnectWithEmailOtp/useConnectWithEmailOtp.cjs');
 
 
 
@@ -342,3 +343,4 @@ exports.SortWallets = index$3.SortWallets;
 exports.UniswapFilter = index$3.UniswapFilter;
 exports.useSendBalance = SendBalanceContext.useSendBalance;
 exports.useFunding = useFunding.useFunding;
+exports.useConnectWithEmailOtp = useConnectWithEmailOtp.useConnectWithEmailOtp;

package/src/index.d.ts

@@ -32,3 +32,4 @@ export { type DynamicJwt, DynamicJwtFromJSON } from '@dynamic-labs/sdk-api';
 export { useSendBalance } from './lib/context/SendBalanceContext';
 export type { LocaleResource } from './lib/locale';
 export { useFunding } from './lib/context/FundingContext';
+export { useConnectWithEmailOtp } from './lib/utils/hooks/useConnectWithEmailOtp';

package/src/index.js

@@ -177,3 +177,4 @@ export { FilterAndSortWallets, FilterBridgeChainsName, FilterWallets, RemoveWall
 export { useSendBalance } from './lib/context/SendBalanceContext/SendBalanceContext.js';
 import './lib/context/FundingContext/FundingContext.js';
 export { useFunding } from './lib/context/FundingContext/useFunding/useFunding.js';
+export { useConnectWithEmailOtp } from './lib/utils/hooks/useConnectWithEmailOtp/useConnectWithEmailOtp.js';

package/src/lib/data/api.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../_virtual/_tslib.js';
-import { NoAccessError, AccountExistsError, EmailVerificationError, UserHasAccountWithEmailError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError, SocialAccountAlreadyExistsError } from '@dynamic-labs/utils';
+import { EmailVerificationError, NoAccessError, AccountExistsError, UserHasAccountWithEmailError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError, SocialAccountAlreadyExistsError } from '@dynamic-labs/utils';
 import { UnprocessableEntityErrorCode, SDKApi, Configuration, VerifyRequestFromJSON, ChainEnum, WalletProviderEnum, AuthModeEnum, EmbeddedWalletProviderEnum } from '@dynamic-labs/sdk-api';
 import { VERSION, API_VERSION } from '../../version.js';
 import ApiEndpoint from '../config/ApiEndpoint.js';

package/src/lib/utils/functions/index.d.ts

@@ -46,3 +46,4 @@ export * from './stringifyURIQuery';
 export * from './removeElementById';
 export * from './isAccountAbstractionWallet';
 export * from './createOwnerWallet';
+export * from './isEmailValid';

package/src/lib/utils/functions/isEmailValid/index.d.ts

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

package/src/lib/utils/functions/isEmailValid/isEmailValid.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+const isEmailValid = (email) => EMAIL_REGEX.test(email);
+
+exports.isEmailValid = isEmailValid;

package/src/lib/utils/functions/isEmailValid/isEmailValid.d.ts

@@ -0,0 +1 @@
+export declare const isEmailValid: (email: string) => boolean;

package/src/lib/utils/functions/isEmailValid/isEmailValid.js

@@ -0,0 +1,4 @@
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+const isEmailValid = (email) => EMAIL_REGEX.test(email);
+
+export { isEmailValid };

package/src/lib/utils/functions/isProviderEnabled/isProviderEnabled.cjs

@@ -2,6 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const isProviderEnabled = (providers, provider) => providers.some((providerItem) => providerItem.provider === provider && Boolean(providerItem.enabledAt));
+var sdkApi = require('@dynamic-labs/sdk-api');
+
+const isProviderEnabled = (providers, provider) => providers.some((providerItem) => {
+    const providerEnabled = providerItem.provider === provider && Boolean(providerItem.enabledAt);
+    if (providerItem.provider === sdkApi.ProviderEnum.MagicLink) {
+        return providerEnabled && Boolean(providerItem.providerProjectId);
+    }
+    return providerEnabled;
+});
 
 exports.isProviderEnabled = isProviderEnabled;

package/src/lib/utils/functions/isProviderEnabled/isProviderEnabled.js

@@ -1,3 +1,11 @@
-const isProviderEnabled = (providers, provider) => providers.some((providerItem) => providerItem.provider === provider && Boolean(providerItem.enabledAt));
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
+
+const isProviderEnabled = (providers, provider) => providers.some((providerItem) => {
+    const providerEnabled = providerItem.provider === provider && Boolean(providerItem.enabledAt);
+    if (providerItem.provider === ProviderEnum.MagicLink) {
+        return providerEnabled && Boolean(providerItem.providerProjectId);
+    }
+    return providerEnabled;
+});
 
 export { isProviderEnabled };

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

@@ -94,12 +94,14 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'passkey-intro' ||
         (view === 'merge-user-accounts' && !user);
     const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
+    const showDefaultFooter = !showDynamicFooter && !showToSFooter;
     return {
         displayBorderBelowHeader,
         isWalletListTypeView,
         showBackButton,
         showCloseButton,
         showConnectedWalletProgress,
+        showDefaultFooter,
         showDynamicFooter,
         showHeader,
         showHelpContent,

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

@@ -5,6 +5,7 @@ export declare const useAuthLayoutChecks: (walletConnector?: WalletConnector | n
     showBackButton: boolean;
     showCloseButton: boolean;
     showConnectedWalletProgress: boolean;
+    showDefaultFooter: boolean;
     showDynamicFooter: boolean;
     showHeader: boolean;
     showHelpContent: boolean;

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

@@ -90,12 +90,14 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'passkey-intro' ||
         (view === 'merge-user-accounts' && !user);
     const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
+    const showDefaultFooter = !showDynamicFooter && !showToSFooter;
     return {
         displayBorderBelowHeader,
         isWalletListTypeView,
         showBackButton,
         showCloseButton,
         showConnectedWalletProgress,
+        showDefaultFooter,
         showDynamicFooter,
         showHeader,
         showHelpContent,

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

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

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

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var sdkApi = require('@dynamic-labs/sdk-api');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var useWalletItemActions = require('../useWalletItemActions/useWalletItemActions.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.cjs');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var isProviderEnabled = require('../../functions/isProviderEnabled/isProviderEnabled.cjs');
+var isEmailValid = require('../../functions/isEmailValid/isEmailValid.cjs');
+var api = require('../../../data/api.cjs');
+var useCreateUserProfileByJWTCallback = require('../useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.cjs');
+
+const mapEmailProviderToProviderEnum = {
+    dynamic: sdkApi.ProviderEnum.Dynamic,
+    emailOnly: sdkApi.ProviderEnum.EmailOnly,
+    magicLink: sdkApi.ProviderEnum.MagicLink,
+};
+const allSupportedProviders = Object.values(mapEmailProviderToProviderEnum);
+/**
+ * Hook to connect and verify an email using a one-time password (OTP) with specified email providers.
+ *
+ * @param props - The properties for the hook. Includes an optional 'provider' to specify the email provider.
+ * @returns An object containing two functions:
+ *    - connectWithEmail: A function to initiate the OTP process with the provided email.
+ *    - verifyOneTimePassword: A function to verify the provided OTP.
+ *
+ * @example
+ * const { connectWithEmail, verifyOneTimePassword } = useConnectWithEmailOtp({ provider: ProviderEnum.MagicLink });
+ *
+ * // To initiate the OTP process
+ * connectWithEmail('user@example.com').then(() => {
+ *   // OTP sent to the email
+ * });
+ *
+ * // To verify the OTP
+ * verifyOneTimePassword('123456').then(() => {
+ *   // OTP verification successful
+ * }).catch((error) => {
+ *   // Error handling
+ * });
+ */
+const useConnectWithEmailOtp = ({ provider, } = {}) => {
+    const { walletConnectorOptions, environmentId, projectSettings, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
+    const { handleInstalledExtensionClick } = useWalletItemActions.useWalletItemActions();
+    const lastVerificationHandlerRef = React.useRef(null);
+    const providers = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || [];
+    const emailOtpWalletConnector = walletConnectorOptions
+        .map(({ walletConnector }) => walletConnector)
+        .find(walletConnectorCore.isEmailOTPWalletConnector);
+    const mapProviderToEnabled = {
+        dynamic: isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.Dynamic),
+        emailOnly: isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.EmailOnly),
+        magicLink: isProviderEnabled.isProviderEnabled(providers, sdkApi.ProviderEnum.MagicLink),
+    };
+    const emailHandler = (email) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const { verificationUUID } = yield api.createEmailVerification({
+            email,
+            environmentId,
+        });
+        return (oneTimePassword) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const { jwt } = yield api.signInWithEmailVerification({
+                environmentId,
+                verificationToken: oneTimePassword,
+                verificationUUID,
+            });
+            yield createUserProfileByJWT(jwt);
+            return {
+                email,
+                verified: Boolean(jwt),
+            };
+        });
+    });
+    const magicHandler = (email) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!emailOtpWalletConnector) {
+            throw new Error('OTP wallet connector was not found');
+        }
+        emailOtpWalletConnector.setEmail(email);
+        handleInstalledExtensionClick(emailOtpWalletConnector);
+        return (oneTimePassword) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                email,
+                verified: yield emailOtpWalletConnector.verifyOneTimePassword(oneTimePassword),
+            });
+        });
+    });
+    const mapProviderToHandler = {
+        [sdkApi.ProviderEnum.Dynamic]: emailHandler,
+        [sdkApi.ProviderEnum.EmailOnly]: emailHandler,
+        [sdkApi.ProviderEnum.MagicLink]: magicHandler,
+    };
+    const getEffectiveEmailProvider = (email) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (provider) {
+            return provider;
+        }
+        const { emailProvider } = yield api.getEmailProvider({
+            email,
+            environmentId,
+        });
+        if (!allSupportedProviders.includes(emailProvider)) {
+            throw new Error('Email provider is not supported');
+        }
+        return emailProvider;
+    });
+    const connectWithEmail = (email) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!isEmailValid.isEmailValid(email)) {
+            throw new Error('Email is not valid');
+        }
+        const effectiveEmailProvider = yield getEffectiveEmailProvider(email);
+        if (!mapProviderToEnabled[effectiveEmailProvider]) {
+            throw new Error('Email provider is not enabled');
+        }
+        const verificationHandler = yield mapProviderToHandler[effectiveEmailProvider](email);
+        lastVerificationHandlerRef.current = verificationHandler;
+    });
+    const verifyOneTimePassword = (oneTimePassword) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!lastVerificationHandlerRef.current) {
+            throw new Error('Verification have not started, use connectWithEmail before verifying');
+        }
+        const { email, verified } = yield lastVerificationHandlerRef.current(oneTimePassword);
+        dynamicEvents.dynamicEvents.emit('emailVerificationResult', verified, email);
+        if (verified) {
+            setCallback('authSuccess');
+        }
+        else {
+            throw new Error('Email verification failed');
+        }
+    });
+    return {
+        connectWithEmail,
+        verifyOneTimePassword,
+    };
+};
+
+exports.useConnectWithEmailOtp = useConnectWithEmailOtp;

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

@@ -0,0 +1,32 @@
+type EmailProviders = 'magicLink' | 'dynamic' | 'emailOnly';
+type UseConnectWithEmailOtpProps = {
+    provider?: EmailProviders;
+};
+/**
+ * Hook to connect and verify an email using a one-time password (OTP) with specified email providers.
+ *
+ * @param props - The properties for the hook. Includes an optional 'provider' to specify the email provider.
+ * @returns An object containing two functions:
+ *    - connectWithEmail: A function to initiate the OTP process with the provided email.
+ *    - verifyOneTimePassword: A function to verify the provided OTP.
+ *
+ * @example
+ * const { connectWithEmail, verifyOneTimePassword } = useConnectWithEmailOtp({ provider: ProviderEnum.MagicLink });
+ *
+ * // To initiate the OTP process
+ * connectWithEmail('user@example.com').then(() => {
+ *   // OTP sent to the email
+ * });
+ *
+ * // To verify the OTP
+ * verifyOneTimePassword('123456').then(() => {
+ *   // OTP verification successful
+ * }).catch((error) => {
+ *   // Error handling
+ * });
+ */
+export declare const useConnectWithEmailOtp: ({ provider, }?: UseConnectWithEmailOtpProps) => {
+    connectWithEmail: (email: string) => Promise<void>;
+    verifyOneTimePassword: (oneTimePassword: string) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,146 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useRef } from 'react';
+import { isEmailOTPWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useWalletItemActions } from '../useWalletItemActions/useWalletItemActions.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '@dynamic-labs/utils';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { isProviderEnabled } from '../../functions/isProviderEnabled/isProviderEnabled.js';
+import { isEmailValid } from '../../functions/isEmailValid/isEmailValid.js';
+import { createEmailVerification, signInWithEmailVerification, getEmailProvider } from '../../../data/api.js';
+import { useCreateUserProfileByJWTCallback } from '../useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js';
+
+const mapEmailProviderToProviderEnum = {
+    dynamic: ProviderEnum.Dynamic,
+    emailOnly: ProviderEnum.EmailOnly,
+    magicLink: ProviderEnum.MagicLink,
+};
+const allSupportedProviders = Object.values(mapEmailProviderToProviderEnum);
+/**
+ * Hook to connect and verify an email using a one-time password (OTP) with specified email providers.
+ *
+ * @param props - The properties for the hook. Includes an optional 'provider' to specify the email provider.
+ * @returns An object containing two functions:
+ *    - connectWithEmail: A function to initiate the OTP process with the provided email.
+ *    - verifyOneTimePassword: A function to verify the provided OTP.
+ *
+ * @example
+ * const { connectWithEmail, verifyOneTimePassword } = useConnectWithEmailOtp({ provider: ProviderEnum.MagicLink });
+ *
+ * // To initiate the OTP process
+ * connectWithEmail('user@example.com').then(() => {
+ *   // OTP sent to the email
+ * });
+ *
+ * // To verify the OTP
+ * verifyOneTimePassword('123456').then(() => {
+ *   // OTP verification successful
+ * }).catch((error) => {
+ *   // Error handling
+ * });
+ */
+const useConnectWithEmailOtp = ({ provider, } = {}) => {
+    const { walletConnectorOptions, environmentId, projectSettings, setCallback, } = useInternalDynamicContext();
+    const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
+    const { handleInstalledExtensionClick } = useWalletItemActions();
+    const lastVerificationHandlerRef = useRef(null);
+    const providers = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || [];
+    const emailOtpWalletConnector = walletConnectorOptions
+        .map(({ walletConnector }) => walletConnector)
+        .find(isEmailOTPWalletConnector);
+    const mapProviderToEnabled = {
+        dynamic: isProviderEnabled(providers, ProviderEnum.Dynamic),
+        emailOnly: isProviderEnabled(providers, ProviderEnum.EmailOnly),
+        magicLink: isProviderEnabled(providers, ProviderEnum.MagicLink),
+    };
+    const emailHandler = (email) => __awaiter(void 0, void 0, void 0, function* () {
+        const { verificationUUID } = yield createEmailVerification({
+            email,
+            environmentId,
+        });
+        return (oneTimePassword) => __awaiter(void 0, void 0, void 0, function* () {
+            const { jwt } = yield signInWithEmailVerification({
+                environmentId,
+                verificationToken: oneTimePassword,
+                verificationUUID,
+            });
+            yield createUserProfileByJWT(jwt);
+            return {
+                email,
+                verified: Boolean(jwt),
+            };
+        });
+    });
+    const magicHandler = (email) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!emailOtpWalletConnector) {
+            throw new Error('OTP wallet connector was not found');
+        }
+        emailOtpWalletConnector.setEmail(email);
+        handleInstalledExtensionClick(emailOtpWalletConnector);
+        return (oneTimePassword) => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                email,
+                verified: yield emailOtpWalletConnector.verifyOneTimePassword(oneTimePassword),
+            });
+        });
+    });
+    const mapProviderToHandler = {
+        [ProviderEnum.Dynamic]: emailHandler,
+        [ProviderEnum.EmailOnly]: emailHandler,
+        [ProviderEnum.MagicLink]: magicHandler,
+    };
+    const getEffectiveEmailProvider = (email) => __awaiter(void 0, void 0, void 0, function* () {
+        if (provider) {
+            return provider;
+        }
+        const { emailProvider } = yield getEmailProvider({
+            email,
+            environmentId,
+        });
+        if (!allSupportedProviders.includes(emailProvider)) {
+            throw new Error('Email provider is not supported');
+        }
+        return emailProvider;
+    });
+    const connectWithEmail = (email) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isEmailValid(email)) {
+            throw new Error('Email is not valid');
+        }
+        const effectiveEmailProvider = yield getEffectiveEmailProvider(email);
+        if (!mapProviderToEnabled[effectiveEmailProvider]) {
+            throw new Error('Email provider is not enabled');
+        }
+        const verificationHandler = yield mapProviderToHandler[effectiveEmailProvider](email);
+        lastVerificationHandlerRef.current = verificationHandler;
+    });
+    const verifyOneTimePassword = (oneTimePassword) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!lastVerificationHandlerRef.current) {
+            throw new Error('Verification have not started, use connectWithEmail before verifying');
+        }
+        const { email, verified } = yield lastVerificationHandlerRef.current(oneTimePassword);
+        dynamicEvents.emit('emailVerificationResult', verified, email);
+        if (verified) {
+            setCallback('authSuccess');
+        }
+        else {
+            throw new Error('Email verification failed');
+        }
+    });
+    return {
+        connectWithEmail,
+        verifyOneTimePassword,
+    };
+};
+
+export { useConnectWithEmailOtp };

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

@@ -22,6 +22,7 @@ require('viem');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
+var isProviderEnabled = require('../../functions/isProviderEnabled/isProviderEnabled.cjs');
 var isTurnkeyEnabled = require('../../functions/isTurnkeyEnabled/isTurnkeyEnabled.cjs');
 
 const useEmailProvider = ({ emailWalletConnector }) => {
@@ -39,9 +40,8 @@ const useEmailProvider = ({ emailWalletConnector }) => {
     // for magic, as long as there are magic credentials available, then could have an email
     // address that is a magic address, even if magic was previously turned off in dashboard
     const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
-        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => (provider.provider === sdkApi.ProviderEnum.MagicLink &&
-            Boolean(provider.providerProjectId)) ||
-            (provider.enabledAt && provider.provider === sdkApi.ProviderEnum.Blocto)).length);
+        (isProviderEnabled.isProviderEnabled(providers || [], sdkApi.ProviderEnum.MagicLink) ||
+            isProviderEnabled.isProviderEnabled(providers || [], sdkApi.ProviderEnum.Blocto));
     const handleEmailOnlyLoginSubmit = (emailInput, captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { email, verificationUUID } = yield api.createEmailVerification({
             captchaToken,

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

@@ -18,6 +18,7 @@ import 'viem';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
+import { isProviderEnabled } from '../../functions/isProviderEnabled/isProviderEnabled.js';
 import { isTurnkeyEnabled } from '../../functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
 
 const useEmailProvider = ({ emailWalletConnector }) => {
@@ -35,9 +36,8 @@ const useEmailProvider = ({ emailWalletConnector }) => {
     // for magic, as long as there are magic credentials available, then could have an email
     // address that is a magic address, even if magic was previously turned off in dashboard
     const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
-        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => (provider.provider === ProviderEnum.MagicLink &&
-            Boolean(provider.providerProjectId)) ||
-            (provider.enabledAt && provider.provider === ProviderEnum.Blocto)).length);
+        (isProviderEnabled(providers || [], ProviderEnum.MagicLink) ||
+            isProviderEnabled(providers || [], ProviderEnum.Blocto));
     const handleEmailOnlyLoginSubmit = (emailInput, captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
         const { email, verificationUUID } = yield createEmailVerification({
             captchaToken,

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs

@@ -25,6 +25,7 @@ require('viem');
 require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
+var isEmailValid = require('../../../../utils/functions/isEmailValid/isEmailValid.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../config/ApiEndpoint.cjs');
@@ -66,7 +67,6 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 
-const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a, _b, _c;
     const { t } = reactI18next.useTranslation();
@@ -112,7 +112,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
     const handleSubmit = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _d;
         e.preventDefault();
-        if (!EMAIL_REGEX.test(emailInput)) {
+        if (!isEmailValid.isEmailValid(emailInput)) {
             setInvalidEmail(true);
             return;
         }
@@ -153,5 +153,4 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
                 }, children: "Continue" }))] }));
 };
 
-exports.EMAIL_REGEX = EMAIL_REGEX;
 exports.LoginEmailForm = LoginEmailForm;

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LoginWidgetProps } from '../LoginWidget';
-export declare const EMAIL_REGEX: RegExp;
 interface Props extends LoginWidgetProps {
     currentEmail?: string;
 }

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js

@@ -21,6 +21,7 @@ import 'viem';
 import '../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
+import { isEmailValid } from '../../../../utils/functions/isEmailValid/isEmailValid.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../config/ApiEndpoint.js';
@@ -62,7 +63,6 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEmailProvider.js';
 
-const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a, _b, _c;
     const { t } = useTranslation();
@@ -108,7 +108,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
     const handleSubmit = (e) => __awaiter(void 0, void 0, void 0, function* () {
         var _d;
         e.preventDefault();
-        if (!EMAIL_REGEX.test(emailInput)) {
+        if (!isEmailValid(emailInput)) {
             setInvalidEmail(true);
             return;
         }
@@ -149,4 +149,4 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
                 }, children: "Continue" }))] }));
 };
 
-export { EMAIL_REGEX, LoginEmailForm };
+export { LoginEmailForm };

package/src/lib/views/WalletList/WalletList.cjs

@@ -15,30 +15,27 @@ require('../../utils/constants/colors.cjs');
 var walletListBuilder = require('../../utils/functions/walletListBuilder/walletListBuilder.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
-var MockContext = require('../../context/MockContext/MockContext.cjs');
-var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
-var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
 var index = require('../../utils/functions/walletFilters/index.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
 var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 var noWalletFound = require('../../assets/no-wallet-found.cjs');
+var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var SearchNotFoundMessage = require('./SearchNotFoundMessage/SearchNotFoundMessage.cjs');
 var WalletListItem = require('./WalletListItem/WalletListItem.cjs');
 
 localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
     var _a;
-    const { walletsFilter, signWithEmailWalletName, user, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletsFilter, signWithEmailWalletName, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { error } = ErrorContext.useErrorContext();
-    const { view } = ViewContext.useViewContext();
-    const { mockedSDK } = MockContext.useMockContext();
     const { t } = reactI18next.useTranslation();
     const [filterValue, setFilterValue] = React.useState((_a = localStorage.LocalStorage.getFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
     const [footerIsVisible, setFooterIsVisibile] = React.useState(false);
@@ -62,7 +59,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
-    const noDefaultFooter = isUserLinkingWallet.isUserLinkingWallet(user, view, mockedSDK);
+    const { showDefaultFooter } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
     const walletListScrollRef = React.useRef(null);
     /* istanbul ignore next */
     const handleScroll = () => {
@@ -87,7 +84,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: 'wallet-list__container', children: jsxRuntime.jsxs("div", { className: classNames.classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
                         'wallet-list__scroll-container--full-height': isSearchEnabled,
-                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [walletConnectorOptions.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet, index) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: multiWallet, onResetSearchValue: () => handleFilterValueChange('') }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }) }), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
+                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [walletConnectorOptions.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet, index) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: multiWallet, onResetSearchValue: () => handleFilterValueChange('') }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };

package/src/lib/views/WalletList/WalletList.js

@@ -11,30 +11,27 @@ import '../../utils/constants/colors.js';
 import { walletListBuilder } from '../../utils/functions/walletListBuilder/walletListBuilder.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
-import { useMockContext } from '../../context/MockContext/MockContext.js';
-import { useViewContext } from '../../context/ViewContext/ViewContext.js';
-import { isUserLinkingWallet } from '../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
 import { FilterBridgeChainsName } from '../../utils/functions/walletFilters/index.js';
 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 { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import { ReactComponent as SvgNoWalletFound } from '../../assets/no-wallet-found.js';
+import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { SearchNotFoundMessage } from './SearchNotFoundMessage/SearchNotFoundMessage.js';
 import { WalletListItem } from './WalletListItem/WalletListItem.js';
 
 LocalStorage.setToLS(WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
     var _a;
-    const { walletsFilter, signWithEmailWalletName, user, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, } = useInternalDynamicContext();
+    const { walletsFilter, signWithEmailWalletName, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, walletConnector, } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const { error } = useErrorContext();
-    const { view } = useViewContext();
-    const { mockedSDK } = useMockContext();
     const { t } = useTranslation();
     const [filterValue, setFilterValue] = useState((_a = LocalStorage.getFromLS(WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
     const [footerIsVisible, setFooterIsVisibile] = useState(false);
@@ -58,7 +55,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
-    const noDefaultFooter = isUserLinkingWallet(user, view, mockedSDK);
+    const { showDefaultFooter } = useAuthLayoutChecks(walletConnector);
     const walletListScrollRef = useRef(null);
     /* istanbul ignore next */
     const handleScroll = () => {
@@ -83,7 +80,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     return (jsxs(Fragment, { children: [searchContainer, Boolean(error) && (jsx(ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsx("div", { className: 'wallet-list__container', children: jsxs("div", { className: classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
                         'wallet-list__scroll-container--full-height': isSearchEnabled,
-                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [walletConnectorOptions.length === 0 && (jsx(ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet, index) => (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: multiWallet, onResetSearchValue: () => handleFilterValueChange('') }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), noDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
+                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [walletConnectorOptions.length === 0 && (jsx(ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet, index) => (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: multiWallet, onResetSearchValue: () => handleFilterValueChange('') }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };