@dynamic-labs/sdk-react-core 4.5.1 → 4.5.2

package/src/lib/utils/functions/isNetworkUnsupported/isNetworkUnsupported.cjs

@@ -3,11 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var utils = require('@dynamic-labs/utils');
-
 // Network is not supported if:
 //   - its undefined
-//   - its not in evmNetworks
-const isNetworkUnsupported = (network, evmNetworks) => !(evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => network && element.chainId === utils.parseChainId(network)));
+//   - its not in supportedNetworks
+const isNetworkUnsupported = (network, supportedNetworks) => !(supportedNetworks === null || supportedNetworks === void 0 ? void 0 : supportedNetworks.find((supportedNetwork) => { var _a; return network && ((_a = supportedNetwork.chainId) === null || _a === void 0 ? void 0 : _a.toString()) === network.toString(); }));
 
 exports.isNetworkUnsupported = isNetworkUnsupported;

package/src/lib/utils/functions/isNetworkUnsupported/isNetworkUnsupported.d.ts

@@ -1,2 +1,2 @@
-import { EvmNetwork } from '@dynamic-labs/types';
-export declare const isNetworkUnsupported: (network: string | number | undefined, evmNetworks: EvmNetwork[]) => boolean;
+import { GenericNetwork } from '@dynamic-labs/types';
+export declare const isNetworkUnsupported: (network: string | number | undefined, supportedNetworks: GenericNetwork[]) => boolean;

package/src/lib/utils/functions/isNetworkUnsupported/isNetworkUnsupported.js

@@ -1,9 +1,7 @@
 'use client'
-import { parseChainId } from '@dynamic-labs/utils';
-
 // Network is not supported if:
 //   - its undefined
-//   - its not in evmNetworks
-const isNetworkUnsupported = (network, evmNetworks) => !(evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => network && element.chainId === parseChainId(network)));
+//   - its not in supportedNetworks
+const isNetworkUnsupported = (network, supportedNetworks) => !(supportedNetworks === null || supportedNetworks === void 0 ? void 0 : supportedNetworks.find((supportedNetwork) => { var _a; return network && ((_a = supportedNetwork.chainId) === null || _a === void 0 ? void 0 : _a.toString()) === network.toString(); }));
 
 export { isNetworkUnsupported };

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -4,11 +4,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var reactI18next = require('react-i18next');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
+require('react');
 require('../../events/dynamicEvents.cjs');
 require('../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/utils');
@@ -107,17 +107,15 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 const CollectUserDataView = () => {
     var _a;
     const { appName, projectSettings, network, selectedWalletConnector: walletConnector, handleLogOut, onboardingImageUrl, userWithMissingInfo, } = useInternalDynamicContext.useInternalDynamicContext();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const nameService = useFetchNameService.useFetchNameService();
     const { t } = reactI18next.useTranslation();
     if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
     const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: walletConnector, showNetworkName: true, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
                     'collect-user-data__form--error': shouldDisplayWrongNetworkState,
                 }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -1,10 +1,10 @@
 'use client'
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
+import 'react';
 import '../../events/dynamicEvents.js';
 import '../../../../_virtual/_tslib.js';
 import '@dynamic-labs/utils';
@@ -103,17 +103,15 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 const CollectUserDataView = () => {
     var _a;
     const { appName, projectSettings, network, selectedWalletConnector: walletConnector, handleLogOut, onboardingImageUrl, userWithMissingInfo, } = useInternalDynamicContext();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const nameService = useFetchNameService();
     const { t } = useTranslation();
     if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
     const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsx(NetworkPicker, { currentNetwork: network, connector: walletConnector, showNetworkName: true, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
                     'collect-user-data__form--error': shouldDisplayWrongNetworkState,
                 }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
+require('react');
 require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
@@ -104,7 +104,6 @@ const NetworkNotSupported = () => {
     const { onboardingImageUrl, selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
     const { currentNetwork } = useNetworkNotSupported.useNetworkNotSupported();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     if (!walletConnector) {
         return null;
     }
@@ -118,14 +117,14 @@ const NetworkNotSupported = () => {
             logger.logger.debug(e);
         }
     });
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const enabledNetworks = walletConnector.getEnabledNetworks();
     const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
         network: currentNetwork,
         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', copykey: 'dyn_network_not_supported.warning_message', 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 }, icon: walletConnector.metadata.icon, 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: currentNetwork, 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', copykey: 'dyn_network_not_supported.subtitle', 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 }, icon: walletConnector.metadata.icon, walletKey: walletConnector.key }) }), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", { className: 'network-not-supported__network-container', children: enabledNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: currentNetwork, connector: walletConnector, 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', copykey: 'dyn_network_not_supported.subtitle', children: t('dyn_network_not_supported.subtitle') }) }), enabledNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: enabledNetworks[0].networkId, networkName: enabledNetworks[0].vanityName || enabledNetworks[0].name, networkIconUrl: enabledNetworks[0].iconUrls[0] }))] })] }));
 };
 
 exports.NetworkNotSupported = NetworkNotSupported;

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

@@ -1,12 +1,12 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
+import 'react';
 import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -100,7 +100,6 @@ const NetworkNotSupported = () => {
     const { onboardingImageUrl, selectedWalletConnector: walletConnector } = useInternalDynamicContext();
     const { t } = useTranslation();
     const { currentNetwork } = useNetworkNotSupported();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     if (!walletConnector) {
         return null;
     }
@@ -114,14 +113,14 @@ const NetworkNotSupported = () => {
             logger.debug(e);
         }
     });
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const enabledNetworks = walletConnector.getEnabledNetworks();
     const _isSupportedNetwork = isSupportedNetwork({
         network: currentNetwork,
         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', copykey: 'dyn_network_not_supported.warning_message', 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 }, icon: walletConnector.metadata.icon, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsx(NetworkPicker, { currentNetwork: currentNetwork, 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', copykey: 'dyn_network_not_supported.subtitle', 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 }, icon: walletConnector.metadata.icon, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: enabledNetworks.length > 1 && (jsx(NetworkPicker, { currentNetwork: currentNetwork, connector: walletConnector, 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', copykey: 'dyn_network_not_supported.subtitle', children: t('dyn_network_not_supported.subtitle') }) }), enabledNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: enabledNetworks[0].networkId, networkName: enabledNetworks[0].vanityName || enabledNetworks[0].name, networkIconUrl: enabledNetworks[0].iconUrls[0] }))] })] }));
 };
 
 export { NetworkNotSupported };

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

@@ -114,12 +114,11 @@ var ActiveBitcoinWalletAddresses = require('./ActiveBitcoinWalletAddresses/Activ
 var ActiveWalletAddress = require('./ActiveWalletAddress/ActiveWalletAddress.cjs');
 var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
-const ICON_SIZE = 28;
+const ICON_SIZE = 32;
 const DROPDOWN_ICON_SIZE = 16;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
     var _a, _b, _c, _d;
     const { t } = reactI18next.useTranslation();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
     const [hasShadow, setHasShadow] = React.useState(false);
     const [detailsCardOpen, setDetailsCardOpen] = React.useState(false);
@@ -143,6 +142,9 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isBitcoin = primaryWallet && walletConnectorCore.isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
     const isEmbeddedWallet = Boolean(wallet && ((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')));
+    const openDetailsCard = React.useCallback(() => {
+        setTimeout(() => setDetailsCardOpen(true), 0);
+    }, []);
     const options = [
         {
             Icon: jsxRuntime.jsx(copy.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE }),
@@ -152,9 +154,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         },
         {
             Icon: (jsxRuntime.jsx(eyeOutline.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
-            callback: () => {
-                setDetailsCardOpen(true);
-            },
+            callback: openDetailsCard,
             hide: !address,
             text: t('dyn_active_wallet_info.options.view_address'),
         },
@@ -173,9 +173,6 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             text: t('dyn_active_wallet_info.options.export'),
         },
     ];
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
-        [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     const shouldHideNetwork = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.hideNetworkInDynamicWidget;
     const activeWalletAddress = () => {
@@ -218,7 +215,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     }
     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', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar__name-service', 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, { iconSize: ICON_SIZE }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsx("div", { className: classNames.classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), address && (jsxRuntime.jsx(WalletDetailsCard.WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (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, isLoading: isLoading }))] })] }), headerAlert && (jsxRuntime.jsx(Alert.Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
+                                        }), children: activeWalletAddress() }), address && (jsxRuntime.jsx(WalletDetailsCard.WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsxRuntime.jsx(Alert.Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isBitcoinConnector } from '@dynamic-labs/wallet-connector-core';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
@@ -110,12 +110,11 @@ import { ActiveBitcoinWalletAddresses } from './ActiveBitcoinWalletAddresses/Act
 import { ActiveWalletAddress } from './ActiveWalletAddress/ActiveWalletAddress.js';
 import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
-const ICON_SIZE = 28;
+const ICON_SIZE = 32;
 const DROPDOWN_ICON_SIZE = 16;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
     var _a, _b, _c, _d;
     const { t } = useTranslation();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
     const [hasShadow, setHasShadow] = useState(false);
     const [detailsCardOpen, setDetailsCardOpen] = useState(false);
@@ -139,6 +138,9 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isBitcoin = primaryWallet && isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
     const isEmbeddedWallet = Boolean(wallet && ((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')));
+    const openDetailsCard = useCallback(() => {
+        setTimeout(() => setDetailsCardOpen(true), 0);
+    }, []);
     const options = [
         {
             Icon: jsx(SvgCopy, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE }),
@@ -148,9 +150,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         },
         {
             Icon: (jsx(SvgEyeOutline, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
-            callback: () => {
-                setDetailsCardOpen(true);
-            },
+            callback: openDetailsCard,
             hide: !address,
             text: t('dyn_active_wallet_info.options.view_address'),
         },
@@ -169,9 +169,6 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             text: t('dyn_active_wallet_info.options.export'),
         },
     ];
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
-        [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     const shouldHideNetwork = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.hideNetworkInDynamicWidget;
     const activeWalletAddress = () => {
@@ -214,7 +211,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     }
     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', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar__name-service', 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, { iconSize: ICON_SIZE }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsx("div", { className: classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), address && (jsx(WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (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, isLoading: isLoading }))] })] }), headerAlert && (jsx(Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
+                                        }), children: activeWalletAddress() }), address && (jsx(WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsx(Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
 };
 
 export { ActiveWalletInformation };

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

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var AccountControl = require('../AccountControl/AccountControl.cjs');
+require('react');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
@@ -95,16 +95,12 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const DynamicNav = () => {
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const { primaryWallet, projectSettings, network } = useInternalDynamicContext.useInternalDynamicContext();
     const { inlineControlsRef } = DynamicWidgetContext.useWidgetContext();
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
     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, { 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' }) })] }) }));
+    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, 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' }) })), 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

@@ -1,7 +1,7 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
 import { AccountControl } from '../AccountControl/AccountControl.js';
+import 'react';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
@@ -91,16 +91,12 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const DynamicNav = () => {
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const { primaryWallet, projectSettings, network } = useInternalDynamicContext();
     const { inlineControlsRef } = useWidgetContext();
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
     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, { 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' }) })] }) }));
+    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, 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' }) })), 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, {}) }));