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

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/locale/en/translation.cjs

@@ -932,13 +932,6 @@ const translation = {
      * @description Settings for Dynamic settings view which are used inside dynamic widget
      * @default
      * {
-      global_section: {
-        title: 'Global',
-        currency: {
-          title: 'Currency',
-          badge: 'coming soon',
-        },
-      },
       global_connectivity_section: {
         title: 'Global Connectivity',
         connected_apps_button: 'Connected Apps',
@@ -962,16 +955,12 @@ const translation = {
       },
       title: 'Settings',
       button_logout: 'Log out',
+      empty_screen: {
+        title: 'Nothing to see here yet!',
+      },
     }
      */
     dyn_settings: {
-        global_section: {
-            title: 'Global',
-            currency: {
-                title: 'Currency',
-                badge: 'coming soon',
-            },
-        },
         global_connectivity_section: {
             title: 'Global Connectivity',
             connected_apps_button: 'Connected Apps',
@@ -995,6 +984,9 @@ const translation = {
         },
         title: 'Settings',
         button_logout: 'Log out',
+        empty_screen: {
+            title: 'Nothing to see here yet!',
+        },
     },
     /**
      * @description copy keys for global wallet view
@@ -2350,8 +2342,8 @@ const translation = {
      * @description copy keys for the wallet funding flow
      * @default
      * {
-        success: 'Funds added!',
-        success_txn_link: 'View Transaction',
+        success: 'Transaction processing',
+        success_txn_link: 'View transaction',
         
         funding_method_selection: {
           title: 'Deposit',
@@ -2370,19 +2362,15 @@ const translation = {
           funding_view: {
             title: 'Fund from Wallet',
             wallet_detail_from: 'From',
-            balance: 'Balance',
             confirm_button: 'Confirm Transaction',
-            network_conversion_error:
-              'Conversion unavailable due to network issues.',
+            pricing_unavailable:
+              'Pricing unavailable.',
             minimum_error: 'Minimum {{minimum}}',
             balance_error: 'Insufficient funds',
           },
           token_select: {
             title: 'Select a Token',
             search_placeholder: 'Search for a token',
-            token_option: {
-              balance_label: 'Balance',
-            },
             no_assets_title: 'No Supported Assets',
             no_assets_description: 'This wallet does not support any assets',
           },
@@ -2390,8 +2378,8 @@ const translation = {
       }
      */
     dyn_wallet_funding: {
-        success: 'Funds added!',
-        success_txn_link: 'View Transaction',
+        success: 'Transaction processing',
+        success_txn_link: 'View transaction',
         funding_method_selection: {
             title: 'Deposit',
             qr_option: 'Receive by QR',
@@ -2409,18 +2397,14 @@ const translation = {
             funding_view: {
                 title: 'Fund from External Wallet',
                 wallet_detail_from: 'From',
-                balance: 'Balance',
                 confirm_button: 'Confirm Transaction',
-                network_conversion_error: 'Conversion unavailable due to network issues.',
+                pricing_unavailable: 'Pricing unavailable.',
                 minimum_error: 'Minimum {{minimum}}',
                 balance_error: 'Insufficient funds',
             },
             token_select: {
                 title: 'Select a Token',
                 search_placeholder: 'Search for a token',
-                token_option: {
-                    balance_label: 'Balance',
-                },
                 no_assets_title: 'No Supported Assets',
                 no_assets_description: 'No supported assets in this wallet',
             },

package/src/lib/locale/en/translation.d.ts

@@ -926,13 +926,6 @@ export declare const translation: {
      * @description Settings for Dynamic settings view which are used inside dynamic widget
      * @default
      * {
-      global_section: {
-        title: 'Global',
-        currency: {
-          title: 'Currency',
-          badge: 'coming soon',
-        },
-      },
       global_connectivity_section: {
         title: 'Global Connectivity',
         connected_apps_button: 'Connected Apps',
@@ -956,16 +949,12 @@ export declare const translation: {
       },
       title: 'Settings',
       button_logout: 'Log out',
+      empty_screen: {
+        title: 'Nothing to see here yet!',
+      },
     }
      */
     dyn_settings: {
-        global_section: {
-            title: string;
-            currency: {
-                title: string;
-                badge: string;
-            };
-        };
         global_connectivity_section: {
             title: string;
             connected_apps_button: string;
@@ -991,6 +980,9 @@ export declare const translation: {
         };
         title: string;
         button_logout: string;
+        empty_screen: {
+            title: string;
+        };
     };
     /**
      * @description copy keys for global wallet view
@@ -2346,8 +2338,8 @@ export declare const translation: {
      * @description copy keys for the wallet funding flow
      * @default
      * {
-        success: 'Funds added!',
-        success_txn_link: 'View Transaction',
+        success: 'Transaction processing',
+        success_txn_link: 'View transaction',
         
         funding_method_selection: {
           title: 'Deposit',
@@ -2366,19 +2358,15 @@ export declare const translation: {
           funding_view: {
             title: 'Fund from Wallet',
             wallet_detail_from: 'From',
-            balance: 'Balance',
             confirm_button: 'Confirm Transaction',
-            network_conversion_error:
-              'Conversion unavailable due to network issues.',
+            pricing_unavailable:
+              'Pricing unavailable.',
             minimum_error: 'Minimum {{minimum}}',
             balance_error: 'Insufficient funds',
           },
           token_select: {
             title: 'Select a Token',
             search_placeholder: 'Search for a token',
-            token_option: {
-              balance_label: 'Balance',
-            },
             no_assets_title: 'No Supported Assets',
             no_assets_description: 'This wallet does not support any assets',
           },
@@ -2405,18 +2393,14 @@ export declare const translation: {
             funding_view: {
                 title: string;
                 wallet_detail_from: string;
-                balance: string;
                 confirm_button: string;
-                network_conversion_error: string;
+                pricing_unavailable: string;
                 minimum_error: string;
                 balance_error: string;
             };
             token_select: {
                 title: string;
                 search_placeholder: string;
-                token_option: {
-                    balance_label: string;
-                };
                 no_assets_title: string;
                 no_assets_description: string;
             };

package/src/lib/locale/en/translation.js

@@ -928,13 +928,6 @@ const translation = {
      * @description Settings for Dynamic settings view which are used inside dynamic widget
      * @default
      * {
-      global_section: {
-        title: 'Global',
-        currency: {
-          title: 'Currency',
-          badge: 'coming soon',
-        },
-      },
       global_connectivity_section: {
         title: 'Global Connectivity',
         connected_apps_button: 'Connected Apps',
@@ -958,16 +951,12 @@ const translation = {
       },
       title: 'Settings',
       button_logout: 'Log out',
+      empty_screen: {
+        title: 'Nothing to see here yet!',
+      },
     }
      */
     dyn_settings: {
-        global_section: {
-            title: 'Global',
-            currency: {
-                title: 'Currency',
-                badge: 'coming soon',
-            },
-        },
         global_connectivity_section: {
             title: 'Global Connectivity',
             connected_apps_button: 'Connected Apps',
@@ -991,6 +980,9 @@ const translation = {
         },
         title: 'Settings',
         button_logout: 'Log out',
+        empty_screen: {
+            title: 'Nothing to see here yet!',
+        },
     },
     /**
      * @description copy keys for global wallet view
@@ -2346,8 +2338,8 @@ const translation = {
      * @description copy keys for the wallet funding flow
      * @default
      * {
-        success: 'Funds added!',
-        success_txn_link: 'View Transaction',
+        success: 'Transaction processing',
+        success_txn_link: 'View transaction',
         
         funding_method_selection: {
           title: 'Deposit',
@@ -2366,19 +2358,15 @@ const translation = {
           funding_view: {
             title: 'Fund from Wallet',
             wallet_detail_from: 'From',
-            balance: 'Balance',
             confirm_button: 'Confirm Transaction',
-            network_conversion_error:
-              'Conversion unavailable due to network issues.',
+            pricing_unavailable:
+              'Pricing unavailable.',
             minimum_error: 'Minimum {{minimum}}',
             balance_error: 'Insufficient funds',
           },
           token_select: {
             title: 'Select a Token',
             search_placeholder: 'Search for a token',
-            token_option: {
-              balance_label: 'Balance',
-            },
             no_assets_title: 'No Supported Assets',
             no_assets_description: 'This wallet does not support any assets',
           },
@@ -2386,8 +2374,8 @@ const translation = {
       }
      */
     dyn_wallet_funding: {
-        success: 'Funds added!',
-        success_txn_link: 'View Transaction',
+        success: 'Transaction processing',
+        success_txn_link: 'View transaction',
         funding_method_selection: {
             title: 'Deposit',
             qr_option: 'Receive by QR',
@@ -2405,18 +2393,14 @@ const translation = {
             funding_view: {
                 title: 'Fund from External Wallet',
                 wallet_detail_from: 'From',
-                balance: 'Balance',
                 confirm_button: 'Confirm Transaction',
-                network_conversion_error: 'Conversion unavailable due to network issues.',
+                pricing_unavailable: 'Pricing unavailable.',
                 minimum_error: 'Minimum {{minimum}}',
                 balance_error: 'Insufficient funds',
             },
             token_select: {
                 title: 'Select a Token',
                 search_placeholder: 'Search for a token',
-                token_option: {
-                    balance_label: 'Balance',
-                },
                 no_assets_title: 'No Supported Assets',
                 no_assets_description: 'No supported assets in this wallet',
             },

package/src/lib/shared/assets/index.d.ts

@@ -108,6 +108,7 @@ export { ReactComponent as WalletIllustrationIcon } from './wallet-illustration.
 export { ReactComponent as WalletIconOutlineV2 } from './wallet-outline-v2.svg';
 export { ReactComponent as WalletOutlineIcon } from './wallet-outline.svg';
 export { ReactComponent as WalletV2Icon } from './wallet-v2.svg';
+export { ReactComponent as WalletWithSunglassesIcon } from './wallet-with-sunglasses.svg';
 export { ReactComponent as WalletIcon } from './wallet.svg';
 export { PhantomLedgerIcon } from './wallets/PhantomLedgerIcon/PhantomLedgerIcon';
 export { ReactComponent as WarningOrangeIcon } from './warning-orange.svg';