@dynamic-labs/sdk-react-core 4.90.0 → 4.91.0

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

@@ -1,9 +1,10 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { isMidnightConnector, isMidnightWallet } from '@dynamic-labs/wallet-connector-core';
+import { isMidnightConnector, isMidnightWallet, isDynamicWaasConnector } from '@dynamic-labs/wallet-connector-core';
+import { Button } from '../../../../components/Button/Button.js';
 import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
 import '../../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
@@ -22,6 +23,9 @@ import { classNames } from '../../../../utils/functions/classNames/classNames.js
 import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
 
 const DUST_SEGMENTS = 20;
+// Stable keys for the fixed-length decorative dust bar so the segments don't
+// rely on the array index as their React key.
+const DUST_SEGMENT_KEYS = Array.from({ length: DUST_SEGMENTS }, (_, i) => `dust-segment-${i}`);
 const truncateToDecimals = (value, decimals) => {
     const [whole, fractional] = value.split('.');
     if (!fractional || decimals <= 0)
@@ -57,6 +61,10 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
     const [activeTab, setActiveTab] = useState('shielded');
     const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const enabled = Boolean(!isLoading && primaryWallet && isMidnightConnector(primaryWallet.connector));
+    // Balance reads resolve on shielded+unshielded; dust finishes in the
+    // background. While dust is still syncing we re-fetch on an interval so the
+    // dust gauge fills in once it's ready (shielded/unshielded already final).
+    const [dustPollTick, setDustPollTick] = useState(0);
     const { data: balances, isLoading: balancesLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!primaryWallet ||
             !isMidnightConnector(primaryWallet.connector) ||
@@ -65,11 +73,31 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
         }
         return primaryWallet.getFormattedBalances();
     }), {
-        deps: [walletAddress, primaryWallet],
+        deps: [walletAddress, primaryWallet, dustPollTick],
         enabled,
     });
-    const { dustBalance, shieldedBalance, unshieldedBalance } = balances !== null && balances !== void 0 ? balances : {};
-    if (isLoading || balancesLoading) {
+    const { dustBalance, shieldedBalance, unshieldedBalance, dustSyncing } = balances !== null && balances !== void 0 ? balances : {};
+    useEffect(() => {
+        if (!dustSyncing)
+            return undefined;
+        const id = setInterval(() => setDustPollTick((tick) => tick + 1), 15000);
+        return () => clearInterval(id);
+    }, [dustSyncing]);
+    // `registerDust` is a WaaS-only connector method (external/injected Midnight
+    // wallets manage dust themselves). When the embedded wallet has no dust
+    // registered yet, we surface a "Register DUST" button instead of the gauge.
+    const isWaasWallet = Boolean(primaryWallet && isDynamicWaasConnector(primaryWallet.connector));
+    const handleRegisterDust = () => __awaiter(void 0, void 0, void 0, function* () {
+        const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (!(connector === null || connector === void 0 ? void 0 : connector.registerDust))
+            return;
+        yield connector.registerDust();
+        // Dust generation begins after registration; re-fetch so the gauge appears.
+        setDustPollTick((tick) => tick + 1);
+    });
+    // Only show the full skeleton on the very first load; background dust polls
+    // keep `balances` populated so the view never flashes back to a skeleton.
+    if ((isLoading || balancesLoading) && !balances) {
         return (jsx("div", { className: 'active-midnight-balance', children: jsx(Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
     }
     const dustFill = dustBalance
@@ -82,16 +110,31 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
         }
         : 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', {
+    // Dust section has three mutually exclusive states (syncing, generating with
+    // a balance, and the WaaS "register dust" prompt). Resolved via a helper to
+    // avoid nesting ternaries in the JSX below.
+    const renderDustSection = () => {
+        if (dustSyncing) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: 'active-midnight-balance__dust', children: jsx("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_syncing', children: t('dyn_active_wallet_info.midnight_dust_syncing') })] }) }) }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
+        }
+        if (dustBalance) {
+            return (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: DUST_SEGMENT_KEYS.map((segmentKey, 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(' ') }, segmentKey))) })] }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
+        }
+        if (isWaasWallet) {
+            return (jsxs(Fragment, { children: [jsxs("div", { className: 'active-midnight-balance__dust', children: [jsx("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') })] }) }), jsx(Button, { buttonPadding: 'small', buttonVariant: 'secondary', buttonClassName: 'active-midnight-balance__register-dust-button', onClick: handleRegisterDust, "data-copykey": 'dyn_active_wallet_info.midnight_register_dust', children: t('dyn_active_wallet_info.midnight_register_dust') })] }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
+        }
+        return null;
+    };
+    return (jsx("div", { className: 'active-midnight-balance', children: jsxs("div", { className: 'active-midnight-balance__card', children: [renderDustSection(), 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"] })] })] }) }));
 };

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

@@ -4,9 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactI18next = require('react-i18next');
 require('../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
-require('react');
+var copy = require('../../../../../shared/assets/copy.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../../../../_virtual/_tslib.cjs');
@@ -71,6 +72,7 @@ require('../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCard
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+var Icon = require('../../../../../components/Icon/Icon.cjs');
 var shortenWalletAddress = require('../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
@@ -95,6 +97,7 @@ require('../../../views/CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../../index.cjs');
 require('../../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+var CopyButton = require('../../../../../components/CopyButton/CopyButton.cjs');
 require('qrcode');
 require('../../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.cjs');
 require('../../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.cjs');
@@ -116,13 +119,48 @@ require('../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 
+/**
+ * Midnight wallet address types as string literals.
+ * These correspond to WalletAddressType enum values that will be added in the backend.
+ */
 const MIDNIGHT_ADDRESS_TYPE_UNSHIELDED = 'midnight_unshielded';
+const MIDNIGHT_ADDRESS_TYPE_DUST = 'midnight_dust';
+const MIDNIGHT_ADDRESS_TYPE_SHIELDED = 'midnight_shielded';
+/**
+ * Gets a Midnight address from the wallet's additional addresses by type.
+ * @param type - The address type to find
+ * @param wallet - The wallet containing additional addresses
+ * @returns The address string or undefined if not found
+ */
 const getMidnightAddressByType = (type, wallet) => { var _a, _b; return (_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.additionalAddresses) === null || _a === void 0 ? void 0 : _a.find((addr) => addr.type === type)) === null || _b === void 0 ? void 0 : _b.address; };
+/**
+ * Component for displaying Midnight wallet addresses.
+ * Midnight supports multiple address types:
+ * - Unshielded: For public/transparent transactions
+ * - Dust: For gas/fee management
+ * - Shielded: For private transfers (Phase 2)
+ */
 const ActiveMidnightWalletAddresses = ({ menuOption, wallet, }) => {
     var _a;
     const { t } = reactI18next.useTranslation();
     const unshieldedAddress = (_a = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_UNSHIELDED, wallet)) !== null && _a !== void 0 ? _a : wallet === null || wallet === void 0 ? void 0 : wallet.address;
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_unshielded_address', children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(unshieldedAddress) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }));
+    const dustAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_DUST, wallet);
+    const shieldedAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_SHIELDED, wallet);
+    // Collapse dust + shielded behind a toggle so the header shows only the
+    // primary (unshielded) address by default — the user reveals the rest on
+    // click, instead of all three being shown at once.
+    const [expanded, setExpanded] = React.useState(false);
+    const hasAdditionalAddresses = Boolean(dustAddress || shieldedAddress);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_unshielded_address', children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(unshieldedAddress) })] }), jsxRuntime.jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: '4px' }, children: [hasAdditionalAddresses && (jsxRuntime.jsx("button", { type: 'button', "aria-expanded": expanded, "aria-label": t('dyn_active_wallet_info.midnight_toggle_addresses'), onClick: () => setExpanded((prev) => !prev), style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    padding: 0,
+                                }, children: jsxRuntime.jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', style: {
+                                        transform: expanded ? 'rotate(180deg)' : undefined,
+                                        transition: 'transform 0.15s ease',
+                                    }, children: jsxRuntime.jsx("path", { d: 'M6 9l6 6 6-6' }) }) })), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] })] }), expanded && dustAddress && (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_dust_address', children: t('dyn_active_wallet_info.midnight_dust_address') }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(dustAddress) })] }), jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: dustAddress, children: jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', children: jsxRuntime.jsx(copy.ReactComponent, {}) }) })] })), expanded && shieldedAddress && (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_shielded_address', children: t('dyn_active_wallet_info.midnight_shielded_address') }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(shieldedAddress) })] }), jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: shieldedAddress, children: jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', children: jsxRuntime.jsx(copy.ReactComponent, {}) }) })] }))] }));
 };
 
 exports.ActiveMidnightWalletAddresses = ActiveMidnightWalletAddresses;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveMidnightWalletAddresses/ActiveMidnightWalletAddresses.d.ts

@@ -5,5 +5,12 @@ type Props = {
     menuOption: MenuOption[];
     wallet?: Wallet;
 };
+/**
+ * Component for displaying Midnight wallet addresses.
+ * Midnight supports multiple address types:
+ * - Unshielded: For public/transparent transactions
+ * - Dust: For gas/fee management
+ * - Shielded: For private transfers (Phase 2)
+ */
 export declare const ActiveMidnightWalletAddresses: ({ menuOption, wallet, }: Props) => JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import '../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
-import 'react';
+import { ReactComponent as SvgCopy } from '../../../../../shared/assets/copy.js';
 import '@dynamic-labs/iconic';
 import '../../../../../context/ViewContext/ViewContext.js';
 import '../../../../../../../_virtual/_tslib.js';
@@ -67,6 +68,7 @@ import '../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardT
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import { Icon } from '../../../../../components/Icon/Icon.js';
 import { shortenWalletAddress } from '../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../../context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
@@ -91,6 +93,7 @@ import '../../../views/CryptoComOnramp/CryptoComOnramp.js';
 import '../../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../../index.js';
 import '../../../helpers/convertExchangeKeyAndProviderEnum.js';
+import { CopyButton } from '../../../../../components/CopyButton/CopyButton.js';
 import 'qrcode';
 import '../../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.js';
 import '../../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
@@ -112,13 +115,48 @@ import '../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 
+/**
+ * Midnight wallet address types as string literals.
+ * These correspond to WalletAddressType enum values that will be added in the backend.
+ */
 const MIDNIGHT_ADDRESS_TYPE_UNSHIELDED = 'midnight_unshielded';
+const MIDNIGHT_ADDRESS_TYPE_DUST = 'midnight_dust';
+const MIDNIGHT_ADDRESS_TYPE_SHIELDED = 'midnight_shielded';
+/**
+ * Gets a Midnight address from the wallet's additional addresses by type.
+ * @param type - The address type to find
+ * @param wallet - The wallet containing additional addresses
+ * @returns The address string or undefined if not found
+ */
 const getMidnightAddressByType = (type, wallet) => { var _a, _b; return (_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.additionalAddresses) === null || _a === void 0 ? void 0 : _a.find((addr) => addr.type === type)) === null || _b === void 0 ? void 0 : _b.address; };
+/**
+ * Component for displaying Midnight wallet addresses.
+ * Midnight supports multiple address types:
+ * - Unshielded: For public/transparent transactions
+ * - Dust: For gas/fee management
+ * - Shielded: For private transfers (Phase 2)
+ */
 const ActiveMidnightWalletAddresses = ({ menuOption, wallet, }) => {
     var _a;
     const { t } = useTranslation();
     const unshieldedAddress = (_a = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_UNSHIELDED, wallet)) !== null && _a !== void 0 ? _a : wallet === null || wallet === void 0 ? void 0 : wallet.address;
-    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_unshielded_address', children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsx(Typography, { className: 'active-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress(unshieldedAddress) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }));
+    const dustAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_DUST, wallet);
+    const shieldedAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_SHIELDED, wallet);
+    // Collapse dust + shielded behind a toggle so the header shows only the
+    // primary (unshielded) address by default — the user reveals the rest on
+    // click, instead of all three being shown at once.
+    const [expanded, setExpanded] = useState(false);
+    const hasAdditionalAddresses = Boolean(dustAddress || shieldedAddress);
+    return (jsxs(Fragment, { children: [jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_unshielded_address', children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsx(Typography, { className: 'active-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress(unshieldedAddress) })] }), jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: '4px' }, children: [hasAdditionalAddresses && (jsx("button", { type: 'button', "aria-expanded": expanded, "aria-label": t('dyn_active_wallet_info.midnight_toggle_addresses'), onClick: () => setExpanded((prev) => !prev), style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    padding: 0,
+                                }, children: jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', style: {
+                                        transform: expanded ? 'rotate(180deg)' : undefined,
+                                        transition: 'transform 0.15s ease',
+                                    }, children: jsx("path", { d: 'M6 9l6 6 6-6' }) }) })), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] })] }), expanded && dustAddress && (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_dust_address', children: t('dyn_active_wallet_info.midnight_dust_address') }), jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'primary', children: shortenWalletAddress(dustAddress) })] }), jsx(CopyButton, { textToCopy: dustAddress, children: jsx(Icon, { size: 'xsmall', children: jsx(SvgCopy, {}) }) })] })), expanded && shieldedAddress && (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'secondary', copykey: 'dyn_active_wallet_info.midnight_shielded_address', children: t('dyn_active_wallet_info.midnight_shielded_address') }), jsx(Typography, { className: 'active-wallet-information__address', weight: 'regular', variant: 'body_small', color: 'primary', children: shortenWalletAddress(shieldedAddress) })] }), jsx(CopyButton, { textToCopy: shieldedAddress, children: jsx(Icon, { size: 'xsmall', children: jsx(SvgCopy, {}) }) })] }))] }));
 };
 
 export { ActiveMidnightWalletAddresses };

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

@@ -216,6 +216,8 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         if (isBitcoin && !isWaasWallet) {
             return (jsxRuntime.jsx(ActiveBitcoinWalletAddresses.ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
+        // Midnight wallets (WaaS and external/injected alike) expose multiple
+        // address types (Unshielded, Dust, Shielded) via additionalAddresses.
         if (isMidnight) {
             return (jsxRuntime.jsx(ActiveMidnightWalletAddresses.ActiveMidnightWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }

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

@@ -212,6 +212,8 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         if (isBitcoin && !isWaasWallet) {
             return (jsx(ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
+        // Midnight wallets (WaaS and external/injected alike) expose multiple
+        // address types (Unshielded, Dust, Shielded) via additionalAddresses.
         if (isMidnight) {
             return (jsx(ActiveMidnightWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }