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

package/src/lib/components/Popper/utils/getChildPosition/getChildPosition.d.ts

@@ -0,0 +1,2 @@
+import { Position } from '../../Popper.types';
+export declare const getChildPosition: (root: HTMLElement, element: HTMLElement) => Position;

package/src/lib/components/Popper/utils/getChildPosition/getChildPosition.js

@@ -0,0 +1,10 @@
+const getChildPosition = (root, element) => {
+    const rootRect = root.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return {
+        left: elementRect.x - rootRect.x,
+        top: elementRect.y - rootRect.y,
+    };
+};
+
+export { getChildPosition };

package/src/lib/components/Popper/utils/getChildPosition/index.d.ts

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

package/src/lib/components/Popper/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getChildPosition';
+export * from './watchToScrollInHierarchy';
+export * from './isScrollable';

package/src/lib/components/Popper/utils/isScrollable/index.d.ts

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

package/src/lib/components/Popper/utils/isScrollable/isScrollable.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+exports.isScrollable = isScrollable;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.d.ts

@@ -0,0 +1 @@
+export declare const isScrollable: (element: HTMLElement) => boolean;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.js

@@ -0,0 +1,12 @@
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+export { isScrollable };

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/index.d.ts

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

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isScrollable = require('../isScrollable/isScrollable.cjs');
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable.isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+exports.watchToScrollInHierarchy = watchToScrollInHierarchy;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.d.ts

@@ -0,0 +1 @@
+export declare const watchToScrollInHierarchy: (root: HTMLElement, element: HTMLElement, callback: () => void) => () => void;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js

@@ -0,0 +1,20 @@
+import { isScrollable } from '../isScrollable/isScrollable.js';
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+export { watchToScrollInHierarchy };

package/src/lib/components/Portal/Portal.cjs

@@ -29,6 +29,8 @@ require('../../context/ThemeContext/ThemeContext.cjs');
 var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Portal/Portal.js

@@ -25,6 +25,8 @@ import '../../context/ThemeContext/ThemeContext.js';
 import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -33,6 +33,8 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var useHover = require('../../utils/hooks/useHover/useHover.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -29,6 +29,8 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { useHover } from '../../utils/hooks/useHover/useHover.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -31,6 +31,8 @@ require('../SlideInUpTransition/SlideInUpTransition.cjs');
 require('../OpacityTransition/OpacityTransition.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../Alert/Alert.cjs');
+require('../../Popper/Popper/Popper.cjs');
+require('../../Popper/PopperContext/PopperContext.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -27,6 +27,8 @@ import '../SlideInUpTransition/SlideInUpTransition.js';
 import '../OpacityTransition/OpacityTransition.js';
 import '../../IconButton/IconButton.js';
 import '../../Alert/Alert.js';
+import '../../Popper/Popper/Popper.js';
+import '../../Popper/PopperContext/PopperContext.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -19,14 +19,14 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var index = require('../../utils/functions/getEnabledOAuthProviders/index.cjs');
-var getEnabledUserProfileFields = require('../../utils/functions/getEnabledUserProfileFields/getEnabledUserProfileFields.cjs');
+var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
 var UserProfileField = require('./parts/UserProfileField/UserProfileField.cjs');
 var UserProfileSection = require('./parts/UserProfileSection/UserProfileSection.cjs');
 var UserProfileSocialAccount = require('./parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs');
 
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
-    const allUserFields = getEnabledUserProfileFields.getUserProfileFields({
+    const allUserFields = getUserProfileFields.getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
     });

package/src/lib/components/UserProfile/UserProfile.js

@@ -15,7 +15,7 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { getEnabledOAuthProviders } from '../../utils/functions/getEnabledOAuthProviders/index.js';
-import { getUserProfileFields } from '../../utils/functions/getEnabledUserProfileFields/getEnabledUserProfileFields.js';
+import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
 import { UserProfileField } from './parts/UserProfileField/UserProfileField.js';
 import { UserProfileSection } from './parts/UserProfileSection/UserProfileSection.js';
 import { UserProfileSocialAccount } from './parts/UserProfileSocialAccount/UserProfileSocialAccount.js';

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.cjs

@@ -31,6 +31,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 
 const UserProfileField = ({ name, label, value, }) => {

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.js

@@ -27,6 +27,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 
 const UserProfileField = ({ name, label, value, }) => {

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.cjs

@@ -31,6 +31,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 
 const UserProfileSection = ({ title, children, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.js

@@ -27,6 +27,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 
 const UserProfileSection = ({ title, children, }) => (jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -36,6 +36,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../Button/Button.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 var helpers = require('../../../../widgets/DynamicWidget/helpers/helpers.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/ConnectedAccountAvatar.cjs');

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -32,6 +32,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../Button/Button.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 import { capitalize } from '../../../../widgets/DynamicWidget/helpers/helpers.js';
 import { useUpdateUserProfileByJWTCallback } from '../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { ConnectedAccountAvatar } from './components/ConnectedAccountAvatar/ConnectedAccountAvatar.js';

package/src/lib/components/index.d.ts

@@ -34,3 +34,4 @@ export * from './ModalHeaderBanner';
 export * from './OTPVerificationView';
 export * from './IconListTile';
 export * from './Transition';
+export * from './Popper';

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

@@ -57,6 +57,8 @@ require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 var useGlobalLoading = require('../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
 var FundingContext = require('../FundingContext/FundingContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -77,8 +79,8 @@ var useNameService = require('./hooks/useNameService/useNameService.cjs');
 
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = React.createContext(undefined);
-const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', cssOverrides, defaultNumberOfWalletsToShow = values.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, walletConnectors: walletConnectorsProp, }, children, theme, }) => {
-    var _a, _b, _c;
+const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', cssOverrides, defaultNumberOfWalletsToShow = values.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.logger.setLogLevel(logLevel);
     walletConnectorCore.logger.setLogLevel(logLevel);
     ApiEndpoint.setBaseUrl((_a = process.env.DYNAMIC_API_BASE_URL) !== null && _a !== void 0 ? _a : apiBaseUrl);
@@ -95,6 +97,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [multiWalletWidgetState, setMultiWalletWidgetState, { awaiting_account_switch: [accountSwitchState], awaiting_signature: [awaitingSignatureState], },] = useMultiWalletWidgetState.useMultiWalletWidgetState();
     const [isVerifying, setIsVerifying] = React.useState(false);
     const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings.useFetchProjectSettings({ authToken: getAuthToken.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;
     const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations.useFetchNetworkConfigurations({
         authToken: getAuthToken.getAuthToken(),
         environmentId,
@@ -113,6 +116,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const { wallets } = useWallets.useWallets({
         appLogoUrl,
         appName,
+        flowNetwork,
         networkConfigurations: serverNetworkConfigurations,
         projectSettings,
         walletConnectorsProp,
@@ -121,6 +125,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [authMode, setAuthMode] = useLocalStorage.useLocalStorage(localStorage$1.AUTH_MODE, initialAuthenticationMode);
     const { connectWallet, removeConnectedInfo, connectedInfo, connectedWallet, setConnectedWallet, connectWalletByAddressAndChain, } = useConnectWallet.useConnectWallet(wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly);
     const [selectedWalletConnector, setSelectedWalletConnector] = React.useState(null);
+    //selected wallet to perform an action (become primary, unlink, etc)
+    const [selectedWalletWithAction, setSelectedWalletWithAction] = React.useState(null);
     const removeAuthTokenAndUser = React.useCallback(() => {
         localStorage.removeItem(localStorage$1.AUTH_TOKEN);
         removeUser();
@@ -142,7 +148,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         user,
     });
     const { getNameService, removeConnectedNameService } = useNameService.useNameService({
-        authToken: (_b = getAuthToken.getAuthToken()) !== null && _b !== void 0 ? _b : onboardingOnlyJwt,
+        authToken: (_d = getAuthToken.getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt,
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
     });
     const walletForUserFacingContext = authMode === 'connect-and-sign' || user ? primaryWallet : connectedWallet;
@@ -158,7 +164,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
+        var _f, _g;
         clearAllWalletConnectSessions();
         const jwt = getAuthToken.getAuthToken();
         if (jwt && user) {
@@ -168,7 +174,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();
@@ -178,7 +184,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         removeConnectedInfo();
         clearWalletStates();
         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,
@@ -210,9 +216,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         primaryWallet: walletForUserFacingContext,
         secondaryWallets,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setMultiWalletWidgetState,
         setPrimaryWalletId,
         setSelectedWalletConnector,
+        setSelectedWalletWithAction,
         user,
     });
     const { walletsForChainsMap } = useFetchWalletsForChainsMap.useFetchWalletsForChainsMap(newToWeb3WalletChainMap);
@@ -322,6 +330,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             sdkHasLoaded,
             secondaryWallets,
             selectedWalletConnector,
+            selectedWalletWithAction,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setCallback,
@@ -337,6 +346,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setQrcodeUri,
             setSdkHasLoaded,
             setSelectedWalletConnector,
+            setSelectedWalletWithAction,
             setShowAuthFlow,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
@@ -410,6 +420,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         rpcProviders,
         sdkHasLoaded,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setAuthMode,
         setAuthorizationViewDisplayOrder,
         setCallback,
@@ -419,6 +430,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setPrimaryWallet,
         setPrimaryWalletId,
         setSdkHasLoaded,
+        setSelectedWalletWithAction,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
@@ -465,7 +477,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.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: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ loginWithEmail: loginWithEmail }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsxs(FundingContext.FundingContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) })) }) })) })));
+    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.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: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ loginWithEmail: loginWithEmail }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsxs(FundingContext.FundingContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) })) }) })) })));
 };
 
 exports.DynamicContext = DynamicContext;

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

@@ -3,7 +3,7 @@ import { WalletConnector, FetchPublicAddressOpts, WalletConnectorsMethod } from
 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 } from '../../shared';
 import { ThemeData, ThemeSetting } from '../ThemeContext';
 import { MultiWalletWidgetStateSetter } from '../../utils/hooks/multiWallet';
 import { SocialNetworkIconType } from '../../utils/functions/getSocialNetworkIcon';
@@ -60,6 +60,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,6 +75,7 @@ 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>>;
@@ -112,12 +114,17 @@ export interface DynamicContextProps {
         environmentId: 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;
@@ -138,4 +145,4 @@ export interface DynamicContextProps {
     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, walletConnectors: walletConnectorsProp, }, children, theme, }: DynamicContextProps) => JSX.Element;
+export declare const DynamicContextProvider: ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, apiBaseUrl, appLogoUrl, appName, cssOverrides, defaultNumberOfWalletsToShow, flowNetwork, initialAuthenticationMode, debugError, displayTermsOfService, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly, environmentId, 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

@@ -53,6 +53,8 @@ import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
 import { FundingContextProvider } from '../FundingContext/FundingContext.js';
 import '@dynamic-labs/wallet-book';
@@ -73,8 +75,8 @@ 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', 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, walletConnectors: walletConnectorsProp, }, children, theme, }) => {
-    var _a, _b, _c;
+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);
@@ -91,6 +93,7 @@ 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;
     const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations({
         authToken: getAuthToken(),
         environmentId,
@@ -109,6 +112,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const { wallets } = useWallets({
         appLogoUrl,
         appName,
+        flowNetwork,
         networkConfigurations: serverNetworkConfigurations,
         projectSettings,
         walletConnectorsProp,
@@ -117,6 +121,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     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);
         removeUser();
@@ -138,7 +144,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         user,
     });
     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;
@@ -154,7 +160,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) {
@@ -164,7 +170,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();
@@ -174,7 +180,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         removeConnectedInfo();
         clearWalletStates();
         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,
@@ -206,9 +212,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         primaryWallet: walletForUserFacingContext,
         secondaryWallets,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setMultiWalletWidgetState,
         setPrimaryWalletId,
         setSelectedWalletConnector,
+        setSelectedWalletWithAction,
         user,
     });
     const { walletsForChainsMap } = useFetchWalletsForChainsMap(newToWeb3WalletChainMap);
@@ -318,6 +326,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             sdkHasLoaded,
             secondaryWallets,
             selectedWalletConnector,
+            selectedWalletWithAction,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setCallback,
@@ -333,6 +342,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setQrcodeUri,
             setSdkHasLoaded,
             setSelectedWalletConnector,
+            setSelectedWalletWithAction,
             setShowAuthFlow,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
@@ -406,6 +416,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         rpcProviders,
         sdkHasLoaded,
         selectedWalletConnector,
+        selectedWalletWithAction,
         setAuthMode,
         setAuthorizationViewDisplayOrder,
         setCallback,
@@ -415,6 +426,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setPrimaryWallet,
         setPrimaryWalletId,
         setSdkHasLoaded,
+        setSelectedWalletWithAction,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
@@ -461,7 +473,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             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({ 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] }) }) }) }) }) }) })) }) })) })));
 };
 
 export { DynamicContext, DynamicContextProvider };

package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerAuthFlowCallbacks.cjs

@@ -28,6 +28,8 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../MockContext/MockContext.cjs');
 require('../../CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');