@dynamic-labs/sdk-react-core 4.81.0 → 4.83.0

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

@@ -0,0 +1,193 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/iconic');
+var midnightShielded = require('../../../../shared/assets/midnight-shielded.cjs');
+var midnightUnshielded = require('../../../../shared/assets/midnight-unshielded.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/consts/index.cjs');
+require('../../../../events/dynamicEvents.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');
+require('@dynamic-labs-sdk/client/core');
+require('eventemitter3');
+require('@dynamic-labs-sdk/client');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/locale');
+require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../store/state/authMode/authMode.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+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/walletOptions/walletOptions.cjs');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('../../../../components/Alert/Alert.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');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../context/DynamicWidgetContext.cjs');
+require('../../../../utils/hooks/useGetMfaToken/useGetMfaToken.cjs');
+require('../../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+require('../../../../utils/hooks/useWalletBackup/types.cjs');
+require('../../../../utils/hooks/useWalletBackup/cloudProviders.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../context/OnrampContext/OnrampContext.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('../PasskeyCard/PasskeyCard.cjs');
+require('../../views/CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../../index.cjs');
+require('../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.cjs');
+require('../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.cjs');
+require('../../views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../../store/state/tokenBalances.cjs');
+require('../../../../store/state/multichainBalances.cjs');
+require('@dynamic-labs/store');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+
+const DUST_SEGMENTS = 20;
+const truncateToDecimals = (value, decimals) => {
+    const [whole, fractional] = value.split('.');
+    if (!fractional || decimals <= 0)
+        return whole;
+    const sliced = fractional.slice(0, decimals);
+    let end = sliced.length;
+    while (end > 0 && sliced[end - 1] === '0') {
+        end -= 1;
+    }
+    const trimmed = sliced.slice(0, end);
+    return trimmed.length > 0 ? `${whole}.${trimmed}` : whole;
+};
+const getDustFillCount = (balance, cap) => {
+    const b = parseFloat(balance);
+    const c = parseFloat(cap);
+    if (!c || isNaN(b) || isNaN(c))
+        return 0;
+    return Math.round(Math.min(b / c, 1) * DUST_SEGMENTS);
+};
+const TABS = [
+    {
+        copykey: 'dyn_active_wallet_info.midnight_shielded_balance',
+        id: 'shielded',
+    },
+    {
+        copykey: 'dyn_active_wallet_info.midnight_unshielded_balance',
+        id: 'unshielded',
+    },
+];
+const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
+    const { t } = reactI18next.useTranslation();
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const [activeTab, setActiveTab] = React.useState('shielded');
+    const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const enabled = Boolean(!isLoading && primaryWallet && walletConnectorCore.isMidnightConnector(primaryWallet.connector));
+    const { data: balances, isLoading: balancesLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet ||
+            !walletConnectorCore.isMidnightConnector(primaryWallet.connector) ||
+            !walletConnectorCore.isMidnightWallet(primaryWallet)) {
+            return undefined;
+        }
+        return primaryWallet.getFormattedBalances();
+    }), {
+        deps: [walletAddress, primaryWallet],
+        enabled,
+    });
+    const { dustBalance, shieldedBalance, unshieldedBalance } = balances !== null && balances !== void 0 ? balances : {};
+    if (isLoading || balancesLoading) {
+        return (jsxRuntime.jsx("div", { className: 'active-midnight-balance', children: jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
+    }
+    const dustFill = dustBalance
+        ? getDustFillCount(dustBalance.balance, dustBalance.cap)
+        : 0;
+    const dustBalanceDisplay = dustBalance
+        ? {
+            balance: truncateToDecimals(dustBalance.balance, 2),
+            cap: truncateToDecimals(dustBalance.cap, 2),
+        }
+        : undefined;
+    const activeBalance = activeTab === 'shielded' ? shieldedBalance : unshieldedBalance;
+    return (jsxRuntime.jsx("div", { className: 'active-midnight-balance', children: jsxRuntime.jsxs("div", { className: 'active-midnight-balance__card', children: [dustBalance && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust-header', children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust-title', children: [jsxRuntime.jsx("svg", { className: 'active-midnight-balance__dust-icon', width: '12', height: '12', viewBox: '0 0 24 24', children: jsxRuntime.jsx("path", { d: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' }) }), jsxRuntime.jsx("span", { className: 'active-midnight-balance__dust-label', "data-copykey": 'dyn_active_wallet_info.midnight_dust_generating', children: t('dyn_active_wallet_info.midnight_dust_generating') })] }), jsxRuntime.jsxs("span", { className: 'active-midnight-balance__dust-count', children: [dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.balance, "/", dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.cap] })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__dust-bar', children: Array.from({ length: DUST_SEGMENTS }, (_, i) => (jsxRuntime.jsx("div", { className: [
+                                            'active-midnight-balance__dust-segment',
+                                            i === 0 && 'active-midnight-balance__dust-segment--first',
+                                            i === DUST_SEGMENTS - 1 &&
+                                                'active-midnight-balance__dust-segment--last',
+                                            i < dustFill &&
+                                                'active-midnight-balance__dust-segment--filled',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ') }, i))) })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__divider' })] })), jsxRuntime.jsx("div", { className: 'active-midnight-balance__tab-bar', children: TABS.map(({ id, copykey }) => (jsxRuntime.jsx("button", { className: classNames.classNames('active-midnight-balance__tab', {
+                            'active-midnight-balance__tab--active': activeTab === id,
+                        }), "data-copykey": copykey, onClick: () => setActiveTab(id), children: t(copykey) }, id))) }), jsxRuntime.jsxs("div", { className: 'active-midnight-balance__pocket', children: [activeTab === 'shielded' ? (jsxRuntime.jsx(midnightShielded.ReactComponent, { className: 'active-midnight-balance__pocket-icon' })) : (jsxRuntime.jsx(midnightUnshielded.ReactComponent, { className: 'active-midnight-balance__pocket-icon' })), jsxRuntime.jsxs("span", { className: 'active-midnight-balance__amount', children: [activeBalance !== null && activeBalance !== void 0 ? activeBalance : '—', " NIGHT"] })] })] }) }));
+};
+
+exports.ActiveMidnightWalletBalance = ActiveMidnightWalletBalance;

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import './ActiveMidnightWalletBalance.scss';
+type Props = {
+    isLoading?: boolean;
+};
+export declare const ActiveMidnightWalletBalance: FC<Props>;
+export {};

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

@@ -0,0 +1,189 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isMidnightConnector, isMidnightWallet } from '@dynamic-labs/wallet-connector-core';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/iconic';
+import { ReactComponent as SvgMidnightShielded } from '../../../../shared/assets/midnight-shielded.js';
+import { ReactComponent as SvgMidnightUnshielded } from '../../../../shared/assets/midnight-unshielded.js';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../shared/consts/index.js';
+import '../../../../events/dynamicEvents.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 '@dynamic-labs-sdk/client/core';
+import 'eventemitter3';
+import '@dynamic-labs-sdk/client';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/locale';
+import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../store/state/authMode/authMode.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../../utils/functions/compareChains/compareChains.js';
+import '../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
+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/walletOptions/walletOptions.js';
+import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import '../../../../components/Alert/Alert.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 '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../context/DynamicWidgetContext.js';
+import '../../../../utils/hooks/useGetMfaToken/useGetMfaToken.js';
+import '../../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+import '../../../../utils/hooks/useWalletBackup/types.js';
+import '../../../../utils/hooks/useWalletBackup/cloudProviders.js';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../context/OnrampContext/OnrampContext.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 '../PasskeyCard/PasskeyCard.js';
+import '../../views/CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../../index.js';
+import '../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.js';
+import '../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
+import '../../views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../../store/state/tokenBalances.js';
+import '../../../../store/state/multichainBalances.js';
+import '@dynamic-labs/store';
+import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+
+const DUST_SEGMENTS = 20;
+const truncateToDecimals = (value, decimals) => {
+    const [whole, fractional] = value.split('.');
+    if (!fractional || decimals <= 0)
+        return whole;
+    const sliced = fractional.slice(0, decimals);
+    let end = sliced.length;
+    while (end > 0 && sliced[end - 1] === '0') {
+        end -= 1;
+    }
+    const trimmed = sliced.slice(0, end);
+    return trimmed.length > 0 ? `${whole}.${trimmed}` : whole;
+};
+const getDustFillCount = (balance, cap) => {
+    const b = parseFloat(balance);
+    const c = parseFloat(cap);
+    if (!c || isNaN(b) || isNaN(c))
+        return 0;
+    return Math.round(Math.min(b / c, 1) * DUST_SEGMENTS);
+};
+const TABS = [
+    {
+        copykey: 'dyn_active_wallet_info.midnight_shielded_balance',
+        id: 'shielded',
+    },
+    {
+        copykey: 'dyn_active_wallet_info.midnight_unshielded_balance',
+        id: 'unshielded',
+    },
+];
+const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
+    const { t } = useTranslation();
+    const { primaryWallet } = useInternalDynamicContext();
+    const [activeTab, setActiveTab] = useState('shielded');
+    const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const enabled = Boolean(!isLoading && primaryWallet && isMidnightConnector(primaryWallet.connector));
+    const { data: balances, isLoading: balancesLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet ||
+            !isMidnightConnector(primaryWallet.connector) ||
+            !isMidnightWallet(primaryWallet)) {
+            return undefined;
+        }
+        return primaryWallet.getFormattedBalances();
+    }), {
+        deps: [walletAddress, primaryWallet],
+        enabled,
+    });
+    const { dustBalance, shieldedBalance, unshieldedBalance } = balances !== null && balances !== void 0 ? balances : {};
+    if (isLoading || balancesLoading) {
+        return (jsx("div", { className: 'active-midnight-balance', children: jsx(Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
+    }
+    const dustFill = dustBalance
+        ? getDustFillCount(dustBalance.balance, dustBalance.cap)
+        : 0;
+    const dustBalanceDisplay = dustBalance
+        ? {
+            balance: truncateToDecimals(dustBalance.balance, 2),
+            cap: truncateToDecimals(dustBalance.cap, 2),
+        }
+        : undefined;
+    const activeBalance = activeTab === 'shielded' ? shieldedBalance : unshieldedBalance;
+    return (jsx("div", { className: 'active-midnight-balance', children: jsxs("div", { className: 'active-midnight-balance__card', children: [dustBalance && (jsxs(Fragment, { children: [jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxs("div", { className: 'active-midnight-balance__dust-header', children: [jsxs("div", { className: 'active-midnight-balance__dust-title', children: [jsx("svg", { className: 'active-midnight-balance__dust-icon', width: '12', height: '12', viewBox: '0 0 24 24', children: jsx("path", { d: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' }) }), jsx("span", { className: 'active-midnight-balance__dust-label', "data-copykey": 'dyn_active_wallet_info.midnight_dust_generating', children: t('dyn_active_wallet_info.midnight_dust_generating') })] }), jsxs("span", { className: 'active-midnight-balance__dust-count', children: [dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.balance, "/", dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.cap] })] }), jsx("div", { className: 'active-midnight-balance__dust-bar', children: Array.from({ length: DUST_SEGMENTS }, (_, i) => (jsx("div", { className: [
+                                            'active-midnight-balance__dust-segment',
+                                            i === 0 && 'active-midnight-balance__dust-segment--first',
+                                            i === DUST_SEGMENTS - 1 &&
+                                                'active-midnight-balance__dust-segment--last',
+                                            i < dustFill &&
+                                                'active-midnight-balance__dust-segment--filled',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ') }, i))) })] }), jsx("div", { className: 'active-midnight-balance__divider' })] })), jsx("div", { className: 'active-midnight-balance__tab-bar', children: TABS.map(({ id, copykey }) => (jsx("button", { className: classNames('active-midnight-balance__tab', {
+                            'active-midnight-balance__tab--active': activeTab === id,
+                        }), "data-copykey": copykey, onClick: () => setActiveTab(id), children: t(copykey) }, id))) }), jsxs("div", { className: 'active-midnight-balance__pocket', children: [activeTab === 'shielded' ? (jsx(SvgMidnightShielded, { className: 'active-midnight-balance__pocket-icon' })) : (jsx(SvgMidnightUnshielded, { className: 'active-midnight-balance__pocket-icon' })), jsxs("span", { className: 'active-midnight-balance__amount', children: [activeBalance !== null && activeBalance !== void 0 ? activeBalance : '—', " NIGHT"] })] })] }) }));
+};
+
+export { ActiveMidnightWalletBalance };

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

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

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

@@ -121,6 +121,8 @@ require('@dynamic-labs/store');
 require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 var useAleoShieldedBalances = require('../../../../utils/hooks/useAleoShieldedBalances/useAleoShieldedBalances.cjs');
+var useAleoAutoMergeRecords = require('../../../../utils/hooks/useAleoAutoMergeRecords/useAleoAutoMergeRecords.cjs');
+var useAleoAutoShieldSponsoredTokens = require('../../../../utils/hooks/useAleoAutoShieldSponsoredTokens/useAleoAutoShieldSponsoredTokens.cjs');
 var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
 /** Component to display token balances for the primary wallet */
@@ -178,6 +180,26 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         }
         return undefined;
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    // Auto-merge sponsored programs on wallet load. Reads owned records,
+    //  groups by program, and silently fires `joinRecords` per program with
+    //  ≥2 records when the Aleo Feemaster covers `join`. Programs that
+    //  Feemaster doesn't sponsor are skipped — the manual "Merge all
+    //  records" demo CTA still dispatches user-paid for those.
+    useAleoAutoMergeRecords.useAleoAutoMergeRecords();
+    // Auto-shield sponsored tokens on wallet load (and on each unshielded
+    //  balance refresh). Iterates the unshielded list and silently fires
+    //  `shieldToken` for tokens whose `transfer_public_to_private` is
+    //  Feemaster-sponsored. Unsponsored tokens stay on the manual Shield
+    //  Manually CTA, which prompts the user-paid confirmation modal.
+    const { isShielding: isAutoShielding } = useAleoAutoShieldSponsoredTokens.useAleoAutoShieldSponsoredTokens({
+        accountAddress: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        onShielded: React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            yield fetchAccountBalances(true);
+            yield refetchShielded();
+        }), [fetchAccountBalances, refetchShielded]),
+        shieldHandle: aleoShieldHandle,
+        unshieldedTokenBalances: unshieldedTokenBalances,
+    });
     // Token currently awaiting user-paid fee confirmation. Set when
     //  Shield Manually is clicked on a token Feemaster doesn't sponsor;
     //  cleared on Cancel or after the modal's Shield button dispatches.
@@ -393,7 +415,10 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                                             fontWeight: activeShieldTab === 'unshielded' ? 600 : 400,
                                             opacity: activeShieldTab === 'unshielded' ? 1 : 0.5,
                                             padding: 0,
-                                        }, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: "Unshielded" }) })] })), jsxRuntime.jsx(TokenBalanceList.TokenBalanceList, { tokenBalances: filteredTokenBalances, getSecondaryAction: getSecondaryAction })] })] }), jsxRuntime.jsx(Portal.Portal, { elementId: 'dynamic-shield-confirm', isShown: Boolean(pendingShieldToken), zIndex: index.authModalZIndex, withBackdrop: true, handleClose: () => setPendingShieldToken(null), children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsxs("div", { style: { padding: 24 }, children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', children: ["Shield ", (_d = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.balance) !== null && _d !== void 0 ? _d : '', ' ', (_e = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.symbol) !== null && _e !== void 0 ? _e : ''] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', style: { display: 'block', marginTop: 8 }, children: "This token doesn't support auto-shielding. A network fee is required to shield manually." }), jsxRuntime.jsxs("div", { style: {
+                                        }, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: "Unshielded" }) })] })), isAutoShielding && (jsxRuntime.jsx("div", { className: 'auto-shield-status', "data-testid": 'auto-shield-status', style: {
+                                    opacity: 0.7,
+                                    padding: '4px 16px 8px 16px',
+                                }, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: "Auto-shielding\u2026" }) })), jsxRuntime.jsx(TokenBalanceList.TokenBalanceList, { tokenBalances: filteredTokenBalances, getSecondaryAction: getSecondaryAction })] })] }), jsxRuntime.jsx(Portal.Portal, { elementId: 'dynamic-shield-confirm', isShown: Boolean(pendingShieldToken), zIndex: index.authModalZIndex, withBackdrop: true, handleClose: () => setPendingShieldToken(null), children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsxs("div", { style: { padding: 24 }, children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', children: ["Shield ", (_d = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.balance) !== null && _d !== void 0 ? _d : '', ' ', (_e = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.symbol) !== null && _e !== void 0 ? _e : ''] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', style: { display: 'block', marginTop: 8 }, children: "This token doesn't support auto-shielding. A network fee is required to shield manually." }), jsxRuntime.jsxs("div", { style: {
                                         display: 'flex',
                                         gap: 8,
                                         marginTop: 24,

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

@@ -117,6 +117,8 @@ import '@dynamic-labs/store';
 import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 import { useAleoShieldedBalances } from '../../../../utils/hooks/useAleoShieldedBalances/useAleoShieldedBalances.js';
+import { useAleoAutoMergeRecords } from '../../../../utils/hooks/useAleoAutoMergeRecords/useAleoAutoMergeRecords.js';
+import { useAleoAutoShieldSponsoredTokens } from '../../../../utils/hooks/useAleoAutoShieldSponsoredTokens/useAleoAutoShieldSponsoredTokens.js';
 import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
 /** Component to display token balances for the primary wallet */
@@ -174,6 +176,26 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         }
         return undefined;
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    // Auto-merge sponsored programs on wallet load. Reads owned records,
+    //  groups by program, and silently fires `joinRecords` per program with
+    //  ≥2 records when the Aleo Feemaster covers `join`. Programs that
+    //  Feemaster doesn't sponsor are skipped — the manual "Merge all
+    //  records" demo CTA still dispatches user-paid for those.
+    useAleoAutoMergeRecords();
+    // Auto-shield sponsored tokens on wallet load (and on each unshielded
+    //  balance refresh). Iterates the unshielded list and silently fires
+    //  `shieldToken` for tokens whose `transfer_public_to_private` is
+    //  Feemaster-sponsored. Unsponsored tokens stay on the manual Shield
+    //  Manually CTA, which prompts the user-paid confirmation modal.
+    const { isShielding: isAutoShielding } = useAleoAutoShieldSponsoredTokens({
+        accountAddress: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        onShielded: useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield fetchAccountBalances(true);
+            yield refetchShielded();
+        }), [fetchAccountBalances, refetchShielded]),
+        shieldHandle: aleoShieldHandle,
+        unshieldedTokenBalances: unshieldedTokenBalances,
+    });
     // Token currently awaiting user-paid fee confirmation. Set when
     //  Shield Manually is clicked on a token Feemaster doesn't sponsor;
     //  cleared on Cancel or after the modal's Shield button dispatches.
@@ -389,7 +411,10 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                                             fontWeight: activeShieldTab === 'unshielded' ? 600 : 400,
                                             opacity: activeShieldTab === 'unshielded' ? 1 : 0.5,
                                             padding: 0,
-                                        }, children: jsx(Typography, { variant: 'body_normal', children: "Unshielded" }) })] })), jsx(TokenBalanceList, { tokenBalances: filteredTokenBalances, getSecondaryAction: getSecondaryAction })] })] }), jsx(Portal, { elementId: 'dynamic-shield-confirm', isShown: Boolean(pendingShieldToken), zIndex: authModalZIndex, withBackdrop: true, handleClose: () => setPendingShieldToken(null), children: jsx(Modal, { children: jsx(ModalCard, { children: jsxs("div", { style: { padding: 24 }, children: [jsxs(Typography, { variant: 'title', weight: 'medium', color: 'primary', children: ["Shield ", (_d = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.balance) !== null && _d !== void 0 ? _d : '', ' ', (_e = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.symbol) !== null && _e !== void 0 ? _e : ''] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', style: { display: 'block', marginTop: 8 }, children: "This token doesn't support auto-shielding. A network fee is required to shield manually." }), jsxs("div", { style: {
+                                        }, children: jsx(Typography, { variant: 'body_normal', children: "Unshielded" }) })] })), isAutoShielding && (jsx("div", { className: 'auto-shield-status', "data-testid": 'auto-shield-status', style: {
+                                    opacity: 0.7,
+                                    padding: '4px 16px 8px 16px',
+                                }, children: jsx(Typography, { variant: 'body_small', children: "Auto-shielding\u2026" }) })), jsx(TokenBalanceList, { tokenBalances: filteredTokenBalances, getSecondaryAction: getSecondaryAction })] })] }), jsx(Portal, { elementId: 'dynamic-shield-confirm', isShown: Boolean(pendingShieldToken), zIndex: authModalZIndex, withBackdrop: true, handleClose: () => setPendingShieldToken(null), children: jsx(Modal, { children: jsx(ModalCard, { children: jsxs("div", { style: { padding: 24 }, children: [jsxs(Typography, { variant: 'title', weight: 'medium', color: 'primary', children: ["Shield ", (_d = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.balance) !== null && _d !== void 0 ? _d : '', ' ', (_e = pendingShieldToken === null || pendingShieldToken === void 0 ? void 0 : pendingShieldToken.symbol) !== null && _e !== void 0 ? _e : ''] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', style: { display: 'block', marginTop: 8 }, children: "This token doesn't support auto-shielding. A network fee is required to shield manually." }), jsxs("div", { style: {
                                         display: 'flex',
                                         gap: 8,
                                         marginTop: 24,