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

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## [3.8.0](https://github.com/dynamic-labs/DynamicAuth/compare/v3.7.0...v3.8.0) (2024-11-20)
+
+
+### Features
+
+* allow listening to dynamic events without using a hook ([#7466](https://github.com/dynamic-labs/DynamicAuth/issues/7466)) ([#7473](https://github.com/dynamic-labs/DynamicAuth/issues/7473)) ([680afb3](https://github.com/dynamic-labs/DynamicAuth/commit/680afb31c6e6ef5d8bf3c6e129bea7a6f7d052f0))
+* emit primaryWalletChanged event when primary wallets changes ([#7464](https://github.com/dynamic-labs/DynamicAuth/issues/7464)) ([#7469](https://github.com/dynamic-labs/DynamicAuth/issues/7469)) ([52cfe2a](https://github.com/dynamic-labs/DynamicAuth/commit/52cfe2a17dea14d4a2748f7a16acbb156d5292f8))
+* emit primaryWalletNetworkChanged event when primary wallet network changes ([#7471](https://github.com/dynamic-labs/DynamicAuth/issues/7471)) ([185b8b4](https://github.com/dynamic-labs/DynamicAuth/commit/185b8b497d71898df319ca11e2f15c4b96d8f745)), closes [#7465](https://github.com/dynamic-labs/DynamicAuth/issues/7465)
+
 ## [3.7.0](https://github.com/dynamic-labs/DynamicAuth/compare/v3.6.3...v3.7.0) (2024-11-19)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.7.0";
+var version = "3.8.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.565",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "3.7.0";
+var version = "3.8.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.565",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
@@ -17,16 +17,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "3.7.0",
-    "@dynamic-labs/iconic": "3.7.0",
-    "@dynamic-labs/logger": "3.7.0",
-    "@dynamic-labs/multi-wallet": "3.7.0",
-    "@dynamic-labs/rpc-providers": "3.7.0",
-    "@dynamic-labs/store": "3.7.0",
-    "@dynamic-labs/types": "3.7.0",
-    "@dynamic-labs/utils": "3.7.0",
-    "@dynamic-labs/wallet-book": "3.7.0",
-    "@dynamic-labs/wallet-connector-core": "3.7.0",
+    "@dynamic-labs/assert-package-version": "3.8.0",
+    "@dynamic-labs/iconic": "3.8.0",
+    "@dynamic-labs/logger": "3.8.0",
+    "@dynamic-labs/multi-wallet": "3.8.0",
+    "@dynamic-labs/rpc-providers": "3.8.0",
+    "@dynamic-labs/store": "3.8.0",
+    "@dynamic-labs/types": "3.8.0",
+    "@dynamic-labs/utils": "3.8.0",
+    "@dynamic-labs/wallet-book": "3.8.0",
+    "@dynamic-labs/wallet-connector-core": "3.8.0",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/index.cjs

@@ -61,7 +61,7 @@ var stroke = require('./lib/shared/assets/stroke.cjs');
 require('./lib/shared/consts/index.cjs');
 require('../_virtual/_tslib.cjs');
 require('react-dom');
-require('./lib/events/dynamicEvents.cjs');
+var dynamicEvents = require('./lib/events/dynamicEvents.cjs');
 var api = require('./lib/data/api/api.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
@@ -212,6 +212,7 @@ exports.LogoutIcon = logout.ReactComponent;
 exports.PencilIcon = pencil.ReactComponent;
 exports.SpinnerIcon = spinner.ReactComponent;
 exports.ArrowIcon = stroke.ReactComponent;
+exports.dynamicEvents = dynamicEvents.publicDynamicEvents;
 exports.apiClient = api.sdkApi;
 exports.mergeNetworks = mergeNetworks.mergeNetworks;
 exports.isAuthenticatedWithAWallet = isAuthenticatedWithAWallet.isAuthenticatedWithAWallet;

package/src/index.d.ts

@@ -98,6 +98,7 @@ export type { EvmNetwork, PhoneData, OtpDestination, UserProfile,
 AuthOptions as AuthOption, AuthOptions, 
 /** @deprecated use AuthMethod instead */
 AuthMethod as AuthType, AuthMethod, } from '@dynamic-labs/types';
+export { publicDynamicEvents as dynamicEvents } from './lib/events/dynamicEvents';
 export { mergeNetworks } from './lib/utils/functions/mergeNetworks';
 export { 
 /** @deprecated use https://www.npmjs.com/package/classnames */

package/src/index.js

@@ -57,7 +57,7 @@ export { ReactComponent as ArrowIcon } from './lib/shared/assets/stroke.js';
 import './lib/shared/consts/index.js';
 import '../_virtual/_tslib.js';
 import 'react-dom';
-import './lib/events/dynamicEvents.js';
+export { publicDynamicEvents as dynamicEvents } from './lib/events/dynamicEvents.js';
 export { sdkApi as apiClient } from './lib/data/api/api.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';

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

@@ -15,7 +15,7 @@ var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var app = require('../../app.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
-require('../../events/dynamicEvents.cjs');
+var dynamicEvents = require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/sdk-api-core');
 var logger$1 = require('../../shared/logger.cjs');
 var ViewContext = require('../ViewContext/ViewContext.cjs');
@@ -385,7 +385,13 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
         secondaryWallets,
         verifiedCredentials: (user$1 === null || user$1 === void 0 ? void 0 : user$1.verifiedCredentials) || [],
     });
-    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork.useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork.useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, {
+        onChange: (newNetwork) => {
+            if (newNetwork) {
+                dynamicEvents.dynamicEvents.emit('primaryWalletNetworkChanged', newNetwork);
+            }
+        },
+    });
     useWalletEventListeners.useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

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

@@ -11,7 +11,7 @@ import { setChainInfoOverrides, logger as logger$1, isSessionKeyCompatibleWallet
 import { DynamicAuthFlow } from '../../app.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
-import '../../events/dynamicEvents.js';
+import { dynamicEvents } from '../../events/dynamicEvents.js';
 import '@dynamic-labs/sdk-api-core';
 import { logger } from '../../shared/logger.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
@@ -381,7 +381,13 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
         secondaryWallets,
         verifiedCredentials: (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [],
     });
-    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, {
+        onChange: (newNetwork) => {
+            if (newNetwork) {
+                dynamicEvents.emit('primaryWalletNetworkChanged', newNetwork);
+            }
+        },
+    });
     useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

package/src/lib/events/dynamicEvents.cjs

@@ -9,6 +9,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 
+// 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',
+    'primaryWalletChanged',
+    'primaryWalletNetworkChanged',
+    'mfaCompletionSuccess',
+    'mfaCompletionFailure',
+];
+// Full internal event emitter
 const dynamicEvents = new EventEmitter__default["default"]();
+// Limited public event emitter with subset of events
+const publicDynamicEvents = dynamicEvents;
 
 exports.dynamicEvents = dynamicEvents;
+exports.externalEvents = externalEvents;
+exports.publicDynamicEvents = publicDynamicEvents;

package/src/lib/events/dynamicEvents.d.ts

@@ -10,5 +10,8 @@ import { MultiWalletInternalEvents } from './multiWallet';
 import { tokenBalancesEvents } from './tokenBalances';
 /** Maps internal event names to their listeners */
 export type DynamicEvents = AuthEvents & UIEvents & OTPEvents & WalletEvents & PasskeyEvents & SocialEvents & EmbeddedWalletEvents & MultiWalletInternalEvents & tokenBalancesEvents;
+/** Which events are accessible by our clients */
+export declare const externalEvents: ("logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated")[];
 export declare const dynamicEvents: EventEmitter<DynamicEvents, any>;
+export declare const publicDynamicEvents: EventEmitter<"logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated", any>;
 export type DynamicEventEmitter = typeof dynamicEvents;

package/src/lib/events/dynamicEvents.js

@@ -1,6 +1,26 @@
 'use client'
 import EventEmitter from 'eventemitter3';
 
+// 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',
+    'primaryWalletChanged',
+    'primaryWalletNetworkChanged',
+    'mfaCompletionSuccess',
+    'mfaCompletionFailure',
+];
+// Full internal event emitter
 const dynamicEvents = new EventEmitter();
+// Limited public event emitter with subset of events
+const publicDynamicEvents = dynamicEvents;
 
-export { dynamicEvents };
+export { dynamicEvents, externalEvents, publicDynamicEvents };

package/src/lib/events/wallets.d.ts

@@ -4,4 +4,8 @@ export type WalletEvents = {
     walletAdded: (wallet: Wallet, userWallets: Wallet[]) => void;
     /** Triggered when a wallet is removed from user wallets list */
     walletRemoved: (wallet: Wallet, userWallets: Wallet[]) => void;
+    /** Triggered when the primary wallet changes (a different wallet is selected) */
+    primaryWalletChanged: (newPrimaryWallet: Wallet) => void;
+    /** Triggered when the network changes in primary wallet */
+    primaryWalletNetworkChanged: (newNetwork: string | number) => void;
 };

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/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]);