@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/context/DynamicContext/DynamicContext.es.js

@@ -0,0 +1,437 @@
+import { __awaiter } from '../../../../_virtual/_tslib.es.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { logger as logger$1 } from '@dynamic-labs/multi-wallet';
+import { ICONIC_SPRITE_URL } from '@dynamic-labs/iconic';
+import { AUTH_TOKEN, AUTH_USER, AUTH_MODE } from '../../utils/constants/localStorage.es.js';
+import '../../utils/constants/colors.es.js';
+import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.es.js';
+import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.es.js';
+import { logger } from '../../shared/logger.es.js';
+import { ViewContextProvider } from '../ViewContext/ViewContext.es.js';
+import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.es.js';
+import '../../shared/consts/index.es.js';
+import { useFetchProjectSettings } from '../../utils/hooks/useFetchProjectSettings/useFetchProjectSettings.es.js';
+import { useFetchNonce } from '../../utils/hooks/useFetchNonce/useFetchNonce.es.js';
+import { useWallets } from '../../utils/hooks/useWallets/useWallets.es.js';
+import { useWalletConnectors } from '../../utils/hooks/useWalletConnectors/useWalletConnectors.es.js';
+import { revokeSession } from '../../data/api.es.js';
+import { getAuthToken } from '../../utils/functions/getAuthToken/getAuthToken.es.js';
+import '@dynamic-labs/sdk-api';
+import { isSameWalletName } from '../../utils/functions/isSameWalletName/isSameWalletName.es.js';
+import { ErrorContextProvider } from '../ErrorContext/ErrorContext.es.js';
+import 'react-dom';
+import { useWalletUiUtils } from '../../utils/hooks/useWalletUiUtils/useWalletUiUtils.es.js';
+import '../MockContext/MockContext.es.js';
+import { CaptchaContextProvider } from '../CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import ApiEndpoint from '../../config/ApiEndpoint.es.js';
+import { ThemeContextProvider } from '../ThemeContext/ThemeContext.es.js';
+import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.es.js';
+import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.es.js';
+import { useWalletEventListeners } from '../../utils/hooks/useWalletEventListeners/useWalletEventListeners.es.js';
+import { LoadingContextProvider } from '../LoadingContext/LoadingContext.es.js';
+import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.es.js';
+import { useFetchWalletsForChainsMap } from '../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.es.js';
+import { useHandleUnlinkWallet } from '../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.es.js';
+import { DynamicAuthFlow } from '../../app.es.js';
+import { useClearWalletConnectSessions } from '../../utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.es.js';
+import { parseTheme } from '../../utils/functions/parseTheme/parseTheme.es.js';
+import { useConnectWallet } from '../../utils/hooks/useConnectWallet/useConnectWallet.es.js';
+import { useRpcProviders } from '../../utils/hooks/useRpcProviders/useRpcProviders.es.js';
+import { EmailVerificationContextProvider } from '../EmailVerificationContext/EmailVerificationContext.es.js';
+import { DynamicWidgetContextProvider } from '../../widgets/DynamicWidget/context/DynamicWidgetContext.es.js';
+import { QrCodeContextProvider } from '../QrCodeContext/QrCodeContext.es.js';
+import { Toolkit } from '../../components/Toolkit/Toolkit.es.js';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { initExpirationTime } from './helpers.es.js';
+import { validateAuthUser } from './validators.es.js';
+import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.es.js';
+import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomerAuthFlowCallbacks.es.js';
+import { useEmailLoginState } from './hooks/useEmailLoginState/useEmailLoginState.es.js';
+import { useDisplayOrderState } from './hooks/useDisplayOrderState/useDisplayOrderState.es.js';
+
+const EMPTY_INITIAL_USER = undefined;
+const DynamicContext = createContext(undefined);
+const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, initialAuthenticationMode = 'connect-and-sign', vendorCredentials, debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet = false, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, magicLinkConfig, }, children, theme, }) => {
+    var _a, _b;
+    logger.setLogLevel(logLevel);
+    logger$1.setLogLevel(logLevel);
+    ApiEndpoint.setBaseUrl((_a = process.env.DYNAMIC_API_BASE_URL) !== null && _a !== void 0 ? _a : apiBaseUrl);
+    const isAuthenticated = Boolean(getAuthToken());
+    const [onboardingOnlyJwt, setOnboardingOnlyJwt] = useState(undefined);
+    const [showAuthFlow, setShowAuthFlow] = useState(false);
+    // Allows clients to control widget flow without need to click on AccountControl
+    const [showDynamicUserProfile, setShowDynamicUserProfile] = useState(false);
+    const [isSingleWalletAccount, setIsSingleWalletAccount] = useState(false);
+    const [user, setUser, removeUser] = useLocalStorage(AUTH_USER, EMPTY_INITIAL_USER, validateAuthUser, [AUTH_TOKEN]);
+    const { consumeNonce } = useFetchNonce(environmentId);
+    const [qrcodeUri, setQrcodeUri] = useState('');
+    const [desktopUri, setDesktopUri] = useState('');
+    const [multiWalletWidgetState, setMultiWalletWidgetState, { awaiting_account_switch: [accountSwitchState], awaiting_signature: [awaitingSignatureState], },] = useMultiWalletWidgetState();
+    const [isVerifying, setIsVerifying] = useState(false);
+    const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings({ authToken: getAuthToken(), environmentId });
+    const { configurations: serverNetworkConfigurations, removeLsNetworks } = useFetchNetworkConfigurations({
+        authToken: getAuthToken(),
+        environmentId,
+        localNetworks: evmNetworks,
+    });
+    const { imageUserInAccessList, imageUserNotInAccessList, displayName, appLogo, } = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) || {};
+    appLogoUrl = appLogo || appLogoUrl;
+    appName = displayName || appName;
+    const [loginWithEmail, setLogInWithEmail] = useEmailLoginState((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || [], user);
+    const [authorizationViewDisplayOrder, setAuthorizationViewDisplayOrder] = useDisplayOrderState(projectSettings);
+    const [confirmationModal, walletUiUtils] = useWalletUiUtils({
+        appLogoUrl,
+        appName,
+        getAppOrigin: () => window.location.origin,
+    });
+    const { wallets } = useWallets({
+        appLogoUrl,
+        appName,
+        magicLinkConfig,
+        networkConfigurations: serverNetworkConfigurations,
+        projectSettings,
+        vendorCredentials,
+        walletUiUtils,
+    });
+    const [authMode, setAuthMode] = useLocalStorage(AUTH_MODE, initialAuthenticationMode);
+    const { connectWallet, removeConnectedInfo, connectedWallet, setConnectedWallet, connectWalletByAddressAndChain, } = useConnectWallet(wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly);
+    const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
+    const removeAuthTokenAndUser = useCallback(() => {
+        localStorage.removeItem(AUTH_TOKEN);
+        removeUser();
+    }, [removeUser]);
+    const { clearWalletStates, computeConnectedStateForWallets, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors({
+        authToken: getAuthToken() || onboardingOnlyJwt,
+        multiWalletWidgetState,
+        setDesktopUri,
+        setMultiWalletWidgetState,
+        setQrcodeUri,
+        wallets,
+    });
+    const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
+    useSyncPrimaryWallet({
+        multiWalletWidgetState,
+        primaryWallet,
+        setMultiWalletWidgetState,
+    });
+    const { clearAllWalletConnectSessions, clearOphanedWalletConnectSessions } = useClearWalletConnectSessions({
+        connectors: walletConnectors,
+    });
+    useEffect(clearOphanedWalletConnectSessions, [
+        clearOphanedWalletConnectSessions,
+    ]);
+    const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e, _f;
+        clearAllWalletConnectSessions();
+        const jwt = getAuthToken();
+        if (jwt && user) {
+            // do not await this async call - just fire and forget
+            revokeSession({ environmentId, sessionId: user.sessionId }, jwt);
+        }
+        for (const connector of walletConnectors) {
+            yield ((_c = connector.endSession) === null || _c === void 0 ? void 0 : _c.call(connector));
+        }
+        (_e = (_d = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _d === void 0 ? void 0 : _d.endSession) === null || _e === void 0 ? void 0 : _e.call(_d);
+        setShowAuthFlow(false);
+        setMultiWalletWidgetState('idle');
+        removeAuthTokenAndUser();
+        setConnectedWallet(null);
+        removeLsNetworks();
+        setOnboardingOnlyJwt(undefined);
+        removeConnectedInfo();
+        clearWalletStates();
+        (_f = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _f === void 0 ? void 0 : _f.call(eventsCallbacks, user);
+    }), [
+        clearAllWalletConnectSessions,
+        user,
+        connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector,
+        setMultiWalletWidgetState,
+        removeAuthTokenAndUser,
+        setConnectedWallet,
+        removeLsNetworks,
+        removeConnectedInfo,
+        clearWalletStates,
+        eventsCallbacks,
+        environmentId,
+        walletConnectors,
+    ]);
+    const handleUnlinkWallet = useHandleUnlinkWallet({
+        environmentId,
+        primaryWalletId,
+        secondaryWallets,
+        setUser,
+        verifiedCredentials: (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [],
+    });
+    const { loadingNetwork, network, setNetwork } = useWalletEventListeners({
+        computeConnectedStateForWallets,
+        connectWalletByAddressAndChain,
+        handleLogOut,
+        multiWallet,
+        multiWalletWidgetState,
+        primaryWallet: walletForUserFacingContext,
+        secondaryWallets,
+        selectedWalletConnector,
+        setMultiWalletWidgetState,
+        setPrimaryWalletId,
+        setSelectedWalletConnector,
+        user,
+    });
+    const { walletsForChainsMap } = useFetchWalletsForChainsMap(newToWeb3WalletChainMap);
+    const rpcProviders = useRpcProviders({
+        networkConfigurations: serverNetworkConfigurations,
+        networkId: network,
+    });
+    useEffect(() => {
+        initExpirationTime(handleLogOut);
+    }, [handleLogOut]);
+    useCustomerAuthFlowCallbacks({ eventsCallbacks, showAuthFlow });
+    const { setCallback } = useCustomerCallbacks({
+        authMode,
+        callbacks: {
+            onAuthSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onAuthSuccess,
+            onConnectSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnectSuccess,
+            onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
+            onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
+        },
+        handleLogOut,
+        isAuthenticated,
+        primaryWallet: walletForUserFacingContext,
+        user,
+    });
+    const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _g;
+        setDesktopUri('');
+        setIsVerifying(false);
+        if (!user) {
+            clearAllWalletConnectSessions();
+        }
+        setMultiWalletWidgetState('idle');
+        if (authMode !== 'connect-only') {
+            setConnectedWallet(null);
+            removeConnectedInfo();
+        }
+        if (!localStorage.getItem(AUTH_USER)) {
+            localStorage.removeItem(AUTH_TOKEN);
+        }
+        if (selectedWalletConnector &&
+            (!primaryWallet ||
+                !isSameWalletName(primaryWallet.connector.name, selectedWalletConnector.name))) {
+            yield ((_g = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession) === null || _g === void 0 ? void 0 : _g.call(selectedWalletConnector));
+        }
+    }), [
+        user,
+        setMultiWalletWidgetState,
+        authMode,
+        selectedWalletConnector,
+        primaryWallet,
+        clearAllWalletConnectSessions,
+        setConnectedWallet,
+        removeConnectedInfo,
+    ]);
+    const value = useMemo(() => {
+        var _a, _b;
+        return ({
+            accessDeniedMessagePrimary,
+            accessDeniedMessageSecondary,
+            accountSwitchState,
+            appLogoUrl,
+            appName,
+            authMode,
+            authToken: getAuthToken(),
+            authorizationViewDisplayOrder,
+            awaitingSignatureState,
+            clearStatesOnBackClick,
+            computeConnectedStateForWallets,
+            connectWallet,
+            connectedWallet,
+            connectedWallets: primaryWallet
+                ? [primaryWallet, ...secondaryWallets]
+                : [],
+            consumeNonce,
+            cssOverrides,
+            debugError,
+            decodedAuthToken: decodeJwt(getAuthToken()),
+            decodedOnboardingOnlyToken: decodeJwt(onboardingOnlyJwt),
+            defaultNumberOfWalletsToShow,
+            desktopUri,
+            displayTermsOfService,
+            environmentId,
+            eventsCallbacks,
+            handleLogOut,
+            handleUnlinkWallet,
+            isAuthenticated,
+            isProjectSettingsLoading,
+            isSingleWalletAccount,
+            isVerifying,
+            loadingNetwork,
+            loginWithEmail,
+            multiWallet,
+            multiWalletWidgetState,
+            network,
+            networkConfigurations: serverNetworkConfigurations,
+            newToWeb3WalletChainMap: walletsForChainsMap,
+            notInTheListImageUrl: imageUserNotInAccessList || notInTheListImageUrl,
+            onboardingImageUrl: imageUserInAccessList || onboardingImageUrl,
+            onboardingOnlyJwt,
+            policiesConsentInnerComponent,
+            primaryWallet: walletForUserFacingContext,
+            primaryWalletId,
+            privacyPolicyUrl,
+            projectSettings,
+            qrcodeUri,
+            rpcProviders,
+            secondaryWallets,
+            selectedWalletConnector,
+            setAuthMode,
+            setAuthorizationViewDisplayOrder,
+            setCallback,
+            setDesktopUri,
+            setIsSingleWalletAccount,
+            setIsVerifying,
+            setLogInWithEmail,
+            setMultiWalletWidgetState,
+            setNetwork,
+            setOnboardingOnlyJwt,
+            setPrimaryWallet,
+            setPrimaryWalletId,
+            setQrcodeUri,
+            setSelectedWalletConnector,
+            setShowAuthFlow,
+            setShowDynamicUserProfile,
+            setShowQrcodeModal,
+            setUser,
+            shadowDOMEnabled,
+            showAuthFlow,
+            showDynamicUserProfile,
+            showQrcodeModal,
+            signWithEmailWalletName,
+            siweStatement,
+            socialMediaIconUrl: ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportUrls) || socialMediaIconUrl,
+            socialMediaLinkText,
+            socialMediaUrl,
+            termsOfServiceUrl,
+            theme,
+            toolkitEnabled,
+            user,
+            vendorCredentials,
+            walletConnector: (_b = walletForUserFacingContext === null || walletForUserFacingContext === void 0 ? void 0 : walletForUserFacingContext.connector) !== null && _b !== void 0 ? _b : null,
+            walletUiUtils,
+            wallets,
+            walletsFilter,
+        });
+    }, [
+        accessDeniedMessagePrimary,
+        accessDeniedMessageSecondary,
+        accountSwitchState,
+        appLogo,
+        appLogoUrl,
+        displayName,
+        appName,
+        authMode,
+        authorizationViewDisplayOrder,
+        awaitingSignatureState,
+        clearStatesOnBackClick,
+        computeConnectedStateForWallets,
+        connectWallet,
+        connectedWallet,
+        defaultNumberOfWalletsToShow,
+        primaryWallet,
+        secondaryWallets,
+        consumeNonce,
+        cssOverrides,
+        debugError,
+        onboardingOnlyJwt,
+        desktopUri,
+        displayTermsOfService,
+        environmentId,
+        eventsCallbacks,
+        handleLogOut,
+        handleUnlinkWallet,
+        user,
+        isProjectSettingsLoading,
+        isSingleWalletAccount,
+        isVerifying,
+        loadingNetwork,
+        loginWithEmail,
+        multiWallet,
+        multiWalletWidgetState,
+        network,
+        serverNetworkConfigurations,
+        walletsForChainsMap,
+        imageUserNotInAccessList,
+        notInTheListImageUrl,
+        imageUserInAccessList,
+        onboardingImageUrl,
+        policiesConsentInnerComponent,
+        walletForUserFacingContext,
+        primaryWalletId,
+        privacyPolicyUrl,
+        projectSettings,
+        qrcodeUri,
+        rpcProviders,
+        selectedWalletConnector,
+        setAuthMode,
+        setAuthorizationViewDisplayOrder,
+        setCallback,
+        setLogInWithEmail,
+        setMultiWalletWidgetState,
+        setNetwork,
+        setPrimaryWallet,
+        setPrimaryWalletId,
+        setShowQrcodeModal,
+        setUser,
+        shadowDOMEnabled,
+        showAuthFlow,
+        showDynamicUserProfile,
+        showQrcodeModal,
+        signWithEmailWalletName,
+        siweStatement,
+        socialMediaIconUrl,
+        socialMediaLinkText,
+        socialMediaUrl,
+        termsOfServiceUrl,
+        theme,
+        toolkitEnabled,
+        vendorCredentials,
+        walletUiUtils,
+        wallets,
+        walletsFilter,
+    ]);
+    useEffect(() => {
+        if (!document.head.querySelector('#sprite')) {
+            const element = document.createElement('link');
+            element.setAttribute('id', 'sprite');
+            element.setAttribute('rel', 'prefetch');
+            element.setAttribute('href', ICONIC_SPRITE_URL);
+            element.setAttribute('as', 'image');
+            element.setAttribute('type', 'image/svg+xml');
+            document.head.insertAdjacentElement('beforeend', element);
+        }
+    }, []);
+    // hides dynamic widget if user is not logged in or there is no connected wallet
+    useEffect(() => {
+        if (!user && !connectedWallet && showDynamicUserProfile) {
+            setShowDynamicUserProfile(false);
+        }
+    }, [connectedWallet, showDynamicUserProfile, user]);
+    // DYN-1140 - Opens Widget when multiWalletWidgetState changes
+    useEffect(() => {
+        // If statement to secure SingleWallet widget
+        if (!multiWallet)
+            return;
+        // We need to make sure that the user is logged in so that we do not try to display the widget before authorization
+        if (user && multiWalletWidgetState !== 'idle' && !showDynamicUserProfile) {
+            setShowDynamicUserProfile(true);
+        }
+    }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
+    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _b === void 0 ? void 0 : _b.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ loginWithEmail: loginWithEmail }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsxs(CaptchaContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), confirmationModal, children] }) }) }) }) }) })) }) })) })));
+};
+
+export { DynamicContext, DynamicContextProvider };

package/src/lib/context/DynamicContext/helpers.cjs.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs.js');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('react/jsx-runtime');
+require('../ViewContext/ViewContext.cjs.js');
+require('react');
+var localStorage$1 = require('../../utils/constants/localStorage.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+
+let logoutTimer;
+const isAuthTokenExpired = (token) => {
+    const decoded = decodeJwt.decodeJwt(token);
+    if (!decoded) {
+        return true;
+    }
+    if (!decoded.exp) {
+        return true;
+    }
+    const expirationTime = new Date(decoded.exp * 1000).getTime();
+    const currentTime = new Date().getTime();
+    if (currentTime >= expirationTime) {
+        return true;
+    }
+    return false;
+};
+const initExpirationTime = (logout) => {
+    const decodedJwt = decodeJwt.decodeJwt(localStorage.getItem(localStorage$1.AUTH_TOKEN));
+    if (!decodedJwt)
+        return clearTimeout(logoutTimer);
+    const tokenExp = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.exp;
+    if (!tokenExp) {
+        clearTimeout(logoutTimer);
+        return logout();
+    }
+    const expirationTime = new Date(tokenExp * 1000).getTime();
+    const currentTime = new Date().getTime();
+    if (currentTime >= expirationTime) {
+        clearTimeout(logoutTimer);
+        return logout();
+    }
+    const expirationTimeInMs = expirationTime - currentTime;
+    // If value is greater than 2,147,483,647 ms (about 24.8 days), there's an integer overflow
+    // and the callback will fire imediately
+    // https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+    const expiryTimeout = Math.min(expirationTimeInMs, 2147483647);
+    logoutTimer = setTimeout(logout, expiryTimeout);
+};
+
+exports.initExpirationTime = initExpirationTime;
+exports.isAuthTokenExpired = isAuthTokenExpired;

package/src/lib/context/DynamicContext/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const isAuthTokenExpired: (token: string) => boolean;
+export declare const initExpirationTime: (logout: VoidFunction) => void;

package/src/lib/context/DynamicContext/helpers.es.js

@@ -0,0 +1,50 @@
+import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.es.js';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import 'react/jsx-runtime';
+import '../ViewContext/ViewContext.es.js';
+import 'react';
+import { AUTH_TOKEN } from '../../utils/constants/localStorage.es.js';
+import '../../utils/constants/colors.es.js';
+
+let logoutTimer;
+const isAuthTokenExpired = (token) => {
+    const decoded = decodeJwt(token);
+    if (!decoded) {
+        return true;
+    }
+    if (!decoded.exp) {
+        return true;
+    }
+    const expirationTime = new Date(decoded.exp * 1000).getTime();
+    const currentTime = new Date().getTime();
+    if (currentTime >= expirationTime) {
+        return true;
+    }
+    return false;
+};
+const initExpirationTime = (logout) => {
+    const decodedJwt = decodeJwt(localStorage.getItem(AUTH_TOKEN));
+    if (!decodedJwt)
+        return clearTimeout(logoutTimer);
+    const tokenExp = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.exp;
+    if (!tokenExp) {
+        clearTimeout(logoutTimer);
+        return logout();
+    }
+    const expirationTime = new Date(tokenExp * 1000).getTime();
+    const currentTime = new Date().getTime();
+    if (currentTime >= expirationTime) {
+        clearTimeout(logoutTimer);
+        return logout();
+    }
+    const expirationTimeInMs = expirationTime - currentTime;
+    // If value is greater than 2,147,483,647 ms (about 24.8 days), there's an integer overflow
+    // and the callback will fire imediately
+    // https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+    const expiryTimeout = Math.min(expirationTimeInMs, 2147483647);
+    logoutTimer = setTimeout(logout, expiryTimeout);
+};
+
+export { initExpirationTime, isAuthTokenExpired };

package/src/lib/context/DynamicContext/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useEmailLoginState';
+export * from './useDisplayOrderState';

package/src/lib/context/DynamicContext/hooks/useDisplayOrderState/index.d.ts

@@ -0,0 +1,2 @@
+export { useDisplayOrderState } from './useDisplayOrderState';
+export type { SetDisplayOrderPriority, DisplayOrder, } from './useDisplayOrderState.types';

package/src/lib/context/DynamicContext/hooks/useDisplayOrderState/useDisplayOrderState.cjs.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('react/jsx-runtime');
+require('../../../ViewContext/ViewContext.cjs.js');
+var isDisplayOrderPriorityForWeb3 = require('../../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.cjs.js');
+var isDisplayOrderPriorityForWeb2 = require('../../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+
+const web2DisplayOrder = ['email', 'wallet'];
+const web3DisplayOrder = ['wallet', 'email'];
+const useDisplayOrderState = (projectSettings) => {
+    const [displayOrder, setDisplayOrder] = React.useState(web3DisplayOrder);
+    const setDisplayOrderPriority = React.useCallback((priority) => {
+        if (priority === 'web3') {
+            setDisplayOrder(web3DisplayOrder);
+        }
+        else {
+            setDisplayOrder(web2DisplayOrder);
+        }
+    }, [setDisplayOrder]);
+    React.useEffect(() => {
+        var _a;
+        const displayOrderFromApi = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.displayOrder;
+        if (!displayOrderFromApi)
+            return;
+        if (isDisplayOrderPriorityForWeb3.isDisplayOrderPriorityForWeb3(displayOrderFromApi)) {
+            setDisplayOrder(web3DisplayOrder);
+        }
+        else if (isDisplayOrderPriorityForWeb2.isDisplayOrderPriorityForWeb2(displayOrderFromApi)) {
+            setDisplayOrder(web2DisplayOrder);
+        }
+    }, [projectSettings]);
+    return [displayOrder, setDisplayOrderPriority];
+};
+
+exports.useDisplayOrderState = useDisplayOrderState;

package/src/lib/context/DynamicContext/hooks/useDisplayOrderState/useDisplayOrderState.d.ts

@@ -0,0 +1,3 @@
+import { ProjectSettings } from '@dynamic-labs/sdk-api';
+import { DisplayOrder, SetDisplayOrderPriority } from './useDisplayOrderState.types';
+export declare const useDisplayOrderState: (projectSettings: ProjectSettings | undefined) => [DisplayOrder, SetDisplayOrderPriority];

package/src/lib/context/DynamicContext/hooks/useDisplayOrderState/useDisplayOrderState.es.js

@@ -0,0 +1,40 @@
+import { useState, useCallback, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import 'react/jsx-runtime';
+import '../../../ViewContext/ViewContext.es.js';
+import { isDisplayOrderPriorityForWeb3 } from '../../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.es.js';
+import { isDisplayOrderPriorityForWeb2 } from '../../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+
+const web2DisplayOrder = ['email', 'wallet'];
+const web3DisplayOrder = ['wallet', 'email'];
+const useDisplayOrderState = (projectSettings) => {
+    const [displayOrder, setDisplayOrder] = useState(web3DisplayOrder);
+    const setDisplayOrderPriority = useCallback((priority) => {
+        if (priority === 'web3') {
+            setDisplayOrder(web3DisplayOrder);
+        }
+        else {
+            setDisplayOrder(web2DisplayOrder);
+        }
+    }, [setDisplayOrder]);
+    useEffect(() => {
+        var _a;
+        const displayOrderFromApi = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.displayOrder;
+        if (!displayOrderFromApi)
+            return;
+        if (isDisplayOrderPriorityForWeb3(displayOrderFromApi)) {
+            setDisplayOrder(web3DisplayOrder);
+        }
+        else if (isDisplayOrderPriorityForWeb2(displayOrderFromApi)) {
+            setDisplayOrder(web2DisplayOrder);
+        }
+    }, [projectSettings]);
+    return [displayOrder, setDisplayOrderPriority];
+};
+
+export { useDisplayOrderState };

package/src/lib/context/DynamicContext/hooks/useDisplayOrderState/useDisplayOrderState.types.d.ts

@@ -0,0 +1,2 @@
+export type SetDisplayOrderPriority = (priority: 'web3' | 'web2') => void;
+export type DisplayOrder = ('wallet' | 'email')[];

package/src/lib/context/DynamicContext/hooks/useEmailLoginState/index.d.ts

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