@dynamic-labs/sdk-react-core 3.7.0 → 3.8.1

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.cjs

@@ -18,24 +18,9 @@ const useInternalDynamicEvents = (event, listener) => {
         };
     }, [event]);
 };
-// ATTENTION
-// Everything below should be made public soon, but we need to plan this out first
-// Main issues:
-// 1. How should we map customer callback names to our dynamic event names?
-//  -> Gui's suggestion: breaking change to rename customer callbacks so they fit these events names
-// 2. We would have to remove these callbacks from the useCustomerCallbacks hook
-/** Which events are accessible by our clients */
-const externalEvents = [
-    'emailVerificationResult',
-    'embeddedWalletCreated',
-    'logout',
-    'walletAdded',
-    'mfaCompletionSuccess',
-    'mfaCompletionFailure',
-];
 /** Allows subscribing to dynamic events directly inside components with a hook */
 const useDynamicEvents = (event, listener) => {
-    if (!externalEvents.includes(event))
+    if (!dynamicEvents.externalEvents.includes(event))
         throw new Error(`Unrecognized event "${event}" used with useDynamicEvents`);
     useInternalDynamicEvents(event, listener);
 };

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.d.ts

@@ -4,5 +4,5 @@ type DynamicEventListener<E extends keyof DynamicEvents> = (...args: EventArgs<D
 /** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
 export declare const useInternalDynamicEvents: <E extends keyof import("../../../../events/auth").AuthEvents | keyof import("../../../../events/ui").UIEvents | keyof import("../../../../events/otp").OTPEvents | keyof import("../../../../events/wallets").WalletEvents | keyof import("../../../../events/passkey").PasskeyEvents | "farcasterConnectCancelled" | keyof import("../../../../events/embeddedWallet").EmbeddedWalletEvents | keyof import("../../../../events/multiWallet").MultiWalletInternalEvents | "tokenBalancesChanged">(event: E, listener: DynamicEventListener<E>) => void;
 /** Allows subscribing to dynamic events directly inside components with a hook */
-export declare const useDynamicEvents: <E extends "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "embeddedWalletCreated">(event: E, listener: DynamicEventListener<E>) => void;
+export declare const useDynamicEvents: <E extends "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated">(event: E, listener: DynamicEventListener<E>) => void;
 export {};

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.js

@@ -1,6 +1,6 @@
 'use client'
 import { useRef, useEffect } from 'react';
-import { dynamicEvents } from '../../../../events/dynamicEvents.js';
+import { externalEvents, dynamicEvents } from '../../../../events/dynamicEvents.js';
 
 /** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
 const useInternalDynamicEvents = (event, listener) => {
@@ -14,21 +14,6 @@ const useInternalDynamicEvents = (event, listener) => {
         };
     }, [event]);
 };
-// ATTENTION
-// Everything below should be made public soon, but we need to plan this out first
-// Main issues:
-// 1. How should we map customer callback names to our dynamic event names?
-//  -> Gui's suggestion: breaking change to rename customer callbacks so they fit these events names
-// 2. We would have to remove these callbacks from the useCustomerCallbacks hook
-/** Which events are accessible by our clients */
-const externalEvents = [
-    'emailVerificationResult',
-    'embeddedWalletCreated',
-    'logout',
-    'walletAdded',
-    'mfaCompletionSuccess',
-    'mfaCompletionFailure',
-];
 /** Allows subscribing to dynamic events directly inside components with a hook */
 const useDynamicEvents = (event, listener) => {
     if (!externalEvents.includes(event))

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

@@ -89,16 +89,21 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 const useTokenBalances = ({ accountAddress, networkId, chainName = sdkApiCore.ChainEnum.Evm, tokenAddresses, includeFiat = false, includeNativeBalance = false, } = {}) => {
     const tokenBalancesState = tokenBalances.useTokenBalancesState();
     const { tokenBalances: tokenBalances$1, isLoading, error } = tokenBalancesState;
-    const { primaryWallet, environmentId, network, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, environmentId, network, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const requestChainName = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain;
     const requestAccount = accountAddress !== null && accountAddress !== void 0 ? accountAddress : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const requestNetwork = networkId !== null && networkId !== void 0 ? networkId : network;
     const fetchAccountBalances = React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* (forceRefresh = false) {
-        if (!user) {
+        var _a;
+        if (authMode !== 'connect-only' && !user) {
             tokenBalances.setTokenBalanceVariable('error', errors.USER_NOT_LOGGED_IN);
             return;
         }
+        if (authMode === 'connect-only' &&
+            !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset)) {
+            return;
+        }
         if (![sdkApiCore.ChainEnum.Evm, sdkApiCore.ChainEnum.Sol].includes(requestChainName)) {
             tokenBalances.setTokenBalanceVariable('error', `Chain ${requestChainName} is not supported for token balances`);
             return;

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

@@ -85,16 +85,21 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 const useTokenBalances = ({ accountAddress, networkId, chainName = ChainEnum.Evm, tokenAddresses, includeFiat = false, includeNativeBalance = false, } = {}) => {
     const tokenBalancesState = useTokenBalancesState();
     const { tokenBalances, isLoading, error } = tokenBalancesState;
-    const { primaryWallet, environmentId, network, user } = useInternalDynamicContext();
+    const { primaryWallet, environmentId, network, user, projectSettings, authMode, } = useInternalDynamicContext();
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const requestChainName = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain;
     const requestAccount = accountAddress !== null && accountAddress !== void 0 ? accountAddress : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const requestNetwork = networkId !== null && networkId !== void 0 ? networkId : network;
     const fetchAccountBalances = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (forceRefresh = false) {
-        if (!user) {
+        var _a;
+        if (authMode !== 'connect-only' && !user) {
             setTokenBalanceVariable('error', USER_NOT_LOGGED_IN);
             return;
         }
+        if (authMode === 'connect-only' &&
+            !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset)) {
+            return;
+        }
         if (![ChainEnum.Evm, ChainEnum.Sol].includes(requestChainName)) {
             setTokenBalanceVariable('error', `Chain ${requestChainName} is not supported for token balances`);
             return;

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

@@ -18,11 +18,14 @@ require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../store/state/loadingAndLifecycle.cjs');
 require('../../../shared/consts/index.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.cjs');
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var updateUserWalletsFromLinkedWallets = require('./utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.cjs');
 
 const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, setMultiWalletWidgetState, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, separateSmartWalletAndSigner = false, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
+    // keeps track of the last primary wallet id to avoid emitting the same event multiple times
+    const lastPrimaryWalletId = React.useRef(primaryWalletId);
     const linkedWallets = React.useMemo(() => {
         if (!user) {
             return [];
@@ -77,6 +80,13 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
         setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets.updateUserWalletsFromLinkedWallets(userWallets, wallets));
     }, [setUserWallets, wallets]);
     const primaryWallet = React.useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
+    // emit primaryWalletChanged event if the primary wallet changes
+    React.useEffect(() => {
+        if (primaryWallet && primaryWallet.id !== lastPrimaryWalletId.current) {
+            lastPrimaryWalletId.current = primaryWallet.id;
+            dynamicEvents.dynamicEvents.emit('primaryWalletChanged', primaryWallet);
+        }
+    }, [primaryWallet]);
     const secondaryWallets = React.useMemo(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
         : [], [primaryWalletId, wallets, canHaveMultipleWalletsConnected]);

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { DynamicError } from '@dynamic-labs/utils';
 import { isEmbeddedConnector, isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -14,11 +14,14 @@ import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../store/state/loadingAndLifecycle.js';
 import '../../../shared/consts/index.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { updateUserWalletsFromLinkedWallets } from './utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.js';
 
 const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, setMultiWalletWidgetState, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, separateSmartWalletAndSigner = false, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
+    // keeps track of the last primary wallet id to avoid emitting the same event multiple times
+    const lastPrimaryWalletId = useRef(primaryWalletId);
     const linkedWallets = useMemo(() => {
         if (!user) {
             return [];
@@ -73,6 +76,13 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
         setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets(userWallets, wallets));
     }, [setUserWallets, wallets]);
     const primaryWallet = useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
+    // emit primaryWalletChanged event if the primary wallet changes
+    useEffect(() => {
+        if (primaryWallet && primaryWallet.id !== lastPrimaryWalletId.current) {
+            lastPrimaryWalletId.current = primaryWallet.id;
+            dynamicEvents.emit('primaryWalletChanged', primaryWallet);
+        }
+    }, [primaryWallet]);
     const secondaryWallets = useMemo(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
         : [], [primaryWalletId, wallets, canHaveMultipleWalletsConnected]);

package/src/lib/views/SocialRedirectView/SocialRedirectView.cjs

@@ -51,13 +51,13 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../store/state/environmentId.cjs');
 require('../../store/state/walletConnectorOptions.cjs');
-var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
-require('../../context/FooterAnimationContext/index.cjs');
+var DynamicFooter = require('../../components/DynamicFooter/DynamicFooter.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -90,7 +90,7 @@ const SocialRedirectView = () => {
     const { socialProvider, signInProvider } = SocialRedirectContext.useSocialRedirectContext();
     const findSocialIcon = useFindSocialIcon.useFindSocialIcon();
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('social-redirect-view__container'), children: [socialProvider && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 64, Icon: findSocialIcon(socialProvider), isSpinning: true })), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', className: classNames.classNames('social-redirect-view__title'), copykey: 'dyn_social_redirect.logging_in', children: t('dyn_social_redirect.logging_in') }), signInProvider !== sdkApiCore.SignInProviderEnum.MagicLink && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'powered-by-dynamic' }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: classNames.classNames('social-redirect-view__container'), children: [socialProvider && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 64, Icon: findSocialIcon(socialProvider), isSpinning: true })), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', className: classNames.classNames('social-redirect-view__title'), copykey: 'dyn_social_redirect.logging_in', children: t('dyn_social_redirect.logging_in') })] }), signInProvider !== sdkApiCore.SignInProviderEnum.MagicLink && jsxRuntime.jsx(DynamicFooter.DynamicFooter, {})] }));
 };
 
 exports.SocialRedirectView = SocialRedirectView;

package/src/lib/views/SocialRedirectView/SocialRedirectView.js

@@ -1,5 +1,5 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { SignInProviderEnum } from '@dynamic-labs/sdk-api-core';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
@@ -47,13 +47,13 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../store/state/environmentId.js';
 import '../../store/state/walletConnectorOptions.js';
-import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
-import '../../context/FooterAnimationContext/index.js';
+import { DynamicFooter } from '../../components/DynamicFooter/DynamicFooter.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../context/FooterAnimationContext/index.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -86,7 +86,7 @@ const SocialRedirectView = () => {
     const { socialProvider, signInProvider } = useSocialRedirectContext();
     const findSocialIcon = useFindSocialIcon();
     const { t } = useTranslation();
-    return (jsxs("div", { className: classNames('social-redirect-view__container'), children: [socialProvider && (jsx(IconWithSpinner, { iconSize: 64, Icon: findSocialIcon(socialProvider), isSpinning: true })), jsx(Typography, { weight: 'medium', variant: 'title', className: classNames('social-redirect-view__title'), copykey: 'dyn_social_redirect.logging_in', children: t('dyn_social_redirect.logging_in') }), signInProvider !== SignInProviderEnum.MagicLink && (jsx(PoweredByDynamic, { classNameRoot: 'powered-by-dynamic' }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: classNames('social-redirect-view__container'), children: [socialProvider && (jsx(IconWithSpinner, { iconSize: 64, Icon: findSocialIcon(socialProvider), isSpinning: true })), jsx(Typography, { weight: 'medium', variant: 'title', className: classNames('social-redirect-view__title'), copykey: 'dyn_social_redirect.logging_in', children: t('dyn_social_redirect.logging_in') })] }), signInProvider !== SignInProviderEnum.MagicLink && jsx(DynamicFooter, {})] }));
 };
 
 export { SocialRedirectView };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs

@@ -101,7 +101,7 @@ var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
 const ICON_SIZE = 28;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { t } = reactI18next.useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
@@ -169,7 +169,10 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
         }
     };
-    const enableMultiAsset = authMode === 'connect-and-sign' && multiAsset;
+    const enableMultiAsset = (authMode === 'connect-and-sign' ||
+        (authMode === 'connect-only' &&
+            ((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _f === void 0 ? void 0 : _f.connectOnlyMultiAsset))) &&
+        multiAsset;
     const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork.isMultiAssetSupportedNetwork(primaryConnector, network);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
     const showMultiAsset = !isTooManyRequests && isNetworkMultiAssetSupported && enableMultiAsset;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js

@@ -97,7 +97,7 @@ import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
 const ICON_SIZE = 28;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { t } = useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
@@ -165,7 +165,10 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             return (jsx(ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
         }
     };
-    const enableMultiAsset = authMode === 'connect-and-sign' && multiAsset;
+    const enableMultiAsset = (authMode === 'connect-and-sign' ||
+        (authMode === 'connect-only' &&
+            ((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _f === void 0 ? void 0 : _f.connectOnlyMultiAsset))) &&
+        multiAsset;
     const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork(primaryConnector, network);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
     const showMultiAsset = !isTooManyRequests && isNetworkMultiAssetSupported && enableMultiAsset;