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

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.cjs

@@ -5,26 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
-var EvmNetworkControl = require('../EvmNetworkControl/EvmNetworkControl.cjs');
+var NetworkSwitchControl = require('../NetworkSwitchControl/NetworkSwitchControl.cjs');
 var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs');
 var NonNetworkSwitchingSupportedControl = require('../NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs');
 
-const NetworkControl = ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+const NetworkControl = ({ loading, walletConnector, buttonClassName, network, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+    const enabledNetworks = walletConnector.getEnabledNetworks();
     // Checks when switching to EVM if the network is still loading.
     // if network is a string the user is switching chains
     // this prevents the network control from flickering
-    const chainSwitchLoading = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === sdkApiCore.ChainEnum.Evm &&
+    const chainSwitchLoading = walletConnector.connectedChain === sdkApiCore.ChainEnum.Evm &&
         typeof network === 'string';
     if (loading || chainSwitchLoading) {
         return jsxRuntime.jsx(NetworkControlSkeleton.NetworkControlSkeleton, { className: buttonClassName });
     }
-    else if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) &&
-        !walletConnector.supportsNetworkSwitching()) {
+    if (!walletConnector.supportsNetworkSwitching()) {
         return (jsxRuntime.jsx(NonNetworkSwitchingSupportedControl.NonNetworkSwitchingSupportedControl, { className: buttonClassName, showNetworkName: showNetworkName, walletConnector: walletConnector }));
     }
-    else {
-        return (jsxRuntime.jsx(EvmNetworkControl.EvmNetworkControl, { showNetworkName: showNetworkName, evmNetworks: evmNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
-    }
+    return (jsxRuntime.jsx(NetworkSwitchControl.NetworkSwitchControl, { showNetworkName: showNetworkName, enabledNetworks: enabledNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
 };
 
 exports.NetworkControl = NetworkControl;

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.d.ts

@@ -1,16 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
-import { EvmNetwork } from '@dynamic-labs/types';
 import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 type Props = {
     activeClassName?: string;
     buttonClassName?: string;
-    evmNetworks?: EvmNetwork[];
     isOpen: boolean;
     loading: boolean;
     network: number | string | undefined;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     showNetworkName?: boolean;
-    walletConnector: WalletConnector | undefined;
+    walletConnector: WalletConnector;
 };
-export declare const NetworkControl: ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }: Props) => JSX.Element;
+export declare const NetworkControl: ({ loading, walletConnector, buttonClassName, network, activeClassName, isOpen, setIsOpen, showNetworkName, }: Props) => JSX.Element;
 export {};

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.js

@@ -1,26 +1,24 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
 import { ChainEnum } from '@dynamic-labs/sdk-api-core';
-import { EvmNetworkControl } from '../EvmNetworkControl/EvmNetworkControl.js';
+import { NetworkSwitchControl } from '../NetworkSwitchControl/NetworkSwitchControl.js';
 import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.js';
 import { NonNetworkSwitchingSupportedControl } from '../NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.js';
 
-const NetworkControl = ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+const NetworkControl = ({ loading, walletConnector, buttonClassName, network, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+    const enabledNetworks = walletConnector.getEnabledNetworks();
     // Checks when switching to EVM if the network is still loading.
     // if network is a string the user is switching chains
     // this prevents the network control from flickering
-    const chainSwitchLoading = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === ChainEnum.Evm &&
+    const chainSwitchLoading = walletConnector.connectedChain === ChainEnum.Evm &&
         typeof network === 'string';
     if (loading || chainSwitchLoading) {
         return jsx(NetworkControlSkeleton, { className: buttonClassName });
     }
-    else if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) &&
-        !walletConnector.supportsNetworkSwitching()) {
+    if (!walletConnector.supportsNetworkSwitching()) {
         return (jsx(NonNetworkSwitchingSupportedControl, { className: buttonClassName, showNetworkName: showNetworkName, walletConnector: walletConnector }));
     }
-    else {
-        return (jsx(EvmNetworkControl, { showNetworkName: showNetworkName, evmNetworks: evmNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
-    }
+    return (jsx(NetworkSwitchControl, { showNetworkName: showNetworkName, enabledNetworks: enabledNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
 };
 
 export { NetworkControl };

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/NetworkControlSkeleton.cjs

@@ -53,6 +53,7 @@ require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 require('../../../../context/FooterAnimationContext/index.cjs');

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/NetworkControlSkeleton.js

@@ -49,6 +49,7 @@ import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import '../../../../context/FooterAnimationContext/index.js';

package/src/lib/components/NetworkPicker/components/NetworkDropdown/NetworkDropdown.cjs

@@ -0,0 +1,67 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('../../../MenuList/Dropdown/Dropdown.cjs');
+var MenuList = require('../../../MenuList/MenuList/MenuList.cjs');
+var NetworkAction = require('../NetworkAction/NetworkAction.cjs');
+var isNetworkUnsupported = require('../../../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.cjs');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+require('@dynamic-labs/sdk-api-core');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/consts/index.cjs');
+
+const NetworkDropdown = ({ anchorRef, connector, customCallbackOnSuccess, setIsNetworkPickerOpen, isNetworkPickerOpen, currentNetwork, className, checkboxClassName, }) => {
+    const [newNetworkId, setNewNetworkId] = React.useState(undefined);
+    const { data: wcSupportedWalletNetworks } = usePromise.usePromise(() => walletConnectorCore.isWalletConnectConnector(connector)
+        ? connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks()
+        : Promise.resolve(undefined), {
+        deps: [connector, isNetworkPickerOpen],
+        enabled: connector.isWalletConnect,
+        initialData: undefined,
+    });
+    if (!connector) {
+        return null;
+    }
+    const enabledNetworks = connector.getEnabledNetworks();
+    const shouldAllowOpenDropdown = isNetworkUnsupported.isNetworkUnsupported(currentNetwork, enabledNetworks) ||
+        enabledNetworks.length > 1;
+    if (!shouldAllowOpenDropdown) {
+        return null;
+    }
+    const handleNetworkChange = (networkId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setNewNetworkId(networkId);
+        try {
+            yield connector.switchNetwork({
+                networkChainId: networkId,
+            });
+            customCallbackOnSuccess === null || customCallbackOnSuccess === void 0 ? void 0 : customCallbackOnSuccess();
+        }
+        catch (error) {
+            /* istanbul ignore next */
+            logger.logger.debug(error);
+        }
+        finally {
+            setNewNetworkId(undefined);
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    return (jsxRuntime.jsx(MenuList.MenuList, { className: className, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
+            anchorOrigin: 'bottom-left',
+            anchorRef,
+        }, mobileTitle: 'Select network', children: enabledNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: currentNetwork, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: wcSupportedWalletNetworks &&
+                !wcSupportedWalletNetworks.includes(`${networkId}`) }, networkId))) }));
+};
+
+exports.NetworkDropdown = NetworkDropdown;

package/src/lib/components/NetworkPicker/components/NetworkDropdown/NetworkDropdown.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+type NetworkDropdownProps = {
+    anchorRef: RefObject<HTMLDivElement>;
+    connector: WalletConnector;
+    customCallbackOnSuccess?: () => void;
+    setIsNetworkPickerOpen: Dispatch<SetStateAction<boolean>>;
+    isNetworkPickerOpen: boolean;
+    className?: string;
+    checkboxClassName?: string;
+    currentNetwork: string | number | undefined;
+};
+export declare const NetworkDropdown: ({ anchorRef, connector, customCallbackOnSuccess, setIsNetworkPickerOpen, isNetworkPickerOpen, currentNetwork, className, checkboxClassName, }: NetworkDropdownProps) => JSX.Element | null;
+export {};

package/src/lib/components/NetworkPicker/components/NetworkDropdown/NetworkDropdown.js

@@ -0,0 +1,63 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { isWalletConnectConnector } from '@dynamic-labs/wallet-connector-core';
+import '../../../MenuList/Dropdown/Dropdown.js';
+import { MenuList } from '../../../MenuList/MenuList/MenuList.js';
+import { NetworkAction } from '../NetworkAction/NetworkAction.js';
+import { isNetworkUnsupported } from '../../../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.js';
+import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
+import '@dynamic-labs/sdk-api-core';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '../../../../shared/consts/index.js';
+
+const NetworkDropdown = ({ anchorRef, connector, customCallbackOnSuccess, setIsNetworkPickerOpen, isNetworkPickerOpen, currentNetwork, className, checkboxClassName, }) => {
+    const [newNetworkId, setNewNetworkId] = useState(undefined);
+    const { data: wcSupportedWalletNetworks } = usePromise(() => isWalletConnectConnector(connector)
+        ? connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks()
+        : Promise.resolve(undefined), {
+        deps: [connector, isNetworkPickerOpen],
+        enabled: connector.isWalletConnect,
+        initialData: undefined,
+    });
+    if (!connector) {
+        return null;
+    }
+    const enabledNetworks = connector.getEnabledNetworks();
+    const shouldAllowOpenDropdown = isNetworkUnsupported(currentNetwork, enabledNetworks) ||
+        enabledNetworks.length > 1;
+    if (!shouldAllowOpenDropdown) {
+        return null;
+    }
+    const handleNetworkChange = (networkId) => __awaiter(void 0, void 0, void 0, function* () {
+        setNewNetworkId(networkId);
+        try {
+            yield connector.switchNetwork({
+                networkChainId: networkId,
+            });
+            customCallbackOnSuccess === null || customCallbackOnSuccess === void 0 ? void 0 : customCallbackOnSuccess();
+        }
+        catch (error) {
+            /* istanbul ignore next */
+            logger.debug(error);
+        }
+        finally {
+            setNewNetworkId(undefined);
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    return (jsx(MenuList, { className: className, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
+            anchorOrigin: 'bottom-left',
+            anchorRef,
+        }, mobileTitle: 'Select network', children: enabledNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: currentNetwork, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: wcSupportedWalletNetworks &&
+                !wcSupportedWalletNetworks.includes(`${networkId}`) }, networkId))) }));
+};
+
+export { NetworkDropdown };

package/src/lib/components/NetworkPicker/components/NetworkDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './NetworkDropdown';

package/src/lib/components/NetworkPicker/components/{EvmNetworkControl/EvmNetworkControl.cjs → NetworkSwitchControl/NetworkSwitchControl.cjs}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@dynamic-labs/utils');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('react');
 var stroke = require('../../../../shared/assets/stroke.cjs');
 require('@dynamic-labs/iconic');
@@ -17,7 +18,7 @@ require('../../../../../../_virtual/_tslib.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
-require('@dynamic-labs/wallet-connector-core');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
@@ -54,6 +55,7 @@ require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 var Typography = require('../../../Typography/Typography.cjs');
@@ -97,54 +99,44 @@ require('../../../IsBrowser/IsBrowser.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 
-/**
- * Icon and name to use when network is undefined and connector is unavailable
- */
-const fallbackChainData = {
-    iconUrl: 'https://app.dynamic.xyz/assets/networks/eth.svg',
-    name: 'Ethereum',
-};
-const EvmNetworkControl = ({ evmNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
-    var _a;
-    const currentEvmNetwork = evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => network && element.chainId === utils.parseChainId(network));
-    if (evmNetworks && !evmNetworks.length) {
-        return (jsxRuntime.jsx("div", { "data-testid": 'EvmNetworkControl', className: classNames.classNames('evm-network-control__container evm-network-control__container--error', className), children: jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }) }));
+const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
+    var _a, _b;
+    const currentNetwork = enabledNetworks.find((element) => network && element.chainId === utils.parseChainId(network));
+    if (!enabledNetworks.length) {
+        return (jsxRuntime.jsx("div", { "data-testid": 'NetworkSwitchControl', className: classNames.classNames('network-switch-control__container network-switch-control__container--error', className), children: jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }) }));
     }
     if (!network) {
-        // If this connector is not available, just show a generic "Ethereum" network
-        // As it will never be able to load a network
-        if (walletConnector && !walletConnector.isAvailable) {
-            return (jsxRuntime.jsxs("div", { "data-testid": 'EvmNetworkControl', className: classNames.classNames(className, {
-                    'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
-                }), children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: fallbackChainData.iconUrl, alt: `${fallbackChainData.name} icon` }) }), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: fallbackChainData.name }))] }));
+        // If this connector is not available, just show the chain name and icon
+        // since it will never be able to load a network
+        if (!walletConnector.isAvailable) {
+            const FallbackChainIcon = getChainIcon.getChainIcon(walletConnector.connectedChain);
+            const fallbackChainName = (_a = walletConnectorCore.getChainInfo(walletConnector.connectedChain)) === null || _a === void 0 ? void 0 : _a.displayName;
+            return (jsxRuntime.jsxs("div", { "data-testid": 'NetworkSwitchControl', className: classNames.classNames(className, 'network-switch-control__container'), children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(FallbackChainIcon, {}) }), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: fallbackChainName }))] }));
         }
-        return (jsxRuntime.jsx("div", { "data-testid": 'EvmNetworkControl', className: classNames.classNames('evm-network-control__container', className), children: jsxRuntime.jsx(NetworkControlSkeleton.NetworkControlSkeleton, {}) }));
+        return (jsxRuntime.jsx("div", { "data-testid": 'NetworkSwitchControl', className: classNames.classNames('network-switch-control__container', className), children: jsxRuntime.jsx(NetworkControlSkeleton.NetworkControlSkeleton, {}) }));
     }
-    if ((evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) === 1) {
-        const unsupportedNetworkClassName = classNames.classNames(className, 'evm-network-control__container', 'evm-network-control__container--error', {
+    if (enabledNetworks.length === 1) {
+        const unsupportedNetworkClassName = classNames.classNames(className, 'network-switch-control__container', 'network-switch-control__container--error', {
             [activeClassName]: isOpen,
-            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
         });
-        if (!currentEvmNetwork) {
-            return (jsxRuntime.jsxs("button", { "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName, children: [jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }), jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
-                            'evm-network-control__arrow-icon--active': isOpen,
+        if (!currentNetwork) {
+            return (jsxRuntime.jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName, children: [jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }), jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('network-switch-control__arrow-icon', {
+                            'network-switch-control__arrow-icon--active': isOpen,
                         }), children: jsxRuntime.jsx(stroke.ReactComponent, {}) })] }));
         }
-        return (jsxRuntime.jsxs("div", { "data-testid": 'EvmNetworkControl', onClick: () => network && setIsOpen(!isOpen), className: classNames.classNames('evm-network-control__container', {
+        return (jsxRuntime.jsxs("div", { "data-testid": 'NetworkSwitchControl', onClick: () => network && setIsOpen(!isOpen), className: classNames.classNames('network-switch-control__container', {
                 [activeClassName]: isOpen,
-            }, className), children: [currentEvmNetwork.iconUrls.length > 0 && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentEvmNetwork.iconUrls[0], alt: `${currentEvmNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: currentEvmNetwork.vanityName || currentEvmNetwork.name }))] }));
+            }, className), children: [currentNetwork.iconUrls.length > 0 && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
     }
-    return (jsxRuntime.jsxs("button", { "data-testid": 'EvmNetworkControl', type: 'button', onClick: (e) => {
+    return (jsxRuntime.jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: (e) => {
             e.stopPropagation();
             network && setIsOpen(!isOpen);
-        }, className: classNames.classNames(className, {
+        }, className: classNames.classNames(className, 'network-switch-control__container', {
             [activeClassName]: isOpen,
-            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
-            'evm-network-control__container--error': !(currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.name),
-        }), children: [(currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [((_a = currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.iconUrls) === null || _a === void 0 ? void 0 : _a[0]) && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentEvmNetwork.iconUrls[0], alt: `${currentEvmNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: currentEvmNetwork.vanityName || currentEvmNetwork.name }))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })), evmNetworks && evmNetworks.length > 1 && (jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
-                    'evm-network-control__arrow-icon--active': isOpen,
+            'network-switch-control__container--error': !(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name),
+        }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('network-switch-control__arrow-icon', {
+                    'network-switch-control__arrow-icon--active': isOpen,
                 }), children: jsxRuntime.jsx(stroke.ReactComponent, {}) }))] }));
 };
 
-exports.EvmNetworkControl = EvmNetworkControl;
-exports.fallbackChainData = fallbackChainData;
+exports.NetworkSwitchControl = NetworkSwitchControl;

package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/NetworkSwitchControl.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from 'react';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { GenericNetwork } from '@dynamic-labs/types';
+type Props = {
+    activeClassName?: string;
+    className?: string;
+    enabledNetworks: GenericNetwork[];
+    isOpen: boolean;
+    loading: boolean;
+    network: number | string | undefined;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    showNetworkName?: boolean;
+    walletConnector: WalletConnector;
+};
+export declare const NetworkSwitchControl: ({ enabledNetworks, className, activeClassName, network, walletConnector, isOpen, setIsOpen, showNetworkName, }: Props) => JSX.Element;
+export {};

package/src/lib/components/NetworkPicker/components/{EvmNetworkControl/EvmNetworkControl.js → NetworkSwitchControl/NetworkSwitchControl.js}

@@ -1,6 +1,7 @@
 'use client'
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { parseChainId } from '@dynamic-labs/utils';
+import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
 import '@dynamic-labs/iconic';
@@ -13,7 +14,7 @@ import '../../../../../../_virtual/_tslib.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
-import '@dynamic-labs/wallet-connector-core';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
@@ -50,6 +51,7 @@ import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import { Typography } from '../../../Typography/Typography.js';
@@ -93,53 +95,44 @@ import '../../../IsBrowser/IsBrowser.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 
-/**
- * Icon and name to use when network is undefined and connector is unavailable
- */
-const fallbackChainData = {
-    iconUrl: 'https://app.dynamic.xyz/assets/networks/eth.svg',
-    name: 'Ethereum',
-};
-const EvmNetworkControl = ({ evmNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
-    var _a;
-    const currentEvmNetwork = evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => network && element.chainId === parseChainId(network));
-    if (evmNetworks && !evmNetworks.length) {
-        return (jsx("div", { "data-testid": 'EvmNetworkControl', className: classNames('evm-network-control__container evm-network-control__container--error', className), children: jsx(UnsupportedNetwork, { showMsg: showNetworkName }) }));
+const NetworkSwitchControl = ({ enabledNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
+    var _a, _b;
+    const currentNetwork = enabledNetworks.find((element) => network && element.chainId === parseChainId(network));
+    if (!enabledNetworks.length) {
+        return (jsx("div", { "data-testid": 'NetworkSwitchControl', className: classNames('network-switch-control__container network-switch-control__container--error', className), children: jsx(UnsupportedNetwork, { showMsg: showNetworkName }) }));
     }
     if (!network) {
-        // If this connector is not available, just show a generic "Ethereum" network
-        // As it will never be able to load a network
-        if (walletConnector && !walletConnector.isAvailable) {
-            return (jsxs("div", { "data-testid": 'EvmNetworkControl', className: classNames(className, {
-                    'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
-                }), children: [jsx(Icon, { size: 'small', children: jsx("img", { src: fallbackChainData.iconUrl, alt: `${fallbackChainData.name} icon` }) }), showNetworkName && (jsx(Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: fallbackChainData.name }))] }));
+        // If this connector is not available, just show the chain name and icon
+        // since it will never be able to load a network
+        if (!walletConnector.isAvailable) {
+            const FallbackChainIcon = getChainIcon(walletConnector.connectedChain);
+            const fallbackChainName = (_a = getChainInfo(walletConnector.connectedChain)) === null || _a === void 0 ? void 0 : _a.displayName;
+            return (jsxs("div", { "data-testid": 'NetworkSwitchControl', className: classNames(className, 'network-switch-control__container'), children: [jsx(Icon, { size: 'small', children: jsx(FallbackChainIcon, {}) }), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: fallbackChainName }))] }));
         }
-        return (jsx("div", { "data-testid": 'EvmNetworkControl', className: classNames('evm-network-control__container', className), children: jsx(NetworkControlSkeleton, {}) }));
+        return (jsx("div", { "data-testid": 'NetworkSwitchControl', className: classNames('network-switch-control__container', className), children: jsx(NetworkControlSkeleton, {}) }));
     }
-    if ((evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) === 1) {
-        const unsupportedNetworkClassName = classNames(className, 'evm-network-control__container', 'evm-network-control__container--error', {
+    if (enabledNetworks.length === 1) {
+        const unsupportedNetworkClassName = classNames(className, 'network-switch-control__container', 'network-switch-control__container--error', {
             [activeClassName]: isOpen,
-            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
         });
-        if (!currentEvmNetwork) {
-            return (jsxs("button", { "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName, children: [jsx(UnsupportedNetwork, { showMsg: showNetworkName }), jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('evm-network-control__arrow-icon', {
-                            'evm-network-control__arrow-icon--active': isOpen,
+        if (!currentNetwork) {
+            return (jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName, children: [jsx(UnsupportedNetwork, { showMsg: showNetworkName }), jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('network-switch-control__arrow-icon', {
+                            'network-switch-control__arrow-icon--active': isOpen,
                         }), children: jsx(SvgStroke, {}) })] }));
         }
-        return (jsxs("div", { "data-testid": 'EvmNetworkControl', onClick: () => network && setIsOpen(!isOpen), className: classNames('evm-network-control__container', {
+        return (jsxs("div", { "data-testid": 'NetworkSwitchControl', onClick: () => network && setIsOpen(!isOpen), className: classNames('network-switch-control__container', {
                 [activeClassName]: isOpen,
-            }, className), children: [currentEvmNetwork.iconUrls.length > 0 && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentEvmNetwork.iconUrls[0], alt: `${currentEvmNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: currentEvmNetwork.vanityName || currentEvmNetwork.name }))] }));
+            }, className), children: [currentNetwork.iconUrls.length > 0 && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] }));
     }
-    return (jsxs("button", { "data-testid": 'EvmNetworkControl', type: 'button', onClick: (e) => {
+    return (jsxs("button", { "data-testid": 'NetworkSwitchControl', type: 'button', onClick: (e) => {
             e.stopPropagation();
             network && setIsOpen(!isOpen);
-        }, className: classNames(className, {
+        }, className: classNames(className, 'network-switch-control__container', {
             [activeClassName]: isOpen,
-            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
-            'evm-network-control__container--error': !(currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.name),
-        }), children: [(currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.name) ? (jsxs(Fragment, { children: [((_a = currentEvmNetwork === null || currentEvmNetwork === void 0 ? void 0 : currentEvmNetwork.iconUrls) === null || _a === void 0 ? void 0 : _a[0]) && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentEvmNetwork.iconUrls[0], alt: `${currentEvmNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'evm-network-control__network-name', as: 'span', variant: 'body_small', children: currentEvmNetwork.vanityName || currentEvmNetwork.name }))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })), evmNetworks && evmNetworks.length > 1 && (jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('evm-network-control__arrow-icon', {
-                    'evm-network-control__arrow-icon--active': isOpen,
+            'network-switch-control__container--error': !(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name),
+        }), children: [(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.name) ? (jsxs(Fragment, { children: [((_b = currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) && (jsx(Icon, { size: 'small', children: jsx("img", { src: currentNetwork.iconUrls[0], alt: `${currentNetwork.name} icon` }) })), showNetworkName && (jsx(Typography, { className: 'network-switch-control__network-name', as: 'span', variant: 'body_small', children: currentNetwork.vanityName || currentNetwork.name }))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })), enabledNetworks.length > 1 && (jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('network-switch-control__arrow-icon', {
+                    'network-switch-control__arrow-icon--active': isOpen,
                 }), children: jsx(SvgStroke, {}) }))] }));
 };
 
-export { EvmNetworkControl, fallbackChainData };
+export { NetworkSwitchControl };

package/src/lib/components/NetworkPicker/components/NetworkSwitchControl/index.d.ts

@@ -0,0 +1 @@
+export { NetworkSwitchControl } from './NetworkSwitchControl';

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs

@@ -55,6 +55,7 @@ require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 var Typography = require('../../../Typography/Typography.cjs');

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.js

@@ -51,6 +51,7 @@ import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import { Typography } from '../../../Typography/Typography.js';

package/src/lib/components/OverlayCardBase/OverlayCardBase.cjs

@@ -59,6 +59,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 require('../Accordion/components/AccordionItem/AccordionItem.cjs');

package/src/lib/components/OverlayCardBase/OverlayCardBase.js

@@ -55,6 +55,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import '../Accordion/components/AccordionItem/AccordionItem.js';

package/src/lib/components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs

@@ -51,6 +51,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../store/state/walletOptions/walletOptions.cjs');
 require('../Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../Alert/Alert.cjs');

package/src/lib/components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js

@@ -47,6 +47,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../store/state/walletOptions/walletOptions.js';
 import '../Accordion/components/AccordionItem/AccordionItem.js';
 import '../Alert/Alert.js';

package/src/lib/components/PhoneNumberField/PhoneNumberField.cjs

@@ -56,6 +56,7 @@ require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../store/state/loadingAndLifecycle.cjs');
+require('@dynamic-labs/store');
 require('../../store/state/walletOptions/walletOptions.cjs');
 var Typography = require('../Typography/Typography.cjs');
 require('../../context/FooterAnimationContext/index.cjs');

package/src/lib/components/PhoneNumberField/PhoneNumberField.js

@@ -52,6 +52,7 @@ import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
 import '../../store/state/walletOptions/walletOptions.js';
 import { Typography } from '../Typography/Typography.js';
 import '../../context/FooterAnimationContext/index.js';