@dynamic-labs/sdk-react-core 4.84.1 → 4.85.0

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

@@ -1,9 +1,10 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { ChainEnum } from '@dynamic-labs/sdk-api-core';
 import '../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
 import { getAleoCuratedPrices } from '../../../data/api/aleo/getAleoCuratedPrices.js';
 import { getEnvironmentId } from '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 
@@ -279,14 +280,37 @@ const buildTokenBalances = (records, networkId, lookupCurated) => {
  *   - The connector doesn't expose `listOwnedRecords` (e.g. external Aleo wallet)
  *   - The user owns no records that match a known program/record pair
  */
-const useAleoShieldedBalances = () => {
+const useAleoShieldedBalances = (args = {}) => {
+    const { accountAddress, tokenAddresses, includeNativeBalance = true, includeFiat = true, chainName, networkId, } = args;
     const { primaryWallet, network } = useInternalDynamicContext();
+    const { userWallets } = useInternalUserWallets();
     const [tokenBalances, setTokenBalances] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState();
-    const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    // `accountAddress` is treated as an override of the primary wallet:
+    //  walk the user-wallets list looking for a matching address (case-
+    //  insensitive to be tolerant of how the address is formatted at the
+    //  call site — Aleo addresses are bech32 and casing-insensitive in
+    //  practice). When no `accountAddress` is provided, fall back to the
+    //  primary wallet to preserve the existing single-wallet semantics.
+    const targetWallet = useMemo(() => {
+        var _a;
+        if (!accountAddress)
+            return primaryWallet;
+        const normalized = accountAddress.toLowerCase();
+        return ((_a = userWallets.find((w) => { var _a; return ((_a = w.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === normalized; })) !== null && _a !== void 0 ? _a : undefined);
+    }, [accountAddress, primaryWallet, userWallets]);
+    const connector = targetWallet === null || targetWallet === void 0 ? void 0 : targetWallet.connector;
     const isAleo = (connector === null || connector === void 0 ? void 0 : connector.connectedChain) === ChainEnum.Aleo;
-    const supportsShielded = isAleo &&
+    // When a `chainName` override is passed, treat anything other than
+    //  `ChainEnum.Aleo` as "the caller explicitly asked for a non-Aleo
+    //  chain we don't support yet" and short-circuit. Today Aleo is the
+    //  only chain with a private-balance path, but customers should be
+    //  able to call the public hook with whatever `chainName` matches
+    //  their app's active chain and have it transparently no-op.
+    const chainNameSupported = chainName === undefined || chainName === ChainEnum.Aleo;
+    const supportsShielded = chainNameSupported &&
+        isAleo &&
         typeof (connector === null || connector === void 0 ? void 0 : connector.listOwnedRecords) === 'function';
     // Mirror the live connector into a ref so `fetchShielded` can read it
     //  without depending on the (often unstable) object reference. Some test
@@ -296,7 +320,36 @@ const useAleoShieldedBalances = () => {
     const connectorRef = useRef(connector);
     connectorRef.current = connector;
     const connectorKey = connector === null || connector === void 0 ? void 0 : connector.key;
-    const networkKey = network !== undefined && network !== null ? String(network) : undefined;
+    // When a `networkId` override is provided, use it instead of the
+    //  context's `network` value when resolving the Aleo network param.
+    //  Empty string falls back to undefined so `resolveAleoNetwork`
+    //  returns `aleoNetworkParam: undefined` and the prices fetch is
+    //  skipped (matching the behaviour when no network is known).
+    const effectiveNetwork = networkId !== null && networkId !== void 0 ? networkId : network;
+    const networkKey = effectiveNetwork !== undefined && effectiveNetwork !== null
+        ? String(effectiveNetwork)
+        : undefined;
+    // Normalise the address filter once per render into a stable
+    //  primitive key (sorted, comma-joined, lowercased) so the
+    //  `useCallback` dep below doesn't invalidate on every render when the
+    //  caller passes a fresh array literal each time (which is the typical
+    //  pattern in React function components). The matching Set is derived
+    //  from the same key to keep both memos in lockstep.
+    const tokenAddressFilterKey = useMemo(() => {
+        if (!tokenAddresses)
+            return undefined;
+        return [...tokenAddresses]
+            .map((a) => a.toLowerCase())
+            .sort((a, b) => a.localeCompare(b))
+            .join('|');
+    }, [tokenAddresses]);
+    const tokenAddressFilter = useMemo(() => {
+        if (tokenAddressFilterKey === undefined)
+            return undefined;
+        if (tokenAddressFilterKey === '')
+            return new Set();
+        return new Set(tokenAddressFilterKey.split('|'));
+    }, [tokenAddressFilterKey]);
     const fetchShielded = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         const liveConnector = connectorRef.current;
@@ -315,9 +368,15 @@ const useAleoShieldedBalances = () => {
             //  token row, leaving the widget with no price source. Prices are
             //  best-effort: a failure leaves balances unpriced rather than
             //  dropping the shielded list entirely.
+            //
+            //  When the caller opts out of fiat (`includeFiat: false`) we skip
+            //  the curated-prices fetch entirely — same semantic as
+            //  `useTokenBalances` honouring its own `includeFiat` flag. Logos
+            //  for matched tokens then fall through to the bundled defaults
+            //  (`ALEO_CREDITS_LOGO`, `UNKNOWN_TOKEN_LOGO`, spec overrides).
             const { safeNetworkId, aleoNetworkParam } = resolveAleoNetwork(networkKey);
             const environmentId = getEnvironmentId();
-            const shouldFetchPrices = Boolean(aleoNetworkParam && environmentId);
+            const shouldFetchPrices = Boolean(includeFiat && aleoNetworkParam && environmentId);
             const [result, priceList] = yield Promise.all([
                 liveConnector.listOwnedRecords(),
                 shouldFetchPrices && aleoNetworkParam
@@ -330,11 +389,16 @@ const useAleoShieldedBalances = () => {
             const records = (_a = result === null || result === void 0 ? void 0 : result.records) !== null && _a !== void 0 ? _a : [];
             const lookupCurated = buildCuratedTokenLookup(priceList);
             const balances = [];
-            const credits = buildCreditsBalance(records, safeNetworkId, lookupCurated);
-            if (credits)
-                balances.push(credits);
+            if (includeNativeBalance) {
+                const credits = buildCreditsBalance(records, safeNetworkId, lookupCurated);
+                if (credits)
+                    balances.push(credits);
+            }
             balances.push(...buildTokenBalances(records, safeNetworkId, lookupCurated));
-            setTokenBalances(balances);
+            const filtered = tokenAddressFilter
+                ? balances.filter((b) => { var _a; return tokenAddressFilter.has(((_a = b.address) !== null && _a !== void 0 ? _a : '').toLowerCase()); })
+                : balances;
+            setTokenBalances(filtered);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
@@ -344,7 +408,14 @@ const useAleoShieldedBalances = () => {
         finally {
             setIsLoading(false);
         }
-    }), [connectorKey, networkKey, supportsShielded]);
+    }), [
+        connectorKey,
+        includeFiat,
+        includeNativeBalance,
+        networkKey,
+        supportsShielded,
+        tokenAddressFilter,
+    ]);
     useEffect(() => {
         if (!supportsShielded) {
             setTokenBalances((prev) => (prev.length === 0 ? prev : []));

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

@@ -88,7 +88,7 @@ const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl,
 };
 const useDynamicWaas = () => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { setShowAuthFlow, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { addedWalletsIds, userWallets } = UserWalletsContext.useInternalUserWallets();
     const user = useUser.useUser();
     const apiBaseUrl = dynamicContextProps.useApiBaseUrl();
@@ -468,8 +468,8 @@ const useDynamicWaas = () => {
     });
     const upgradeToDynamicWaas = React.useCallback((_j) => _tslib.__awaiter(void 0, [_j], void 0, function* ({ privateKey, wallet, password, }) {
         isUpgrading.current = true;
-        if (!primaryWallet) {
-            throw new utils.DynamicError('Primary wallet not found');
+        if (!wallet) {
+            throw new utils.DynamicError('Wallet to upgrade was not provided');
         }
         const chainName = wallet.chain;
         const walletId = wallet.id;
@@ -514,7 +514,7 @@ const useDynamicWaas = () => {
             }
             throw new utils.DynamicError('Upgrade failed, please try again.');
         }
-    }), [environmentId, getWaasWalletConnector, primaryWallet, refresh]);
+    }), [environmentId, getWaasWalletConnector, refresh]);
     /**
      * Returns WaaS wallet instances from `userWallets` filtered by `key === 'dynamicwaas'`.
      *

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

@@ -84,7 +84,7 @@ const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl,
 };
 const useDynamicWaas = () => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { setShowAuthFlow, primaryWallet } = useInternalDynamicContext();
+    const { setShowAuthFlow } = useInternalDynamicContext();
     const { addedWalletsIds, userWallets } = useInternalUserWallets();
     const user = useUser();
     const apiBaseUrl = useApiBaseUrl();
@@ -464,8 +464,8 @@ const useDynamicWaas = () => {
     });
     const upgradeToDynamicWaas = useCallback((_j) => __awaiter(void 0, [_j], void 0, function* ({ privateKey, wallet, password, }) {
         isUpgrading.current = true;
-        if (!primaryWallet) {
-            throw new DynamicError('Primary wallet not found');
+        if (!wallet) {
+            throw new DynamicError('Wallet to upgrade was not provided');
         }
         const chainName = wallet.chain;
         const walletId = wallet.id;
@@ -510,7 +510,7 @@ const useDynamicWaas = () => {
             }
             throw new DynamicError('Upgrade failed, please try again.');
         }
-    }), [environmentId, getWaasWalletConnector, primaryWallet, refresh]);
+    }), [environmentId, getWaasWalletConnector, refresh]);
     /**
      * Returns WaaS wallet instances from `userWallets` filtered by `key === 'dynamicwaas'`.
      *

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

@@ -1,2 +1,2 @@
 export { usePrivateTokenBalances } from './usePrivateTokenBalances';
-export type { UsePrivateTokenBalancesReturn } from './usePrivateTokenBalances';
+export type { UsePrivateTokenBalancesArgs, UsePrivateTokenBalancesReturn, } from './usePrivateTokenBalances';

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

@@ -5,8 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var useAleoShieldedBalances = require('../useAleoShieldedBalances/useAleoShieldedBalances.cjs');
 
-const usePrivateTokenBalances = () => {
-    const { tokenBalances, isLoading, error, refetch, supportsShielded } = useAleoShieldedBalances.useAleoShieldedBalances();
+const usePrivateTokenBalances = (args = {}) => {
+    const { accountAddress, tokenAddresses, includeNativeBalance = false, includeFiat = false, chainName, networkId, } = args;
+    const { tokenBalances, isLoading, error, refetch, supportsShielded } = useAleoShieldedBalances.useAleoShieldedBalances({
+        accountAddress,
+        chainName,
+        includeFiat,
+        includeNativeBalance,
+        networkId,
+        tokenAddresses,
+    });
     return {
         error,
         isLoading,

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

@@ -1,4 +1,19 @@
-import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import { ChainEnum, TokenBalance } from '@dynamic-labs/sdk-api-core';
+/**
+ * Optional inputs that intentionally mirror the corresponding
+ *  `useTokenBalances` params so callers can move between the public
+ *  and private hooks with minimal call-site changes. Boolean defaults
+ *  match `useTokenBalances` (`includeNativeBalance: false`,
+ *  `includeFiat: false`) — opt in explicitly when you want either.
+ */
+export type UsePrivateTokenBalancesArgs = {
+    accountAddress?: string;
+    tokenAddresses?: string[];
+    includeNativeBalance?: boolean;
+    includeFiat?: boolean;
+    chainName?: ChainEnum;
+    networkId?: number;
+};
 export type UsePrivateTokenBalancesReturn = {
     tokenBalances: TokenBalance[];
     isLoading: boolean;
@@ -6,4 +21,4 @@ export type UsePrivateTokenBalancesReturn = {
     refetch: () => Promise<void>;
     supportsPrivateBalances: boolean;
 };
-export declare const usePrivateTokenBalances: () => UsePrivateTokenBalancesReturn;
+export declare const usePrivateTokenBalances: (args?: UsePrivateTokenBalancesArgs) => UsePrivateTokenBalancesReturn;

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

@@ -1,8 +1,16 @@
 'use client'
 import { useAleoShieldedBalances } from '../useAleoShieldedBalances/useAleoShieldedBalances.js';
 
-const usePrivateTokenBalances = () => {
-    const { tokenBalances, isLoading, error, refetch, supportsShielded } = useAleoShieldedBalances();
+const usePrivateTokenBalances = (args = {}) => {
+    const { accountAddress, tokenAddresses, includeNativeBalance = false, includeFiat = false, chainName, networkId, } = args;
+    const { tokenBalances, isLoading, error, refetch, supportsShielded } = useAleoShieldedBalances({
+        accountAddress,
+        chainName,
+        includeFiat,
+        includeNativeBalance,
+        networkId,
+        tokenAddresses,
+    });
     return {
         error,
         isLoading,

package/src/lib/utils/hooks/useSyncDynamicWaas/instrumentWalletCreation.cjs

@@ -0,0 +1,60 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../shared/consts/index.cjs');
+
+/**
+ * Soft watchdog for the embedded-wallet auto-creation ceremony. Long enough to
+ * clear a healthy MPC ceremony (observed ~7s, iframe load timeout is 10s) so a
+ * fire here means the flow genuinely stalled rather than just being slow.
+ */
+const AUTO_WALLET_CREATION_TIMEOUT_MS = 30000;
+/**
+ * Wraps the auto-wallet-creation ceremony so that "silent" failures carry a
+ * reason. Without this, a ceremony that hangs (promise never settles) or a user
+ * who navigates away mid-flow produces an `initiated` log with no `success` or
+ * `failed` counterpart, leaving the failure undiagnosable.
+ *
+ * Emits:
+ * - `auto_wallet_creation_timeout` if `run` has not settled within `timeoutMs`.
+ * - `auto_wallet_creation_abandoned` if the page is hidden while `run` is still
+ *   in flight (relies on the logger's keepalive transport to survive unload).
+ *
+ * The watchdog is observational: it never aborts `run`, and its return value /
+ * rejection is passed through unchanged.
+ */
+const instrumentWalletCreation = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ run, logData, timeoutMs = AUTO_WALLET_CREATION_TIMEOUT_MS, }) {
+    var _b, _c;
+    const startTime = Date.now();
+    const timeoutId = setTimeout(() => {
+        logger.logger.instrument('Auto wallet creation timed out', Object.assign(Object.assign({}, logData), { key: 'auto_wallet_creation_timeout', reason: 'timeout', time: Date.now() - startTime }));
+    }, timeoutMs);
+    const handlePageHide = () => {
+        logger.logger.instrument('Auto wallet creation abandoned', Object.assign(Object.assign({}, logData), { key: 'auto_wallet_creation_abandoned', reason: 'page_hidden', time: Date.now() - startTime }));
+    };
+    (_b = globalThis.addEventListener) === null || _b === void 0 ? void 0 : _b.call(globalThis, 'pagehide', handlePageHide);
+    try {
+        return yield run();
+    }
+    finally {
+        clearTimeout(timeoutId);
+        (_c = globalThis.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(globalThis, 'pagehide', handlePageHide);
+    }
+});
+
+exports.AUTO_WALLET_CREATION_TIMEOUT_MS = AUTO_WALLET_CREATION_TIMEOUT_MS;
+exports.instrumentWalletCreation = instrumentWalletCreation;

package/src/lib/utils/hooks/useSyncDynamicWaas/instrumentWalletCreation.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Soft watchdog for the embedded-wallet auto-creation ceremony. Long enough to
+ * clear a healthy MPC ceremony (observed ~7s, iframe load timeout is 10s) so a
+ * fire here means the flow genuinely stalled rather than just being slow.
+ */
+export declare const AUTO_WALLET_CREATION_TIMEOUT_MS = 30000;
+type InstrumentWalletCreationArgs<T> = {
+    /** The wallet-creation work to run and observe (the MPC ceremony). */
+    run: () => Promise<T>;
+    /** Shared fields attached to every emitted event (chains, env, user). */
+    logData: Record<string, unknown>;
+    timeoutMs?: number;
+};
+/**
+ * Wraps the auto-wallet-creation ceremony so that "silent" failures carry a
+ * reason. Without this, a ceremony that hangs (promise never settles) or a user
+ * who navigates away mid-flow produces an `initiated` log with no `success` or
+ * `failed` counterpart, leaving the failure undiagnosable.
+ *
+ * Emits:
+ * - `auto_wallet_creation_timeout` if `run` has not settled within `timeoutMs`.
+ * - `auto_wallet_creation_abandoned` if the page is hidden while `run` is still
+ *   in flight (relies on the logger's keepalive transport to survive unload).
+ *
+ * The watchdog is observational: it never aborts `run`, and its return value /
+ * rejection is passed through unchanged.
+ */
+export declare const instrumentWalletCreation: <T>({ run, logData, timeoutMs, }: InstrumentWalletCreationArgs<T>) => Promise<T>;
+export {};

package/src/lib/utils/hooks/useSyncDynamicWaas/instrumentWalletCreation.js

@@ -0,0 +1,55 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../shared/consts/index.js';
+
+/**
+ * Soft watchdog for the embedded-wallet auto-creation ceremony. Long enough to
+ * clear a healthy MPC ceremony (observed ~7s, iframe load timeout is 10s) so a
+ * fire here means the flow genuinely stalled rather than just being slow.
+ */
+const AUTO_WALLET_CREATION_TIMEOUT_MS = 30000;
+/**
+ * Wraps the auto-wallet-creation ceremony so that "silent" failures carry a
+ * reason. Without this, a ceremony that hangs (promise never settles) or a user
+ * who navigates away mid-flow produces an `initiated` log with no `success` or
+ * `failed` counterpart, leaving the failure undiagnosable.
+ *
+ * Emits:
+ * - `auto_wallet_creation_timeout` if `run` has not settled within `timeoutMs`.
+ * - `auto_wallet_creation_abandoned` if the page is hidden while `run` is still
+ *   in flight (relies on the logger's keepalive transport to survive unload).
+ *
+ * The watchdog is observational: it never aborts `run`, and its return value /
+ * rejection is passed through unchanged.
+ */
+const instrumentWalletCreation = (_a) => __awaiter(void 0, [_a], void 0, function* ({ run, logData, timeoutMs = AUTO_WALLET_CREATION_TIMEOUT_MS, }) {
+    var _b, _c;
+    const startTime = Date.now();
+    const timeoutId = setTimeout(() => {
+        logger.instrument('Auto wallet creation timed out', Object.assign(Object.assign({}, logData), { key: 'auto_wallet_creation_timeout', reason: 'timeout', time: Date.now() - startTime }));
+    }, timeoutMs);
+    const handlePageHide = () => {
+        logger.instrument('Auto wallet creation abandoned', Object.assign(Object.assign({}, logData), { key: 'auto_wallet_creation_abandoned', reason: 'page_hidden', time: Date.now() - startTime }));
+    };
+    (_b = globalThis.addEventListener) === null || _b === void 0 ? void 0 : _b.call(globalThis, 'pagehide', handlePageHide);
+    try {
+        return yield run();
+    }
+    finally {
+        clearTimeout(timeoutId);
+        (_c = globalThis.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(globalThis, 'pagehide', handlePageHide);
+    }
+});
+
+export { AUTO_WALLET_CREATION_TIMEOUT_MS, instrumentWalletCreation };

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

@@ -41,6 +41,7 @@ var useMutation = require('../useMutation/useMutation.cjs');
 var useSetupPassword = require('../useSetupPassword/useSetupPassword.cjs');
 var useWalletDelegation = require('../useWalletDelegation/useWalletDelegation.cjs');
 require('../useWalletDelegation/DelegationError.cjs');
+var instrumentWalletCreation = require('./instrumentWalletCreation.cjs');
 
 // Validate if all required conditions are met for wallet creation
 const useWalletCreationValidation = () => {
@@ -77,31 +78,28 @@ const useWalletCreation = () => {
     return useMutation.useMutation((requirements) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const startTime = Date.now();
         const chainsString = requirements.map((req) => req.chain).join(',');
-        // Log wallet creation initiation to DataDog
-        logger.logger.instrument('Auto wallet creation initiated', {
+        const baseLogData = {
             chainCount: requirements.length,
             chains: chainsString,
             environmentId,
-            key: 'auto_wallet_creation_initiated',
-            time: 0,
             userId: user === null || user === void 0 ? void 0 : user.id,
-        });
+        };
+        // Log wallet creation initiation to DataDog
+        logger.logger.instrument('Auto wallet creation initiated', Object.assign(Object.assign({}, baseLogData), { key: 'auto_wallet_creation_initiated', time: 0 }));
         try {
             // If passcodeRequired is enabled, prompt user to set up password first
             const password = yield setupPassword();
-            yield createWalletAccount(requirements, password, undefined, {
-                skipCloseAuthFlow: Boolean(password),
+            // Wrap the ceremony so a hang or mid-flow page exit emits a reason
+            // instead of leaving a silent "initiated" with no resolution.
+            yield instrumentWalletCreation.instrumentWalletCreation({
+                logData: baseLogData,
+                run: () => createWalletAccount(requirements, password, undefined, {
+                    skipCloseAuthFlow: Boolean(password),
+                }),
             });
             const duration = Date.now() - startTime;
             // Log successful wallet creation to DataDog
-            logger.logger.instrument('Auto wallet creation successful', {
-                chainCount: requirements.length,
-                chains: chainsString,
-                environmentId,
-                key: 'auto_wallet_creation_success',
-                time: duration,
-                userId: user === null || user === void 0 ? void 0 : user.id,
-            });
+            logger.logger.instrument('Auto wallet creation successful', Object.assign(Object.assign({}, baseLogData), { key: 'auto_wallet_creation_success', time: duration }));
         }
         catch (error) {
             const duration = Date.now() - startTime;
@@ -110,15 +108,7 @@ const useWalletCreation = () => {
             // UI for this case; the metric should be consistent with that intent.
             if (!(error instanceof Error &&
                 error.message === useSetupPassword.PASSWORD_SETUP_CANCELLED_ERROR)) {
-                logger.logger.instrument('Auto wallet creation failed', {
-                    chainCount: requirements.length,
-                    chains: chainsString,
-                    environmentId,
-                    error: error instanceof Error ? error.message : 'Unknown error',
-                    key: 'auto_wallet_creation_failed',
-                    time: duration,
-                    userId: user === null || user === void 0 ? void 0 : user.id,
-                });
+                logger.logger.instrument('Auto wallet creation failed', Object.assign(Object.assign({}, baseLogData), { error: error instanceof Error ? error.message : 'Unknown error', key: 'auto_wallet_creation_failed', time: duration }));
             }
             throw error;
         }

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

@@ -37,6 +37,7 @@ import { useMutation } from '../useMutation/useMutation.js';
 import { useSetupPassword, PASSWORD_SETUP_CANCELLED_ERROR } from '../useSetupPassword/useSetupPassword.js';
 import { useWalletDelegation } from '../useWalletDelegation/useWalletDelegation.js';
 import '../useWalletDelegation/DelegationError.js';
+import { instrumentWalletCreation } from './instrumentWalletCreation.js';
 
 // Validate if all required conditions are met for wallet creation
 const useWalletCreationValidation = () => {
@@ -73,31 +74,28 @@ const useWalletCreation = () => {
     return useMutation((requirements) => __awaiter(void 0, void 0, void 0, function* () {
         const startTime = Date.now();
         const chainsString = requirements.map((req) => req.chain).join(',');
-        // Log wallet creation initiation to DataDog
-        logger.instrument('Auto wallet creation initiated', {
+        const baseLogData = {
             chainCount: requirements.length,
             chains: chainsString,
             environmentId,
-            key: 'auto_wallet_creation_initiated',
-            time: 0,
             userId: user === null || user === void 0 ? void 0 : user.id,
-        });
+        };
+        // Log wallet creation initiation to DataDog
+        logger.instrument('Auto wallet creation initiated', Object.assign(Object.assign({}, baseLogData), { key: 'auto_wallet_creation_initiated', time: 0 }));
         try {
             // If passcodeRequired is enabled, prompt user to set up password first
             const password = yield setupPassword();
-            yield createWalletAccount(requirements, password, undefined, {
-                skipCloseAuthFlow: Boolean(password),
+            // Wrap the ceremony so a hang or mid-flow page exit emits a reason
+            // instead of leaving a silent "initiated" with no resolution.
+            yield instrumentWalletCreation({
+                logData: baseLogData,
+                run: () => createWalletAccount(requirements, password, undefined, {
+                    skipCloseAuthFlow: Boolean(password),
+                }),
             });
             const duration = Date.now() - startTime;
             // Log successful wallet creation to DataDog
-            logger.instrument('Auto wallet creation successful', {
-                chainCount: requirements.length,
-                chains: chainsString,
-                environmentId,
-                key: 'auto_wallet_creation_success',
-                time: duration,
-                userId: user === null || user === void 0 ? void 0 : user.id,
-            });
+            logger.instrument('Auto wallet creation successful', Object.assign(Object.assign({}, baseLogData), { key: 'auto_wallet_creation_success', time: duration }));
         }
         catch (error) {
             const duration = Date.now() - startTime;
@@ -106,15 +104,7 @@ const useWalletCreation = () => {
             // UI for this case; the metric should be consistent with that intent.
             if (!(error instanceof Error &&
                 error.message === PASSWORD_SETUP_CANCELLED_ERROR)) {
-                logger.instrument('Auto wallet creation failed', {
-                    chainCount: requirements.length,
-                    chains: chainsString,
-                    environmentId,
-                    error: error instanceof Error ? error.message : 'Unknown error',
-                    key: 'auto_wallet_creation_failed',
-                    time: duration,
-                    userId: user === null || user === void 0 ? void 0 : user.id,
-                });
+                logger.instrument('Auto wallet creation failed', Object.assign(Object.assign({}, baseLogData), { error: error instanceof Error ? error.message : 'Unknown error', key: 'auto_wallet_creation_failed', time: duration }));
             }
             throw error;
         }

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

@@ -312,7 +312,23 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         if (transaction.fetchFee) {
             const feePromise = transaction.fetchFee();
             if (feePromise && typeof feePromise.finally === 'function') {
-                feePromise.finally(update);
+                feePromise.finally(() => {
+                    // `transaction.isGasSponsored()` is a synchronous getter that
+                    //  reads a flag the transaction caches during `fetchFee`. On
+                    //  Aleo we can't know whether Feemaster covers the call until
+                    //  that async lookup resolves, so the flag starts at `false`
+                    //  and flips to `true` once the policy answer lands. The
+                    //  initial-mount `useEffect` below only runs when
+                    //  `transaction` itself changes, so without re-reading here
+                    //  React's `isGasSponsored` state stays `false` and the
+                    //  confirmation card renders the gas row with a `--` value
+                    //  (since `fee.gas = 0n` for sponsored calls). Re-read once
+                    //  the cached flag is populated so the row hides itself.
+                    if (transaction.isGasSponsored) {
+                        setIsGasSponsored(transaction.isGasSponsored());
+                    }
+                    update();
+                });
             }
         }
     }, [primaryWallet, transaction, update]);

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

@@ -304,7 +304,23 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         if (transaction.fetchFee) {
             const feePromise = transaction.fetchFee();
             if (feePromise && typeof feePromise.finally === 'function') {
-                feePromise.finally(update);
+                feePromise.finally(() => {
+                    // `transaction.isGasSponsored()` is a synchronous getter that
+                    //  reads a flag the transaction caches during `fetchFee`. On
+                    //  Aleo we can't know whether Feemaster covers the call until
+                    //  that async lookup resolves, so the flag starts at `false`
+                    //  and flips to `true` once the policy answer lands. The
+                    //  initial-mount `useEffect` below only runs when
+                    //  `transaction` itself changes, so without re-reading here
+                    //  React's `isGasSponsored` state stays `false` and the
+                    //  confirmation card renders the gas row with a `--` value
+                    //  (since `fee.gas = 0n` for sponsored calls). Re-read once
+                    //  the cached flag is populated so the row hides itself.
+                    if (transaction.isGasSponsored) {
+                        setIsGasSponsored(transaction.isGasSponsored());
+                    }
+                    update();
+                });
             }
         }
     }, [primaryWallet, transaction, update]);