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

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

@@ -0,0 +1,368 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { ChainEnum } from '@dynamic-labs/sdk-api-core';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '../../../shared/consts/index.js';
+import '../../../events/dynamicEvents.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-sdk/client/core';
+import 'eventemitter3';
+import '@dynamic-labs-sdk/client';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/locale';
+import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../store/state/authMode/authMode.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../functions/compareChains/compareChains.js';
+import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../context/WalletContext/WalletContext.js';
+import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../store/state/walletOptions/walletOptions.js';
+import 'react-i18next';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../useSubdomainCheck/useSubdomainCheck.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../useGetMfaToken/useGetMfaToken.js';
+import '../useWalletBackup/useWalletBackup.js';
+import '../useWalletBackup/types.js';
+import '../useWalletBackup/cloudProviders.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../store/state/sendBalances.js';
+import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
+import '../../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../index.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.js';
+import '../../../widgets/DynamicWidget/views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
+import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../store/state/tokenBalances.js';
+import '../../../store/state/multichainBalances.js';
+import '@dynamic-labs/store';
+import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+
+const MICROCREDITS_PER_CREDIT = 1000000;
+const ALEO_CREDITS_LOGO = 'https://app.dynamic.xyz/assets/networks/aleo.svg';
+// Generic dark "?" token icon — matches redcoast's `DEFAULT_TOKEN_LOGO_URI`
+//  used by the multichain endpoint when an unshielded token has no curated
+//  logo. Reusing it here keeps the Shielded tab visually consistent with
+//  the Unshielded tab for the same token.
+const UNKNOWN_TOKEN_LOGO = 'https://app.dynamic.xyz/assets/tokens/unknown.svg';
+const TOKEN_REGISTRY_PROGRAM = 'token_registry.aleo';
+const TOKEN_REGISTRY_RECORD = 'Token';
+// Non-credits tokens deliberately omit `logoURI` — Aleo doesn't have a
+//  curated icon list yet, so leaving it undefined surfaces the widget's
+//  generic placeholder (`?` skeleton) consistent with the unshielded feed.
+const KNOWN_SHIELDED_TOKENS = [
+    {
+        contractAddress: 'usad_stablecoin.aleo',
+        decimals: 6,
+        name: 'USAD',
+        programName: 'usad_stablecoin.aleo',
+        recordName: 'Token',
+        symbol: 'USAD',
+    },
+    {
+        contractAddress: 'test_usad_stablecoin.aleo',
+        decimals: 6,
+        name: 'USAD',
+        programName: 'test_usad_stablecoin.aleo',
+        recordName: 'Token',
+        symbol: 'USAD',
+    },
+    {
+        contractAddress: 'usdcx_stablecoin.aleo',
+        decimals: 6,
+        name: 'USDCx',
+        programName: 'usdcx_stablecoin.aleo',
+        recordName: 'Token',
+        symbol: 'USDCx',
+    },
+    {
+        contractAddress: 'test_usdcx_stablecoin.aleo',
+        decimals: 6,
+        name: 'USDCx',
+        programName: 'test_usdcx_stablecoin.aleo',
+        recordName: 'Token',
+        symbol: 'USDCx',
+    },
+    // ARC-21 (Hyperlane warp routes) — mainnet only. Token IDs match the
+    //  values pinned in `packages/aleo/src/utils/aleoSendableTokens` and the
+    //  redcoast `aleoArc21Tokens` registry. Decimals match each token's
+    //  `token_info` metadata on-chain.
+    {
+        contractAddress: 'hyp_warp_token_sol.aleo',
+        decimals: 9,
+        name: 'Wrapped SOL',
+        programName: TOKEN_REGISTRY_PROGRAM,
+        recordName: TOKEN_REGISTRY_RECORD,
+        symbol: 'wSOL',
+        tokenId: '2045969100091121326225168054634646230244820821909676777152465722877810201564field',
+    },
+    {
+        contractAddress: 'hyp_warp_token_eth.aleo',
+        decimals: 18,
+        name: 'Wrapped ETH',
+        programName: TOKEN_REGISTRY_PROGRAM,
+        recordName: TOKEN_REGISTRY_RECORD,
+        symbol: 'wETH',
+        tokenId: '8189585964265444162798552221009403350643900573290534096996249214099143169251field',
+    },
+    {
+        contractAddress: 'hyp_warp_token_wbtc.aleo',
+        decimals: 8,
+        name: 'Wrapped BTC',
+        programName: TOKEN_REGISTRY_PROGRAM,
+        recordName: TOKEN_REGISTRY_RECORD,
+        symbol: 'wBTC',
+        tokenId: '3491859903473482085250871387962132231204352466326026409883548131580582527809field',
+    },
+    {
+        contractAddress: 'hyp_warp_token_usdt.aleo',
+        decimals: 6,
+        name: 'Tether USD',
+        programName: TOKEN_REGISTRY_PROGRAM,
+        recordName: TOKEN_REGISTRY_RECORD,
+        symbol: 'USDT',
+        tokenId: '7881654794448182580124231856035865816599796419758925654292946277940935117913field',
+    },
+    {
+        contractAddress: 'hyp_warp_token_usdc.aleo',
+        decimals: 6,
+        name: 'USD Coin',
+        programName: TOKEN_REGISTRY_PROGRAM,
+        recordName: TOKEN_REGISTRY_RECORD,
+        symbol: 'USDC',
+        tokenId: '4697275201844475848710842677807162058146139844643350200269139278887318953049field',
+    },
+];
+/**
+ * Match a record to a shielded-token spec. Stablecoins match on
+ * (program, record); ARC-21 entries additionally require the spec's
+ * `tokenId` to appear inside `record_plaintext` (since every ARC-21 token
+ * shares `token_registry.aleo / Token`).
+ */
+const findTokenSpec = (record) => {
+    for (const spec of KNOWN_SHIELDED_TOKENS) {
+        if (record.program_name !== spec.programName)
+            continue;
+        if (record.record_name !== spec.recordName)
+            continue;
+        if (spec.tokenId) {
+            if (typeof record.record_plaintext !== 'string' ||
+                !record.record_plaintext.includes(`token_id: ${spec.tokenId}`)) {
+                continue;
+            }
+        }
+        return spec;
+    }
+    return undefined;
+};
+/**
+ * Hook that returns the active wallet's shielded (private) Aleo token
+ * balances as a `TokenBalance[]` so the widget can render them through the
+ * same TokenBalanceList path it uses for unshielded balances.
+ *
+ * - Records come from the iframe via `connector.listOwnedRecords()` (the
+ *   Provable RecordScanner; view key never leaves the iframe).
+ * - Aggregates `credits.aleo/credits` (sum `microcredits` → ALEO) plus any
+ *   tier-3 stablecoin Token records (sum `amount` per program → USAD/USDCx).
+ *   ARC-21 multi-token grouped-by-`token_id` is Phase 2B.
+ *
+ * Returns an empty list when:
+ *   - The wallet isn't Aleo
+ *   - 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 { primaryWallet, network } = useInternalDynamicContext();
+    const [tokenBalances, setTokenBalances] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState();
+    const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+    const isAleo = (connector === null || connector === void 0 ? void 0 : connector.connectedChain) === ChainEnum.Aleo;
+    const supportsShielded = 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
+    //  setups mock context with a factory that returns a fresh `primaryWallet`
+    //  every render — depending on that ref directly turned this into an
+    //  infinite render loop.
+    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;
+    const fetchShielded = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const liveConnector = connectorRef.current;
+        if (!supportsShielded || !liveConnector) {
+            setTokenBalances((prev) => (prev.length === 0 ? prev : []));
+            return;
+        }
+        setIsLoading(true);
+        setError(undefined);
+        try {
+            const result = yield liveConnector.listOwnedRecords();
+            const records = (_a = result === null || result === void 0 ? void 0 : result.records) !== null && _a !== void 0 ? _a : [];
+            const networkIdNumeric = Number(networkKey);
+            const safeNetworkId = Number.isFinite(networkIdNumeric)
+                ? networkIdNumeric
+                : undefined;
+            const balances = [];
+            // Tier 1: native credits — sum microcredits across credits.aleo records.
+            const creditsRecords = records.filter((r) => (r === null || r === void 0 ? void 0 : r.program_name) === 'credits.aleo' &&
+                (r === null || r === void 0 ? void 0 : r.record_name) === 'credits' &&
+                typeof (r === null || r === void 0 ? void 0 : r.microcredits) === 'string');
+            if (creditsRecords.length > 0) {
+                const totalMicrocredits = creditsRecords.reduce((sum, r) => sum + BigInt(r.microcredits), BigInt(0));
+                // BigInt → number for the TokenBalance shape. Aleo balances stay well
+                // below Number.MAX_SAFE_INTEGER for a single wallet (max u64 supply is
+                // 1.5B credits = 1.5e15 microcredits; Number can hold up to ~9e15).
+                const rawBalance = Number(totalMicrocredits);
+                balances.push({
+                    address: '0x0',
+                    balance: rawBalance / MICROCREDITS_PER_CREDIT,
+                    decimals: 6,
+                    isNative: true,
+                    logoURI: ALEO_CREDITS_LOGO,
+                    name: 'Aleo Credits',
+                    networkId: safeNetworkId,
+                    rawBalance,
+                    symbol: 'ALEO',
+                });
+            }
+            // Tier 3 + ARC-21: Token records. Each record matches at most one
+            //  spec (stablecoin programs disambiguate by program; ARC-21 records
+            //  share `token_registry.aleo / Token` and disambiguate by tokenId
+            //  inside the plaintext). Sum the `amount` field per spec.
+            const sumsByContract = new Map();
+            const specsByContract = new Map();
+            for (const r of records) {
+                const spec = findTokenSpec(r);
+                if (!spec || typeof r.amount !== 'string')
+                    continue;
+                try {
+                    const prev = (_b = sumsByContract.get(spec.contractAddress)) !== null && _b !== void 0 ? _b : BigInt(0);
+                    sumsByContract.set(spec.contractAddress, prev + BigInt(r.amount));
+                    specsByContract.set(spec.contractAddress, spec);
+                }
+                catch (_d) {
+                    /* ignore — malformed amount string */
+                }
+            }
+            for (const [contractAddress, total] of sumsByContract.entries()) {
+                const spec = specsByContract.get(contractAddress);
+                if (!spec)
+                    continue;
+                const rawBalance = Number(total);
+                balances.push({
+                    address: spec.contractAddress,
+                    balance: rawBalance / Math.pow(10, spec.decimals),
+                    decimals: spec.decimals,
+                    // Use redcoast's `DEFAULT_TOKEN_LOGO_URI` for stablecoins + ARC-21
+                    //  so they render the same dark "?" icon the Unshielded tab shows
+                    //  for these tokens (the multichain endpoint applies that fallback
+                    //  itself; we mirror it here for visual parity).
+                    logoURI: (_c = spec.logoURI) !== null && _c !== void 0 ? _c : UNKNOWN_TOKEN_LOGO,
+                    name: spec.name,
+                    networkId: safeNetworkId,
+                    rawBalance,
+                    symbol: spec.symbol,
+                });
+            }
+            setTokenBalances(balances);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            setError(msg);
+            setTokenBalances((prev) => (prev.length === 0 ? prev : []));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }), [connectorKey, networkKey, supportsShielded]);
+    useEffect(() => {
+        if (!supportsShielded) {
+            setTokenBalances((prev) => (prev.length === 0 ? prev : []));
+            return;
+        }
+        fetchShielded().catch(() => {
+            // fetchShielded already records the error in component state;
+            //  the .catch keeps the fire-and-forget shape lint-clean.
+        });
+    }, [supportsShielded, fetchShielded]);
+    return {
+        error,
+        isLoading,
+        refetch: fetchShielded,
+        supportsShielded,
+        tokenBalances,
+    };
+};
+
+export { useAleoShieldedBalances };

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

@@ -119,6 +119,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 /**
+ * @deprecated This hook is deprecated and will be removed in a future release. Use `useDynamicWaas` instead.
  * @returns {
  *  createEmbeddedWallet, - creates Dynamic embedded wallet according to the settings
  *  createOrRestoreSession, - creates or restores session for the embedded wallet

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

@@ -1,6 +1,7 @@
 import { EmbeddedWalletChainEnum, EmbeddedWalletVersionEnum } from '@dynamic-labs/sdk-api-core';
 import { Wallet } from '../../../shared';
 /**
+ * @deprecated This hook is deprecated and will be removed in a future release. Use `useDynamicWaas` instead.
  * @returns {
  *  createEmbeddedWallet, - creates Dynamic embedded wallet according to the settings
  *  createOrRestoreSession, - creates or restores session for the embedded wallet

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

@@ -115,6 +115,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 /**
+ * @deprecated This hook is deprecated and will be removed in a future release. Use `useDynamicWaas` instead.
  * @returns {
  *  createEmbeddedWallet, - creates Dynamic embedded wallet according to the settings
  *  createOrRestoreSession, - creates or restores session for the embedded wallet

package/src/lib/views/SendBalanceView/SendBalanceView.cjs

@@ -183,6 +183,52 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
         if (orderedTokenBalances)
             setTokenBalances(orderedTokenBalances);
     }, [orderedTokenBalances]);
+    // Chain override: when the active IUITransaction provides
+    // `getSendableTokenBalances`, prefer that list for the picker. Used by
+    // chains where the spendable balance source diverges from
+    // `useTokenBalances` (e.g. Aleo Send always spends from private
+    // records, not the public-balance mapping redcoast returns). Chains
+    // that don't implement the method get the default fetcher unchanged.
+    //
+    // Also re-anchors `currentToken` to the matching entry in the override
+    // list. Without this, the picker's row renders the override balance
+    // (it reads from `tokenBalances`) but the form's "Available" line
+    // renders the original public balance (it reads from `currentToken`),
+    // which is stale.
+    React.useEffect(() => {
+        if (!(transaction === null || transaction === void 0 ? void 0 : transaction.getSendableTokenBalances))
+            return;
+        let cancelled = false;
+        transaction
+            .getSendableTokenBalances()
+            .then((overrideBalances) => {
+            if (cancelled)
+                return;
+            if (!overrideBalances || overrideBalances.length === 0)
+                return;
+            setTokenBalances(overrideBalances);
+            setCurrentToken((prev) => {
+                if (!prev)
+                    return overrideBalances[0];
+                const match = overrideBalances.find((t) => t.address === prev.address);
+                if (!match)
+                    return overrideBalances[0];
+                // Skip the swap if values are unchanged — avoids a re-render
+                // loop when transaction recreation re-fires this effect.
+                if (match.rawBalance === prev.rawBalance &&
+                    match.balance === prev.balance) {
+                    return prev;
+                }
+                return match;
+            });
+        })
+            .catch((err) => {
+            logger.logger.debug('[SendBalanceView] getSendableTokenBalances threw — falling back to default token list', err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [transaction]);
     React.useEffect(() => {
         if (!walletConnector)
             return;
@@ -201,6 +247,13 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
                 transaction.nonNativeValue = BigInt(0);
                 transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
             }
+            // Chain hook: tells the transaction which picker entry the user
+            // landed on (or just switched to). Aleo uses this to flip submit
+            // between credits / stablecoin / ARC-21 program signatures + to
+            // re-anchor decimals for parse/format.
+            if (currentToken && transaction.setSelectedToken) {
+                transaction.setSelectedToken(currentToken.address);
+            }
             setTransaction(transaction);
         })
             .catch((error) => {

package/src/lib/views/SendBalanceView/SendBalanceView.js

@@ -179,6 +179,52 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
         if (orderedTokenBalances)
             setTokenBalances(orderedTokenBalances);
     }, [orderedTokenBalances]);
+    // Chain override: when the active IUITransaction provides
+    // `getSendableTokenBalances`, prefer that list for the picker. Used by
+    // chains where the spendable balance source diverges from
+    // `useTokenBalances` (e.g. Aleo Send always spends from private
+    // records, not the public-balance mapping redcoast returns). Chains
+    // that don't implement the method get the default fetcher unchanged.
+    //
+    // Also re-anchors `currentToken` to the matching entry in the override
+    // list. Without this, the picker's row renders the override balance
+    // (it reads from `tokenBalances`) but the form's "Available" line
+    // renders the original public balance (it reads from `currentToken`),
+    // which is stale.
+    useEffect(() => {
+        if (!(transaction === null || transaction === void 0 ? void 0 : transaction.getSendableTokenBalances))
+            return;
+        let cancelled = false;
+        transaction
+            .getSendableTokenBalances()
+            .then((overrideBalances) => {
+            if (cancelled)
+                return;
+            if (!overrideBalances || overrideBalances.length === 0)
+                return;
+            setTokenBalances(overrideBalances);
+            setCurrentToken((prev) => {
+                if (!prev)
+                    return overrideBalances[0];
+                const match = overrideBalances.find((t) => t.address === prev.address);
+                if (!match)
+                    return overrideBalances[0];
+                // Skip the swap if values are unchanged — avoids a re-render
+                // loop when transaction recreation re-fires this effect.
+                if (match.rawBalance === prev.rawBalance &&
+                    match.balance === prev.balance) {
+                    return prev;
+                }
+                return match;
+            });
+        })
+            .catch((err) => {
+            logger.debug('[SendBalanceView] getSendableTokenBalances threw — falling back to default token list', err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [transaction]);
     useEffect(() => {
         if (!walletConnector)
             return;
@@ -197,6 +243,13 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
                 transaction.nonNativeValue = BigInt(0);
                 transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
             }
+            // Chain hook: tells the transaction which picker entry the user
+            // landed on (or just switched to). Aleo uses this to flip submit
+            // between credits / stablecoin / ARC-21 program signatures + to
+            // re-anchor decimals for parse/format.
+            if (currentToken && transaction.setSelectedToken) {
+                transaction.setSelectedToken(currentToken.address);
+            }
             setTransaction(transaction);
         })
             .catch((error) => {