@dynamic-labs/sdk-react-core 4.92.2 → 4.92.4

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

@@ -468,25 +468,51 @@ const useDynamicWaas = () => {
         return result;
     });
     const upgradeToDynamicWaas = useCallback((_j) => __awaiter(void 0, [_j], void 0, function* ({ privateKey, wallet, password, }) {
-        isUpgrading.current = true;
         if (!wallet) {
             throw new DynamicError('Wallet to upgrade was not provided', 'wallet_to_upgrade_was_not_provided');
         }
+        // Guard before any destructive work: an empty/whitespace private key
+        // would otherwise soft-delete the legacy wallet and only fail on import.
+        if (!(privateKey === null || privateKey === void 0 ? void 0 : privateKey.trim())) {
+            throw new DynamicError('Private key is required', 'private_key_is_required');
+        }
         const chainName = wallet.chain;
         const walletId = wallet.id;
         const walletConnector = getWaasWalletConnector(chainName);
         if (!walletConnector) {
             throw new DynamicError('Wallet connector not found', 'wallet_connector_not_found');
         }
+        isUpgrading.current = true;
         let softDeleteSucceeded = false;
         // 7702 wallets have a -zerodev suffix because it's a credential created on the fly
         const normalizedWalletId = (walletId === null || walletId === void 0 ? void 0 : walletId.replace('-zerodev', '')) || walletId;
+        logger.info('Upgrade to WaaS - migration started', {
+            chain: chainName,
+            environmentId,
+            key: 'upgradeToWaasStarted',
+            userId: user === null || user === void 0 ? void 0 : user.id,
+            walletId: normalizedWalletId,
+        });
         try {
+            logger.info('Upgrade to WaaS - soft deleting legacy wallet', {
+                chain: chainName,
+                environmentId,
+                key: 'upgradeToWaasSoftDelete',
+                userId: user === null || user === void 0 ? void 0 : user.id,
+                walletId: normalizedWalletId,
+            });
             yield softDeleteEmbeddedWallet({
                 environmentId,
                 walletId: normalizedWalletId,
             });
             softDeleteSucceeded = true;
+            logger.info('Upgrade to WaaS - importing private key', {
+                chain: chainName,
+                environmentId,
+                key: 'upgradeToWaasImportPrivateKey',
+                userId: user === null || user === void 0 ? void 0 : user.id,
+                walletId: normalizedWalletId,
+            });
             yield walletConnector.importPrivateKey({
                 chainName,
                 legacyWalletId: normalizedWalletId,
@@ -495,10 +521,32 @@ const useDynamicWaas = () => {
                 publicAddressCheck: wallet.address,
             });
             isUpgrading.current = false;
+            logger.info('Upgrade to WaaS - migration completed', {
+                chain: chainName,
+                environmentId,
+                key: 'upgradeToWaasCompleted',
+                userId: user === null || user === void 0 ? void 0 : user.id,
+                walletId: normalizedWalletId,
+            });
         }
         catch (error) {
+            logger.error('Upgrade to WaaS - migration failed', {
+                chain: chainName,
+                environmentId,
+                error,
+                softDeleteSucceeded,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+                walletId: normalizedWalletId,
+            });
             // If soft delete succeeded but import failed, try to restore the wallet
             if (softDeleteSucceeded) {
+                logger.info('Upgrade to WaaS - restoring legacy wallet after failed import', {
+                    chain: chainName,
+                    environmentId,
+                    key: 'upgradeToWaasRestore',
+                    userId: user === null || user === void 0 ? void 0 : user.id,
+                    walletId: normalizedWalletId,
+                });
                 yield restoreEmbeddedWallet({
                     environmentId,
                     walletId: normalizedWalletId,
@@ -515,7 +563,7 @@ const useDynamicWaas = () => {
             }
             throw new DynamicError('Upgrade failed, please try again.', 'upgrade_failed');
         }
-    }), [environmentId, getWaasWalletConnector, refresh]);
+    }), [environmentId, getWaasWalletConnector, refresh, user === null || user === void 0 ? void 0 : user.id]);
     /**
      * Returns WaaS wallet instances from `userWallets` filtered by `key === 'dynamicwaas'`.
      *

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

@@ -479,6 +479,17 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         });
         engageCaptcha({
             authMethod: 'social',
+            // Backing out of the captcha view abandons onCaptchaSuccess, so the
+            // social flow must settle here — otherwise the social-redirect-view
+            // beneath it spins forever waiting for a connection that never starts
+            onCaptchaCancel: () => {
+                onFailed(props.provider, {
+                    error: {
+                        code: types.SocialOAuthErrorCode.USER_CANCELLED,
+                        message: 'User cancelled connection',
+                    },
+                }, { raiseAuthFailure: true });
+            },
             onCaptchaSuccess: (captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 yield connectSocialAccount(Object.assign(Object.assign({}, props), { captchaToken }));
                 setShowAuthFlow(false);
@@ -488,6 +499,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         setShowAuthFlow,
         connectSocialAccount,
         engageCaptcha,
+        onFailed,
         projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security,
     ]);
     return React.useMemo(() => ({

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

@@ -475,6 +475,17 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         });
         engageCaptcha({
             authMethod: 'social',
+            // Backing out of the captcha view abandons onCaptchaSuccess, so the
+            // social flow must settle here — otherwise the social-redirect-view
+            // beneath it spins forever waiting for a connection that never starts
+            onCaptchaCancel: () => {
+                onFailed(props.provider, {
+                    error: {
+                        code: SocialOAuthErrorCode.USER_CANCELLED,
+                        message: 'User cancelled connection',
+                    },
+                }, { raiseAuthFailure: true });
+            },
             onCaptchaSuccess: (captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
                 yield connectSocialAccount(Object.assign(Object.assign({}, props), { captchaToken }));
                 setShowAuthFlow(false);
@@ -484,6 +495,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         setShowAuthFlow,
         connectSocialAccount,
         engageCaptcha,
+        onFailed,
         projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security,
     ]);
     return useMemo(() => ({

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

@@ -25,6 +25,7 @@ require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../store/state/nonce/nonce.cjs');
 require('@dynamic-labs-wallet/browser-wallet-client');
+var getEmbeddedBitcoinActiveAddress = require('../../functions/getEmbeddedBitcoinActiveAddress/getEmbeddedBitcoinActiveAddress.cjs');
 var utils$1 = require('../../../data/api/utils.cjs');
 require('@dynamic-labs/locale');
 var dynamicContextProps = require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
@@ -44,15 +45,16 @@ var utils = require('./utils.cjs');
 
 // Hook exposed to customers and used internally to fetch account balances
 const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses, includeFiat = false, includeNativeBalance = false, filterSpamTokens = true, forceRefresh = false, whitelistedContracts, } = {}) => {
-    var _a;
+    var _a, _b;
     const tokenBalancesState = tokenBalances.useTokenBalancesState();
     const { tokenBalances: tokenBalances$1, isLoading, error } = tokenBalancesState;
     const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
-    const requestAccount = accountAddress !== null && accountAddress !== void 0 ? accountAddress : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
-    const requestChainName = (_a = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) !== null && _a !== void 0 ? _a : sdkApiCore.ChainEnum.Evm;
+    // Per-network address: balances must query the selected network's encoding.
+    const requestAccount = (_a = accountAddress !== null && accountAddress !== void 0 ? accountAddress : getEmbeddedBitcoinActiveAddress.getEmbeddedBitcoinActiveAddress(walletConnector)) !== null && _a !== void 0 ? _a : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const requestChainName = (_b = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) !== null && _b !== void 0 ? _b : sdkApiCore.ChainEnum.Evm;
     const fetchAccountBalances = React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* (forceRefresh = false) {
-        var _b;
+        var _c;
         const user = getUserProfile.getUserProfile();
         const authMode$1 = authMode.getAuthMode();
         if (authMode$1 !== 'connect-only' && !user) {
@@ -61,7 +63,7 @@ const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses
         }
         const projectSettings = getProjectSettings.getProjectSettings();
         if (authMode$1 === 'connect-only' &&
-            !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _b === void 0 ? void 0 : _b.connectOnlyMultiAsset)) {
+            !((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _c === void 0 ? void 0 : _c.connectOnlyMultiAsset)) {
             return;
         }
         // the reason why we need to get the network here again instead of using the value
@@ -126,6 +128,8 @@ const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses
         filterSpamTokens,
         networkId,
         walletConnector,
+        // re-fetch when the picker's network changes (per-network addresses)
+        network,
     ]);
     useDynamicEvents.useInternalDynamicEvents('tokenBalancesChanged', () => fetchAccountBalances(true));
     React.useEffect(() => {

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

@@ -21,6 +21,7 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../store/state/nonce/nonce.js';
 import '@dynamic-labs-wallet/browser-wallet-client';
+import { getEmbeddedBitcoinActiveAddress } from '../../functions/getEmbeddedBitcoinActiveAddress/getEmbeddedBitcoinActiveAddress.js';
 import { logResponseError } from '../../../data/api/utils.js';
 import '@dynamic-labs/locale';
 import { useDynamicSettings, getEnvironmentId } from '../../../store/state/dynamicContextProps/dynamicContextProps.js';
@@ -40,15 +41,16 @@ import { resolveNetworkIdForRequest, getTokenBalanceErrorMessage } from './utils
 
 // Hook exposed to customers and used internally to fetch account balances
 const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses, includeFiat = false, includeNativeBalance = false, filterSpamTokens = true, forceRefresh = false, whitelistedContracts, } = {}) => {
-    var _a;
+    var _a, _b;
     const tokenBalancesState = useTokenBalancesState();
     const { tokenBalances, isLoading, error } = tokenBalancesState;
     const { primaryWallet, network } = useInternalDynamicContext();
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
-    const requestAccount = accountAddress !== null && accountAddress !== void 0 ? accountAddress : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
-    const requestChainName = (_a = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) !== null && _a !== void 0 ? _a : ChainEnum.Evm;
+    // Per-network address: balances must query the selected network's encoding.
+    const requestAccount = (_a = accountAddress !== null && accountAddress !== void 0 ? accountAddress : getEmbeddedBitcoinActiveAddress(walletConnector)) !== null && _a !== void 0 ? _a : primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const requestChainName = (_b = chainName !== null && chainName !== void 0 ? chainName : walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) !== null && _b !== void 0 ? _b : ChainEnum.Evm;
     const fetchAccountBalances = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (forceRefresh = false) {
-        var _b;
+        var _c;
         const user = getUserProfile();
         const authMode = getAuthMode();
         if (authMode !== 'connect-only' && !user) {
@@ -57,7 +59,7 @@ const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses
         }
         const projectSettings = getProjectSettings();
         if (authMode === 'connect-only' &&
-            !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _b === void 0 ? void 0 : _b.connectOnlyMultiAsset)) {
+            !((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _c === void 0 ? void 0 : _c.connectOnlyMultiAsset)) {
             return;
         }
         // the reason why we need to get the network here again instead of using the value
@@ -122,6 +124,8 @@ const useTokenBalances = ({ accountAddress, networkId, chainName, tokenAddresses
         filterSpamTokens,
         networkId,
         walletConnector,
+        // re-fetch when the picker's network changes (per-network addresses)
+        network,
     ]);
     useInternalDynamicEvents('tokenBalancesChanged', () => fetchAccountBalances(true));
     useEffect(() => {

package/src/lib/utils/hooks/useWalletItemActions/useHandleWalletItem/useHandleWalletItem.cjs

@@ -171,13 +171,18 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     };
     const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
+        // MetaMask SDK sets canHandleMultipleConnections=false for mobile/QR flows,
+        // but when the extension is installed on desktop it handles multiple
+        // connections natively — skip the session teardown in that case.
+        const isMetaMaskExtensionInstalled = walletConnector.key.startsWith('metamask') && isInstalledOnBrowser;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
             walletConnectorCore.isPhantomRedirectConnector(walletConnector) ||
             // because some wallet connectors only supports one connection at a time,
             // we need to end the session (disconnect) when the user selects
             // a different wallet to connect with
             // a new connection is established a few steps further down
-            !walletConnector.canHandleMultipleConnections;
+            (!walletConnector.canHandleMultipleConnections &&
+                !isMetaMaskExtensionInstalled);
         logger.logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,

package/src/lib/utils/hooks/useWalletItemActions/useHandleWalletItem/useHandleWalletItem.js

@@ -167,13 +167,18 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     };
     const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
+        // MetaMask SDK sets canHandleMultipleConnections=false for mobile/QR flows,
+        // but when the extension is installed on desktop it handles multiple
+        // connections natively — skip the session teardown in that case.
+        const isMetaMaskExtensionInstalled = walletConnector.key.startsWith('metamask') && isInstalledOnBrowser;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
             isPhantomRedirectConnector(walletConnector) ||
             // because some wallet connectors only supports one connection at a time,
             // we need to end the session (disconnect) when the user selects
             // a different wallet to connect with
             // a new connection is established a few steps further down
-            !walletConnector.canHandleMultipleConnections;
+            (!walletConnector.canHandleMultipleConnections &&
+                !isMetaMaskExtensionInstalled);
         logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -139,7 +139,7 @@ require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, walletId, }) => {
     var _a, _b, _c, _d, _e;
     const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
-    const { userWallets } = UserWalletsContext.useInternalUserWallets();
+    const userWallets = UserWalletsContext.useUserWalletsExternal();
     const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow.useSyncEmbeddedWalletFlow();
     const isWaasWallet = Boolean(user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((vc) => { var _a; return (_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('dynamicwaas'); }));
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
@@ -147,8 +147,10 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, walle
     const { getEOAWallet, isSmartWallet } = useSmartWallets.useSmartWallets();
     const [isAcknowledged, setIsAcknowledged] = React.useState(false);
     const [iframeContainerRef, setIframeContainerRef] = React.useState(null);
+    // Smart wallets' signer EOAs are not registered in userWallets, so also
+    // match a user wallet whose derived EOA carries the requested id
     const walletFromId = walletId
-        ? userWallets.find((w) => w.id === walletId)
+        ? userWallets.find((w) => { var _a; return w.id === walletId || ((_a = getEOAWallet(w)) === null || _a === void 0 ? void 0 : _a.id) === walletId; })
         : undefined;
     if (walletId && !walletFromId) {
         throw new utils.DynamicError('Wallet not found. Please try again.', errors.INVALID_WALLET_DATA);

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -51,7 +51,7 @@ import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
 import '../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
-import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
+import { useUserWalletsExternal } from '../../../context/UserWalletsContext/UserWalletsContext.js';
 import '../../../store/state/authMode/authMode.js';
 import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '../../../context/VerificationContext/VerificationContext.js';
@@ -135,7 +135,7 @@ import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, walletId, }) => {
     var _a, _b, _c, _d, _e;
     const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext();
-    const { userWallets } = useInternalUserWallets();
+    const userWallets = useUserWalletsExternal();
     const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow();
     const isWaasWallet = Boolean(user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((vc) => { var _a; return (_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('dynamicwaas'); }));
     const { setDynamicWidgetView } = useWidgetContext();
@@ -143,8 +143,10 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, walle
     const { getEOAWallet, isSmartWallet } = useSmartWallets();
     const [isAcknowledged, setIsAcknowledged] = useState(false);
     const [iframeContainerRef, setIframeContainerRef] = useState(null);
+    // Smart wallets' signer EOAs are not registered in userWallets, so also
+    // match a user wallet whose derived EOA carries the requested id
     const walletFromId = walletId
-        ? userWallets.find((w) => w.id === walletId)
+        ? userWallets.find((w) => { var _a; return w.id === walletId || ((_a = getEOAWallet(w)) === null || _a === void 0 ? void 0 : _a.id) === walletId; })
         : undefined;
     if (walletId && !walletFromId) {
         throw new DynamicError('Wallet not found. Please try again.', INVALID_WALLET_DATA);

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

@@ -61,7 +61,7 @@ const TABS = [
 ];
 const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
     const { t } = reactI18next.useTranslation();
-    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
     const [activeTab, setActiveTab] = React.useState('shielded');
     const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const enabled = Boolean(!isLoading && primaryWallet && walletConnectorCore.isMidnightConnector(primaryWallet.connector));
@@ -77,27 +77,57 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
         }
         return primaryWallet.getFormattedBalances();
     }), {
-        deps: [walletAddress, primaryWallet, dustPollTick],
+        // `network` is in the deps so switching the picker re-fetches against the
+        // newly-selected network (the connector passes it through to the wallet
+        // client, which syncs/serves that network's balances). `balancesLoading`
+        // then drives the syncing/skeleton state while the new network syncs.
+        deps: [walletAddress, primaryWallet, dustPollTick, network],
         enabled,
     });
     const { dustBalance, shieldedTokenCount, unshieldedBalance, dustSyncing } = balances !== null && balances !== void 0 ? balances : {};
+    // Track which network the currently-held `balances` belong to. On a network
+    // switch `usePromise` keeps the previous network's data while it refetches, so
+    // without this we'd briefly show the old network's balance. We treat the view
+    // as "switching" until a fetch COMPLETES for the selected network — gated on
+    // the loading true→false transition: at the switch commit this effect still
+    // sees the previous fetch's settled `balancesLoading=false` in its closure,
+    // so an ungated update would re-arm immediately and let the stale value
+    // render. Background dust polls don't change `network`, so they never
+    // trigger this.
+    const [balancesNetwork, setBalancesNetwork] = React.useState(network);
+    const balancesWereLoadingRef = React.useRef(balancesLoading);
     React.useEffect(() => {
-        if (!dustSyncing)
+        if (balancesWereLoadingRef.current && !balancesLoading && balances) {
+            setBalancesNetwork(network);
+        }
+        balancesWereLoadingRef.current = balancesLoading;
+    }, [balancesLoading, balances, network]);
+    const isNetworkSwitching = Boolean(balances) && balancesNetwork !== network;
+    React.useEffect(() => {
+        // Don't poll while switching networks: the held `dustSyncing` still reflects
+        // the previous network, and the new network's wallet is (re)syncing — extra
+        // polls would just pile redundant balance reads onto the switch.
+        if (!dustSyncing || isNetworkSwitching)
             return undefined;
         // Poll frequently while syncing so the gauge appears within a couple
         // seconds of dust completing (sync now finishes in ~4s). The effect stops
         // the moment `dustSyncing` flips false, so this adds no steady-state load.
         const id = setInterval(() => setDustPollTick((tick) => tick + 1), 2500);
         return () => clearInterval(id);
-    }, [dustSyncing]);
+    }, [dustSyncing, isNetworkSwitching]);
     // `registerDust` is a WaaS-only connector method (external/injected Midnight
     // wallets manage dust themselves). When the embedded wallet has no dust
     // registered yet, we surface a "Register DUST" button instead of the gauge.
     const isWaasWallet = Boolean(primaryWallet && walletConnectorCore.isDynamicWaasConnector(primaryWallet.connector));
     // True once registered. balance/cap can't tell us this on load (cap reads 0
     // on current wallet-client builds), so we track it after a register call to
-    // flip from the "Register DUST" prompt to the generating state.
+    // flip from the "Register DUST" prompt to the generating state. Dust is
+    // per-network, so a switch resets the flag — otherwise the register prompt
+    // stays hidden on a network where dust was never registered.
     const [dustRegistered, setDustRegistered] = React.useState(false);
+    React.useEffect(() => {
+        setDustRegistered(false);
+    }, [network]);
     // Returns the promise so <Button> shows its built-in spinner while the heavy
     // registerDust call runs.
     const handleRegisterDust = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -118,9 +148,11 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
             logger.logger.error('Failed to register dust', err);
         }
     });
-    // Only show the full skeleton on the very first load; background dust polls
-    // keep `balances` populated so the view never flashes back to a skeleton.
-    if ((isLoading || balancesLoading) && !balances) {
+    // Show the full skeleton on the very first load AND while switching networks
+    // (so the previous network's stale value isn't shown until the new one
+    // arrives). Background dust polls keep `balances` for the same network, so
+    // they never flash the skeleton.
+    if (((isLoading || balancesLoading) && !balances) || isNetworkSwitching) {
         return (jsxRuntime.jsx("div", { className: 'active-midnight-balance', children: jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
     }
     const dustFill = dustBalance

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isMidnightConnector, isMidnightWallet, isDynamicWaasConnector } from '@dynamic-labs/wallet-connector-core';
 import { Button } from '../../../../components/Button/Button.js';
@@ -57,7 +57,7 @@ const TABS = [
 ];
 const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
     const { t } = useTranslation();
-    const { primaryWallet } = useInternalDynamicContext();
+    const { primaryWallet, network } = useInternalDynamicContext();
     const [activeTab, setActiveTab] = useState('shielded');
     const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const enabled = Boolean(!isLoading && primaryWallet && isMidnightConnector(primaryWallet.connector));
@@ -73,27 +73,57 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
         }
         return primaryWallet.getFormattedBalances();
     }), {
-        deps: [walletAddress, primaryWallet, dustPollTick],
+        // `network` is in the deps so switching the picker re-fetches against the
+        // newly-selected network (the connector passes it through to the wallet
+        // client, which syncs/serves that network's balances). `balancesLoading`
+        // then drives the syncing/skeleton state while the new network syncs.
+        deps: [walletAddress, primaryWallet, dustPollTick, network],
         enabled,
     });
     const { dustBalance, shieldedTokenCount, unshieldedBalance, dustSyncing } = balances !== null && balances !== void 0 ? balances : {};
+    // Track which network the currently-held `balances` belong to. On a network
+    // switch `usePromise` keeps the previous network's data while it refetches, so
+    // without this we'd briefly show the old network's balance. We treat the view
+    // as "switching" until a fetch COMPLETES for the selected network — gated on
+    // the loading true→false transition: at the switch commit this effect still
+    // sees the previous fetch's settled `balancesLoading=false` in its closure,
+    // so an ungated update would re-arm immediately and let the stale value
+    // render. Background dust polls don't change `network`, so they never
+    // trigger this.
+    const [balancesNetwork, setBalancesNetwork] = useState(network);
+    const balancesWereLoadingRef = useRef(balancesLoading);
     useEffect(() => {
-        if (!dustSyncing)
+        if (balancesWereLoadingRef.current && !balancesLoading && balances) {
+            setBalancesNetwork(network);
+        }
+        balancesWereLoadingRef.current = balancesLoading;
+    }, [balancesLoading, balances, network]);
+    const isNetworkSwitching = Boolean(balances) && balancesNetwork !== network;
+    useEffect(() => {
+        // Don't poll while switching networks: the held `dustSyncing` still reflects
+        // the previous network, and the new network's wallet is (re)syncing — extra
+        // polls would just pile redundant balance reads onto the switch.
+        if (!dustSyncing || isNetworkSwitching)
             return undefined;
         // Poll frequently while syncing so the gauge appears within a couple
         // seconds of dust completing (sync now finishes in ~4s). The effect stops
         // the moment `dustSyncing` flips false, so this adds no steady-state load.
         const id = setInterval(() => setDustPollTick((tick) => tick + 1), 2500);
         return () => clearInterval(id);
-    }, [dustSyncing]);
+    }, [dustSyncing, isNetworkSwitching]);
     // `registerDust` is a WaaS-only connector method (external/injected Midnight
     // wallets manage dust themselves). When the embedded wallet has no dust
     // registered yet, we surface a "Register DUST" button instead of the gauge.
     const isWaasWallet = Boolean(primaryWallet && isDynamicWaasConnector(primaryWallet.connector));
     // True once registered. balance/cap can't tell us this on load (cap reads 0
     // on current wallet-client builds), so we track it after a register call to
-    // flip from the "Register DUST" prompt to the generating state.
+    // flip from the "Register DUST" prompt to the generating state. Dust is
+    // per-network, so a switch resets the flag — otherwise the register prompt
+    // stays hidden on a network where dust was never registered.
     const [dustRegistered, setDustRegistered] = useState(false);
+    useEffect(() => {
+        setDustRegistered(false);
+    }, [network]);
     // Returns the promise so <Button> shows its built-in spinner while the heavy
     // registerDust call runs.
     const handleRegisterDust = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -114,9 +144,11 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
             logger.error('Failed to register dust', err);
         }
     });
-    // Only show the full skeleton on the very first load; background dust polls
-    // keep `balances` populated so the view never flashes back to a skeleton.
-    if ((isLoading || balancesLoading) && !balances) {
+    // Show the full skeleton on the very first load AND while switching networks
+    // (so the previous network's stale value isn't shown until the new one
+    // arrives). Background dust polls keep `balances` for the same network, so
+    // they never flash the skeleton.
+    if (((isLoading || balancesLoading) && !balances) || isNetworkSwitching) {
         return (jsx("div", { className: 'active-midnight-balance', children: jsx(Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
     }
     const dustFill = dustBalance

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

@@ -128,12 +128,26 @@ const MIDNIGHT_ADDRESS_TYPE_UNSHIELDED = 'midnight_unshielded';
 const MIDNIGHT_ADDRESS_TYPE_DUST = 'midnight_dust';
 const MIDNIGHT_ADDRESS_TYPE_SHIELDED = 'midnight_shielded';
 /**
- * Gets a Midnight address from the wallet's additional addresses by type.
+ * Gets a Midnight address from the wallet's additional addresses by type,
+ * preferring the variant tagged with the selected network.
+ *
+ * Midnight stores one address per (type, network) — e.g. unshielded has both a
+ * mainnet and a preview encoding of the same key. When the user switches the
+ * network picker we surface the address tagged with that network. Legacy wallets
+ * created before per-network tagging have no `network`, so we fall back to the
+ * first address of the requested type.
+ *
  * @param type - The address type to find
+ * @param network - The selected network tag ('mainnet' | 'preview')
  * @param wallet - The wallet containing additional addresses
  * @returns The address string or undefined if not found
  */
-const getMidnightAddressByType = (type, wallet) => { var _a, _b; return (_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.additionalAddresses) === null || _a === void 0 ? void 0 : _a.find((addr) => addr.type === type)) === null || _b === void 0 ? void 0 : _b.address; };
+const getMidnightAddressByType = (type, network, wallet) => {
+    var _a, _b, _c;
+    const matches = (_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.additionalAddresses) === null || _a === void 0 ? void 0 : _a.filter((addr) => addr.type === type)) !== null && _b !== void 0 ? _b : [];
+    const networkMatch = matches.find((addr) => addr.network === network);
+    return (_c = (networkMatch !== null && networkMatch !== void 0 ? networkMatch : matches[0])) === null || _c === void 0 ? void 0 : _c.address;
+};
 /**
  * Component for displaying Midnight wallet addresses.
  * Midnight supports multiple address types:
@@ -141,12 +155,12 @@ const getMidnightAddressByType = (type, wallet) => { var _a, _b; return (_b = (_
  * - Dust: For gas/fee management
  * - Shielded: For private transfers (Phase 2)
  */
-const ActiveMidnightWalletAddresses = ({ menuOption, wallet, }) => {
+const ActiveMidnightWalletAddresses = ({ menuOption, wallet, network, }) => {
     var _a;
     const { t } = reactI18next.useTranslation();
-    const unshieldedAddress = (_a = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_UNSHIELDED, wallet)) !== null && _a !== void 0 ? _a : wallet === null || wallet === void 0 ? void 0 : wallet.address;
-    const dustAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_DUST, wallet);
-    const shieldedAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_SHIELDED, wallet);
+    const unshieldedAddress = (_a = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_UNSHIELDED, network, wallet)) !== null && _a !== void 0 ? _a : wallet === null || wallet === void 0 ? void 0 : wallet.address;
+    const dustAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_DUST, network, wallet);
+    const shieldedAddress = getMidnightAddressByType(MIDNIGHT_ADDRESS_TYPE_SHIELDED, network, wallet);
     // Collapse dust + shielded behind a toggle so the header shows only the
     // primary (unshielded) address by default — the user reveals the rest on
     // click, instead of all three being shown at once.

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

@@ -4,6 +4,12 @@ import { Wallet } from '../../../../../shared';
 type Props = {
     menuOption: MenuOption[];
     wallet?: Wallet;
+    /**
+     * The selected Midnight network tag ('mainnet' | 'preview'). Midnight is one
+     * wallet (one MPC key) that exposes a per-network address for each type, so we
+     * select the variant matching the network chosen in the picker.
+     */
+    network?: string;
 };
 /**
  * Component for displaying Midnight wallet addresses.
@@ -12,5 +18,5 @@ type Props = {
  * - Dust: For gas/fee management
  * - Shielded: For private transfers (Phase 2)
  */
-export declare const ActiveMidnightWalletAddresses: ({ menuOption, wallet, }: Props) => JSX.Element;
+export declare const ActiveMidnightWalletAddresses: ({ menuOption, wallet, network, }: Props) => JSX.Element;
 export {};