@dynamic-labs/sdk-react-core 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [4.2.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.1.0...v4.2.0) (2025-01-14)
+
+
+### Features
+
+* add EthereumWalletConnectorsWithConfig ([#7796](https://github.com/dynamic-labs/dynamic-auth/issues/7796)) ([52146c3](https://github.com/dynamic-labs/dynamic-auth/commit/52146c38acbbe9ad31d5f047527b06ea44846065))
+* add new userWalletsChanged event that aggregates all user wallet events ([#7797](https://github.com/dynamic-labs/dynamic-auth/issues/7797)) ([058e629](https://github.com/dynamic-labs/dynamic-auth/commit/058e629f0e760ad9dff2b03f86354355c6f8bffe))
+* add support for connect with OKX Wallet on Eclipse ([#7793](https://github.com/dynamic-labs/dynamic-auth/issues/7793)) ([b6cd047](https://github.com/dynamic-labs/dynamic-auth/commit/b6cd04781402868443b02cbce269dd3c02c358b5))
+
+
+### Bug Fixes
+
+* getWalletClient method not returning client with chain for Coinbase ([#7799](https://github.com/dynamic-labs/dynamic-auth/issues/7799)) ([e075493](https://github.com/dynamic-labs/dynamic-auth/commit/e0754936582c19850c905fc3d62c3621df7c274c))
+
 ## [4.1.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.1...v4.1.0) (2025-01-14)
 
 

package/package.cjs

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

package/package.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.586",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -13,17 +13,17 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.1.0",
-    "@dynamic-labs/ethereum-aa": "4.1.0",
-    "@dynamic-labs/iconic": "4.1.0",
-    "@dynamic-labs/logger": "4.1.0",
-    "@dynamic-labs/multi-wallet": "4.1.0",
-    "@dynamic-labs/rpc-providers": "4.1.0",
-    "@dynamic-labs/store": "4.1.0",
-    "@dynamic-labs/types": "4.1.0",
-    "@dynamic-labs/utils": "4.1.0",
-    "@dynamic-labs/wallet-book": "4.1.0",
-    "@dynamic-labs/wallet-connector-core": "4.1.0",
+    "@dynamic-labs/assert-package-version": "4.2.0",
+    "@dynamic-labs/ethereum-aa": "4.2.0",
+    "@dynamic-labs/iconic": "4.2.0",
+    "@dynamic-labs/logger": "4.2.0",
+    "@dynamic-labs/multi-wallet": "4.2.0",
+    "@dynamic-labs/rpc-providers": "4.2.0",
+    "@dynamic-labs/store": "4.2.0",
+    "@dynamic-labs/types": "4.2.0",
+    "@dynamic-labs/utils": "4.2.0",
+    "@dynamic-labs/wallet-book": "4.2.0",
+    "@dynamic-labs/wallet-connector-core": "4.2.0",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/index.d.ts

@@ -100,6 +100,7 @@ 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 { type UserWalletsChangedParams } from './lib/events';
 export { mergeNetworks } from './lib/utils/functions/mergeNetworks';
 export { 
 /** @deprecated use https://www.npmjs.com/package/classnames */

package/src/lib/components/OverlayCardBase/OverlayCardBase.cjs

@@ -20,6 +20,7 @@ var index = require('../../shared/utils/hooks/useOnClickOutside/index.cjs');
 var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var transitions = require('../../utils/constants/transitions.cjs');
 var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
@@ -97,8 +98,8 @@ const OverlayCardBase = ({ isOpen, children, onClickOverlay, style, className, }
     usePreventPageScroll.usePreventPageScroll(isOpen && !target);
     const contentRef = React.useRef(null);
     index.useOnClickOutside(contentRef, () => onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay());
-    const opacityTransition = (jsxRuntime.jsx(OpacityTransition.OpacityTransition, { className: 'overlay-card-base__animation' }));
-    const slideTransition = (jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, { className: 'overlay-card-base__animation' }));
+    const opacityTransition = (jsxRuntime.jsx(OpacityTransition.OpacityTransition, { className: 'overlay-card-base__animation', duration: transitions.DURATION_DEFAULT }));
+    const slideTransition = (jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, { className: 'overlay-card-base__animation', duration: transitions.DURATION_DEFAULT }));
     const content = (jsxRuntime.jsx("div", { className: classNames.classNames('overlay-card-base', {
             'overlay-card-base--disabled': !isOpen,
         }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: opacityTransition, children: jsxRuntime.jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' }) }), jsxRuntime.jsx("div", { className: 'overlay-card-base__content-wrapper', children: jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: slideTransition, children: jsxRuntime.jsx("div", { ref: contentRef, className: classNames.classNames('overlay-card-base__content', className), style: style, children: children }) }) })] })) }));

package/src/lib/components/OverlayCardBase/OverlayCardBase.js

@@ -16,6 +16,7 @@ import { useOnClickOutside } from '../../shared/utils/hooks/useOnClickOutside/in
 import { usePreventPageScroll } from '../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { DURATION_DEFAULT } from '../../utils/constants/transitions.js';
 import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
@@ -93,8 +94,8 @@ const OverlayCardBase = ({ isOpen, children, onClickOverlay, style, className, }
     usePreventPageScroll(isOpen && !target);
     const contentRef = useRef(null);
     useOnClickOutside(contentRef, () => onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay());
-    const opacityTransition = (jsx(OpacityTransition, { className: 'overlay-card-base__animation' }));
-    const slideTransition = (jsx(SlideInUpTransition, { className: 'overlay-card-base__animation' }));
+    const opacityTransition = (jsx(OpacityTransition, { className: 'overlay-card-base__animation', duration: DURATION_DEFAULT }));
+    const slideTransition = (jsx(SlideInUpTransition, { className: 'overlay-card-base__animation', duration: DURATION_DEFAULT }));
     const content = (jsx("div", { className: classNames('overlay-card-base', {
             'overlay-card-base--disabled': !isOpen,
         }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: isOpen && (jsxs(Fragment, { children: [jsx(AnimatePresence, { animationComponent: opacityTransition, children: jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' }) }), jsx("div", { className: 'overlay-card-base__content-wrapper', children: jsx(AnimatePresence, { animationComponent: slideTransition, children: jsx("div", { ref: contentRef, className: classNames('overlay-card-base__content', className), style: style, children: children }) }) })] })) }));

package/src/lib/components/TransactionCard/SendBalanceTransactionCard.d.ts

@@ -4,13 +4,13 @@ import { IUITransaction } from '@dynamic-labs/types';
 export declare const SendBalanceTransactionCard: ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, walletKey, }: {
     transaction: IUITransaction;
     currentToken: TokenBalance | undefined;
-    currencySymbol: string;
+    currencySymbol: string | undefined;
     valueRounded?: string;
     transactionValue: string | undefined;
     isGasSponsored: boolean;
     gasFiatValue: string;
     totalGasFiatValue: string;
-    currency: string;
+    currency: string | undefined;
     total: bigint | undefined;
     t: any;
     walletKey: string;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -115,7 +115,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const { userNeedsCrossDomainPasskey } = PasskeyContext.usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
     const { currency } = useFetchCurrency.useFetchCurrency(walletConnector);
-    const currencySymbol = utils.useCurrencySymbol(currentToken, currency);
+    const currencySymbol = utils.useCurrencySymbol(currentToken, currency === null || currency === void 0 ? void 0 : currency.symbol);
     const { nativePrice } = sendBalances.useSendBalanceState();
     utils.useHandleRecovery(walletConnector, usingSessionKeys.usingSessionKey, onSuccess, shouldInitRecovery, initPasskeyRecoveryProcess, hideModal);
     const handleSubmitWithChecks = utils.useHandleSubmitWithChecks({
@@ -129,7 +129,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     const gasFiatValue = fiatUtils.getGasFiatValue(currentToken, transaction, nativePrice);
     const totalGasFiatValue = fiatUtils.getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
-    return hideModal ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__banner', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: walletConnector ? ethereumAa.isZeroDevConnector(walletConnector) : false, simulationResult: simulationResult, recipient: recipient })) : (jsxRuntime.jsx(SendBalanceTransactionCard.SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey })), children && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+    return hideModal ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__banner', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsxRuntime.jsx(TransactionCard.TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: walletConnector ? ethereumAa.isZeroDevConnector(walletConnector) : false, simulationResult: simulationResult, recipient: recipient })) : (jsxRuntime.jsx(SendBalanceTransactionCard.SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = utils.getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total, t: t, walletKey: walletKey })), children && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'primary', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -111,7 +111,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const { userNeedsCrossDomainPasskey } = usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
     const { currency } = useFetchCurrency(walletConnector);
-    const currencySymbol = useCurrencySymbol(currentToken, currency);
+    const currencySymbol = useCurrencySymbol(currentToken, currency === null || currency === void 0 ? void 0 : currency.symbol);
     const { nativePrice } = useSendBalanceState();
     useHandleRecovery(walletConnector, usingSessionKey, onSuccess, shouldInitRecovery, initPasskeyRecoveryProcess, hideModal);
     const handleSubmitWithChecks = useHandleSubmitWithChecks({
@@ -125,7 +125,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
     const gasFiatValue = getGasFiatValue(currentToken, transaction, nativePrice);
     const totalGasFiatValue = getTotalFiatCost(currentToken, transaction, nativePrice, transactionValue);
-    return hideModal ? null : (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsx("div", { className: 'transaction-confirmation__banner', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: walletConnector ? isZeroDevConnector(walletConnector) : false, simulationResult: simulationResult, recipient: recipient })) : (jsx(SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency, total: total, t: t, walletKey: walletKey })), children && (jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
+    return hideModal ? null : (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.confirmation_tx', children: t('dyn_send_transaction.data.confirmation_tx') }) }) }), jsx("div", { className: 'transaction-confirmation__banner', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.data.banner', children: t('dyn_send_transaction.data.banner') }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsxs("div", { className: 'transaction-confirmation__content', children: [!sendBalanceTransaction ? (jsx(TransactionCard, { transaction: transaction, isGasSponsored: isGasSponsored, isAATransaction: walletConnector ? isZeroDevConnector(walletConnector) : false, simulationResult: simulationResult, recipient: recipient })) : (jsx(SendBalanceTransactionCard, { transaction: transaction, currentToken: currentToken, currencySymbol: currencySymbol, valueRounded: (_a = getValueRounded(Boolean(isNativeToken), transaction)) === null || _a === void 0 ? void 0 : _a.toString(), transactionValue: transactionValue, isGasSponsored: isGasSponsored, gasFiatValue: gasFiatValue || '0', totalGasFiatValue: totalGasFiatValue || '0', currency: currency === null || currency === void 0 ? void 0 : currency.symbol, total: total, t: t, walletKey: walletKey })), children && (jsx("div", { className: 'transaction-confirmation__rows', children: children }))] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxs("div", { className: 'transaction-confirmation__actions', children: [(onClickBack || onClickClose) && (jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'small', onClick: onClickBack || onClickClose, expanded: true, disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'small', onClick: handleSubmitWithChecks, expanded: true, loading: isLoading, disabled: disableSendButton, copykey: 'dyn_send_transaction.confirmation.send', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), dataTestId: 'transaction-confirmation-send', children: t('dyn_send_transaction.confirmation.send') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };

package/src/lib/components/TransactionConfirmationPageLayout/utils.d.ts

@@ -23,7 +23,7 @@ interface ViewHandlers {
     setView: (view: ViewType) => void;
     setShowAuthFlow: (show: boolean, options: AuthFlowOptions) => void;
 }
-export declare const useCurrencySymbol: (currentToken: TokenBalance | undefined, currency: string) => string;
+export declare const useCurrencySymbol: (currentToken: TokenBalance | undefined, currency: string | undefined) => string | undefined;
 export declare const getValueRounded: (isNativeToken: boolean, transaction: IUITransaction) => string | number | undefined;
 export declare const calculateFiatPrice: (amount?: number, price?: number, decimals?: number) => number | undefined;
 export declare const getDisplayFiatPrice: (amountValue?: number, currentToken?: TokenBalance) => string;

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

@@ -7,12 +7,13 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
+var transitions = require('../../../utils/constants/transitions.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getSlideInUpTransitionDefaultStyles = (duration, curve = 'linear') => ({
+const getSlideInUpTransitionDefaultStyles = (duration, curve = transitions.EASING_FUNCTION_DEFAULT) => ({
     transition: `transform ${duration}ms ${curve}, opacity ${duration}ms ${curve}`,
 });
 const transitionStyles = {
@@ -27,9 +28,9 @@ const transitionStyles = {
     },
 };
 const UnoptimizedSlideInUpTransition = (_a) => {
-    var { children, className } = _a, transitionProps = _tslib.__rest(_a, ["children", "className"]);
+    var { children, className, easingFunction } = _a, transitionProps = _tslib.__rest(_a, ["children", "className", "easingFunction"]);
     const { mount, stage, currentDuration } = useTransition.useTransition(transitionProps);
-    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration);
+    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration, easingFunction);
     const stageStyles = transitionStyles[stage];
     if (!mount)
         return null;

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

@@ -3,8 +3,9 @@ import { __rest } from '../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
+import { EASING_FUNCTION_DEFAULT } from '../../../utils/constants/transitions.js';
 
-const getSlideInUpTransitionDefaultStyles = (duration, curve = 'linear') => ({
+const getSlideInUpTransitionDefaultStyles = (duration, curve = EASING_FUNCTION_DEFAULT) => ({
     transition: `transform ${duration}ms ${curve}, opacity ${duration}ms ${curve}`,
 });
 const transitionStyles = {
@@ -19,9 +20,9 @@ const transitionStyles = {
     },
 };
 const UnoptimizedSlideInUpTransition = (_a) => {
-    var { children, className } = _a, transitionProps = __rest(_a, ["children", "className"]);
+    var { children, className, easingFunction } = _a, transitionProps = __rest(_a, ["children", "className", "easingFunction"]);
     const { mount, stage, currentDuration } = useTransition(transitionProps);
-    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration);
+    const defaultStyles = getSlideInUpTransitionDefaultStyles(currentDuration, easingFunction);
     const stageStyles = transitionStyles[stage];
     if (!mount)
         return null;

package/src/lib/components/Transition/transition.type.d.ts

@@ -8,5 +8,6 @@ export interface ITransitionOptions {
     outDuration?: number;
     outDelay?: number;
     delay?: number;
+    easingFunction?: string;
 }
 export type TransitionProps = ITransitionOptions & PropsWithChildren;

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

@@ -74,6 +74,7 @@ var useResetCookieLocalStorage = require('../../utils/hooks/useResetCookieLocalS
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useEndUserWarning = require('../../utils/hooks/useEndUserWarning/useEndUserWarning.cjs');
 var useDeviceFingerprint = require('../../utils/hooks/useDeviceFingerprint/useDeviceFingerprint.cjs');
+var useAggregateWalletEvents = require('../../utils/hooks/useAggregateWalletEvents/useAggregateWalletEvents.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
@@ -404,6 +405,7 @@ const InnerDynamicContextProvider = (props) => {
             }
         },
     });
+    useAggregateWalletEvents.useAggregateWalletEvents();
     useWalletEventListeners.useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

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

@@ -70,6 +70,7 @@ import { useResetCookieLocalStorage } from '../../utils/hooks/useResetCookieLoca
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useEndUserWarning } from '../../utils/hooks/useEndUserWarning/useEndUserWarning.js';
 import { useDeviceFingerprint } from '../../utils/hooks/useDeviceFingerprint/useDeviceFingerprint.js';
+import { useAggregateWalletEvents } from '../../utils/hooks/useAggregateWalletEvents/useAggregateWalletEvents.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/InlineWidget/InlineWidget.js';
@@ -400,6 +401,7 @@ const InnerDynamicContextProvider = (props) => {
             }
         },
     });
+    useAggregateWalletEvents();
     useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

package/src/lib/events/dynamicEvents.cjs

@@ -32,6 +32,7 @@ const externalEvents = [
     'smsVerificationResult',
     'walletAdded',
     'walletRemoved',
+    'userWalletsChanged',
 ];
 // Full internal event emitter
 const dynamicEvents = new EventEmitter__default["default"]();

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

@@ -11,7 +11,7 @@ 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: ("authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated")[];
+export declare const externalEvents: ("authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "userWalletsChanged" | "embeddedWalletCreated")[];
 export declare const dynamicEvents: EventEmitter<DynamicEvents, any>;
-export declare const publicDynamicEvents: EventEmitter<"authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated", any>;
+export declare const publicDynamicEvents: EventEmitter<"authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "userWalletsChanged" | "embeddedWalletCreated", any>;
 export type DynamicEventEmitter = typeof dynamicEvents;

package/src/lib/events/dynamicEvents.js

@@ -24,6 +24,7 @@ const externalEvents = [
     'smsVerificationResult',
     'walletAdded',
     'walletRemoved',
+    'userWalletsChanged',
 ];
 // Full internal event emitter
 const dynamicEvents = new EventEmitter();

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

@@ -1 +1,2 @@
 export * from './dynamicEvents';
+export { type UserWalletsChangedParams } from './wallets';

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

@@ -1,4 +1,25 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { Wallet } from '../shared/types/wallets';
+export type UserWalletsUpdateType = {
+    updateType: 'walletAdded';
+    addedWallet: Wallet;
+} | {
+    updateType: 'walletRemoved';
+    removedWallet: Wallet;
+} | {
+    updateType: 'primaryWalletChanged';
+} | {
+    updateType: 'primaryWalletNetworkChanged';
+    newNetwork: string | number;
+} | {
+    updateType: 'nonPrimaryWalletNetworkChanged';
+    newNetwork: string | number;
+    affectedWallets: Wallet[];
+};
+export type UserWalletsChangedParams = {
+    userWallets: Wallet[];
+    primaryWallet: Wallet | undefined;
+} & UserWalletsUpdateType;
 export type WalletEvents = {
     /** Triggered when a new wallet is added to user wallets list */
     walletAdded: (wallet: Wallet, userWallets: Wallet[]) => void;
@@ -8,4 +29,8 @@ export type WalletEvents = {
     primaryWalletChanged: (newPrimaryWallet: Wallet) => void;
     /** Triggered when the network changes in primary wallet */
     primaryWalletNetworkChanged: (newNetwork: string | number) => void;
+    /** Triggered when the network changes in non-primary wallet */
+    nonPrimaryWalletNetworkChanged: (newNetwork: string | number, connector: WalletConnector) => void;
+    /** Triggered when there is a change in user wallets */
+    userWalletsChanged: (params: UserWalletsChangedParams) => void;
 };

package/src/lib/utils/constants/transitions.cjs

@@ -0,0 +1,12 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// Easing functions
+const EASING_FUNCTION_DEFAULT = 'cubic-bezier(0, 0, 0.24, 1.0)';
+// Durations
+const DURATION_DEFAULT = 300;
+
+exports.DURATION_DEFAULT = DURATION_DEFAULT;
+exports.EASING_FUNCTION_DEFAULT = EASING_FUNCTION_DEFAULT;

package/src/lib/utils/constants/transitions.d.ts

@@ -0,0 +1,2 @@
+export declare const EASING_FUNCTION_DEFAULT = "cubic-bezier(0, 0, 0.24, 1.0)";
+export declare const DURATION_DEFAULT = 300;

package/src/lib/utils/constants/transitions.js

@@ -0,0 +1,7 @@
+'use client'
+// Easing functions
+const EASING_FUNCTION_DEFAULT = 'cubic-bezier(0, 0, 0.24, 1.0)';
+// Durations
+const DURATION_DEFAULT = 300;
+
+export { DURATION_DEFAULT, EASING_FUNCTION_DEFAULT };

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 "authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated">(event: E, listener: DynamicEventListener<E>) => void;
+export declare const useDynamicEvents: <E extends "authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "userWalletsChanged" | "embeddedWalletCreated">(event: E, listener: DynamicEventListener<E>) => void;
 export {};

package/src/lib/utils/hooks/index.d.ts

@@ -71,3 +71,4 @@ export { useDebounce } from './useDebounce';
 export { useDeviceFingerprint } from './useDeviceFingerprint';
 export * from './useEmbeddedWallet';
 export { useUpgradeEmbeddedWallet } from './useUpgradeEmbeddedWallet';
+export { useAggregateWalletEvents } from './useAggregateWalletEvents';

package/src/lib/utils/hooks/useAggregateWalletEvents/index.d.ts

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

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

@@ -0,0 +1,57 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var UserWalletsContext = require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+var primaryWalletId = require('../../../store/state/primaryWalletId/primaryWalletId.cjs');
+var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.cjs');
+
+const useAggregateWalletEvents = () => {
+    const { userWallets } = UserWalletsContext.useInternalUserWallets();
+    const findPrimaryWallet = (wallets) => wallets.find((wallet) => wallet.id === primaryWalletId.getPrimaryWalletId());
+    useDynamicEvents.useInternalDynamicEvents('walletAdded', (wallet, userWallets) => {
+        dynamicEvents.dynamicEvents.emit('userWalletsChanged', {
+            addedWallet: wallet,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'walletAdded',
+            userWallets,
+        });
+    });
+    useDynamicEvents.useInternalDynamicEvents('walletRemoved', (wallet, userWallets) => {
+        dynamicEvents.dynamicEvents.emit('userWalletsChanged', {
+            primaryWallet: findPrimaryWallet(userWallets),
+            removedWallet: wallet,
+            updateType: 'walletRemoved',
+            userWallets,
+        });
+    });
+    useDynamicEvents.useInternalDynamicEvents('primaryWalletChanged', (newPrimaryWallet) => {
+        dynamicEvents.dynamicEvents.emit('userWalletsChanged', {
+            primaryWallet: newPrimaryWallet,
+            updateType: 'primaryWalletChanged',
+            userWallets,
+        });
+    });
+    useDynamicEvents.useInternalDynamicEvents('primaryWalletNetworkChanged', (newNetwork) => {
+        dynamicEvents.dynamicEvents.emit('userWalletsChanged', {
+            newNetwork,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'primaryWalletNetworkChanged',
+            userWallets,
+        });
+    });
+    useDynamicEvents.useInternalDynamicEvents('nonPrimaryWalletNetworkChanged', (newNetwork, connector) => {
+        const affectedWallets = userWallets.filter((wallet) => wallet.connector.key === connector.key);
+        dynamicEvents.dynamicEvents.emit('userWalletsChanged', {
+            affectedWallets,
+            newNetwork,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'nonPrimaryWalletNetworkChanged',
+            userWallets,
+        });
+    });
+};
+
+exports.useAggregateWalletEvents = useAggregateWalletEvents;

package/src/lib/utils/hooks/useAggregateWalletEvents/useAggregateWalletEvents.d.ts

@@ -0,0 +1 @@
+export declare const useAggregateWalletEvents: () => void;

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

@@ -0,0 +1,53 @@
+'use client'
+import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
+import { getPrimaryWalletId } from '../../../store/state/primaryWalletId/primaryWalletId.js';
+import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
+
+const useAggregateWalletEvents = () => {
+    const { userWallets } = useInternalUserWallets();
+    const findPrimaryWallet = (wallets) => wallets.find((wallet) => wallet.id === getPrimaryWalletId());
+    useInternalDynamicEvents('walletAdded', (wallet, userWallets) => {
+        dynamicEvents.emit('userWalletsChanged', {
+            addedWallet: wallet,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'walletAdded',
+            userWallets,
+        });
+    });
+    useInternalDynamicEvents('walletRemoved', (wallet, userWallets) => {
+        dynamicEvents.emit('userWalletsChanged', {
+            primaryWallet: findPrimaryWallet(userWallets),
+            removedWallet: wallet,
+            updateType: 'walletRemoved',
+            userWallets,
+        });
+    });
+    useInternalDynamicEvents('primaryWalletChanged', (newPrimaryWallet) => {
+        dynamicEvents.emit('userWalletsChanged', {
+            primaryWallet: newPrimaryWallet,
+            updateType: 'primaryWalletChanged',
+            userWallets,
+        });
+    });
+    useInternalDynamicEvents('primaryWalletNetworkChanged', (newNetwork) => {
+        dynamicEvents.emit('userWalletsChanged', {
+            newNetwork,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'primaryWalletNetworkChanged',
+            userWallets,
+        });
+    });
+    useInternalDynamicEvents('nonPrimaryWalletNetworkChanged', (newNetwork, connector) => {
+        const affectedWallets = userWallets.filter((wallet) => wallet.connector.key === connector.key);
+        dynamicEvents.emit('userWalletsChanged', {
+            affectedWallets,
+            newNetwork,
+            primaryWallet: findPrimaryWallet(userWallets),
+            updateType: 'nonPrimaryWalletNetworkChanged',
+            userWallets,
+        });
+    });
+};
+
+export { useAggregateWalletEvents };

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

@@ -163,6 +163,9 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             }
         }
     });
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', ({ chain }, connector) => {
+        dynamicEvents.dynamicEvents.emit('nonPrimaryWalletNetworkChanged', chain, connector);
+    });
 };
 
 exports.useWalletEventListeners = useWalletEventListeners;

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

@@ -159,6 +159,9 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             }
         }
     });
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', ({ chain }, connector) => {
+        dynamicEvents.emit('nonPrimaryWalletNetworkChanged', chain, connector);
+    });
 };
 
 export { useWalletEventListeners };

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -320,7 +320,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
                             amountLeft: transaction.format(transaction.fee.gas, {
                                 precision: 6,
                             }),
-                            currencySymbol: currency,
+                            currencySymbol: currency === null || currency === void 0 ? void 0 : currency.symbol,
                         }) })] }));
         }
         // Check for insufficient funds
@@ -329,7 +329,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             const amountLeft = transaction.format(missingFunds, { precision: 6 });
             return (jsxRuntime.jsxs(Alert.Alert, { icon: 'error', variant: 'error', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_funds', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.title', children: t('dyn_send_transaction.warning_message.insufficient_funds.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.description', children: t('dyn_send_transaction.warning_message.insufficient_funds.description', {
                             amountLeft,
-                            currencySymbol: currency,
+                            currencySymbol: currency === null || currency === void 0 ? void 0 : currency.symbol,
                         }) })] }));
         }
         // Finally, check for simulation failure
@@ -348,7 +348,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         isGasSponsored,
         hasInsufficientFunds,
         t,
-        currency,
+        currency === null || currency === void 0 ? void 0 : currency.symbol,
     ]);
     React.useEffect(() => {
         var _a, _b;

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -312,7 +312,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
                             amountLeft: transaction.format(transaction.fee.gas, {
                                 precision: 6,
                             }),
-                            currencySymbol: currency,
+                            currencySymbol: currency === null || currency === void 0 ? void 0 : currency.symbol,
                         }) })] }));
         }
         // Check for insufficient funds
@@ -321,7 +321,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             const amountLeft = transaction.format(missingFunds, { precision: 6 });
             return (jsxs(Alert, { icon: 'error', variant: 'error', contentDataTestId: 'warning_content', copykey: 'dyn_send_transaction.warning_message.insufficient_funds', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.title', children: t('dyn_send_transaction.warning_message.insufficient_funds.title') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.warning_message.insufficient_funds.description', children: t('dyn_send_transaction.warning_message.insufficient_funds.description', {
                             amountLeft,
-                            currencySymbol: currency,
+                            currencySymbol: currency === null || currency === void 0 ? void 0 : currency.symbol,
                         }) })] }));
         }
         // Finally, check for simulation failure
@@ -340,7 +340,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         isGasSponsored,
         hasInsufficientFunds,
         t,
-        currency,
+        currency === null || currency === void 0 ? void 0 : currency.symbol,
     ]);
     useEffect(() => {
         var _a, _b;

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

@@ -95,13 +95,13 @@ require('@dynamic-labs/ethereum-aa');
 const Balance = ({ wallet, network, className }) => {
     const { currency, isLoading: isLoadingCurrency } = useFetchCurrency.useFetchCurrency(wallet.connector, network);
     const { balance, isLoading: isLoadingBalance } = useFetchBalance.useFetchBalance({
-        chain: currency,
+        chain: currency === null || currency === void 0 ? void 0 : currency.symbol,
         network,
         wallet,
     });
     if (!balance)
         return null;
-    return (jsxRuntime.jsxs(Typography.Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-skeleton' })) : (helpers.roundBalance(balance)), ' ', !isLoadingCurrency && (jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency }))] }));
+    return (jsxRuntime.jsxs(Typography.Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-skeleton' })) : (helpers.roundBalance(balance)), ' ', !isLoadingCurrency && (jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency === null || currency === void 0 ? void 0 : currency.symbol }))] }));
 };
 
 exports.Balance = Balance;

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

@@ -91,13 +91,13 @@ import '@dynamic-labs/ethereum-aa';
 const Balance = ({ wallet, network, className }) => {
     const { currency, isLoading: isLoadingCurrency } = useFetchCurrency(wallet.connector, network);
     const { balance, isLoading: isLoadingBalance } = useFetchBalance({
-        chain: currency,
+        chain: currency === null || currency === void 0 ? void 0 : currency.symbol,
         network,
         wallet,
     });
     if (!balance)
         return null;
-    return (jsxs(Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsx(Skeleton, { className: 'balance-skeleton' })) : (roundBalance(balance)), ' ', !isLoadingCurrency && (jsx(Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency }))] }));
+    return (jsxs(Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsx(Skeleton, { className: 'balance-skeleton' })) : (roundBalance(balance)), ' ', !isLoadingCurrency && (jsx(Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency === null || currency === void 0 ? void 0 : currency.symbol }))] }));
 };
 
 export { Balance };

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs

@@ -90,14 +90,17 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const useFetchCurrency = (connector, network) => {
     const fetchChainCurrency = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!connector)
             return null;
         const chainId = yield connector.getNetwork();
         const chainInfo = walletConnectorCore.getChainInfoWithOverrides((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
         /* istanbul ignore else */
         if (!chainId) {
-            return chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol;
+            return {
+                name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+                symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+            };
         }
         const network = (() => {
             if (connector.connectedChain === 'STARK') {
@@ -111,10 +114,14 @@ const useFetchCurrency = (connector, network) => {
             }
         })();
         const result = (_b = connector[network]) === null || _b === void 0 ? void 0 : _b.find((element) => element.chainId === chainId);
-        return (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.symbol) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol;
+        return {
+            name: (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            symbol: (_f = (_e = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+        };
     });
     const { data: currency, isLoading } = usePromise.usePromise(fetchChainCurrency, {
         deps: [network],
+        initialData: null,
     });
     return { currency, isLoading };
 };

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.d.ts

@@ -1,5 +1,10 @@
 import { WalletConnector } from '../../../../..';
+type Currency = {
+    name: string | undefined;
+    symbol: string | undefined;
+};
 export declare const useFetchCurrency: (connector: WalletConnector | undefined, network?: number | string) => {
-    currency: any;
+    currency: Currency | null;
     isLoading: boolean;
 };
+export {};

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js

@@ -86,14 +86,17 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const useFetchCurrency = (connector, network) => {
     const fetchChainCurrency = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!connector)
             return null;
         const chainId = yield connector.getNetwork();
         const chainInfo = getChainInfoWithOverrides((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
         /* istanbul ignore else */
         if (!chainId) {
-            return chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol;
+            return {
+                name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+                symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+            };
         }
         const network = (() => {
             if (connector.connectedChain === 'STARK') {
@@ -107,10 +110,14 @@ const useFetchCurrency = (connector, network) => {
             }
         })();
         const result = (_b = connector[network]) === null || _b === void 0 ? void 0 : _b.find((element) => element.chainId === chainId);
-        return (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.symbol) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol;
+        return {
+            name: (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            symbol: (_f = (_e = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+        };
     });
     const { data: currency, isLoading } = usePromise(fetchChainCurrency, {
         deps: [network],
+        initialData: null,
     });
     return { currency, isLoading };
 };