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

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

@@ -15,13 +15,13 @@ var check = require('../../../../shared/assets/check.cjs');
 var chevronDown = require('../../../../shared/assets/chevron-down.cjs');
 var reloadIcon = require('../../../../shared/assets/reload-icon.cjs');
 require('../../../../context/ViewContext/ViewContext.cjs');
-require('../../../../shared/logger.cjs');
+var logger = 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');
+var index = require('../../../../shared/consts/index.cjs');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
@@ -63,6 +63,7 @@ require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs')
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 var AccordionItem = require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -72,13 +73,15 @@ require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/OverlayCard/OverlayCard.cjs');
+var Modal = require('../../../../components/Modal/Modal.cjs');
+var ModalCard = require('../../../../components/ModalCard/ModalCard.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');
+var Portal = require('../../../../components/Portal/Portal.cjs');
 require('qrcode');
 require('formik');
 require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
@@ -117,11 +120,12 @@ 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');
+var useAleoShieldedBalances = require('../../../../utils/hooks/useAleoShieldedBalances/useAleoShieldedBalances.cjs');
 var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
 /** Component to display token balances for the primary wallet */
 const ActiveWalletBalance = ({ isLoading = false, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { t } = reactI18next.useTranslation();
     /** Controls for the multi asset balance accordion */
     const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
@@ -137,11 +141,132 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     const authMode$1 = authMode.useAuthMode();
     const projectSettings = useProjectSettings.useProjectSettings();
     const { data: testnet } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () { return Boolean(yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isTestnet())); }), { deps: [network], initialData: false });
-    const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances.useTokenBalances({
+    const { isLoading: isLoadingTokenBalances, tokenBalances: unshieldedTokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances.useTokenBalances({
         chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
         includeFiat: showFiat || !hasNativeToken,
         includeNativeBalance: true,
     });
+    const { tokenBalances: shieldedTokenBalances, isLoading: isLoadingShielded, refetch: refetchShielded, supportsShielded, } = useAleoShieldedBalances.useAleoShieldedBalances();
+    /**
+     * Tab state for chains that have a shielded/unshielded split. Defaults to
+     * shielded so Aleo wallets land on their primary balance type. Other
+     * chains render unchanged: when `supportsShielded` is false, the
+     * `tokenBalances` selector below short-circuits to unshielded
+     * regardless of this state, so the default has no visible effect for
+     * non-Aleo wallets. Only Aleo wallets see the toggle (gated by
+     * `supportsShielded`); they should land on Shielded since that's the
+     * privacy-first default for Aleo.
+     */
+    const [activeShieldTab, setActiveShieldTab] = React.useState('shielded');
+    /**
+     * Address of the token currently being shielded (during a click → broadcast
+     * cycle on the Unshielded tab's "Shield Manually" CTA). Used to flip that
+     * row's button to a `Working…` disabled state. Single-flight: one shield in
+     * flight at a time across the entire list — the form-level UX would get
+     * confusing otherwise (user-paid fees + multiple in-flight DPS proves).
+     */
+    const [shieldingAddress, setShieldingAddress] = React.useState(undefined);
+    // Duck-typed handle to the Aleo connector's shield helpers — only present
+    //  on `DynamicWaasAleoConnector`. We deliberately avoid an `instanceof`
+    //  check so this file doesn't pull a hard dependency on the Aleo package.
+    const aleoShieldHandle = React.useMemo(() => {
+        const c = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (c &&
+            typeof c.canShieldToken === 'function' &&
+            typeof c.shieldToken === 'function') {
+            return c;
+        }
+        return undefined;
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    // 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.
+    const [pendingShieldToken, setPendingShieldToken] = React.useState(null);
+    const handleShieldToken = React.useCallback((token) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _f;
+        if (!aleoShieldHandle || shieldingAddress)
+            return;
+        // `rawBalance` is the atomic-units count redcoast surfaces (number).
+        // Convert to bigint via Math.round to absorb any float drift from a
+        // decimal-shifted display value. <=0 entries get filtered out before
+        // the CTA renders, but the guard here is a safety net.
+        const atomic = BigInt(Math.round((_f = token.rawBalance) !== null && _f !== void 0 ? _f : 0));
+        if (atomic <= BigInt(0))
+            return;
+        setShieldingAddress(token.address);
+        try {
+            yield aleoShieldHandle.shieldToken({
+                amount: atomic,
+                isNative: token.isNative,
+                tokenAddress: token.address,
+            });
+            // Refresh the unshielded list so the just-shielded balance drops to
+            // 0 in the redcoast feed. The shielded side will pick the new
+            // record up on its own polling once the RecordScanner indexes.
+            yield fetchAccountBalances(true);
+            yield refetchShielded();
+        }
+        catch (err) {
+            logger.logger.debug('[ActiveWalletBalance] shieldToken failed', err);
+        }
+        finally {
+            setShieldingAddress(undefined);
+        }
+    }), [aleoShieldHandle, fetchAccountBalances, refetchShielded, shieldingAddress]);
+    const getSecondaryAction = React.useCallback((token) => {
+        // Only on the Unshielded tab, only when the connector exposes shield
+        // helpers, only for tokens registered as shieldable, only for tokens
+        // with a non-zero unshielded balance.
+        if (activeShieldTab !== 'unshielded')
+            return undefined;
+        if (!aleoShieldHandle)
+            return undefined;
+        if (!aleoShieldHandle.canShieldToken({
+            address: token.address,
+            isNative: token.isNative,
+        }))
+            return undefined;
+        if (!token.rawBalance || token.rawBalance <= 0)
+            return undefined;
+        return {
+            dataTestId: `shield-manually-${token.symbol}`,
+            isLoading: shieldingAddress === token.address,
+            label: 'Shield Manually',
+            onClick: () => {
+                // Pre-check Feemaster sponsorship — if covered, dispatch the
+                //  shield silently (current behaviour). If not covered (e.g.
+                //  policy gap, quota exhausted, lookup error), open a user-paid
+                //  confirmation modal so the user knows they'll pay an ALEO
+                //  network fee before we sign anything. The connector resolves
+                //  the registry token's programId internally.
+                (() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    var _a;
+                    const sponsored = yield ((_a = aleoShieldHandle.isShieldSponsored) === null || _a === void 0 ? void 0 : _a.call(aleoShieldHandle, {
+                        address: token.address,
+                        isNative: token.isNative,
+                    }));
+                    if (sponsored) {
+                        handleShieldToken(token).catch(() => {
+                            /* error surfaced via state inside handleShieldToken */
+                        });
+                    }
+                    else {
+                        setPendingShieldToken(token);
+                    }
+                }))().catch(() => {
+                    /* error surfaced via state inside the callback */
+                });
+            },
+        };
+    }, [activeShieldTab, aleoShieldHandle, handleShieldToken, shieldingAddress]);
+    const tokenBalances = React.useMemo(() => supportsShielded && activeShieldTab === 'shielded'
+        ? shieldedTokenBalances
+        : unshieldedTokenBalances, [
+        activeShieldTab,
+        shieldedTokenBalances,
+        supportsShielded,
+        unshieldedTokenBalances,
+    ]);
     const filteredTokenBalances = React.useMemo(() => (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [], [tokenBalances]);
     const totalValue = React.useMemo(() => filteredTokenBalances.reduce((acc, token) => acc + ((token === null || token === void 0 ? void 0 : token.marketValue) || 0), 0), [filteredTokenBalances]);
     const enableMultiAsset = React.useMemo(() => {
@@ -183,7 +308,12 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         setIsRefreshing(true);
         setIsSuccess(false);
         try {
-            yield fetchAccountBalances(true);
+            if (supportsShielded && activeShieldTab === 'shielded') {
+                yield refetchShielded();
+            }
+            else {
+                yield fetchAccountBalances(true);
+            }
             setIsRefreshing(false);
             setIsSuccess(true);
             successTimeoutRef.current = setTimeout(() => {
@@ -197,9 +327,19 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                 refreshTimeoutRef.current = null;
             }, 1000);
         }
-    }), [isRefreshing, isSuccess, fetchAccountBalances]);
+    }), [
+        isRefreshing,
+        isSuccess,
+        fetchAccountBalances,
+        refetchShielded,
+        supportsShielded,
+        activeShieldTab,
+    ]);
     const primaryWalletNativeBalance = () => {
-        if (!primaryWallet || isLoadingTokenBalances || isLoading) {
+        if (!primaryWallet ||
+            isLoadingTokenBalances ||
+            isLoading ||
+            (supportsShielded && activeShieldTab === 'shielded' && isLoadingShielded)) {
             return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-container__skeleton' });
         }
         // Chain has no native token - show aggregated fiat token values
@@ -212,7 +352,11 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                 ? 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: [isLoadingTokenBalances || isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-header__title-skeleton' })) : (jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_normal', copykey: 'dyn_active_wallet_info.balance', children: t('dyn_active_wallet_info.balance') })), jsxRuntime.jsxs("div", { className: 'balance-header__balance', children: [primaryWalletNativeBalance(), isSuccess ? (jsxRuntime.jsx("div", { className: 'balance-header__success-icon', children: jsxRuntime.jsx(check.ReactComponent, { "data-testid": 'success-icon' }) })) : (jsxRuntime.jsx(reloadIcon.ReactComponent, { "data-testid": 'refresh-balances', className: `balance-header__refresh-icon ${isRefreshing ? 'balance-header__refresh-icon--spinning' : ''}`, onClick: handleRefresh, style: {
+    const balanceHeaderTitle = () => (jsxRuntime.jsxs("div", { className: 'balance-header__title', children: [isLoadingTokenBalances ||
+                isLoading ||
+                (supportsShielded &&
+                    activeShieldTab === 'shielded' &&
+                    isLoadingShielded) ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-header__title-skeleton' })) : (jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_normal', copykey: 'dyn_active_wallet_info.balance', children: t('dyn_active_wallet_info.balance') })), jsxRuntime.jsxs("div", { className: 'balance-header__balance', children: [primaryWalletNativeBalance(), isSuccess ? (jsxRuntime.jsx("div", { className: 'balance-header__success-icon', children: jsxRuntime.jsx(check.ReactComponent, { "data-testid": 'success-icon' }) })) : (jsxRuntime.jsx(reloadIcon.ReactComponent, { "data-testid": 'refresh-balances', className: `balance-header__refresh-icon ${isRefreshing ? 'balance-header__refresh-icon--spinning' : ''}`, onClick: handleRefresh, style: {
                             cursor: isRefreshing ? 'not-allowed' : 'pointer',
                             opacity: isRefreshing ? 0.5 : 1,
                         }, title: 'Refresh balances' }))] })] }));
@@ -224,8 +368,44 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     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 }) })] }) }));
+    return (jsxRuntime.jsxs("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.jsxs(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: [supportsShielded && (jsxRuntime.jsxs("div", { className: 'shield-tabs', "data-testid": 'shield-tabs', role: 'tablist', style: {
+                                    display: 'flex',
+                                    gap: 16,
+                                    padding: '12px 16px 8px 16px',
+                                }, children: [jsxRuntime.jsx("button", { type: 'button', role: 'tab', "aria-selected": activeShieldTab === 'shielded', onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveShieldTab('shielded');
+                                        }, style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            fontWeight: activeShieldTab === 'shielded' ? 600 : 400,
+                                            opacity: activeShieldTab === 'shielded' ? 1 : 0.5,
+                                            padding: 0,
+                                        }, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: "Shielded" }) }), jsxRuntime.jsx("button", { type: 'button', role: 'tab', "aria-selected": activeShieldTab === 'unshielded', onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveShieldTab('unshielded');
+                                        }, style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            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: {
+                                        display: 'flex',
+                                        gap: 8,
+                                        marginTop: 24,
+                                    }, children: [jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', expanded: true, onClick: () => setPendingShieldToken(null), dataTestId: 'shield-confirm-modal-cancel', children: "Cancel" }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', expanded: true, onClick: () => {
+                                                const target = pendingShieldToken;
+                                                setPendingShieldToken(null);
+                                                if (target) {
+                                                    handleShieldToken(target).catch(() => {
+                                                        /* error surfaced via state inside handleShieldToken */
+                                                    });
+                                                }
+                                            }, dataTestId: 'shield-confirm-modal-confirm', children: "Shield" })] })] }) }) }) })] }));
 };
 
 exports.ActiveWalletBalance = ActiveWalletBalance;

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

@@ -11,13 +11,13 @@ import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
 import { ReactComponent as SvgChevronDown } from '../../../../shared/assets/chevron-down.js';
 import { ReactComponent as SvgReloadIcon } from '../../../../shared/assets/reload-icon.js';
 import '../../../../context/ViewContext/ViewContext.js';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../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 { authModalZIndex } from '../../../../shared/consts/index.js';
 import '../../../../events/dynamicEvents.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
@@ -59,6 +59,7 @@ import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import { AccordionItem } from '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/Alert/Alert.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -68,13 +69,15 @@ import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/OverlayCard/OverlayCard.js';
+import { Modal } from '../../../../components/Modal/Modal.js';
+import { ModalCard } from '../../../../components/ModalCard/ModalCard.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 { Portal } from '../../../../components/Portal/Portal.js';
 import 'qrcode';
 import 'formik';
 import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
@@ -113,11 +116,12 @@ 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';
+import { useAleoShieldedBalances } from '../../../../utils/hooks/useAleoShieldedBalances/useAleoShieldedBalances.js';
 import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
 /** Component to display token balances for the primary wallet */
 const ActiveWalletBalance = ({ isLoading = false, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { t } = useTranslation();
     /** Controls for the multi asset balance accordion */
     const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
@@ -133,11 +137,132 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     const authMode = useAuthMode();
     const projectSettings = useProjectSettings();
     const { data: testnet } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () { return Boolean(yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isTestnet())); }), { deps: [network], initialData: false });
-    const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances({
+    const { isLoading: isLoadingTokenBalances, tokenBalances: unshieldedTokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances({
         chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
         includeFiat: showFiat || !hasNativeToken,
         includeNativeBalance: true,
     });
+    const { tokenBalances: shieldedTokenBalances, isLoading: isLoadingShielded, refetch: refetchShielded, supportsShielded, } = useAleoShieldedBalances();
+    /**
+     * Tab state for chains that have a shielded/unshielded split. Defaults to
+     * shielded so Aleo wallets land on their primary balance type. Other
+     * chains render unchanged: when `supportsShielded` is false, the
+     * `tokenBalances` selector below short-circuits to unshielded
+     * regardless of this state, so the default has no visible effect for
+     * non-Aleo wallets. Only Aleo wallets see the toggle (gated by
+     * `supportsShielded`); they should land on Shielded since that's the
+     * privacy-first default for Aleo.
+     */
+    const [activeShieldTab, setActiveShieldTab] = useState('shielded');
+    /**
+     * Address of the token currently being shielded (during a click → broadcast
+     * cycle on the Unshielded tab's "Shield Manually" CTA). Used to flip that
+     * row's button to a `Working…` disabled state. Single-flight: one shield in
+     * flight at a time across the entire list — the form-level UX would get
+     * confusing otherwise (user-paid fees + multiple in-flight DPS proves).
+     */
+    const [shieldingAddress, setShieldingAddress] = useState(undefined);
+    // Duck-typed handle to the Aleo connector's shield helpers — only present
+    //  on `DynamicWaasAleoConnector`. We deliberately avoid an `instanceof`
+    //  check so this file doesn't pull a hard dependency on the Aleo package.
+    const aleoShieldHandle = useMemo(() => {
+        const c = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (c &&
+            typeof c.canShieldToken === 'function' &&
+            typeof c.shieldToken === 'function') {
+            return c;
+        }
+        return undefined;
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    // 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.
+    const [pendingShieldToken, setPendingShieldToken] = useState(null);
+    const handleShieldToken = useCallback((token) => __awaiter(void 0, void 0, void 0, function* () {
+        var _f;
+        if (!aleoShieldHandle || shieldingAddress)
+            return;
+        // `rawBalance` is the atomic-units count redcoast surfaces (number).
+        // Convert to bigint via Math.round to absorb any float drift from a
+        // decimal-shifted display value. <=0 entries get filtered out before
+        // the CTA renders, but the guard here is a safety net.
+        const atomic = BigInt(Math.round((_f = token.rawBalance) !== null && _f !== void 0 ? _f : 0));
+        if (atomic <= BigInt(0))
+            return;
+        setShieldingAddress(token.address);
+        try {
+            yield aleoShieldHandle.shieldToken({
+                amount: atomic,
+                isNative: token.isNative,
+                tokenAddress: token.address,
+            });
+            // Refresh the unshielded list so the just-shielded balance drops to
+            // 0 in the redcoast feed. The shielded side will pick the new
+            // record up on its own polling once the RecordScanner indexes.
+            yield fetchAccountBalances(true);
+            yield refetchShielded();
+        }
+        catch (err) {
+            logger.debug('[ActiveWalletBalance] shieldToken failed', err);
+        }
+        finally {
+            setShieldingAddress(undefined);
+        }
+    }), [aleoShieldHandle, fetchAccountBalances, refetchShielded, shieldingAddress]);
+    const getSecondaryAction = useCallback((token) => {
+        // Only on the Unshielded tab, only when the connector exposes shield
+        // helpers, only for tokens registered as shieldable, only for tokens
+        // with a non-zero unshielded balance.
+        if (activeShieldTab !== 'unshielded')
+            return undefined;
+        if (!aleoShieldHandle)
+            return undefined;
+        if (!aleoShieldHandle.canShieldToken({
+            address: token.address,
+            isNative: token.isNative,
+        }))
+            return undefined;
+        if (!token.rawBalance || token.rawBalance <= 0)
+            return undefined;
+        return {
+            dataTestId: `shield-manually-${token.symbol}`,
+            isLoading: shieldingAddress === token.address,
+            label: 'Shield Manually',
+            onClick: () => {
+                // Pre-check Feemaster sponsorship — if covered, dispatch the
+                //  shield silently (current behaviour). If not covered (e.g.
+                //  policy gap, quota exhausted, lookup error), open a user-paid
+                //  confirmation modal so the user knows they'll pay an ALEO
+                //  network fee before we sign anything. The connector resolves
+                //  the registry token's programId internally.
+                (() => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a;
+                    const sponsored = yield ((_a = aleoShieldHandle.isShieldSponsored) === null || _a === void 0 ? void 0 : _a.call(aleoShieldHandle, {
+                        address: token.address,
+                        isNative: token.isNative,
+                    }));
+                    if (sponsored) {
+                        handleShieldToken(token).catch(() => {
+                            /* error surfaced via state inside handleShieldToken */
+                        });
+                    }
+                    else {
+                        setPendingShieldToken(token);
+                    }
+                }))().catch(() => {
+                    /* error surfaced via state inside the callback */
+                });
+            },
+        };
+    }, [activeShieldTab, aleoShieldHandle, handleShieldToken, shieldingAddress]);
+    const tokenBalances = useMemo(() => supportsShielded && activeShieldTab === 'shielded'
+        ? shieldedTokenBalances
+        : unshieldedTokenBalances, [
+        activeShieldTab,
+        shieldedTokenBalances,
+        supportsShielded,
+        unshieldedTokenBalances,
+    ]);
     const filteredTokenBalances = useMemo(() => (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [], [tokenBalances]);
     const totalValue = useMemo(() => filteredTokenBalances.reduce((acc, token) => acc + ((token === null || token === void 0 ? void 0 : token.marketValue) || 0), 0), [filteredTokenBalances]);
     const enableMultiAsset = useMemo(() => {
@@ -179,7 +304,12 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         setIsRefreshing(true);
         setIsSuccess(false);
         try {
-            yield fetchAccountBalances(true);
+            if (supportsShielded && activeShieldTab === 'shielded') {
+                yield refetchShielded();
+            }
+            else {
+                yield fetchAccountBalances(true);
+            }
             setIsRefreshing(false);
             setIsSuccess(true);
             successTimeoutRef.current = setTimeout(() => {
@@ -193,9 +323,19 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                 refreshTimeoutRef.current = null;
             }, 1000);
         }
-    }), [isRefreshing, isSuccess, fetchAccountBalances]);
+    }), [
+        isRefreshing,
+        isSuccess,
+        fetchAccountBalances,
+        refetchShielded,
+        supportsShielded,
+        activeShieldTab,
+    ]);
     const primaryWalletNativeBalance = () => {
-        if (!primaryWallet || isLoadingTokenBalances || isLoading) {
+        if (!primaryWallet ||
+            isLoadingTokenBalances ||
+            isLoading ||
+            (supportsShielded && activeShieldTab === 'shielded' && isLoadingShielded)) {
             return jsx(Skeleton, { className: 'balance-container__skeleton' });
         }
         // Chain has no native token - show aggregated fiat token values
@@ -208,7 +348,11 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
                 ? 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: [isLoadingTokenBalances || isLoading ? (jsx(Skeleton, { className: 'balance-header__title-skeleton' })) : (jsx(Typography, { color: 'secondary', variant: 'body_normal', copykey: 'dyn_active_wallet_info.balance', children: t('dyn_active_wallet_info.balance') })), jsxs("div", { className: 'balance-header__balance', children: [primaryWalletNativeBalance(), isSuccess ? (jsx("div", { className: 'balance-header__success-icon', children: jsx(SvgCheck, { "data-testid": 'success-icon' }) })) : (jsx(SvgReloadIcon, { "data-testid": 'refresh-balances', className: `balance-header__refresh-icon ${isRefreshing ? 'balance-header__refresh-icon--spinning' : ''}`, onClick: handleRefresh, style: {
+    const balanceHeaderTitle = () => (jsxs("div", { className: 'balance-header__title', children: [isLoadingTokenBalances ||
+                isLoading ||
+                (supportsShielded &&
+                    activeShieldTab === 'shielded' &&
+                    isLoadingShielded) ? (jsx(Skeleton, { className: 'balance-header__title-skeleton' })) : (jsx(Typography, { color: 'secondary', variant: 'body_normal', copykey: 'dyn_active_wallet_info.balance', children: t('dyn_active_wallet_info.balance') })), jsxs("div", { className: 'balance-header__balance', children: [primaryWalletNativeBalance(), isSuccess ? (jsx("div", { className: 'balance-header__success-icon', children: jsx(SvgCheck, { "data-testid": 'success-icon' }) })) : (jsx(SvgReloadIcon, { "data-testid": 'refresh-balances', className: `balance-header__refresh-icon ${isRefreshing ? 'balance-header__refresh-icon--spinning' : ''}`, onClick: handleRefresh, style: {
                             cursor: isRefreshing ? 'not-allowed' : 'pointer',
                             opacity: isRefreshing ? 0.5 : 1,
                         }, title: 'Refresh balances' }))] })] }));
@@ -220,8 +364,44 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     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 }) })] }) }));
+    return (jsxs("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, {}) }))] }) }), jsxs(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: [supportsShielded && (jsxs("div", { className: 'shield-tabs', "data-testid": 'shield-tabs', role: 'tablist', style: {
+                                    display: 'flex',
+                                    gap: 16,
+                                    padding: '12px 16px 8px 16px',
+                                }, children: [jsx("button", { type: 'button', role: 'tab', "aria-selected": activeShieldTab === 'shielded', onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveShieldTab('shielded');
+                                        }, style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            fontWeight: activeShieldTab === 'shielded' ? 600 : 400,
+                                            opacity: activeShieldTab === 'shielded' ? 1 : 0.5,
+                                            padding: 0,
+                                        }, children: jsx(Typography, { variant: 'body_normal', children: "Shielded" }) }), jsx("button", { type: 'button', role: 'tab', "aria-selected": activeShieldTab === 'unshielded', onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveShieldTab('unshielded');
+                                        }, style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            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: {
+                                        display: 'flex',
+                                        gap: 8,
+                                        marginTop: 24,
+                                    }, children: [jsx(Button, { buttonVariant: 'secondary', expanded: true, onClick: () => setPendingShieldToken(null), dataTestId: 'shield-confirm-modal-cancel', children: "Cancel" }), jsx(Button, { buttonVariant: 'primary', expanded: true, onClick: () => {
+                                                const target = pendingShieldToken;
+                                                setPendingShieldToken(null);
+                                                if (target) {
+                                                    handleShieldToken(target).catch(() => {
+                                                        /* error surfaced via state inside handleShieldToken */
+                                                    });
+                                                }
+                                            }, dataTestId: 'shield-confirm-modal-confirm', children: "Shield" })] })] }) }) }) })] }));
 };
 
 export { ActiveWalletBalance };

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

@@ -117,7 +117,8 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
     currency: 'USD',
     style: 'currency',
 });
-const TokenBalanceItem = ({ tokenBalance, }) => {
+const TokenBalanceItem = ({ tokenBalance, secondaryAction, }) => {
+    var _a;
     const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const formattedFiatValue = () => {
         var _a;
@@ -128,7 +129,9 @@ const TokenBalanceItem = ({ tokenBalance, }) => {
             ? currencyFormatter.format(parseFloat((_a = tokenBalance.marketValue) === null || _a === void 0 ? void 0 : _a.toFixed(2)))
             : '<$0.01';
     };
-    return (jsxRuntime.jsxs("div", { className: 'token-balance-item', children: [jsxRuntime.jsxs("div", { className: 'token-balance-item__name', children: [tokenBalance.logoURI ? (jsxRuntime.jsx(Image.Image, { src: tokenBalance.logoURI, alt: tokenBalance.symbol, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon' })) : (jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', className: 'token-balance-item__title', color: 'primary', children: tokenBalance.name }) })] }), jsxRuntime.jsxs("div", { className: 'flex', children: [showFiat ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'primary', style: { textAlign: 'right' }, children: formattedFiatValue() })) : null, jsxRuntime.jsx("div", { className: 'token-balance-item__value', children: jsxRuntime.jsxs("div", { className: 'token-balance-item__value__balance', "data-testid": 'token-balance-item-balance', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', style: { marginRight: '2px' }, children: helpers.roundBalance(String(tokenBalance.balance)) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__symbol', children: tokenBalance.symbol })] }) })] })] }, tokenBalance.address));
+    return (jsxRuntime.jsxs("div", { className: 'token-balance-item', children: [jsxRuntime.jsxs("div", { className: 'token-balance-item__row', children: [jsxRuntime.jsxs("div", { className: 'token-balance-item__name', children: [tokenBalance.logoURI ? (jsxRuntime.jsx(Image.Image, { src: tokenBalance.logoURI, alt: tokenBalance.symbol, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon' })) : (jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', className: 'token-balance-item__title', color: 'primary', children: tokenBalance.name }) })] }), jsxRuntime.jsxs("div", { className: 'flex', children: [showFiat ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'primary', style: { textAlign: 'right' }, children: formattedFiatValue() })) : null, jsxRuntime.jsx("div", { className: 'token-balance-item__value', children: jsxRuntime.jsxs("div", { className: 'token-balance-item__value__balance', "data-testid": 'token-balance-item-balance', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', style: { marginRight: '2px' }, children: helpers.roundBalance(String(tokenBalance.balance)) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__symbol', children: tokenBalance.symbol })] }) })] })] }), secondaryAction ? (jsxRuntime.jsx("button", { type: 'button', onClick: secondaryAction.onClick, disabled: secondaryAction.isLoading, className: 'token-balance-item__secondary-action', "data-testid": (_a = secondaryAction.dataTestId) !== null && _a !== void 0 ? _a : 'token-balance-item-secondary-action', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'token-balance-item__secondary-action__label', children: secondaryAction.isLoading
+                        ? 'Working…'
+                        : `${secondaryAction.label} ›` }) })) : null] }, tokenBalance.address));
 };
 
 exports.TokenBalanceItem = TokenBalanceItem;

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

@@ -1,5 +1,14 @@
 /// <reference types="react" />
 import { TokenBalance } from '@dynamic-labs/sdk-api-core';
-export declare const TokenBalanceItem: ({ tokenBalance, }: {
+export type TokenBalanceItemSecondaryAction = {
+    /** Right-aligned action label (e.g. "Shield Manually"). */
+    label: string;
+    onClick: () => void;
+    isLoading?: boolean;
+    /** Test id for the action button. */
+    dataTestId?: string;
+};
+export declare const TokenBalanceItem: ({ tokenBalance, secondaryAction, }: {
     tokenBalance: TokenBalance;
+    secondaryAction?: TokenBalanceItemSecondaryAction;
 }) => JSX.Element;