@dynamic-labs/sdk-react-core 0.16.0 → 0.16.2

package/src/lib/components/Input/Input.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+const Input = ({ className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames.classNames('input', className, {
+                        input__error: error,
+                        input__has_trailing: optional,
+                    }) }), jsxRuntime.jsx("label", Object.assign({ htmlFor: id, className: classNames.classNames('input__label') }, { children: label })), optional && jsxRuntime.jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: classNames.classNames('input__message', {
+                input__message__error: error,
+            }) }, { children: message })))] }));
+
+exports.Input = Input;

package/src/lib/components/Input/Input.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { Typography } from '../Typography/Typography.js';
+
+const Input = ({ className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, }) => (jsxs("div", { children: [jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames('input', className, {
+                        input__error: error,
+                        input__has_trailing: optional,
+                    }) }), jsx("label", Object.assign({ htmlFor: id, className: classNames('input__label') }, { children: label })), optional && jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsx(Typography, Object.assign({ variant: 'body_mini', className: classNames('input__message', {
+                input__message__error: error,
+            }) }, { children: message })))] }));
+
+export { Input };

package/src/lib/components/ListTile/ListTile.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+
+exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { Typography } from '../Typography/Typography.js';
+
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+
+export { ListTile };

package/src/lib/components/LogoutButton/LogoutButton.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var logout = require('../../shared/assets/logout.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var Button = require('../Button/Button.cjs');
+
+const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
+    const { handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
+            ? { color: 'secondary', variant: 'button_tertiary' }
+            : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsxRuntime.jsx(logout.ReactComponent, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
+};
+
+exports.LogoutButton = LogoutButton;

package/src/lib/components/LogoutButton/LogoutButton.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgLogout } from '../../shared/assets/logout.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { Button } from '../Button/Button.js';
+
+const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
+    const { handleLogOut } = useInternalDynamicContext();
+    return (jsx(Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
+            ? { color: 'secondary', variant: 'button_tertiary' }
+            : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsx(SvgLogout, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
+};
+
+export { LogoutButton };

package/src/lib/components/MockedQrCode/MockedQrCode.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+var MockContext = require('../../context/MockContext/MockContext.cjs');
+var ThemeContext = require('../../context/ThemeContext/ThemeContext.cjs');
+var QRCode = require('../../views/QrCodeView/QRCode.cjs');
+
+const MockedQrCode = () => {
+    const { mockedSDK } = MockContext.useMockContext();
+    const { theme } = ThemeContext.useThemeContext();
+    if (!mockedSDK)
+        return null;
+    const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
+    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+};
+
+exports.MockedQrCode = MockedQrCode;

package/src/lib/components/MockedQrCode/MockedQrCode.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { CoinbaseIcon } from '@dynamic-labs/iconic';
+import { useMockContext } from '../../context/MockContext/MockContext.js';
+import { useThemeContext } from '../../context/ThemeContext/ThemeContext.js';
+import { QRCode } from '../../views/QrCodeView/QRCode.js';
+
+const MockedQrCode = () => {
+    const { mockedSDK } = useMockContext();
+    const { theme } = useThemeContext();
+    if (!mockedSDK)
+        return null;
+    const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
+    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+};
+
+export { MockedQrCode };

package/src/lib/components/ModalHeader/ModalHeader.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
+        'modal-header--absolute': positionAbsolute,
+        'modal-header--align-content-bottom': alignContent === 'bottom',
+    }) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+
+exports.ModalHeader = ModalHeader;

package/src/lib/components/ModalHeader/ModalHeader.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
+        'modal-header--absolute': positionAbsolute,
+        'modal-header--align-content-bottom': alignContent === 'bottom',
+    }) }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+
+export { ModalHeader };

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

@@ -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');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+var VerticalDrawerAnimation = require('../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+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.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import { VerticalDrawerAnimation } from '../AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.js';
+import { Typography } from '../Typography/Typography.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/NetworkPicker/NetworkPicker.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs');
+require('../../utils/constants/colors.cjs');
+var index = require('../../shared/utils/hooks/useOnClickOutside/index.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var NetworkControl = require('./components/NetworkControl/NetworkControl.cjs');
+var ActionList = require('./components/ActionList/ActionList.cjs');
+var NetworkAction = require('./components/NetworkAction/NetworkAction.cjs');
+
+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.js

@@ -0,0 +1,48 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.js';
+import '../../utils/constants/colors.js';
+import { useOnClickOutside } from '../../shared/utils/hooks/useOnClickOutside/index.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { NetworkControl } from './components/NetworkControl/NetworkControl.js';
+import { ActionList } from './components/ActionList/ActionList.js';
+import { NetworkAction } from './components/NetworkAction/NetworkAction.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

@@ -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');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var close = require('../../../../shared/assets/close.cjs');
+require('../../../../utils/constants/colors.cjs');
+var usePreventPageScroll = require('../../../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+var useTransition = require('../../../../utils/hooks/useTransition/useTransition.cjs');
+require('react-dom');
+var Typography = require('../../../Typography/Typography.cjs');
+require('../../../ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
+var IconButton = require('../../../IconButton/IconButton.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+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.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.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
+import '../../../../utils/constants/colors.js';
+import { usePreventPageScroll } from '../../../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
+import '../../../../shared/consts/index.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import { useTransition } from '../../../../utils/hooks/useTransition/useTransition.js';
+import 'react-dom';
+import { Typography } from '../../../Typography/Typography.js';
+import '../../../ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.js';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.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/EvmNetworkControl/EvmNetworkControl.cjs

@@ -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');
+var stroke = require('../../../../shared/assets/stroke.cjs');
+require('react');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+var Typography = require('../../../Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../IconButton/IconButton.cjs');
+var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs');
+var UnsupportedNetwork = require('../UnsupportedNetwork/UnsupportedNetwork.cjs');
+
+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.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
+import 'react';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import { Typography } from '../../../Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../../Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../IconButton/IconButton.js';
+import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.js';
+import { UnsupportedNetwork } from '../UnsupportedNetwork/UnsupportedNetwork.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/Network/Network.cjs

@@ -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');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var error = require('../../../../shared/assets/error.cjs');
+var check = require('../../../../shared/assets/check.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../IconButton/IconButton.cjs');
+var Spinner = require('../../../IconWithSpinner/Spinner/Spinner.cjs');
+
+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;