@dynamic-labs/sdk-react-core 0.17.0-RC.3 → 0.17.0-RC.31

package/src/lib/components/Popper/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getChildPosition';
+export * from './watchToScrollInHierarchy';
+export * from './isScrollable';

package/src/lib/components/Popper/utils/isScrollable/index.d.ts

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

package/src/lib/components/Popper/utils/isScrollable/isScrollable.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+exports.isScrollable = isScrollable;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.d.ts

@@ -0,0 +1 @@
+export declare const isScrollable: (element: HTMLElement) => boolean;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.js

@@ -0,0 +1,12 @@
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+export { isScrollable };

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/index.d.ts

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

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isScrollable = require('../isScrollable/isScrollable.cjs');
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable.isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+exports.watchToScrollInHierarchy = watchToScrollInHierarchy;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.d.ts

@@ -0,0 +1 @@
+export declare const watchToScrollInHierarchy: (root: HTMLElement, element: HTMLElement, callback: () => void) => () => void;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js

@@ -0,0 +1,20 @@
+import { isScrollable } from '../isScrollable/isScrollable.js';
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+export { watchToScrollInHierarchy };

package/src/lib/components/Portal/Portal.cjs

@@ -9,22 +9,32 @@ require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('react');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/rpc-providers');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
 require('../IconButton/IconButton.cjs');
-require('ethers');
+require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -36,7 +46,6 @@ var ReactFocusLock__default = /*#__PURE__*/_interopDefaultLegacy(ReactFocusLock)
 const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
     const { view } = ViewContext.useViewContext();
     const shouldCloseOnBackdropClick = view !== 'collect-user-data' &&
-        view !== 'network-not-supported' &&
         view !== 'update-email' &&
         view !== 'login-with-email-verification' &&
         view !== 'verify-email';

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

@@ -5,22 +5,32 @@ import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
 import 'react';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/rpc-providers';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
 import '../IconButton/IconButton.js';
-import 'ethers';
+import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
@@ -28,7 +38,6 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
     const { view } = useViewContext();
     const shouldCloseOnBackdropClick = view !== 'collect-user-data' &&
-        view !== 'network-not-supported' &&
         view !== 'update-email' &&
         view !== 'login-with-email-verification' &&
         view !== 'verify-email';

package/src/lib/components/Select/Select.cjs

@@ -8,10 +8,12 @@ var React = require('react');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 var arrowDown = require('../../shared/assets/arrow-down.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Icon = require('../Icon/Icon.cjs');

package/src/lib/components/Select/Select.js

@@ -4,10 +4,12 @@ import { useRef, useState, useLayoutEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgArrowDown } from '../../shared/assets/arrow-down.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../Button/Button.cjs');
+
+const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
+    const networkImage = (jsxRuntime.jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
+    return (jsxRuntime.jsxs(Button.Button, Object.assign({ dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button' }, { children: ["Select", networkImage, networkName, " network"] })));
+};
+
+exports.SelectNetworkButton = SelectNetworkButton;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type SelectNetworkButtonProps = {
+    networkIconUrl?: string;
+    networkId: string | number;
+    networkName?: string;
+    onClick: (networkId: string | number) => void;
+};
+export declare const SelectNetworkButton: FC<SelectNetworkButtonProps>;

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.js

@@ -0,0 +1,9 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+
+const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
+    const networkImage = (jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
+    return (jsxs(Button, Object.assign({ dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button' }, { children: ["Select", networkImage, networkName, " network"] })));
+};
+
+export { SelectNetworkButton };

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+type SelectWalletChainLayoutProps = {
+    HeaderIcon?: ReactElement;
+    onClose?: () => void;
+    onBack?: () => void;
+};
+export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
+export {};

package/src/lib/components/SendBalanceForm/SendBalanceForm.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var formik = require('formik');
+var yup = require('yup');
+var Input = require('../Input/Input.cjs');
+var Button = require('../Button/Button.cjs');
+
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        overBalance: 'Insufficient funds to send this amount.',
+        required: 'The amount field is required',
+    },
+    recipient: {
+        invalidFormat: 'The address is in invalid format',
+        required: 'The recipient is required',
+    },
+};
+const getDisplayErrorMessage = (errors, field) => {
+    const errorType = errors[field];
+    if (errorType) {
+        return mapFieldAndErrorToMessage[field][errorType];
+    }
+    return '';
+};
+const SendBalanceForm = ({ initialValues, onSubmit, balance, }) => {
+    const sendBalanceFormValidationSchema = React.useMemo(() => yup.object().shape({
+        amount: yup.string()
+            .required('required')
+            .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat')
+            .test({
+            message: 'overBalance',
+            test: (value) => {
+                if (!value || balance === undefined)
+                    return true;
+                try {
+                    const valueNumber = parseFloat(value);
+                    return valueNumber < balance;
+                }
+                catch (err) {
+                    return true;
+                }
+            },
+        }),
+        recipient: yup.string()
+            .required('required')
+            .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+    }), [balance]);
+    return (jsxRuntime.jsx(formik.Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, Object.assign({ className: 'send-balance-form' }, { children: [jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input.Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+};
+
+exports.SendBalanceForm = SendBalanceForm;

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export type SendBalanceFormValues = {
+    amount: string;
+    recipient: string;
+};
+export type Props = {
+    initialValues?: SendBalanceFormValues;
+    onSubmit: (formValues: SendBalanceFormValues) => void;
+    balance?: number;
+};
+export declare const SendBalanceForm: FC<Props>;

package/src/lib/components/SendBalanceForm/SendBalanceForm.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Formik, Form, Field } from 'formik';
+import { object, string } from 'yup';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
+
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        overBalance: 'Insufficient funds to send this amount.',
+        required: 'The amount field is required',
+    },
+    recipient: {
+        invalidFormat: 'The address is in invalid format',
+        required: 'The recipient is required',
+    },
+};
+const getDisplayErrorMessage = (errors, field) => {
+    const errorType = errors[field];
+    if (errorType) {
+        return mapFieldAndErrorToMessage[field][errorType];
+    }
+    return '';
+};
+const SendBalanceForm = ({ initialValues, onSubmit, balance, }) => {
+    const sendBalanceFormValidationSchema = useMemo(() => object().shape({
+        amount: string()
+            .required('required')
+            .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat')
+            .test({
+            message: 'overBalance',
+            test: (value) => {
+                if (!value || balance === undefined)
+                    return true;
+                try {
+                    const valueNumber = parseFloat(value);
+                    return valueNumber < balance;
+                }
+                catch (err) {
+                    return true;
+                }
+            },
+        }),
+        recipient: string()
+            .required('required')
+            .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+    }), [balance]);
+    return (jsx(Formik, Object.assign({ initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false }, { children: ({ errors, touched }) => (jsxs(Form, Object.assign({ className: 'send-balance-form' }, { children: [jsx(Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input, error: errors['amount'], message: touched['amount'] && getDisplayErrorMessage(errors, 'amount') }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, Object.assign({ dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button' }, { children: "Send now" }))] }))) })));
+};
+
+export { SendBalanceForm };

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

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var IconButton = require('../IconButton/IconButton.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
+var Alert = require('../Alert/Alert.cjs');
+var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
+var Chip = require('../Chip/Chip.cjs');
+var FormFieldLabel = require('../FormFieldLabel/FormFieldLabel.cjs');
+var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    const balanceNumber = React.useMemo(() => {
+        if (!balance)
+            return;
+        const number = parseFloat(balance);
+        if (isNaN(number))
+            return;
+        return parseFloat(balance);
+    }, [balance]);
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+};
+
+exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -0,0 +1,19 @@
+import { FC, MouseEventHandler, ReactNode } from 'react';
+import { SendBalanceFormValues } from '../SendBalanceForm/SendBalanceForm';
+export type SendBalancePageLayoutProps = {
+    balance: string | undefined;
+    chain: string;
+    currencySymbol: string;
+    displayPoweredByDynamicFooter?: boolean;
+    error?: string;
+    initialValues?: SendBalanceFormValues;
+    isLoading: boolean;
+    networkIcon?: ReactNode;
+    networkName?: string;
+    onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onSubmit: (formValues: SendBalanceFormValues) => void;
+    walletAddress: string;
+    walletName: string;
+};
+export declare const SendBalancePageLayout: FC<SendBalancePageLayoutProps>;

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

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { IconButton } from '../IconButton/IconButton.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { Typography } from '../Typography/Typography.js';
+import { Icon } from '../Icon/Icon.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
+import { Alert } from '../Alert/Alert.js';
+import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
+import { Chip } from '../Chip/Chip.js';
+import { FormFieldLabel } from '../FormFieldLabel/FormFieldLabel.js';
+import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    const balanceNumber = useMemo(() => {
+        if (!balance)
+            return;
+        const number = parseFloat(balance);
+        if (isNaN(number))
+            return;
+        return parseFloat(balance);
+    }, [balance]);
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { SendBalancePageLayout };

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('react');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/consts/index.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
+var Typography = require('../../../Typography/Typography.cjs');
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon.getChainIcon(chain);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(ChainIcon, {}) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+exports.TokenBalanceCard = TokenBalanceCard;

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type TokenBalanceCardProps = {
+    balance?: string;
+    chain: string;
+    currencySymbol: string;
+};
+export declare const TokenBalanceCard: FC<TokenBalanceCardProps>;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import 'react';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/consts/index.js';
+import { Icon } from '../../../Icon/Icon.js';
+import { Typography } from '../../../Typography/Typography.js';
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon(chain);
+    return (jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(ChainIcon, {}) })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+export { TokenBalanceCard };

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/index.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+export { SendBalancePageLayout } from './SendBalancePageLayout';
+export type { SendBalancePageLayoutProps } from './SendBalancePageLayout';

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

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
 var isSSR = require('../../shared/utils/functions/isSSR/isSSR.cjs');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('ethers');
 require('../../shared/consts/index.cjs');
 
 const isShadowDOMFlagEnabled = () => {

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

@@ -1,12 +1,14 @@
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
 import { isSSR } from '../../shared/utils/functions/isSSR/isSSR.js';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import 'ethers';
 import '../../shared/consts/index.js';
 
 const isShadowDOMFlagEnabled = () => {