@dynamic-labs/sdk-react-core 4.9.2-preview.0 → 4.9.3

package/src/lib/utils/hooks/useValidateSession/handleWalletInfoOutOfSync/handleWalletInfoOutOfSync.js

@@ -0,0 +1,33 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { getUser } from '../../../../store/state/user/user.js';
+import '@dynamic-labs/utils';
+import '../../../constants/values.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../store/state/projectSettings/projectSettings.js';
+import { getPrimaryWalletId } from '../../../../store/state/primaryWalletId/primaryWalletId.js';
+import { getConnectedWalletsInfo } from '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+
+/**
+ * Detects mismatch between wallet info.
+ * If there is primary wallet id, but no user or connected wallets info,
+ * it means it's in a bad state and we should log out.
+ */
+const handleWalletInfoOutOfSync = (_a) => __awaiter(void 0, [_a], void 0, function* ({ logout, }) {
+    const primaryWalletId = getPrimaryWalletId();
+    if (!primaryWalletId) {
+        return;
+    }
+    const user = getUser();
+    const connectedWallets = getConnectedWalletsInfo();
+    if (user || connectedWallets.length > 0) {
+        return;
+    }
+    yield logout('wallet info is out of sync', {
+        connectedWallets,
+        primaryWalletId,
+        user,
+    });
+});
+
+export { handleWalletInfoOutOfSync };

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

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

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

@@ -11,6 +11,7 @@ var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs'
 var projectSettings = require('../../../store/state/projectSettings/projectSettings.cjs');
 var handleStoreAndEnvironmentMismatch = require('./handleStoreAndEnvironmentMismatch/handleStoreAndEnvironmentMismatch.cjs');
 var handleUserDataOutOfSync = require('./handleUserDataOutOfSync/handleUserDataOutOfSync.cjs');
+var handleWalletInfoOutOfSync = require('./handleWalletInfoOutOfSync/handleWalletInfoOutOfSync.cjs');
 
 const useValidateSession = ({ environmentId, handleLogOut }) => {
     const didRunRef = React.useRef(false);
@@ -30,6 +31,7 @@ const useValidateSession = ({ environmentId, handleLogOut }) => {
         yield Promise.all([
             handleStoreAndEnvironmentMismatch.handleStoreAndEnvironmentMismatch(params),
             handleUserDataOutOfSync.handleUserDataOutOfSync(params),
+            handleWalletInfoOutOfSync.handleWalletInfoOutOfSync(params),
         ]);
         // Regardless of whether we logged out or not, session validation is now complete
         loadingAndLifecycle.setLoadingAndLifecycle({ sessionValidation: true });

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

@@ -7,6 +7,7 @@ import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicE
 import { useProjectSettings } from '../../../store/state/projectSettings/projectSettings.js';
 import { handleStoreAndEnvironmentMismatch } from './handleStoreAndEnvironmentMismatch/handleStoreAndEnvironmentMismatch.js';
 import { handleUserDataOutOfSync } from './handleUserDataOutOfSync/handleUserDataOutOfSync.js';
+import { handleWalletInfoOutOfSync } from './handleWalletInfoOutOfSync/handleWalletInfoOutOfSync.js';
 
 const useValidateSession = ({ environmentId, handleLogOut }) => {
     const didRunRef = useRef(false);
@@ -26,6 +27,7 @@ const useValidateSession = ({ environmentId, handleLogOut }) => {
         yield Promise.all([
             handleStoreAndEnvironmentMismatch(params),
             handleUserDataOutOfSync(params),
+            handleWalletInfoOutOfSync(params),
         ]);
         // Regardless of whether we logged out or not, session validation is now complete
         setLoadingAndLifecycle({ sessionValidation: true });

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -71,8 +71,8 @@ require('../../store/state/loadingAndLifecycle.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/walletOptions/walletOptions.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
-var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
+var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -67,8 +67,8 @@ import '../../store/state/loadingAndLifecycle.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/walletOptions/walletOptions.js';
 import { Typography } from '../../components/Typography/Typography.js';
-import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import '../../context/FooterAnimationContext/index.js';
+import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.cjs

@@ -113,7 +113,10 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         if (isInitialSetup) {
-            pushView('mfa-secure-device', { isInitialSetup, type: option.type });
+            pushView('mfa-secure-device', {
+                isInitialSetup: true,
+                type: option.type,
+            });
             return;
         }
         pushView('mfa-verification', {

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.js

@@ -109,7 +109,10 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         if (isInitialSetup) {
-            pushView('mfa-secure-device', { isInitialSetup, type: option.type });
+            pushView('mfa-secure-device', {
+                isInitialSetup: true,
+                type: option.type,
+            });
             return;
         }
         pushView('mfa-verification', {

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.cjs

@@ -117,13 +117,10 @@ const MfaSecureDeviceView = ({ type, isInitialSetup = false, }) => {
         });
     };
     const onHelpClick = ({ secret, uri }) => {
-        const onMfaSecureDeviceHelpBackClick = () => {
-            pushView('mfa-secure-device', { isInitialSetup, type });
-        };
         pushView('mfa-secure-device-help', {
             secret,
             uri,
-        }, { onBackClick: onMfaSecureDeviceHelpBackClick });
+        });
     };
     return (jsxRuntime.jsxs("div", { className: 'mfa-secure-device-view__body', "data-testid": 'mfa-secure-device-view', children: [jsxRuntime.jsx(Typography.Typography, { className: 'mfa-secure-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.secure_device_view.body') }), isLoading && (jsxRuntime.jsx(spinner.Spinner, { className: 'mfa-secure-device-view__loading-spinner' })), data && (jsxRuntime.jsxs("div", { className: 'mfa-secure-device-view__qrcode', children: [jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(passwordHero.ReactComponent, {}), value: data.uri, logoSize: 50 }), jsxRuntime.jsx("div", { className: 'button-container', children: jsxRuntime.jsx("button", { onClick: () => onHelpClick({ secret: data.secret, uri: data.uri }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', children: t('dyn_mfa.secure_device_view.helper.button') }) }) })] })), jsxRuntime.jsx(TypographyButton.TypographyButton, { className: 'mfa-secure-device-view__button', expanded: true, onClick: onContinue, children: t('dyn_mfa.secure_device_view.continue') }), jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-secure-device-view__logout-button', onClick: handleLogOut, copykey: 'dyn_mfa.choose_device_view.logout', children: t('dyn_mfa.secure_device_view.logout') })] }));
 };

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.js

@@ -113,13 +113,10 @@ const MfaSecureDeviceView = ({ type, isInitialSetup = false, }) => {
         });
     };
     const onHelpClick = ({ secret, uri }) => {
-        const onMfaSecureDeviceHelpBackClick = () => {
-            pushView('mfa-secure-device', { isInitialSetup, type });
-        };
         pushView('mfa-secure-device-help', {
             secret,
             uri,
-        }, { onBackClick: onMfaSecureDeviceHelpBackClick });
+        });
     };
     return (jsxs("div", { className: 'mfa-secure-device-view__body', "data-testid": 'mfa-secure-device-view', children: [jsx(Typography, { className: 'mfa-secure-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.secure_device_view.body') }), isLoading && (jsx(Spinner, { className: 'mfa-secure-device-view__loading-spinner' })), data && (jsxs("div", { className: 'mfa-secure-device-view__qrcode', children: [jsx(QRCode, { Icon: jsx(SvgPasswordHero, {}), value: data.uri, logoSize: 50 }), jsx("div", { className: 'button-container', children: jsx("button", { onClick: () => onHelpClick({ secret: data.secret, uri: data.uri }), children: jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', children: t('dyn_mfa.secure_device_view.helper.button') }) }) })] })), jsx(TypographyButton, { className: 'mfa-secure-device-view__button', expanded: true, onClick: onContinue, children: t('dyn_mfa.secure_device_view.continue') }), jsx(TextButton, { className: 'mfa-secure-device-view__logout-button', onClick: handleLogOut, copykey: 'dyn_mfa.choose_device_view.logout', children: t('dyn_mfa.secure_device_view.logout') })] }));
 };

package/src/lib/views/MfaVerificationView/MfaVerificationView.cjs

@@ -101,7 +101,7 @@ require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
     const { t } = reactI18next.useTranslation();
-    const { pushView } = ViewContext.useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = ViewContext.useViewContext();
     const { authDevice } = useMfa.useMfa();
     const [code, setCode] = React.useState('');
     const [error, setError] = React.useState();
@@ -123,7 +123,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
             const user$1 = user.getUser();
             if ((user$1 === null || user$1 === void 0 ? void 0 : user$1.mfaBackupCodeAcknowledgement) !==
                 sdkApiCore.MfaBackupCodeAcknowledgement.Complete) {
-                pushView('mfa-display-backup-codes');
+                clearStackAndPush('mfa-display-backup-codes');
             }
         }),
     });
@@ -134,14 +134,8 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const onSubmit = (code) => {
         setCode(code);
     };
-    const onClickBack = () => {
-        if (!isInitialSetup) {
-            pushView('mfa-choose-device', { isInitialSetup });
-            return;
-        }
-        pushView('mfa-secure-device', { isInitialSetup, type });
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    const onClickBack = canGoBack && showBackButton ? goBack : undefined;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 exports.MfaVerificationView = MfaVerificationView;

package/src/lib/views/MfaVerificationView/MfaVerificationView.js

@@ -97,7 +97,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
     const { t } = useTranslation();
-    const { pushView } = useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = useViewContext();
     const { authDevice } = useMfa();
     const [code, setCode] = useState('');
     const [error, setError] = useState();
@@ -119,7 +119,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
             const user = getUser();
             if ((user === null || user === void 0 ? void 0 : user.mfaBackupCodeAcknowledgement) !==
                 MfaBackupCodeAcknowledgement.Complete) {
-                pushView('mfa-display-backup-codes');
+                clearStackAndPush('mfa-display-backup-codes');
             }
         }),
     });
@@ -130,14 +130,8 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const onSubmit = (code) => {
         setCode(code);
     };
-    const onClickBack = () => {
-        if (!isInitialSetup) {
-            pushView('mfa-choose-device', { isInitialSetup });
-            return;
-        }
-        pushView('mfa-secure-device', { isInitialSetup, type });
-    };
-    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    const onClickBack = canGoBack && showBackButton ? goBack : undefined;
+    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 export { MfaVerificationView };

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -102,12 +102,14 @@ var SandboxIndicatorWrapper = require('../../../components/SandboxIndicatorWrapp
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn.useIsLoggedIn();
-    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    isRenderingEmbeddedAuthFlow.current = !hide;
+    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     // Keep isRenderingEmbeddedAuthFlow up to date
-    React.useEffect(() => () => {
-        isRenderingEmbeddedAuthFlow.current = false;
-    }, [isRenderingEmbeddedAuthFlow]);
+    React.useEffect(() => {
+        setIsRenderingEmbeddedAuthFlow(!hide);
+        return () => {
+            setIsRenderingEmbeddedAuthFlow(false);
+        };
+    }, [setIsRenderingEmbeddedAuthFlow, hide]);
     if (hide)
         return null;
     const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsxRuntime.jsx(RenderView.RenderView, {}) }));

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -98,12 +98,14 @@ import { SandboxIndicatorWrapper } from '../../../components/SandboxIndicatorWra
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn();
-    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
-    isRenderingEmbeddedAuthFlow.current = !hide;
+    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
     // Keep isRenderingEmbeddedAuthFlow up to date
-    useEffect(() => () => {
-        isRenderingEmbeddedAuthFlow.current = false;
-    }, [isRenderingEmbeddedAuthFlow]);
+    useEffect(() => {
+        setIsRenderingEmbeddedAuthFlow(!hide);
+        return () => {
+            setIsRenderingEmbeddedAuthFlow(false);
+        };
+    }, [setIsRenderingEmbeddedAuthFlow, hide]);
     if (hide)
         return null;
     const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsx(RenderView, {}) }));

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

@@ -0,0 +1,164 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+var chevronDown = require('../../../../shared/assets/chevron-down.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../../../_virtual/_tslib.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../store/state/nonce/nonce.cjs');
+var projectSettings = require('../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../store/state/user/user.cjs');
+require('../../../../locale/locale.cjs');
+require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+require('@dynamic-labs/types');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/loadingAndLifecycle.cjs');
+require('../../../../store/state/walletOptions/walletOptions.cjs');
+var AccordionItem = require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../components/Alert/Alert.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+var Balance = require('../Balance/Balance.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../context/DynamicWidgetContext.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../store/state/sendBalances.cjs');
+require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('../../views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../../../index.cjs');
+var useTokenBalances = require('../../../../utils/hooks/useTokenBalances/useTokenBalances.cjs');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+var isMultiAssetSupportedNetwork = require('../../../../utils/functions/isMultiAssetSupportedNetwork/isMultiAssetSupportedNetwork.cjs');
+var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
+
+/** Component to display token balances for the primary wallet */
+const ActiveWalletBalance = () => {
+    var _a;
+    const { t } = reactI18next.useTranslation();
+    /** Controls for the multi asset balance accordion */
+    const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
+    /** Controls for the shadow on scroll of the multi asset balance section */
+    const [hasShadow, setHasShadow] = React.useState(false);
+    const contentRef = React.useRef(null);
+    const { primaryWallet, network, authMode, showFiat, multiAsset } = useInternalDynamicContext.useInternalDynamicContext();
+    const projectSettings$1 = projectSettings.useProjectSettings();
+    const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, } = useTokenBalances.useTokenBalances({
+        chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
+        includeFiat: showFiat,
+        includeNativeBalance: true,
+    });
+    const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    const filteredTokenBalances = React.useMemo(() => {
+        const balances = (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [];
+        balances.sort((a, b) => ((b === null || b === void 0 ? void 0 : b.marketValue) || 0) - ((a === null || a === void 0 ? void 0 : a.marketValue) || 0));
+        return balances;
+    }, [tokenBalances]);
+    const totalValue = React.useMemo(() => filteredTokenBalances.reduce((acc, token) => acc + ((token === null || token === void 0 ? void 0 : token.marketValue) || 0), 0), [filteredTokenBalances]);
+    const enableMultiAsset = (authMode === 'connect-and-sign' ||
+        (authMode === 'connect-only' &&
+            ((_a = projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset))) &&
+        multiAsset;
+    const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork.isMultiAssetSupportedNetwork(filteredTokenBalances, primaryConnector, network);
+    const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
+    const showMultiAsset = !isTooManyRequests && isNetworkMultiAssetSupported && enableMultiAsset;
+    const currencyFormatter = new Intl.NumberFormat('en-US', {
+        currency: 'USD',
+        style: 'currency',
+    });
+    const handleScroll = () => {
+        if (contentRef.current) {
+            setHasShadow(contentRef.current.scrollTop > 0);
+        }
+    };
+    const primaryWalletNativeBalance = () => {
+        if (!primaryWallet || isLoadingTokenBalances) {
+            return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-container__skeleton' });
+        }
+        return showFiat ? (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_display', color: 'primary', children: totalValue === 0 || totalValue >= 0.01
+                ? currencyFormatter.format(parseFloat(totalValue.toFixed(2)))
+                : '<$0.01' })) : (jsxRuntime.jsx(Balance.Balance, { className: 'balance-header__balance', wallet: primaryWallet, network: network, variant: 'numbers_display' }));
+    };
+    const balanceHeaderTitle = () => (jsxRuntime.jsxs("div", { className: 'balance-header__title', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_normal', children: t('dyn_active_wallet_info.balance') }), jsxRuntime.jsx("div", { className: 'balance-header__balance', children: primaryWalletNativeBalance() })] }));
+    const toggleBalanceAccordion = React.useCallback(() => {
+        if (!isLoadingTokenBalances) {
+            setBalanceIsExpanded(!balanceIsExpanded);
+        }
+    }, [isLoadingTokenBalances, balanceIsExpanded]);
+    if (!showMultiAsset) {
+        return jsxRuntime.jsx("div", { className: 'balance-container', children: balanceHeaderTitle() });
+    }
+    return (jsxRuntime.jsx("div", { className: 'balance-container', children: jsxRuntime.jsxs("div", { className: 'multi-asset-balance-container', children: [jsxRuntime.jsx("div", { className: `${hasShadow ? 'shadow' : ''}`, children: jsxRuntime.jsxs("button", { onClick: toggleBalanceAccordion, className: 'balance-header', "data-testid": 'balance-header', children: [balanceHeaderTitle(), !isLoadingTokenBalances && (jsxRuntime.jsx("div", { className: balanceIsExpanded ? 'balance-header__chevron' : '', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }))] }) }), jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: balanceIsExpanded, className: `multi-asset-balance-container__accordion ${'multi-asset-balance-container__accordion' +
+                        (balanceIsExpanded ? '--expanded' : '--collapsed')}`, handleScroll: handleScroll, ref: contentRef, dataTestId: 'multi-asset-balance-accordion', children: jsxRuntime.jsx(TokenBalanceList.TokenBalanceList, { tokenBalances: filteredTokenBalances }) })] }) }));
+};
+
+exports.ActiveWalletBalance = ActiveWalletBalance;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/ActiveWalletBalance.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+/** Component to display token balances for the primary wallet */
+export declare const ActiveWalletBalance: () => JSX.Element;

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

@@ -0,0 +1,160 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgChevronDown } from '../../../../shared/assets/chevron-down.js';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '../../../../shared/consts/index.js';
+import '../../../../events/dynamicEvents.js';
+import '../../../../../../_virtual/_tslib.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../../store/state/nonce/nonce.js';
+import { useProjectSettings } from '../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../store/state/user/user.js';
+import '../../../../locale/locale.js';
+import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../../utils/functions/compareChains/compareChains.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
+import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../views/CollectUserDataView/useFields.js';
+import '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
+import '../../../../store/state/walletOptions/walletOptions.js';
+import { AccordionItem } from '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../../components/Alert/Alert.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
+import '../../../../components/IsBrowser/IsBrowser.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.js';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../../context/ConnectWithOtpContext/constants.js';
+import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import { Balance } from '../Balance/Balance.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../context/DynamicWidgetContext.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../store/state/sendBalances.js';
+import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import '../../views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../../../index.js';
+import { useTokenBalances } from '../../../../utils/hooks/useTokenBalances/useTokenBalances.js';
+import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import { isMultiAssetSupportedNetwork } from '../../../../utils/functions/isMultiAssetSupportedNetwork/isMultiAssetSupportedNetwork.js';
+import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
+
+/** Component to display token balances for the primary wallet */
+const ActiveWalletBalance = () => {
+    var _a;
+    const { t } = useTranslation();
+    /** Controls for the multi asset balance accordion */
+    const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
+    /** Controls for the shadow on scroll of the multi asset balance section */
+    const [hasShadow, setHasShadow] = useState(false);
+    const contentRef = useRef(null);
+    const { primaryWallet, network, authMode, showFiat, multiAsset } = useInternalDynamicContext();
+    const projectSettings = useProjectSettings();
+    const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, } = useTokenBalances({
+        chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
+        includeFiat: showFiat,
+        includeNativeBalance: true,
+    });
+    const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    const filteredTokenBalances = useMemo(() => {
+        const balances = (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [];
+        balances.sort((a, b) => ((b === null || b === void 0 ? void 0 : b.marketValue) || 0) - ((a === null || a === void 0 ? void 0 : a.marketValue) || 0));
+        return balances;
+    }, [tokenBalances]);
+    const totalValue = useMemo(() => filteredTokenBalances.reduce((acc, token) => acc + ((token === null || token === void 0 ? void 0 : token.marketValue) || 0), 0), [filteredTokenBalances]);
+    const enableMultiAsset = (authMode === 'connect-and-sign' ||
+        (authMode === 'connect-only' &&
+            ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset))) &&
+        multiAsset;
+    const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork(filteredTokenBalances, primaryConnector, network);
+    const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
+    const showMultiAsset = !isTooManyRequests && isNetworkMultiAssetSupported && enableMultiAsset;
+    const currencyFormatter = new Intl.NumberFormat('en-US', {
+        currency: 'USD',
+        style: 'currency',
+    });
+    const handleScroll = () => {
+        if (contentRef.current) {
+            setHasShadow(contentRef.current.scrollTop > 0);
+        }
+    };
+    const primaryWalletNativeBalance = () => {
+        if (!primaryWallet || isLoadingTokenBalances) {
+            return jsx(Skeleton, { className: 'balance-container__skeleton' });
+        }
+        return showFiat ? (jsx(Typography, { variant: 'numbers_display', color: 'primary', children: totalValue === 0 || totalValue >= 0.01
+                ? currencyFormatter.format(parseFloat(totalValue.toFixed(2)))
+                : '<$0.01' })) : (jsx(Balance, { className: 'balance-header__balance', wallet: primaryWallet, network: network, variant: 'numbers_display' }));
+    };
+    const balanceHeaderTitle = () => (jsxs("div", { className: 'balance-header__title', children: [jsx(Typography, { color: 'secondary', variant: 'body_normal', children: t('dyn_active_wallet_info.balance') }), jsx("div", { className: 'balance-header__balance', children: primaryWalletNativeBalance() })] }));
+    const toggleBalanceAccordion = useCallback(() => {
+        if (!isLoadingTokenBalances) {
+            setBalanceIsExpanded(!balanceIsExpanded);
+        }
+    }, [isLoadingTokenBalances, balanceIsExpanded]);
+    if (!showMultiAsset) {
+        return jsx("div", { className: 'balance-container', children: balanceHeaderTitle() });
+    }
+    return (jsx("div", { className: 'balance-container', children: jsxs("div", { className: 'multi-asset-balance-container', children: [jsx("div", { className: `${hasShadow ? 'shadow' : ''}`, children: jsxs("button", { onClick: toggleBalanceAccordion, className: 'balance-header', "data-testid": 'balance-header', children: [balanceHeaderTitle(), !isLoadingTokenBalances && (jsx("div", { className: balanceIsExpanded ? 'balance-header__chevron' : '', children: jsx(SvgChevronDown, {}) }))] }) }), jsx(AccordionItem, { isOpen: balanceIsExpanded, className: `multi-asset-balance-container__accordion ${'multi-asset-balance-container__accordion' +
+                        (balanceIsExpanded ? '--expanded' : '--collapsed')}`, handleScroll: handleScroll, ref: contentRef, dataTestId: 'multi-asset-balance-accordion', children: jsx(TokenBalanceList, { tokenBalances: filteredTokenBalances }) })] }) }));
+};
+
+export { ActiveWalletBalance };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/index.d.ts

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