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

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

@@ -1,7 +1,7 @@
 import { __awaiter } from '../../../../_virtual/_tslib.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 { logger as logger$1 } from '@dynamic-labs/wallet-connector-core';
 import { ICONIC_SPRITE_URL } from '@dynamic-labs/iconic';
 import { AUTH_TOKEN, AUTH_USER, AUTH_MODE } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
@@ -9,16 +9,21 @@ import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import { logger } from '../../shared/logger.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
+import 'ethers';
 import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
 import '../../shared/consts/index.js';
 import { useFetchProjectSettings } from '../../utils/hooks/useFetchProjectSettings/useFetchProjectSettings.js';
 import { useFetchNonce } from '../../utils/hooks/useFetchNonce/useFetchNonce.js';
 import { useWallets } from '../../utils/hooks/useWallets/useWallets.js';
 import { useWalletConnectors } from '../../utils/hooks/useWalletConnectors/useWalletConnectors.js';
 import { revokeSession } from '../../data/api.js';
+import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../utils/functions/getAuthToken/getAuthToken.js';
 import '@dynamic-labs/sdk-api';
 import { ErrorContextProvider } from '../ErrorContext/ErrorContext.js';
+import { AccessDeniedContextProvider } from '../AccessDeniedContext/AccessDeniedContext.js';
 import 'react-dom';
 import { useWalletUiUtils } from '../../utils/hooks/useWalletUiUtils/useWalletUiUtils.js';
 import '../MockContext/MockContext.js';
@@ -28,9 +33,9 @@ import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
 import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.js';
 import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.js';
+import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';
 import { useWalletEventListeners } from '../../utils/hooks/useWalletEventListeners/useWalletEventListeners.js';
 import { LoadingContextProvider } from '../LoadingContext/LoadingContext.js';
-import { useSyncPrimaryWallet } from '../../utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js';
 import { useFetchWalletsForChainsMap } from '../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.js';
 import { useHandleUnlinkWallet } from '../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.js';
 import { DynamicAuthFlow } from '../../app.js';
@@ -49,17 +54,32 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
+import '../../components/Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import '../../components/SendBalanceForm/SendBalanceForm.js';
+import { FundingContextProvider } from '../FundingContext/FundingContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'qrcode';
+import '../../views/CollectUserDataView/fieldsConfig.js';
+import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import 'formik';
+import 'yup';
+import { FundingWidget } from '../../widgets/FundingWidget/FundingWidget.js';
+import { SendBalanceContextProvider } from '../SendBalanceContext/SendBalanceContext.js';
 import { initExpirationTime } from './helpers.js';
 import { validateAuthUser } from './validators.js';
 import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.js';
 import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomerAuthFlowCallbacks.js';
 import { useEmailLoginState } from './hooks/useEmailLoginState/useEmailLoginState.js';
 import { useDisplayOrderState } from './hooks/useDisplayOrderState/useDisplayOrderState.js';
+import { useNameService } from './hooks/useNameService/useNameService.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;
+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, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, }, children, theme, }) => {
+    var _a, _b, _c, _d, _e;
     logger.setLogLevel(logLevel);
     logger$1.setLogLevel(logLevel);
     ApiEndpoint.setBaseUrl((_a = process.env.DYNAMIC_API_BASE_URL) !== null && _a !== void 0 ? _a : apiBaseUrl);
@@ -76,10 +96,13 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     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({
+    const multiWallet = (_c = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet) !== null && _c !== void 0 ? _c : false;
+    // ensures that when user comes back to site and primary wallet is out of sync, we don't show widget popup
+    const [showWidgetStatePopup, setShowWidgetStatePopup] = useState(!multiWallet);
+    const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations({
         authToken: getAuthToken(),
         environmentId,
-        localNetworks: evmNetworks,
+        evmNetworks,
     });
     const { imageUserInAccessList, imageUserNotInAccessList, displayName, appLogo, } = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) || {};
     appLogoUrl = appLogo || appLogoUrl;
@@ -94,15 +117,17 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const { wallets } = useWallets({
         appLogoUrl,
         appName,
-        magicLinkConfig,
+        flowNetwork,
         networkConfigurations: serverNetworkConfigurations,
         projectSettings,
-        vendorCredentials,
+        walletConnectorsProp,
         walletUiUtils,
     });
     const [authMode, setAuthMode] = useLocalStorage(AUTH_MODE, initialAuthenticationMode);
-    const { connectWallet, removeConnectedInfo, connectedWallet, setConnectedWallet, connectWalletByAddressAndChain, } = useConnectWallet(wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly);
+    const { connectWallet, removeConnectedInfo, connectedInfo, connectedWallet, setConnectedWallet, connectWalletByAddressAndChain, } = useConnectWallet(wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly);
     const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
+    //selected wallet to perform an action (become primary, unlink, etc)
+    const [selectedWalletWithAction, setSelectedWalletWithAction] = useState(null);
     const removeAuthTokenAndUser = useCallback(() => {
         localStorage.removeItem(AUTH_TOKEN);
         removeUser();
@@ -115,12 +140,19 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setQrcodeUri,
         wallets,
     });
-    const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
-    useSyncPrimaryWallet({
-        multiWalletWidgetState,
+    const { sdkHasLoaded, setSdkHasLoaded } = useGlobalLoading({
+        authMode,
+        connectedInfo,
+        connectedWallet,
         primaryWallet,
-        setMultiWalletWidgetState,
+        projectSettings,
+        user,
+    });
+    const { getNameService, removeConnectedNameService } = useNameService({
+        authToken: (_d = getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt,
+        currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
     });
+    const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
     const { clearAllWalletConnectSessions, clearOphanedWalletConnectSessions } = useClearWalletConnectSessions({
         connectors: walletConnectors,
     });
@@ -128,7 +160,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _f, _g;
         clearAllWalletConnectSessions();
         const jwt = getAuthToken();
         if (jwt && user) {
@@ -138,16 +170,17 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         for (const connector of walletConnectors) {
             yield connector.endSession();
         }
-        (_c = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _c === void 0 ? void 0 : _c.endSession();
+        (_f = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _f === void 0 ? void 0 : _f.endSession();
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
         removeAuthTokenAndUser();
         setConnectedWallet(null);
-        removeLsNetworks();
+        handleRemoveLsNetworks();
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
         clearWalletStates();
-        (_d = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _d === void 0 ? void 0 : _d.call(eventsCallbacks, user);
+        removeConnectedNameService();
+        (_g = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _g === void 0 ? void 0 : _g.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         user,
@@ -155,13 +188,25 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setMultiWalletWidgetState,
         removeAuthTokenAndUser,
         setConnectedWallet,
-        removeLsNetworks,
+        handleRemoveLsNetworks,
         removeConnectedInfo,
+        removeConnectedNameService,
         clearWalletStates,
         eventsCallbacks,
         environmentId,
         walletConnectors,
     ]);
+    useSyncPrimaryWallet({
+        computeConnectedStateForWallets,
+        handleLogOut,
+        multiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWallet,
+        setShowWidgetStatePopup,
+        showWidgetStatePopup,
+    });
     const handleUnlinkWallet = useHandleUnlinkWallet({
         environmentId,
         primaryWalletId,
@@ -178,9 +223,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         primaryWallet: walletForUserFacingContext,
         secondaryWallets,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setMultiWalletWidgetState,
         setPrimaryWalletId,
         setSelectedWalletConnector,
+        setSelectedWalletWithAction,
         user,
     });
     const { walletsForChainsMap } = useFetchWalletsForChainsMap(newToWeb3WalletChainMap);
@@ -263,6 +310,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             displayTermsOfService,
             environmentId,
             eventsCallbacks,
+            getNameService,
             handleLogOut,
             handleUnlinkWallet,
             isAuthenticated,
@@ -286,8 +334,10 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             projectSettings,
             qrcodeUri,
             rpcProviders,
+            sdkHasLoaded,
             secondaryWallets,
             selectedWalletConnector,
+            selectedWalletWithAction,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setCallback,
@@ -301,15 +351,19 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setPrimaryWallet,
             setPrimaryWalletId,
             setQrcodeUri,
+            setSdkHasLoaded,
             setSelectedWalletConnector,
+            setSelectedWalletWithAction,
             setShowAuthFlow,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
+            setShowWidgetStatePopup,
             setUser,
             shadowDOMEnabled,
             showAuthFlow,
             showDynamicUserProfile,
             showQrcodeModal,
+            showWidgetStatePopup,
             signWithEmailWalletName,
             siweStatement,
             socialMediaIconUrl: ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportUrls) || socialMediaIconUrl,
@@ -319,7 +373,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             theme,
             toolkitEnabled,
             user,
-            vendorCredentials,
             walletConnector: (_b = walletForUserFacingContext === null || walletForUserFacingContext === void 0 ? void 0 : walletForUserFacingContext.connector) !== null && _b !== void 0 ? _b : null,
             walletUiUtils,
             wallets,
@@ -329,9 +382,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         accessDeniedMessagePrimary,
         accessDeniedMessageSecondary,
         accountSwitchState,
-        appLogo,
         appLogoUrl,
-        displayName,
         appName,
         authMode,
         authorizationViewDisplayOrder,
@@ -340,20 +391,21 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         computeConnectedStateForWallets,
         connectWallet,
         connectedWallet,
-        defaultNumberOfWalletsToShow,
         primaryWallet,
         secondaryWallets,
         consumeNonce,
         cssOverrides,
         debugError,
         onboardingOnlyJwt,
+        defaultNumberOfWalletsToShow,
         desktopUri,
         displayTermsOfService,
         environmentId,
         eventsCallbacks,
+        getNameService,
         handleLogOut,
         handleUnlinkWallet,
-        user,
+        isAuthenticated,
         isProjectSettingsLoading,
         isSingleWalletAccount,
         isVerifying,
@@ -375,7 +427,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         projectSettings,
         qrcodeUri,
         rpcProviders,
+        sdkHasLoaded,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setAuthMode,
         setAuthorizationViewDisplayOrder,
         setCallback,
@@ -384,12 +438,15 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setNetwork,
         setPrimaryWallet,
         setPrimaryWalletId,
+        setSdkHasLoaded,
+        setSelectedWalletWithAction,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
         showAuthFlow,
         showDynamicUserProfile,
         showQrcodeModal,
+        showWidgetStatePopup,
         signWithEmailWalletName,
         siweStatement,
         socialMediaIconUrl,
@@ -398,7 +455,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         termsOfServiceUrl,
         theme,
         toolkitEnabled,
-        vendorCredentials,
+        user,
         walletUiUtils,
         wallets,
         walletsFilter,
@@ -423,14 +480,15 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     // DYN-1140 - Opens Widget when multiWalletWidgetState changes
     useEffect(() => {
         // If statement to secure SingleWallet widget
-        if (!multiWallet)
+        if (!multiWallet && multiWalletWidgetState !== 'awaiting_account_switch') {
             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] }) }) }) }) }) })) }) })) })));
+    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.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: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsxs(SendBalanceContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) })) }) })) })));
 };
 
 export { DynamicContext, DynamicContextProvider };

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

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../ViewContext/ViewContext.cjs');
 require('react');
+require('@dynamic-labs/utils');
 var localStorage$1 = require('../../utils/constants/localStorage.cjs');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 
 let logoutTimer;
 const isAuthTokenExpired = (token) => {

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

@@ -1,12 +1,14 @@
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../ViewContext/ViewContext.js';
 import 'react';
+import '@dynamic-labs/utils';
 import { AUTH_TOKEN } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
+import 'ethers';
 
 let logoutTimer;
 const isAuthTokenExpired = (token) => {

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

@@ -6,12 +6,14 @@ var React = require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../ViewContext/ViewContext.cjs');
 var isDisplayOrderPriorityForWeb3 = require('../../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.cjs');
 var isDisplayOrderPriorityForWeb2 = require('../../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs');
+require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
+require('ethers');
 require('../../../../shared/consts/index.cjs');
 
 const web2DisplayOrder = ['email', 'wallet'];

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

@@ -2,12 +2,14 @@ import { useState, useCallback, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../ViewContext/ViewContext.js';
 import { isDisplayOrderPriorityForWeb3 } from '../../../../shared/utils/functions/isDisplayOrderPriorityForWeb3/isDisplayOrderPriorityForWeb3.js';
 import { isDisplayOrderPriorityForWeb2 } from '../../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.js';
+import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
+import 'ethers';
 import '../../../../shared/consts/index.js';
 
 const web2DisplayOrder = ['email', 'wallet'];

package/src/lib/context/DynamicContext/hooks/useEmailLoginState/useEmailLoginState.cjs

@@ -5,12 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 require('../../../../utils/constants/colors.cjs');
 require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../ViewContext/ViewContext.cjs');
+require('ethers');
 var isEmailProviderEnabled = require('../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
+require('../../../../shared/consts/index.cjs');
 
 const useEmailLoginState = (providers, user) => {
     const [loginWithEmail, setLoginWithEmail] = React.useState(isEmailProviderEnabled.isEmailProviderEnabled(providers));

package/src/lib/context/DynamicContext/hooks/useEmailLoginState/useEmailLoginState.js

@@ -1,12 +1,16 @@
 import { useState, useEffect } from 'react';
 import '../../../../utils/constants/colors.js';
 import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../ViewContext/ViewContext.js';
+import 'ethers';
 import { isEmailProviderEnabled } from '../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
+import '../../../../shared/consts/index.js';
 
 const useEmailLoginState = (providers, user) => {
     const [loginWithEmail, setLoginWithEmail] = useState(isEmailProviderEnabled(providers));

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

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

package/src/lib/context/DynamicContext/hooks/useNameService/useNameService.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var decodeJwt = require('../../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
+var localStorage = require('../../../../utils/constants/localStorage.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+var useLocalStorage = require('../../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
+require('../../../../shared/consts/index.cjs');
+var getWalletVerifiedCredential = require('../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.cjs');
+
+const useNameService = ({ currentWallet, authToken }) => {
+    const [connectedNameService, setConnectedNameService, removeConnectedNameService,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLET_NAME_SERVICE, null);
+    const lastFetchedNameServiceAddress = React.useRef();
+    const fetchNameServiceFromBlockchain = React.useCallback((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const { address, connector } = wallet;
+        if (address === lastFetchedNameServiceAddress.current) {
+            return;
+        }
+        setConnectedNameService(null);
+        // store last address used to fetch name service so we can check for it when promise resolves
+        // to avoid race conditions
+        lastFetchedNameServiceAddress.current = address;
+        let ns;
+        try {
+            ns = yield connector.getNameService();
+        }
+        catch (e) {
+            // do nothing
+        }
+        // only sets name service if the address used to fetch it is the last one used for fetching
+        // this avoid issues with promises not resolving in the correct order
+        if (lastFetchedNameServiceAddress.current === address) {
+            setConnectedNameService({
+                address,
+                avatar: ns === null || ns === void 0 ? void 0 : ns.avatar,
+                name: ns === null || ns === void 0 ? void 0 : ns.name,
+            });
+            return ns;
+        }
+        return undefined;
+    }), [setConnectedNameService]);
+    const getNameService = (address) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (!currentWallet) {
+            return;
+        }
+        const verifiedCredentials = (_a = decodeJwt.decodeJwt(authToken)) === null || _a === void 0 ? void 0 : _a.verifiedCredentials;
+        //if there are verified credentials, check if there is a name service for the current wallet
+        if (verifiedCredentials) {
+            const verifiedCredential = getWalletVerifiedCredential.getWalletVerifiedCredential(currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address, verifiedCredentials);
+            if (verifiedCredential && ((_b = verifiedCredential.nameService) === null || _b === void 0 ? void 0 : _b.name)) {
+                return verifiedCredential.nameService;
+            }
+        }
+        // don't look for name service in blockchain if provided address doesn't match current wallet
+        if (address && (currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address) !== address) {
+            return;
+        }
+        // if finds name service info in local storage and its related address matches the connected wallet address,
+        // return it
+        if (connectedNameService &&
+            connectedNameService.address === (currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address)) {
+            return {
+                avatar: connectedNameService.avatar,
+                name: connectedNameService.name,
+            };
+        }
+        // if doesn't find correct name service in verified credentials or local storage, fetch it from blockchain
+        return fetchNameServiceFromBlockchain(currentWallet);
+    });
+    return { getNameService, removeConnectedNameService };
+};
+
+exports.useNameService = useNameService;

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

@@ -0,0 +1,11 @@
+import { NameServiceData } from '@dynamic-labs/sdk-api';
+import { Wallet } from '../../../../shared';
+type Props = {
+    authToken: string | undefined;
+    currentWallet: Wallet | null;
+};
+export declare const useNameService: ({ currentWallet, authToken }: Props) => {
+    getNameService: (address?: string) => Promise<NameServiceData | undefined>;
+    removeConnectedNameService: () => void;
+};
+export {};

package/src/lib/context/DynamicContext/hooks/useNameService/useNameService.js

@@ -0,0 +1,80 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useRef, useCallback } from 'react';
+import { decodeJwt } from '../../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
+import { CONNECTED_WALLET_NAME_SERVICE } from '../../../../utils/constants/localStorage.js';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import { useLocalStorage } from '../../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+import '../../../../shared/consts/index.js';
+import { getWalletVerifiedCredential } from '../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.js';
+
+const useNameService = ({ currentWallet, authToken }) => {
+    const [connectedNameService, setConnectedNameService, removeConnectedNameService,] = useLocalStorage(CONNECTED_WALLET_NAME_SERVICE, null);
+    const lastFetchedNameServiceAddress = useRef();
+    const fetchNameServiceFromBlockchain = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        const { address, connector } = wallet;
+        if (address === lastFetchedNameServiceAddress.current) {
+            return;
+        }
+        setConnectedNameService(null);
+        // store last address used to fetch name service so we can check for it when promise resolves
+        // to avoid race conditions
+        lastFetchedNameServiceAddress.current = address;
+        let ns;
+        try {
+            ns = yield connector.getNameService();
+        }
+        catch (e) {
+            // do nothing
+        }
+        // only sets name service if the address used to fetch it is the last one used for fetching
+        // this avoid issues with promises not resolving in the correct order
+        if (lastFetchedNameServiceAddress.current === address) {
+            setConnectedNameService({
+                address,
+                avatar: ns === null || ns === void 0 ? void 0 : ns.avatar,
+                name: ns === null || ns === void 0 ? void 0 : ns.name,
+            });
+            return ns;
+        }
+        return undefined;
+    }), [setConnectedNameService]);
+    const getNameService = (address) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (!currentWallet) {
+            return;
+        }
+        const verifiedCredentials = (_a = decodeJwt(authToken)) === null || _a === void 0 ? void 0 : _a.verifiedCredentials;
+        //if there are verified credentials, check if there is a name service for the current wallet
+        if (verifiedCredentials) {
+            const verifiedCredential = getWalletVerifiedCredential(currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address, verifiedCredentials);
+            if (verifiedCredential && ((_b = verifiedCredential.nameService) === null || _b === void 0 ? void 0 : _b.name)) {
+                return verifiedCredential.nameService;
+            }
+        }
+        // don't look for name service in blockchain if provided address doesn't match current wallet
+        if (address && (currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address) !== address) {
+            return;
+        }
+        // if finds name service info in local storage and its related address matches the connected wallet address,
+        // return it
+        if (connectedNameService &&
+            connectedNameService.address === (currentWallet === null || currentWallet === void 0 ? void 0 : currentWallet.address)) {
+            return {
+                avatar: connectedNameService.avatar,
+                name: connectedNameService.name,
+            };
+        }
+        // if doesn't find correct name service in verified credentials or local storage, fetch it from blockchain
+        return fetchNameServiceFromBlockchain(currentWallet);
+    });
+    return { getNameService, removeConnectedNameService };
+};
+
+export { useNameService };

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

@@ -0,0 +1,4 @@
+import { NameServiceData } from '@dynamic-labs/sdk-api';
+export type NameServiceDataWithAddress = NameServiceData & {
+    address: string;
+};