@dynamic-labs/sdk-react-core 0.18.0-RC.7 → 0.18.0-RC.8

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

@@ -1,4 +1,4 @@
-import { __rest, __awaiter } from '../../../../../_virtual/_tslib.js';
+import { __rest } from '../../../../../_virtual/_tslib.js';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { animationFrameTimeout, clearAnimationFrameTimeout } from '../../functions/animationFrameTimeout/animationFrameTimeout.js';
 import { useTransitionEvents } from '../useTransitionEvents/useTransitionEvents.js';
@@ -6,22 +6,22 @@ import { useTransitionEvents } from '../useTransitionEvents/useTransitionEvents.
 const DEFAULT_DURATION = 100;
 // The hook inspired by https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js
 const useTransition = (_a) => {
-    var { isShown, inDuration, outDuration, duration = DEFAULT_DURATION, timeout, inTimeout, outTimeout, animateOnMount = true } = _a, events = __rest(_a, ["isShown", "inDuration", "outDuration", "duration", "timeout", "inTimeout", "outTimeout", "animateOnMount"]);
-    const initialState = animateOnMount ? 'UNMOUNT' : 'ENTERED';
+    var { isShown, inDuration, outDuration, duration = DEFAULT_DURATION, delay, inDelay, outDelay, animateOnMount = true } = _a, events = __rest(_a, ["isShown", "inDuration", "outDuration", "duration", "delay", "inDelay", "outDelay", "animateOnMount"]);
+    const initialStage = animateOnMount ? 'UNMOUNT' : 'ENTERED';
     const animationFrameTimeoutIdRef = useRef({ id: -1 });
     const timeoutIdRef = useRef({ id: -1 });
-    const [stage, setStage] = useState(initialState);
+    const [stage, setStage] = useState(initialStage);
     const [mount, setMount] = useState(!animateOnMount);
     const [currentDuration, setCurrentDuration] = useState(duration);
-    const conditionTimeout = (callback, timeout) => {
-        if (timeout) {
-            timeoutIdRef.current = animationFrameTimeout(callback, timeout);
+    const performTransition = (runTransition, transitionDelay) => {
+        if (transitionDelay) {
+            timeoutIdRef.current = animationFrameTimeout(runTransition, transitionDelay);
         }
         else {
-            callback();
+            runTransition();
         }
     };
-    const performEnter = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const performEnter = useCallback(() => {
         const animationDuration = inDuration || duration;
         setCurrentDuration(animationDuration);
         setMount(true);
@@ -29,8 +29,8 @@ const useTransition = (_a) => {
         animationFrameTimeoutIdRef.current = animationFrameTimeout(() => {
             setStage('ENTERED');
         }, animationDuration);
-    }), [duration, inDuration]);
-    const performExit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    }, [duration, inDuration]);
+    const performExit = useCallback(() => {
         const animationDuration = outDuration || duration;
         setCurrentDuration(animationDuration);
         setStage('EXITING');
@@ -38,29 +38,21 @@ const useTransition = (_a) => {
             setMount(false);
             setStage('UNMOUNT');
         }, animationDuration);
-    }), [duration, outDuration]);
+    }, [duration, outDuration]);
     useEffect(() => {
         if (isShown && stage !== 'ENTERED') {
-            const enterTimeout = timeout || inTimeout;
-            conditionTimeout(performEnter, enterTimeout);
+            const enterDelay = inDelay || delay;
+            performTransition(performEnter, enterDelay);
         }
         else if (!isShown && stage !== 'UNMOUNT') {
-            const exitTimeout = timeout || outTimeout;
-            conditionTimeout(performExit, exitTimeout);
+            const exitDelay = outDelay || delay;
+            performTransition(performExit, exitDelay);
         }
         return () => {
             clearAnimationFrameTimeout(animationFrameTimeoutIdRef.current);
             clearAnimationFrameTimeout(timeoutIdRef.current);
         };
-    }, [
-        inTimeout,
-        outTimeout,
-        performEnter,
-        performExit,
-        isShown,
-        timeout,
-        stage,
-    ]);
+    }, [inDelay, outDelay, performEnter, performExit, isShown, delay, stage]);
     useTransitionEvents(stage, events);
     return { currentDuration, mount, stage };
 };

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

@@ -4,21 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var useUpdateEffect = require('../useUpdateEffect/useUpdateEffect.cjs');
 
-const useTransitionEvents = (stage, events) => useUpdateEffect.useUpdateEffect(() => {
-    var _a;
+const useTransitionEvents = (stage, events) => {
     const mapCallbackToStage = {
         ENTERED: events === null || events === void 0 ? void 0 : events.onEntered,
         ENTERING: events === null || events === void 0 ? void 0 : events.onEntering,
         EXITING: events === null || events === void 0 ? void 0 : events.onExiting,
         UNMOUNT: events === null || events === void 0 ? void 0 : events.onUnmount,
     };
-    (_a = mapCallbackToStage[stage]) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
-    return () => {
+    return useUpdateEffect.useUpdateEffect(() => {
         var _a;
-        if (stage === 'EXITING') {
-            (_a = mapCallbackToStage.UNMOUNT) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
-        }
-    };
-}, [stage]);
+        (_a = mapCallbackToStage[stage]) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
+        return () => {
+            var _a;
+            if (stage === 'EXITING') {
+                (_a = mapCallbackToStage.UNMOUNT) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
+            }
+        };
+    }, [stage]);
+};
 
 exports.useTransitionEvents = useTransitionEvents;

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

@@ -1,20 +1,22 @@
 import { useUpdateEffect } from '../useUpdateEffect/useUpdateEffect.js';
 
-const useTransitionEvents = (stage, events) => useUpdateEffect(() => {
-    var _a;
+const useTransitionEvents = (stage, events) => {
     const mapCallbackToStage = {
         ENTERED: events === null || events === void 0 ? void 0 : events.onEntered,
         ENTERING: events === null || events === void 0 ? void 0 : events.onEntering,
         EXITING: events === null || events === void 0 ? void 0 : events.onExiting,
         UNMOUNT: events === null || events === void 0 ? void 0 : events.onUnmount,
     };
-    (_a = mapCallbackToStage[stage]) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
-    return () => {
+    return useUpdateEffect(() => {
         var _a;
-        if (stage === 'EXITING') {
-            (_a = mapCallbackToStage.UNMOUNT) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
-        }
-    };
-}, [stage]);
+        (_a = mapCallbackToStage[stage]) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
+        return () => {
+            var _a;
+            if (stage === 'EXITING') {
+                (_a = mapCallbackToStage.UNMOUNT) === null || _a === void 0 ? void 0 : _a.call(mapCallbackToStage);
+            }
+        };
+    }, [stage]);
+};
 
 export { useTransitionEvents };

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

@@ -38,7 +38,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setConnectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -91,6 +91,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector, address, oauth) => {
+        removeConnectedWalletsInfo();
+        setConnectedWallets([]);
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof utils.WalletUsedError) {

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

@@ -34,7 +34,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage, setError } = useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, } = useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setConnectedWallets, } = useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -87,6 +87,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector, address, oauth) => {
+        removeConnectedWalletsInfo();
+        setConnectedWallets([]);
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof WalletUsedError) {

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

@@ -62,6 +62,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // eslint-disable-next-line react-hooks/exhaustive-deps
         orderedSecondaryWalletAddresses(secondaryWallets).join(),
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
     ]);
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -58,6 +58,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // eslint-disable-next-line react-hooks/exhaustive-deps
         orderedSecondaryWalletAddresses(secondaryWallets).join(),
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
     ]);
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = React.useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -17,6 +17,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -28,6 +29,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -39,6 +41,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
         networkConfigurations,
         projectSettings,
         walletConnectorsProp,
+        walletConnectV1Bridge,
         flowNetwork,
         Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length,
     ]);

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

@@ -9,10 +9,11 @@ type Props = {
     networkConfigurations: NetworkConfigurationMap | undefined;
     projectSettings: ProjectSettings | undefined;
     walletBook: WalletBookSchema;
+    walletConnectV1Bridge?: string;
     walletConnectorsProp?: WalletConnectorsMethod[];
     walletUiUtils: WalletUiUtils;
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }: Props) => {
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: import("../../../shared").WalletOption[];
 };
 export {};

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -13,6 +13,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -24,6 +25,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -35,6 +37,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
         networkConfigurations,
         projectSettings,
         walletConnectorsProp,
+        walletConnectV1Bridge,
         flowNetwork,
         Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length,
     ]);

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

@@ -8,7 +8,7 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../shared/logger.cjs');
+var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
@@ -76,6 +76,7 @@ const EmailUpdate = () => {
             setVerificationUUID(emailVerification.verificationUUID);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
-import '../../shared/logger.js';
+import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
@@ -72,6 +72,7 @@ const EmailUpdate = () => {
             setVerificationUUID(emailVerification.verificationUUID);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

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

@@ -13,7 +13,7 @@ require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var check = require('../../shared/assets/check.cjs');
 var checkCircle = require('../../shared/assets/check-circle.cjs');
-require('../../shared/logger.cjs');
+var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
@@ -44,6 +44,7 @@ require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondar
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useCountdown = require('../../utils/hooks/useCountdown/useCountdown.cjs');
 var TextButton = require('../../components/TextButton/TextButton.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 var PinField = require('../../components/PinField/PinField.cjs');
@@ -57,10 +58,9 @@ var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 var useEmailVerificationRequest = require('../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.cjs');
 var useCreateUserProfileByJWTCallback = require('../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.cjs');
 
-const secondsToRetry = 15;
+const SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = React.useState(false);
-    const [count, setCount] = React.useState(secondsToRetry);
     const [retried, setRetried] = React.useState(false);
     const [isValidated, setIsValidated] = React.useState(false);
     const [showTransferMessage, setShowTransferMessage] = React.useState(false);
@@ -69,6 +69,10 @@ const EmailVerification = () => {
     const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
+    const { remainingSeconds, startCountdown } = useCountdown.useCountdown({
+        callback: () => setRetried(false),
+        seconds: SECONDS_TO_RETRY,
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
@@ -93,6 +97,7 @@ const EmailVerification = () => {
             setShowAuthFlow(false);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -151,6 +156,7 @@ const EmailVerification = () => {
             if (error instanceof utils.NoAccessError) {
                 setView('no-access');
             }
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -183,9 +189,11 @@ const EmailVerification = () => {
             });
             setVerificationUUID(newVerificationUUID);
             setRetried(true);
+            startCountdown();
             setError(undefined);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
             if (error.code === 'too_many_email_verification_attempts') {
                 setHideRetryButton(true);
@@ -198,26 +206,9 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    React.useEffect(() => {
-        /* istanbul ignore next */
-        setCount(secondsToRetry);
-        const timeout = setTimeout(() => {
-            if (retried)
-                setRetried(false);
-        }, secondsToRetry * 1000);
-        return () => clearTimeout(timeout);
-    }, [retried]);
-    React.useEffect(() => {
-        /* istanbul ignore next */
-        const timeout = setTimeout(() => {
-            if (count)
-                setCount((prev) => prev - 1);
-        }, 1000);
-        return () => clearTimeout(timeout);
-    }, [count]);
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), isValidated ? (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent }) }))) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: classNames.classNames({
                     'email-verification__icon-with-spinner': Boolean(!error),
-                }), Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", count] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
+                }), Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
 };
 
 exports.EmailVerification = EmailVerification;

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { NoAccessError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
@@ -9,7 +9,7 @@ import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgCheckCircle } from '../../shared/assets/check-circle.js';
-import '../../shared/logger.js';
+import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
@@ -40,6 +40,7 @@ import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondary
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useCountdown } from '../../utils/hooks/useCountdown/useCountdown.js';
 import { TextButton } from '../../components/TextButton/TextButton.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import { PinField } from '../../components/PinField/PinField.js';
@@ -53,10 +54,9 @@ import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.j
 import { useEmailVerificationRequest } from '../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
 import { useCreateUserProfileByJWTCallback } from '../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js';
 
-const secondsToRetry = 15;
+const SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = useState(false);
-    const [count, setCount] = useState(secondsToRetry);
     const [retried, setRetried] = useState(false);
     const [isValidated, setIsValidated] = useState(false);
     const [showTransferMessage, setShowTransferMessage] = useState(false);
@@ -65,6 +65,10 @@ const EmailVerification = () => {
     const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
     const { loading, setLoading } = useLoadingContext();
+    const { remainingSeconds, startCountdown } = useCountdown({
+        callback: () => setRetried(false),
+        seconds: SECONDS_TO_RETRY,
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
@@ -89,6 +93,7 @@ const EmailVerification = () => {
             setShowAuthFlow(false);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -147,6 +152,7 @@ const EmailVerification = () => {
             if (error instanceof NoAccessError) {
                 setView('no-access');
             }
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -179,9 +185,11 @@ const EmailVerification = () => {
             });
             setVerificationUUID(newVerificationUUID);
             setRetried(true);
+            startCountdown();
             setError(undefined);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
             if (error.code === 'too_many_email_verification_attempts') {
                 setHideRetryButton(true);
@@ -194,26 +202,9 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    useEffect(() => {
-        /* istanbul ignore next */
-        setCount(secondsToRetry);
-        const timeout = setTimeout(() => {
-            if (retried)
-                setRetried(false);
-        }, secondsToRetry * 1000);
-        return () => clearTimeout(timeout);
-    }, [retried]);
-    useEffect(() => {
-        /* istanbul ignore next */
-        const timeout = setTimeout(() => {
-            if (count)
-                setCount((prev) => prev - 1);
-        }, 1000);
-        return () => clearTimeout(timeout);
-    }, [count]);
     return (jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), isValidated ? (jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck }) }))) : (jsx(IconWithSpinner, { className: classNames({
                     'email-verification__icon-with-spinner': Boolean(!error),
-                }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", count] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), jsx(PoweredByDynamic, {})] })));
+                }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), jsx(PoweredByDynamic, {})] })));
 };
 
 export { EmailVerification };

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

@@ -9,7 +9,7 @@ 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');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -116,6 +116,7 @@ const LoginWithEmailForm = () => {
             yield submitHandler();
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

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

@@ -5,7 +5,7 @@ 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 '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
@@ -112,6 +112,7 @@ const LoginWithEmailForm = () => {
             yield submitHandler();
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {