@dynamic-labs/sdk-react-core 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -68,7 +68,7 @@ var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var SelectNetworkButton = require('../../components/SelectNetworkButton/SelectNetworkButton.cjs');
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
@@ -108,10 +108,13 @@ const NetworkNotSupported = () => {
         }
     });
     const evmNetworks = walletConnector.evmNetworks || [];
-    const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
+    const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
+        network: walletConnectorNetwork,
+        walletConnector,
+    });
     return (jsxRuntime.jsxs("div", { className: 'network-not-supported', "data-testid": 'network-not-supported', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported', children: t('dyn_network_not_supported.warning_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('network-not-supported__content-container', {
                     'network-not-supported__content-container--error': !_isSupportedNetwork,
-                }), children: [jsxRuntime.jsx("div", { className: 'network-not-supported__img-container', children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsxRuntime.jsx("div", { className: 'network-not-supported__welcome-container', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
+                }), children: [jsxRuntime.jsx("div", { className: 'network-not-supported__img-container', children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: walletConnectorNetwork, evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsxRuntime.jsx("div", { className: 'network-not-supported__welcome-container', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
 };
 
 exports.NetworkNotSupported = NetworkNotSupported;

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -64,7 +64,7 @@ import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { SelectNetworkButton } from '../../components/SelectNetworkButton/SelectNetworkButton.js';
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
     const { t } = useTranslation();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
@@ -104,10 +104,13 @@ const NetworkNotSupported = () => {
         }
     });
     const evmNetworks = walletConnector.evmNetworks || [];
-    const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
+    const _isSupportedNetwork = isSupportedNetwork({
+        network: walletConnectorNetwork,
+        walletConnector,
+    });
     return (jsxs("div", { className: 'network-not-supported', "data-testid": 'network-not-supported', children: [onboardingImageUrl && (jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported', children: t('dyn_network_not_supported.warning_message') })), jsxs("div", { className: classNames('network-not-supported__content-container', {
                     'network-not-supported__content-container--error': !_isSupportedNetwork,
-                }), children: [jsx("div", { className: 'network-not-supported__img-container', children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsx("div", { className: 'network-not-supported__welcome-container', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
+                }), children: [jsx("div", { className: 'network-not-supported__img-container', children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsx(NetworkPicker, { currentNetwork: walletConnectorNetwork, evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsx("div", { className: 'network-not-supported__welcome-container', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
 };
 
 export { NetworkNotSupported };

package/src/lib/views/Passkey/PasskeyIntroView/PasskeyIntroView.cjs

@@ -116,7 +116,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         index$1.storeAuthToken(jwt);
         setUser(createUserProfile.createUserProfile(decodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === 'turnkey');
+        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

package/src/lib/views/Passkey/PasskeyIntroView/PasskeyIntroView.js

@@ -112,7 +112,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         storeAuthToken(jwt);
         setUser(createUserProfile(decodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === 'turnkey');
+        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

package/src/lib/views/Passkey/utils/passkeyRecovery/passkeyRecovery.cjs

@@ -95,7 +95,7 @@ const completePasskeyRecovery = ({ authToken, userEmail, environmentId, wallet,
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === 'turnkey')) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
+    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
     if (!organizationId) {
         throw new utils.DynamicError('Invalid token!');
     }

package/src/lib/views/Passkey/utils/passkeyRecovery/passkeyRecovery.js

@@ -91,7 +91,7 @@ const completePasskeyRecovery = ({ authToken, userEmail, environmentId, wallet,
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === 'turnkey')) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
+    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
     if (!organizationId) {
         throw new DynamicError('Invalid token!');
     }

package/src/lib/views/QrCodeView/QrCodeContainer/QrCodeContainer.cjs

@@ -60,10 +60,10 @@ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCa
 var CopyButton = require('../../../components/CopyButton/CopyButton.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TextButton = require('../../../components/TextButton/TextButton.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-var TextButton = require('../../../components/TextButton/TextButton.cjs');
 
 const QrCodeContainer = ({ accentColor, walletKey, walletName, qrcodeValue, Icon: WalletIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('qrcode-container__container', {
         'qrcode-container__container--message': showQrCodeMessage,

package/src/lib/views/QrCodeView/QrCodeContainer/QrCodeContainer.js

@@ -56,10 +56,10 @@ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCar
 import { CopyButton } from '../../../components/CopyButton/CopyButton.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { TextButton } from '../../../components/TextButton/TextButton.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import { TextButton } from '../../../components/TextButton/TextButton.js';
 
 const QrCodeContainer = ({ accentColor, walletKey, walletName, qrcodeValue, Icon: WalletIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, }) => (jsxs("div", { className: classNames('qrcode-container__container', {
         'qrcode-container__container--message': showQrCodeMessage,

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

@@ -8,11 +8,11 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var viem = require('viem');
 var utils = require('@dynamic-labs/utils');
-var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
+require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../utils/constants/colors.cjs');
@@ -63,6 +63,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 var TransactionStatusLayout = require('../../components/TransactionStatusLayout/TransactionStatusLayout.cjs');
+var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
 var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
 var TransactionStage = require('./components/TransactionStage/TransactionStage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
@@ -87,9 +88,10 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
     const networkIcon = evmNetwork && (jsxRuntime.jsx("img", { src: evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls[0], alt: `${evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name} icon` }));
     const networkName = (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.vanityName) || (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name);
     const networkCurrencyDecimals = evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.nativeCurrency.decimals;
-    const ChainIconComponent = getChainIcon.getChainIcon(primaryWallet.chain);
-    const chainInfo = walletConnectorCore.getChainInfo(primaryWallet.chain);
-    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain.useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon.getChainIcon(chainName);
+    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsxRuntime.jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsxRuntime.jsx(ChainIconComponent, {})) }));
     const [currencySymbol = ''] = useFetchCurrency.useFetchCurrency(primaryWallet.connector);
     const buildFormStage = () => (jsxRuntime.jsx(SendBalancePageLayout.SendBalancePageLayout, { initialValues: {
             amount: value === null ? '' : formatBigNumber.formatBigNumber(value),
@@ -131,10 +133,9 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             } }));
     };
     const buildSuccessState = () => {
-        var _a;
         if (value === null)
             return null;
-        return (jsxRuntime.jsx(TransactionStatusLayout.TransactionStatusLayout, { amount: formatBigNumber.formatBigNumber(value), destinationAddress: recipientAddress, networkCurrency: currencySymbol, networkName: (_a = chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName) !== null && _a !== void 0 ? _a : '', NetworkIcon: chainIcon, onClickClose: onClickClose, onDone: () => onDone === null || onDone === void 0 ? void 0 : onDone(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter }));
+        return (jsxRuntime.jsx(TransactionStatusLayout.TransactionStatusLayout, { amount: formatBigNumber.formatBigNumber(value), destinationAddress: recipientAddress, networkCurrency: currencySymbol, networkName: chainName || '', NetworkIcon: chainIcon, onClickClose: onClickClose, onDone: () => onDone === null || onDone === void 0 ? void 0 : onDone(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter }));
     };
     const getCurrentView = () => {
         switch (stage) {

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

@@ -4,11 +4,11 @@ import { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseEther } from 'viem';
 import { DynamicError } from '@dynamic-labs/utils';
-import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
 import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
+import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../utils/constants/colors.js';
@@ -59,6 +59,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import { TransactionStatusLayout } from '../../components/TransactionStatusLayout/TransactionStatusLayout.js';
+import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
 import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
 import { TransactionStage } from './components/TransactionStage/TransactionStage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
@@ -83,9 +84,10 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
     const networkIcon = evmNetwork && (jsx("img", { src: evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls[0], alt: `${evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name} icon` }));
     const networkName = (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.vanityName) || (evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.name);
     const networkCurrencyDecimals = evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.nativeCurrency.decimals;
-    const ChainIconComponent = getChainIcon(primaryWallet.chain);
-    const chainInfo = getChainInfo(primaryWallet.chain);
-    const chainIcon = (jsx(Icon, { size: 'small', children: jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon(chainName);
+    const chainIcon = (jsx(Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsx(ChainIconComponent, {})) }));
     const [currencySymbol = ''] = useFetchCurrency(primaryWallet.connector);
     const buildFormStage = () => (jsx(SendBalancePageLayout, { initialValues: {
             amount: value === null ? '' : formatBigNumber(value),
@@ -127,10 +129,9 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             } }));
     };
     const buildSuccessState = () => {
-        var _a;
         if (value === null)
             return null;
-        return (jsx(TransactionStatusLayout, { amount: formatBigNumber(value), destinationAddress: recipientAddress, networkCurrency: currencySymbol, networkName: (_a = chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.blockchainName) !== null && _a !== void 0 ? _a : '', NetworkIcon: chainIcon, onClickClose: onClickClose, onDone: () => onDone === null || onDone === void 0 ? void 0 : onDone(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter }));
+        return (jsx(TransactionStatusLayout, { amount: formatBigNumber(value), destinationAddress: recipientAddress, networkCurrency: currencySymbol, networkName: chainName || '', NetworkIcon: chainIcon, onClickClose: onClickClose, onDone: () => onDone === null || onDone === void 0 ? void 0 : onDone(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter }));
     };
     const getCurrentView = () => {
         switch (stage) {

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

@@ -64,6 +64,7 @@ require('../../components/UserProfile/parts/UserProfileField/components/Verified
 require('@dynamic-labs/types');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
 var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
 var useTransactionGas = require('./hooks/useTransactionGas/useTransactionGas.cjs');
 var useTransactionTotal = require('./hooks/useTransactionTotal/useTransactionTotal.cjs');
@@ -138,8 +139,10 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         isTransactionToAddressLoading ||
         isTransactionFromAddressLoading ||
         isGasSponsoredLoading;
-    const ChainIconComponent = getChainIcon.getChainIcon(primaryWallet.chain);
-    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain.useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon.getChainIcon(chainName);
+    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsxRuntime.jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsxRuntime.jsx(ChainIconComponent, {})) }));
     const errorMessage = transactionError && transactionErrorMessage.transactionErrorMessage(transactionError);
     const missingFunds = React.useMemo(() => {
         if (balance === undefined || total === undefined)
@@ -152,6 +155,8 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = React.useMemo(() => {
+        if (isTransactionLoading || Boolean(errorMessage))
+            return null;
         if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
@@ -163,7 +168,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, transactionError]);
+    }, [
+        currencySymbol,
+        hasInsufficientFunds,
+        missingFunds,
+        t,
+        transactionError,
+        isTransactionLoading,
+        errorMessage,
+    ]);
     return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
                     shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber.formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
                             ? t('dyn_send_transaction.confirmation.data.gas_estimate')

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

@@ -60,6 +60,7 @@ import '../../components/UserProfile/parts/UserProfileField/components/VerifiedE
 import '@dynamic-labs/types';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
 import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
 import { useTransactionGas } from './hooks/useTransactionGas/useTransactionGas.js';
 import { useTransactionTotal } from './hooks/useTransactionTotal/useTransactionTotal.js';
@@ -134,8 +135,10 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         isTransactionToAddressLoading ||
         isTransactionFromAddressLoading ||
         isGasSponsoredLoading;
-    const ChainIconComponent = getChainIcon(primaryWallet.chain);
-    const chainIcon = (jsx(Icon, { size: 'small', children: jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon(chainName);
+    const chainIcon = (jsx(Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsx(ChainIconComponent, {})) }));
     const errorMessage = transactionError && transactionErrorMessage(transactionError);
     const missingFunds = useMemo(() => {
         if (balance === undefined || total === undefined)
@@ -148,6 +151,8 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = useMemo(() => {
+        if (isTransactionLoading || Boolean(errorMessage))
+            return null;
         if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsx(Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
@@ -159,7 +164,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, transactionError]);
+    }, [
+        currencySymbol,
+        hasInsufficientFunds,
+        missingFunds,
+        t,
+        transactionError,
+        isTransactionLoading,
+        errorMessage,
+    ]);
     return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress(transactionFromAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
                     shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxs(Fragment, { children: [jsx(TransactionRow, { label: isGasEstimated
                             ? t('dyn_send_transaction.confirmation.data.gas_estimate')

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

@@ -31,6 +31,9 @@ const transactionErrorMessage = (error) => {
     if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (utils.InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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

@@ -1,4 +1,4 @@
-import { TransactionGasCannotBeSponsoredError } from '@dynamic-labs/utils';
+import { TransactionGasCannotBeSponsoredError, InsufficientFundsError } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -27,6 +27,9 @@ const transactionErrorMessage = (error) => {
     if (TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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

@@ -93,8 +93,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -115,7 +115,7 @@ const ActiveWalletInformation = () => {
         [];
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

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

@@ -89,8 +89,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -111,7 +111,7 @@ const ActiveWalletInformation = () => {
         [];
     return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 export { ActiveWalletInformation };

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

@@ -62,7 +62,7 @@ require('react-focus-lock');
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext.useInternalDynamicContext();
     const { inlineControlsRef } = DynamicWidgetContext.useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -70,7 +70,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsx(DynamicNav, {}) }));
 

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

@@ -58,7 +58,7 @@ import 'react-focus-lock';
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext();
     const { inlineControlsRef } = useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -66,7 +66,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsx(ShadowDOM, { children: jsx(DynamicNav, {}) }));
 

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

@@ -61,7 +61,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext.useInternalDynamicContext();
     const [error, setError] = React.useState();
     const { email } = walletConnector;
     if (!email) {
@@ -73,7 +73,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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

@@ -57,7 +57,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext();
     const [error, setError] = useState();
     const { email } = walletConnector;
     if (!email) {
@@ -69,7 +69,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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

@@ -69,7 +69,7 @@ require('react-focus-lock');
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -118,7 +118,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: 'wallet__row', children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) })] })) : (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

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

@@ -65,7 +65,7 @@ import 'react-focus-lock';
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -114,7 +114,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: 'wallet__row', children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress(address, 3, 3) })] })) : (jsx(Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs

@@ -64,7 +64,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const onUseActiveWalletClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -75,13 +75,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxRuntime.jsxs(Button.Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js

@@ -60,7 +60,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext();
     const onUseActiveWalletClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -71,13 +71,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxs(Fragment, { children: [jsxs(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxs(Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsx(Icon, { size: 'xsmall', children: jsx(WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));