@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/components/ModalHeader/ModalHeader.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from 'react';
+export type ModalHeaderProps = {
+    alignContent?: 'bottom';
+    children?: ReactNode;
+    leading?: ReactNode;
+    positionAbsolute?: boolean;
+    trailing?: ReactNode;
+};
+export type ModalHeaderComponent = (props: ModalHeaderProps) => ReactElement;

package/src/lib/components/ModalHeader/index.d.ts

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

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.cjs.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs.js');
+var VerticalDrawerAnimation = require('../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+
+const typographyColor = {
+    error: 'error-1',
+};
+const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerAnimation.VerticalDrawerAnimation, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
+            'modal-header-banner__error': type === 'error',
+        }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+
+exports.ModalHeaderBanner = ModalHeaderBanner;

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type ModalHeaderBannerType = 'error';
+export type ModalHeaderBannerProps = {
+    message?: string;
+    type?: ModalHeaderBannerType;
+};
+export declare const ModalHeaderBanner: FC<ModalHeaderBannerProps>;
+export {};

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.es.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.es.js';
+import { VerticalDrawerAnimation } from '../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+
+const typographyColor = {
+    error: 'error-1',
+};
+const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerAnimation, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
+            'modal-header-banner__error': type === 'error',
+        }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+
+export { ModalHeaderBanner };

package/src/lib/components/ModalHeaderBanner/index.d.ts

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

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+var index = require('../../shared/utils/hooks/useOnClickOutside/index.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var NetworkControl = require('./components/NetworkControl/NetworkControl.cjs.js');
+var ActionList = require('./components/ActionList/ActionList.cjs.js');
+var NetworkAction = require('./components/NetworkAction/NetworkAction.cjs.js');
+
+const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, }) => {
+    const pickerRef = React.useRef(null);
+    const [newNetworkId, setNewNetworkId] = React.useState(undefined);
+    const { loadingNetwork, network, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
+    index.useOnClickOutside(pickerRef, () => {
+        if (isNetworkPickerOpen) {
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    const handleNetworkChange = (networkId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setNewNetworkId(networkId);
+        try {
+            yield (connector === null || connector === void 0 ? void 0 : connector.switchNetwork({
+                networkChainId: networkId,
+            }));
+            const chainId = yield (connector === null || connector === void 0 ? void 0 : connector.getNetwork());
+            setNetwork(chainId);
+        }
+        catch (error) {
+            /* istanbul ignore next */
+            logger.logger.debug(error);
+        }
+        finally {
+            setNewNetworkId(undefined);
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), evmNetworks && Boolean(evmNetworks.length) && (jsxRuntime.jsx(ActionList.ActionList, Object.assign({ className: listClassName, title: 'Select network', isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'network-picker__dropdown' }, { children: evmNetworks.map(({ chainName, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || chainName, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId }, networkId))) })) })))] })));
+};
+
+exports.NetworkPicker = NetworkPicker;

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

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+import { EvmNetwork } from '@dynamic-labs/multi-wallet';
+import { WalletConnector } from '../../..';
+type Props = {
+    activeClassName?: string;
+    buttonClassName?: string;
+    checkboxClassName?: string;
+    connector: WalletConnector | undefined;
+    evmNetworks: EvmNetwork[];
+    isNetworkPickerOpen: boolean;
+    listClassName?: string;
+    mainClassName?: string;
+    setIsNetworkPickerOpen: Dispatch<SetStateAction<boolean>>;
+    showNetworkName?: boolean;
+};
+export declare const NetworkPicker: ({ activeClassName, buttonClassName, checkboxClassName, connector, evmNetworks, isNetworkPickerOpen, listClassName, mainClassName, setIsNetworkPickerOpen, showNetworkName, }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { __awaiter } from '../../../../_virtual/_tslib.es.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import { useOnClickOutside } from '../../shared/utils/hooks/useOnClickOutside/index.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { NetworkControl } from './components/NetworkControl/NetworkControl.es.js';
+import { ActionList } from './components/ActionList/ActionList.es.js';
+import { NetworkAction } from './components/NetworkAction/NetworkAction.es.js';
+
+const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, }) => {
+    const pickerRef = useRef(null);
+    const [newNetworkId, setNewNetworkId] = useState(undefined);
+    const { loadingNetwork, network, setNetwork } = useInternalDynamicContext();
+    useOnClickOutside(pickerRef, () => {
+        if (isNetworkPickerOpen) {
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    const handleNetworkChange = (networkId) => __awaiter(void 0, void 0, void 0, function* () {
+        setNewNetworkId(networkId);
+        try {
+            yield (connector === null || connector === void 0 ? void 0 : connector.switchNetwork({
+                networkChainId: networkId,
+            }));
+            const chainId = yield (connector === null || connector === void 0 ? void 0 : connector.getNetwork());
+            setNetwork(chainId);
+        }
+        catch (error) {
+            /* istanbul ignore next */
+            logger.debug(error);
+        }
+        finally {
+            setNewNetworkId(undefined);
+            setIsNetworkPickerOpen(false);
+        }
+    });
+    return (jsxs("div", Object.assign({ className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef }, { children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), evmNetworks && Boolean(evmNetworks.length) && (jsx(ActionList, Object.assign({ className: listClassName, title: 'Select network', isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen }, { children: jsx("div", Object.assign({ className: 'network-picker__dropdown' }, { children: evmNetworks.map(({ chainName, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || chainName, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId }, networkId))) })) })))] })));
+};
+
+export { NetworkPicker };

package/src/lib/components/NetworkPicker/components/ActionList/ActionList.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var close = require('../../../../shared/assets/close.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+var usePreventPageScroll = require('../../../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+var useTransition = require('../../../../utils/hooks/useTransition/useTransition.cjs.js');
+require('react-dom');
+var Typography = require('../../../Typography/Typography.cjs.js');
+require('../../../ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs.js');
+var IconButton = require('../../../IconButton/IconButton.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+
+const IN_DURATION = 300;
+const OUT_DURATION = 400;
+const ActionList = ({ children, className = '', title, isOpen, setIsOpen, }) => {
+    const { mount, stage, currentDuration } = useTransition.useTransition({
+        inDuration: IN_DURATION,
+        isShown: isOpen,
+        outDuration: OUT_DURATION,
+    });
+    usePreventPageScroll.usePreventPageScroll(isOpen);
+    const transitionClassname = classNames.classNames({
+        'action-list__container--entering': stage === 'ENTERING',
+        'action-list__container--exiting': stage === 'EXITING',
+    });
+    if (!mount) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", Object.assign({ style: {
+            animationDuration: `${currentDuration}ms`,
+        }, className: classNames.classNames('action-list__container', transitionClassname, className), "data-testid": 'draggable-mobile-menu' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'dropdown-header' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'dropdown-header__title', variant: 'title', color: 'secondary' }, { children: title })), jsxRuntime.jsx(IconButton.IconButton, Object.assign({ className: 'dropdown-header__icon', onClick: () => setIsOpen(false) }, { children: jsxRuntime.jsx(close.ReactComponent, {}) }))] })), jsxRuntime.jsx("div", Object.assign({ "data-testid": 'dropdown-list', className: 'action-list__content' }, { children: children }))] }), 'dropdown'));
+};
+
+exports.ActionList = ActionList;
+exports.IN_DURATION = IN_DURATION;
+exports.OUT_DURATION = OUT_DURATION;

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

@@ -0,0 +1,12 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+type Props = {
+    children: ReactNode;
+    className?: string;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    title?: ReactNode;
+};
+export declare const IN_DURATION = 300;
+export declare const OUT_DURATION = 400;
+export declare const ActionList: ({ children, className, title, isOpen, setIsOpen, }: Props) => JSX.Element | null;
+export {};

package/src/lib/components/NetworkPicker/components/ActionList/ActionList.es.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgClose } from '../../../../shared/assets/close.es.js';
+import '../../../../utils/constants/colors.es.js';
+import { usePreventPageScroll } from '../../../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import { useTransition } from '../../../../utils/hooks/useTransition/useTransition.es.js';
+import 'react-dom';
+import { Typography } from '../../../Typography/Typography.es.js';
+import '../../../ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.es.js';
+import { IconButton } from '../../../IconButton/IconButton.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+
+const IN_DURATION = 300;
+const OUT_DURATION = 400;
+const ActionList = ({ children, className = '', title, isOpen, setIsOpen, }) => {
+    const { mount, stage, currentDuration } = useTransition({
+        inDuration: IN_DURATION,
+        isShown: isOpen,
+        outDuration: OUT_DURATION,
+    });
+    usePreventPageScroll(isOpen);
+    const transitionClassname = classNames({
+        'action-list__container--entering': stage === 'ENTERING',
+        'action-list__container--exiting': stage === 'EXITING',
+    });
+    if (!mount) {
+        return null;
+    }
+    return (jsxs("div", Object.assign({ style: {
+            animationDuration: `${currentDuration}ms`,
+        }, className: classNames('action-list__container', transitionClassname, className), "data-testid": 'draggable-mobile-menu' }, { children: [jsxs("div", Object.assign({ className: 'dropdown-header' }, { children: [jsx(Typography, Object.assign({ className: 'dropdown-header__title', variant: 'title', color: 'secondary' }, { children: title })), jsx(IconButton, Object.assign({ className: 'dropdown-header__icon', onClick: () => setIsOpen(false) }, { children: jsx(SvgClose, {}) }))] })), jsx("div", Object.assign({ "data-testid": 'dropdown-list', className: 'action-list__content' }, { children: children }))] }), 'dropdown'));
+};
+
+export { ActionList, IN_DURATION, OUT_DURATION };

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

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

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var stroke = require('../../../../shared/assets/stroke.cjs.js');
+require('react');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../../../Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/multi-wallet');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../../../Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../IconButton/IconButton.cjs.js');
+var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs.js');
+var UnsupportedNetwork = require('../UnsupportedNetwork/UnsupportedNetwork.cjs.js');
+
+const EvmNetworkControl = ({ evmNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
+    var _a, _b;
+    const evmNetwork = evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => element.chainId === network);
+    if (evmNetworks && !evmNetworks.length) {
+        return (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', className: classNames.classNames('evm-network-control__container evm-network-control__container--error', className) }, { children: jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }) })));
+    }
+    if (!network) {
+        return (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', className: classNames.classNames('evm-network-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', {
+            [activeClassName]: isOpen,
+            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
+        });
+        if (!evmNetwork) {
+            return (jsxRuntime.jsxs("button", Object.assign({ "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName }, { children: [jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName }), jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
+                            'evm-network-control__arrow-icon--active': isOpen,
+                        }) }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) }))] })));
+        }
+        return (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', onClick: () => network && setIsOpen(!isOpen), className: classNames.classNames('evm-network-control__container', {
+                [activeClassName]: isOpen,
+            }, className) }, { children: evmNetwork.chainName && ((_a = evmNetwork.iconUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx("img", { src: evmNetwork.iconUrls[0], alt: `${evmNetwork.chainName} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', variant: 'body_small' }, { children: evmNetwork.vanityName || evmNetwork.chainName })))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })) })));
+    }
+    return (jsxRuntime.jsxs("button", Object.assign({ "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => network && setIsOpen(!isOpen), className: classNames.classNames(className, {
+            [activeClassName]: isOpen,
+            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
+            'evm-network-control__container--error': !(evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.chainName),
+        }) }, { children: [(evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.chainName) && ((_b = evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx("img", { src: evmNetwork.iconUrls[0], alt: `${evmNetwork.chainName} icon` }) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', variant: 'body_small' }, { children: evmNetwork.vanityName || evmNetwork.chainName })))] })) : (jsxRuntime.jsx(UnsupportedNetwork.UnsupportedNetwork, { showMsg: showNetworkName })), evmNetworks && evmNetworks.length > 1 && (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
+                    'evm-network-control__arrow-icon--active': isOpen,
+                }) }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })))] })));
+};
+
+exports.EvmNetworkControl = EvmNetworkControl;

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

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

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.es.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.es.js';
+import 'react';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../../../Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../../Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../IconButton/IconButton.es.js';
+import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.es.js';
+import { UnsupportedNetwork } from '../UnsupportedNetwork/UnsupportedNetwork.es.js';
+
+const EvmNetworkControl = ({ evmNetworks, className = '', activeClassName = '', network, walletConnector, isOpen, setIsOpen, showNetworkName = false, }) => {
+    var _a, _b;
+    const evmNetwork = evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.find((element) => element.chainId === network);
+    if (evmNetworks && !evmNetworks.length) {
+        return (jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', className: classNames('evm-network-control__container evm-network-control__container--error', className) }, { children: jsx(UnsupportedNetwork, { showMsg: showNetworkName }) })));
+    }
+    if (!network) {
+        return (jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', className: classNames('evm-network-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', {
+            [activeClassName]: isOpen,
+            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
+        });
+        if (!evmNetwork) {
+            return (jsxs("button", Object.assign({ "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => setIsOpen(!isOpen), className: unsupportedNetworkClassName }, { children: [jsx(UnsupportedNetwork, { showMsg: showNetworkName }), jsx(Icon, Object.assign({ color: 'text-primary', size: 'small', className: classNames('evm-network-control__arrow-icon', {
+                            'evm-network-control__arrow-icon--active': isOpen,
+                        }) }, { children: jsx(SvgStroke, {}) }))] })));
+        }
+        return (jsx("div", Object.assign({ "data-testid": 'EvmNetworkControl', onClick: () => network && setIsOpen(!isOpen), className: classNames('evm-network-control__container', {
+                [activeClassName]: isOpen,
+            }, className) }, { children: evmNetwork.chainName && ((_a = evmNetwork.iconUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (jsxs(Fragment, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx("img", { src: evmNetwork.iconUrls[0], alt: `${evmNetwork.chainName} icon` }) })), showNetworkName && (jsx(Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', variant: 'body_small' }, { children: evmNetwork.vanityName || evmNetwork.chainName })))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })) })));
+    }
+    return (jsxs("button", Object.assign({ "data-testid": 'EvmNetworkControl', type: 'button', onClick: () => network && setIsOpen(!isOpen), className: classNames(className, {
+            [activeClassName]: isOpen,
+            'evm-network-control__container': Boolean(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.supportsNetworkSwitching()),
+            'evm-network-control__container--error': !(evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.chainName),
+        }) }, { children: [(evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.chainName) && ((_b = evmNetwork === null || evmNetwork === void 0 ? void 0 : evmNetwork.iconUrls) === null || _b === void 0 ? void 0 : _b[0]) ? (jsxs(Fragment, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx("img", { src: evmNetwork.iconUrls[0], alt: `${evmNetwork.chainName} icon` }) })), showNetworkName && (jsx(Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', variant: 'body_small' }, { children: evmNetwork.vanityName || evmNetwork.chainName })))] })) : (jsx(UnsupportedNetwork, { showMsg: showNetworkName })), evmNetworks && evmNetworks.length > 1 && (jsx(Icon, Object.assign({ color: 'text-primary', size: 'small', className: classNames('evm-network-control__arrow-icon', {
+                    'evm-network-control__arrow-icon--active': isOpen,
+                }) }, { children: jsx(SvgStroke, {}) })))] })));
+};
+
+export { EvmNetworkControl };

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

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

package/src/lib/components/NetworkPicker/components/Network/Network.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var error = require('../../../../shared/assets/error.cjs.js');
+var check = require('../../../../shared/assets/check.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../IconButton/IconButton.cjs.js');
+var Spinner = require('../../../IconWithSpinner/Spinner/Spinner.cjs.js');
+
+const Network = ({ iconUrl, isActive, networkName, className, checkboxClassName = '', isChanging, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('network', className) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'network__title-container' }, { children: [iconUrl ? (jsxRuntime.jsx("img", { src: iconUrl, className: 'network__title-icon', alt: `${networkName} icon` })) : (jsxRuntime.jsx(error.ReactComponent, {})), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', className: 'network__title-copy', as: 'span', weight: 'medium' }, { children: networkName }))] })), jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('network__status-container', {
+                'network__status-container--active': isActive,
+            }, checkboxClassName), "data-testid": 'single-network-checkbox' }, { children: [isActive && jsxRuntime.jsx(check.ReactComponent, { className: 'network__status-icon' }), isChanging && (jsxRuntime.jsx(Spinner.Spinner, { className: 'network__status-spinner-icon', size: 12 }))] }))] })));
+
+exports.Network = Network;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    checkboxClassName?: string;
+    className?: string;
+    iconUrl?: string;
+    isActive: boolean;
+    isChanging: boolean;
+    networkName: string;
+};
+export declare const Network: ({ iconUrl, isActive, networkName, className, checkboxClassName, isChanging, }: Props) => JSX.Element;
+export {};

package/src/lib/components/NetworkPicker/components/Network/Network.es.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgError } from '../../../../shared/assets/error.es.js';
+import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../IconButton/IconButton.es.js';
+import { Spinner } from '../../../IconWithSpinner/Spinner/Spinner.es.js';
+
+const Network = ({ iconUrl, isActive, networkName, className, checkboxClassName = '', isChanging, }) => (jsxs("div", Object.assign({ className: classNames('network', className) }, { children: [jsxs("div", Object.assign({ className: 'network__title-container' }, { children: [iconUrl ? (jsx("img", { src: iconUrl, className: 'network__title-icon', alt: `${networkName} icon` })) : (jsx(SvgError, {})), jsx(Typography, Object.assign({ variant: 'button_primary', className: 'network__title-copy', as: 'span', weight: 'medium' }, { children: networkName }))] })), jsxs("div", Object.assign({ className: classNames('network__status-container', {
+                'network__status-container--active': isActive,
+            }, checkboxClassName), "data-testid": 'single-network-checkbox' }, { children: [isActive && jsx(SvgCheck, { className: 'network__status-icon' }), isChanging && (jsx(Spinner, { className: 'network__status-spinner-icon', size: 12 }))] }))] })));
+
+export { Network };

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

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

package/src/lib/components/NetworkPicker/components/NetworkAction/NetworkAction.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Network = require('../Network/Network.cjs.js');
+
+const NetworkAction = ({ iconUrl, networkId, network, onClick, networkName, checkboxClassName = '', newNetworkId, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'network-action', onClick: () => onClick(networkId), "data-testid": 'network-action' }, { children: jsxRuntime.jsx(Network.Network, { iconUrl: iconUrl, isActive: networkId === network, networkName: networkName, checkboxClassName: checkboxClassName, isChanging: newNetworkId === networkId }) })));
+
+exports.NetworkAction = NetworkAction;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type Props = {
+    checkboxClassName?: string;
+    iconUrl?: string;
+    network: number | undefined;
+    networkId: number;
+    networkName: string;
+    newNetworkId: number | undefined;
+    onClick: (networkId: number) => Promise<void>;
+};
+export declare const NetworkAction: ({ iconUrl, networkId, network, onClick, networkName, checkboxClassName, newNetworkId, }: Props) => JSX.Element;
+export {};

package/src/lib/components/NetworkPicker/components/NetworkAction/NetworkAction.es.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { Network } from '../Network/Network.es.js';
+
+const NetworkAction = ({ iconUrl, networkId, network, onClick, networkName, checkboxClassName = '', newNetworkId, }) => (jsx("div", Object.assign({ className: 'network-action', onClick: () => onClick(networkId), "data-testid": 'network-action' }, { children: jsx(Network, { iconUrl: iconUrl, isActive: networkId === network, networkName: networkName, checkboxClassName: checkboxClassName, isChanging: newNetworkId === networkId }) })));
+
+export { NetworkAction };

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

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