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

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');
@@ -97,54 +98,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';
@@ -93,53 +94,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/Portal/Portal.cjs

@@ -4,13 +4,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactDom = require('react-dom');
 var ReactFocusLock = require('react-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../_virtual/_tslib.cjs');
-require('react');
 require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
@@ -127,7 +127,8 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const { createRootElement } = useElementById.useElementById();
     const modalRootElementRef = createRootElement(elementId);
-    return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node), children: children }) })) }), modalRootElementRef.current);
+    const whiteList = React.useCallback((node) => modalRootElementRef.current.contains(node), [modalRootElementRef]);
+    return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: whiteList, children: children }) })) }), modalRootElementRef.current);
 };
 
 exports.Portal = Portal;

package/src/lib/components/Portal/Portal.js

@@ -1,12 +1,12 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import ReactFocusLock from 'react-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../_virtual/_tslib.js';
-import 'react';
 import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -119,7 +119,8 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const { createRootElement } = useElementById();
     const modalRootElementRef = createRootElement(elementId);
-    return createPortal(jsx(ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsx(OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node), children: children }) })) }), modalRootElementRef.current);
+    const whiteList = useCallback((node) => modalRootElementRef.current.contains(node), [modalRootElementRef]);
+    return createPortal(jsx(ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsx(OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: whiteList, children: children }) })) }), modalRootElementRef.current);
 };
 
 export { Portal };

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -27,10 +27,10 @@ require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../store/state/nonce/nonce.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
+var networksAndChains = require('../../utils/functions/networksAndChains/networksAndChains.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
-var networksAndChains = require('../../utils/functions/networksAndChains/networksAndChains.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -23,10 +23,10 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../store/state/nonce/nonce.js';
 import '../../store/state/projectSettings/projectSettings.js';
+import { getNetworkInfoEntry } from '../../utils/functions/networksAndChains/networksAndChains.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
 import '../../locale/locale.js';
-import { getNetworkInfoEntry } from '../../utils/functions/networksAndChains/networksAndChains.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';

package/src/lib/components/ShadowDOM/ShadowDOM.cjs

@@ -100,7 +100,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ShadowDOMContext = React__default["default"].createContext({});
-const useShadowDOMContext = () => React__default["default"].useContext(ShadowDOMContext);
 const ShadowDOMStyle = () => jsxRuntime.jsx("style", { children: index_shadow });
 const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
     const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext.useInternalDynamicContext();
@@ -142,4 +141,3 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
 exports.ShadowDOM = ShadowDOM;
 exports.ShadowDOMContext = ShadowDOMContext;
 exports.ShadowDOMStyle = ShadowDOMStyle;
-exports.useShadowDOMContext = useShadowDOMContext;

package/src/lib/components/ShadowDOM/ShadowDOM.js

@@ -92,7 +92,6 @@ import { LegacySafariCssOverrides } from '../LegacySafariCssOverrides/LegacySafa
 import { isShadowDOMFlagEnabled } from './utils.js';
 
 const ShadowDOMContext = React__default.createContext({});
-const useShadowDOMContext = () => React__default.useContext(ShadowDOMContext);
 const ShadowDOMStyle = () => jsx("style", { children: css_248z });
 const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex, }) => {
     const { shadowDOMEnabled: shadowDOMSetting, cssOverrides } = useInternalDynamicContext();
@@ -131,4 +130,4 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
                     createPortal(jsxs("div", { className: 'dynamic-shadow-dom-content', children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] }), shadowRoot) }) }) }));
 };
 
-export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle, useShadowDOMContext };
+export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -29,10 +29,10 @@ require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../store/state/nonce/nonce.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
+var fiatUtils = require('../../utils/functions/fiatUtils/fiatUtils.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
-var fiatUtils = require('../../utils/functions/fiatUtils/fiatUtils.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -25,10 +25,10 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../store/state/nonce/nonce.js';
 import '../../store/state/projectSettings/projectSettings.js';
+import { getGasFiatValue, getTotalFiatCost } from '../../utils/functions/fiatUtils/fiatUtils.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
 import '../../locale/locale.js';
-import { getGasFiatValue, getTotalFiatCost } from '../../utils/functions/fiatUtils/fiatUtils.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -35,10 +35,10 @@ require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../store/state/nonce/nonce.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
+var fiatUtils = require('../../utils/functions/fiatUtils/fiatUtils.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
-var fiatUtils = require('../../utils/functions/fiatUtils/fiatUtils.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -31,10 +31,10 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../store/state/nonce/nonce.js';
 import '../../store/state/projectSettings/projectSettings.js';
+import { getTotalFiatCost } from '../../utils/functions/fiatUtils/fiatUtils.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
 import '../../locale/locale.js';
-import { getTotalFiatCost } from '../../utils/functions/fiatUtils/fiatUtils.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -35,10 +35,10 @@ var getUserProfileFields = require('../../utils/functions/getUserProfileFields/g
 require('../../store/state/nonce/nonce.cjs');
 var isSocialKycEnabled = require('../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
 require('../../store/state/projectSettings/projectSettings.cjs');
+var isAllowedToLinkWallet = require('../../utils/functions/isAllowedToLinkWallet/isAllowedToLinkWallet.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
-var isAllowedToLinkWallet = require('../../utils/functions/isAllowedToLinkWallet/isAllowedToLinkWallet.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/components/UserProfile/UserProfile.js

@@ -31,10 +31,10 @@ import { getUserProfileFields } from '../../utils/functions/getUserProfileFields
 import '../../store/state/nonce/nonce.js';
 import { isSocialKycEnabled } from '../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.js';
 import '../../store/state/projectSettings/projectSettings.js';
+import { isAllowedToLinkWallet } from '../../utils/functions/isAllowedToLinkWallet/isAllowedToLinkWallet.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
 import '../../locale/locale.js';
-import { isAllowedToLinkWallet } from '../../utils/functions/isAllowedToLinkWallet/isAllowedToLinkWallet.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';