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

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

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction, ReactNode } from 'react';
-import { WalletConnector, FetchPublicAddressOpts } from '@dynamic-labs/wallet-connector-core';
+import { WalletConnector, FetchPublicAddressOpts, WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
 import { DynamicJwt, NameServiceData, ProjectSettings } from '@dynamic-labs/sdk-api';
 import { LogLevel } from '@dynamic-labs/logger';
 import { EvmNetwork, NetworkConfigurationMap, WalletUiUtils } from '@dynamic-labs/types';
-import { WalletOption, UserProfile, Wallet, MultiWalletWidgetState, AccountSwitchState, AwaitingSignatureState, ChainToWalletMap, AuthModeType, DynamicRPCProviders, DynamicEventsCallbacks } from '../../shared';
+import { WalletOption, UserProfile, Wallet, MultiWalletWidgetState, AccountSwitchState, AwaitingSignatureState, ChainToWalletMap, AuthModeType, DynamicRPCProviders, DynamicEventsCallbacks, WalletWithAction, AccessDeniedCustomButton } from '../../shared';
 import { ThemeData, ThemeSetting } from '../ThemeContext';
 import { MultiWalletWidgetStateSetter } from '../../utils/hooks/multiWallet';
 import { SocialNetworkIconType } from '../../utils/functions/getSocialNetworkIcon';
@@ -12,6 +12,7 @@ import { DisplayOrder, SetDisplayOrderPriority } from './hooks';
 export interface IDynamicContext {
     accessDeniedMessagePrimary?: string;
     accessDeniedMessageSecondary?: string;
+    accessDeniedButton?: AccessDeniedCustomButton;
     accountSwitchState: AccountSwitchState;
     appLogoUrl?: string;
     appName?: string;
@@ -27,11 +28,13 @@ export interface IDynamicContext {
     consumeNonce: () => string | undefined;
     cssOverrides?: string | JSX.Element;
     debugError: boolean;
+    decodedAuthToken: Omit<DynamicJwt, 'jwt'> | undefined;
     decodedOnboardingOnlyToken: Omit<DynamicJwt, 'jwt'> | undefined;
     defaultNumberOfWalletsToShow: number;
     desktopUri: string;
     displayTermsOfService: boolean;
     environmentId: string;
+    environmentName?: string;
     eventsCallbacks?: DynamicEventsCallbacks;
     getNameService: (address?: string) => Promise<NameServiceData | undefined>;
     handleLogOut: () => Promise<void>;
@@ -60,6 +63,7 @@ export interface IDynamicContext {
     sdkHasLoaded: boolean;
     secondaryWallets: Wallet[];
     selectedWalletConnector: WalletConnector | null;
+    selectedWalletWithAction: WalletWithAction | null;
     setAuthMode: Dispatch<SetStateAction<AuthModeType>>;
     setAuthorizationViewDisplayOrder: SetDisplayOrderPriority;
     setCallback: (callback: Callback) => void;
@@ -74,14 +78,25 @@ export interface IDynamicContext {
     setPrimaryWalletId: (walletId: string) => void;
     setQrcodeUri: Dispatch<SetStateAction<string>>;
     setSelectedWalletConnector: (connector: WalletConnector | null) => void;
+    setSelectedWalletWithAction: (walletWithAction: WalletWithAction | null) => void;
     setShowAuthFlow: Dispatch<SetStateAction<boolean>>;
     setShowDynamicUserProfile: Dispatch<SetStateAction<boolean>>;
     setShowQrcodeModal: Dispatch<SetStateAction<boolean>>;
+    setShowWidgetStatePopup: Dispatch<SetStateAction<boolean>>;
     setUser: Dispatch<SetStateAction<UserProfile | undefined>>;
+    /**
+     * The set state action which regulates displaying the bridge widget
+     */
+    setShowBridgeWidget: Dispatch<SetStateAction<boolean>>;
     shadowDOMEnabled: boolean;
     showAuthFlow: boolean;
     showDynamicUserProfile: boolean;
+    /**
+     * The boolean value representing the state of displaying the bridge widget
+     */
+    showBridgeWidget: boolean;
     showQrcodeModal: boolean;
+    showWidgetStatePopup: boolean;
     signWithEmailWalletName?: string;
     siweStatement?: string;
     socialMediaIconUrl?: Record<string, string> | Record<SocialNetworkIconType, string>;
@@ -101,6 +116,7 @@ export interface DynamicContextProps {
     settings: {
         accessDeniedMessagePrimary?: string;
         accessDeniedMessageSecondary?: string;
+        accessDeniedButton?: AccessDeniedCustomButton;
         apiBaseUrl?: string;
         appLogoUrl?: string;
         appName?: string;
@@ -110,14 +126,20 @@ export interface DynamicContextProps {
         displayTermsOfService?: boolean;
         enableVisitTrackingOnConnectOnly?: boolean;
         environmentId: string;
+        localStorageSuffix?: string;
         eventsCallbacks?: DynamicEventsCallbacks;
         evmNetworks?: EvmNetwork[];
+        /**
+         * @deprecated Set flow network in dashboard instead
+         */
+        flowNetwork?: 'testnet' | 'mainnet';
         initialAuthenticationMode?: AuthModeType;
         /**
          * The log level to use for client side logging with our SDK
          * @default WARN
          */
         logLevel?: keyof typeof LogLevel;
+        /** @deprecated enable multi wallet in the bashboard settings instead */
         multiWallet?: boolean;
         newToWeb3WalletChainMap?: ChainToWalletMap;
         notInTheListImageUrl?: string;
@@ -132,9 +154,10 @@ export interface DynamicContextProps {
         socialMediaUrl?: string;
         termsOfServiceUrl?: string;
         toolkitEnabled?: boolean;
+        walletConnectors?: WalletConnectorsMethod[];
         walletsFilter?: (options: WalletOption[]) => WalletOption[];
     };
     theme?: ThemeData | ThemeSetting;
 }
 export declare const DynamicContext: import("react").Context<IDynamicContext | undefined>;
-export declare const DynamicContextProvider: ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, apiBaseUrl, appLogoUrl, appName, cssOverrides, defaultNumberOfWalletsToShow, initialAuthenticationMode, debugError, displayTermsOfService, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly, environmentId, eventsCallbacks, evmNetworks, walletsFilter, logLevel, multiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled, }, children, theme, }: DynamicContextProps) => JSX.Element;
+export declare const DynamicContextProvider: ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl, appName, cssOverrides, defaultNumberOfWalletsToShow, flowNetwork, initialAuthenticationMode, debugError, displayTermsOfService, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel, multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled, walletConnectors: walletConnectorsProp, }, children, theme, }: DynamicContextProps) => JSX.Element;

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

@@ -7,32 +7,38 @@ import { AUTH_TOKEN, AUTH_USER, AUTH_MODE } from '../../utils/constants/localSto
 import '../../utils/constants/colors.js';
 import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
-import { logger } from '../../shared/logger.js';
-import '@dynamic-labs/multi-wallet';
+import { getFromLS } from '../../shared/utils/functions/storage/getFromLS.js';
+import LSSuffix from '../../config/LSSuffix.js';
+import { removeFromLS } from '../../shared/utils/functions/storage/removeFromLS.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
+import { logger } from '../../shared/logger.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 '@dynamic-labs/utils';
 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';
 import { CaptchaContextProvider } from '../CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
+import ApiEndpoint from '../../config/ApiEndpoint.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';
@@ -51,16 +57,22 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
-import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
-import { FundingContextProvider } from '../FundingContext/FundingContext.js';
+import '../../components/Alert/Alert.js';
 import '@dynamic-labs/wallet-book';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { FundingContextProvider } from '../FundingContext/FundingContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.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 { DynamicBridgeWidgetContextProvider } from '../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
+import '../../widgets/DynamicBridgeWidget/components/DynamicBridgeWidgetViews/DynamicBridgeWidgetViews.js';
+import { SendBalanceContextProvider } from '../SendBalanceContext/SendBalanceContext.js';
 import { initExpirationTime } from './helpers.js';
 import { validateAuthUser } from './validators.js';
 import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.js';
@@ -68,19 +80,23 @@ import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomer
 import { useEmailLoginState } from './hooks/useEmailLoginState/useEmailLoginState.js';
 import { useDisplayOrderState } from './hooks/useDisplayOrderState/useDisplayOrderState.js';
 import { useNameService } from './hooks/useNameService/useNameService.js';
+import { useSetShowAuthFlowWithInit } from './hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.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', 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, }, children, theme, }) => {
-    var _a, _b, _c;
+const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, 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, localStorageSuffix, 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);
+    LSSuffix.setSuffix(localStorageSuffix);
     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);
+    // Alows clients to control the Bridget Widget flow without need to click on Bridge Widget
+    const [showBridgeWidget, setShowBridgeWidget] = useState(false);
     const [isSingleWalletAccount, setIsSingleWalletAccount] = useState(false);
     const [user, setUser, removeUser] = useLocalStorage(AUTH_USER, EMPTY_INITIAL_USER, validateAuthUser, [AUTH_TOKEN]);
     const { consumeNonce } = useFetchNonce(environmentId);
@@ -89,6 +105,9 @@ 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 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,
@@ -107,18 +126,22 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const { wallets } = useWallets({
         appLogoUrl,
         appName,
+        flowNetwork,
         networkConfigurations: serverNetworkConfigurations,
         projectSettings,
+        walletConnectorsProp,
         walletUiUtils,
     });
     const [authMode, setAuthMode] = useLocalStorage(AUTH_MODE, initialAuthenticationMode);
     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);
+        removeFromLS(AUTH_TOKEN);
         removeUser();
     }, [removeUser]);
-    const { clearWalletStates, computeConnectedStateForWallets, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors({
+    const { clearPrimaryWalletId, computeConnectedStateForWallets, didConnectedStateLoad, walletConnectors, primaryWallet, primaryWalletId, showQrcodeModal, secondaryWallets, setPrimaryWallet, setPrimaryWalletId, setShowQrcodeModal, } = useWalletConnectors({
         authToken: getAuthToken() || onboardingOnlyJwt,
         multiWalletWidgetState,
         setDesktopUri,
@@ -134,16 +157,15 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         projectSettings,
         user,
     });
+    const setShowAuthFlowWithInit = useSetShowAuthFlowWithInit({
+        setShowAuthFlow,
+        wallets,
+    });
     const { getNameService, removeConnectedNameService } = useNameService({
-        authToken: (_b = getAuthToken()) !== null && _b !== void 0 ? _b : onboardingOnlyJwt,
+        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;
-    useSyncPrimaryWallet({
-        multiWalletWidgetState,
-        primaryWallet,
-        setMultiWalletWidgetState,
-    });
     const { clearAllWalletConnectSessions, clearOphanedWalletConnectSessions } = useClearWalletConnectSessions({
         connectors: walletConnectors,
     });
@@ -151,7 +173,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
+        var _f, _g;
         clearAllWalletConnectSessions();
         const jwt = getAuthToken();
         if (jwt && user) {
@@ -161,7 +183,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         for (const connector of walletConnectors) {
             yield connector.endSession();
         }
-        (_d = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _d === void 0 ? void 0 : _d.endSession();
+        (_f = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _f === void 0 ? void 0 : _f.endSession();
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
         removeAuthTokenAndUser();
@@ -169,9 +191,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks();
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
-        clearWalletStates();
+        clearPrimaryWalletId();
         removeConnectedNameService();
-        (_e = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _e === void 0 ? void 0 : _e.call(eventsCallbacks, user);
+        (_g = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _g === void 0 ? void 0 : _g.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         user,
@@ -182,11 +204,23 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks,
         removeConnectedInfo,
         removeConnectedNameService,
-        clearWalletStates,
+        clearPrimaryWalletId,
         eventsCallbacks,
         environmentId,
         walletConnectors,
     ]);
+    useSyncPrimaryWallet({
+        canSync: didConnectedStateLoad,
+        computeConnectedStateForWallets,
+        handleLogOut,
+        multiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWallet,
+        setShowWidgetStatePopup,
+        showWidgetStatePopup,
+    });
     const handleUnlinkWallet = useHandleUnlinkWallet({
         environmentId,
         primaryWalletId,
@@ -203,9 +237,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         primaryWallet: walletForUserFacingContext,
         secondaryWallets,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setMultiWalletWidgetState,
         setPrimaryWalletId,
         setSelectedWalletConnector,
+        setSelectedWalletWithAction,
         user,
     });
     const { walletsForChainsMap } = useFetchWalletsForChainsMap(newToWeb3WalletChainMap);
@@ -241,8 +277,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setConnectedWallet(null);
             removeConnectedInfo();
         }
-        if (!localStorage.getItem(AUTH_USER)) {
-            localStorage.removeItem(AUTH_TOKEN);
+        if (!getFromLS(AUTH_USER)) {
+            removeFromLS(AUTH_TOKEN);
         }
         if (selectedWalletConnector &&
             (!primaryWallet ||
@@ -262,6 +298,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const value = useMemo(() => {
         var _a, _b;
         return ({
+            accessDeniedButton,
             accessDeniedMessagePrimary,
             accessDeniedMessageSecondary,
             accountSwitchState,
@@ -315,6 +352,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             sdkHasLoaded,
             secondaryWallets,
             selectedWalletConnector,
+            selectedWalletWithAction,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setCallback,
@@ -330,14 +368,19 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setQrcodeUri,
             setSdkHasLoaded,
             setSelectedWalletConnector,
-            setShowAuthFlow,
+            setSelectedWalletWithAction,
+            setShowAuthFlow: setShowAuthFlowWithInit,
+            setShowBridgeWidget,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
+            setShowWidgetStatePopup,
             setUser,
             shadowDOMEnabled,
             showAuthFlow,
+            showBridgeWidget,
             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,
@@ -355,6 +398,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     }, [
         accessDeniedMessagePrimary,
         accessDeniedMessageSecondary,
+        accessDeniedButton,
         accountSwitchState,
         appLogoUrl,
         appName,
@@ -403,6 +447,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         rpcProviders,
         sdkHasLoaded,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setAuthMode,
         setAuthorizationViewDisplayOrder,
         setCallback,
@@ -412,12 +457,14 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setPrimaryWallet,
         setPrimaryWalletId,
         setSdkHasLoaded,
+        setShowAuthFlowWithInit,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
         showAuthFlow,
         showDynamicUserProfile,
         showQrcodeModal,
+        showWidgetStatePopup,
         signWithEmailWalletName,
         siweStatement,
         socialMediaIconUrl,
@@ -451,14 +498,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, ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.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: jsxs(FundingContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), 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({ initialView: loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list' }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { 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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
-require('../../shared/logger.cjs');
+var getFromLS = require('../../shared/utils/functions/storage/getFromLS.cjs');
+require('../../config/LSSuffix.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');
-var localStorage$1 = require('../../utils/constants/localStorage.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/utils');
+var localStorage = require('../../utils/constants/localStorage.cjs');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 
 let logoutTimer;
 const isAuthTokenExpired = (token) => {
@@ -29,7 +33,7 @@ const isAuthTokenExpired = (token) => {
     return false;
 };
 const initExpirationTime = (logout) => {
-    const decodedJwt = decodeJwt.decodeJwt(localStorage.getItem(localStorage$1.AUTH_TOKEN));
+    const decodedJwt = decodeJwt.decodeJwt(getFromLS.getFromLS(localStorage.AUTH_TOKEN));
     if (!decodedJwt)
         return clearTimeout(logoutTimer);
     const tokenExp = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.exp;

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

@@ -1,12 +1,16 @@
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
-import '../../shared/logger.js';
+import { getFromLS } from '../../shared/utils/functions/storage/getFromLS.js';
+import '../../config/LSSuffix.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 '../../shared/logger.js';
+import '@dynamic-labs/utils';
 import { AUTH_TOKEN } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
+import 'ethers';
 
 let logoutTimer;
 const isAuthTokenExpired = (token) => {
@@ -25,7 +29,7 @@ const isAuthTokenExpired = (token) => {
     return false;
 };
 const initExpirationTime = (logout) => {
-    const decodedJwt = decodeJwt(localStorage.getItem(AUTH_TOKEN));
+    const decodedJwt = decodeJwt(getFromLS(AUTH_TOKEN));
     if (!decodedJwt)
         return clearTimeout(logoutTimer);
     const tokenExp = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.exp;

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

@@ -5,13 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.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

@@ -1,13 +1,16 @@
 import { useState, useCallback, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.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

@@ -3,14 +3,18 @@
 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('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
 
 const useEmailLoginState = (providers, user) => {

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 '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
 
 const useEmailLoginState = (providers, user) => {

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

@@ -6,12 +6,15 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var decodeJwt = require('../../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.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('@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');

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

@@ -2,12 +2,15 @@ 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 '../../../../config/LSSuffix.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 '@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';

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

@@ -0,0 +1 @@
+export * from './useSetShowAuthFlowWithInit';

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
+ * before we can connect a wallet. The goal here is that when a user clicks
+ * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
+ * and will prime it for connection. This way, when the user clicks on the
+ * "Connect" button in the WalletConnect modal, there is a uri ready to go
+ * to immediately trigger the deep link on mobile
+ */
+const useSetShowAuthFlowWithInit = ({ setShowAuthFlow, wallets, }) => {
+    const setShowAuthFlowWithInit = React.useCallback((value) => {
+        var _a;
+        if (value) {
+            (_a = wallets
+                .find((wallet) => wallet.walletConnector.key === 'walletconnect')) === null || _a === void 0 ? void 0 : _a.walletConnector.init();
+        }
+        setShowAuthFlow(value);
+    }, [setShowAuthFlow, wallets]);
+    return setShowAuthFlowWithInit;
+};
+
+exports.useSetShowAuthFlowWithInit = useSetShowAuthFlowWithInit;