@dynamic-labs/sdk-react-core 0.17.0-RC.2 → 0.17.0-RC.20

package/src/lib/components/Popper/PopperContent/PopperContent.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+
+const mapTransformOriginToClassName = {
+    'bottom-left': 'popper-content__transform-origin-bottom-left',
+    'bottom-right': 'popper-content__transform-origin-bottom-right',
+    'top-left': 'popper-content__transform-origin-top-left',
+    'top-right': 'popper-content__transform-origin-top-right',
+};
+const PopperContent = React.forwardRef(({ children, transformOrigin, style }, ref) => (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames.classNames('popper-content', mapTransformOriginToClassName[transformOrigin]), style: style }, { children: children }))));
+PopperContent.displayName = 'PopperContent';
+
+exports.PopperContent = PopperContent;

package/src/lib/components/Popper/PopperContent/PopperContent.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { TransformOrigin } from '../Popper.types';
+export type PopperContentProps = {
+    style?: CSSProperties;
+    transformOrigin: TransformOrigin;
+};
+export declare const PopperContent: import("react").ForwardRefExoticComponent<PopperContentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/components/Popper/PopperContent/PopperContent.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+
+const mapTransformOriginToClassName = {
+    'bottom-left': 'popper-content__transform-origin-bottom-left',
+    'bottom-right': 'popper-content__transform-origin-bottom-right',
+    'top-left': 'popper-content__transform-origin-top-left',
+    'top-right': 'popper-content__transform-origin-top-right',
+};
+const PopperContent = forwardRef(({ children, transformOrigin, style }, ref) => (jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames('popper-content', mapTransformOriginToClassName[transformOrigin]), style: style }, { children: children }))));
+PopperContent.displayName = 'PopperContent';
+
+export { PopperContent };

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

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

package/src/lib/components/Popper/PopperContext/PopperContext.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const popperContext = React.createContext(undefined);
+const PopperProvider = ({ children }) => {
+    const { Provider } = popperContext;
+    const containerRef = React.useRef(null);
+    return (jsxRuntime.jsx(Provider, Object.assign({ value: {
+            containerRef,
+        } }, { children: jsxRuntime.jsx("div", Object.assign({ ref: containerRef, style: { position: 'relative' } }, { children: children })) })));
+};
+const usePopper = () => {
+    const context = React.useContext(popperContext);
+    if (!context) {
+        throw new Error('To use popper, use the PopperProvider above in the dom hierarchy');
+    }
+    return context;
+};
+
+exports.PopperProvider = PopperProvider;
+exports.popperContext = popperContext;
+exports.usePopper = usePopper;

package/src/lib/components/Popper/PopperContext/PopperContext.d.ts

@@ -0,0 +1,8 @@
+import { FC, MutableRefObject, PropsWithChildren } from 'react';
+type PopperContext = {
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+};
+export declare const popperContext: import("react").Context<PopperContext | undefined>;
+export declare const PopperProvider: FC<PropsWithChildren>;
+export declare const usePopper: () => PopperContext;
+export {};

package/src/lib/components/Popper/PopperContext/PopperContext.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef } from 'react';
+
+const popperContext = createContext(undefined);
+const PopperProvider = ({ children }) => {
+    const { Provider } = popperContext;
+    const containerRef = useRef(null);
+    return (jsx(Provider, Object.assign({ value: {
+            containerRef,
+        } }, { children: jsx("div", Object.assign({ ref: containerRef, style: { position: 'relative' } }, { children: children })) })));
+};
+const usePopper = () => {
+    const context = useContext(popperContext);
+    if (!context) {
+        throw new Error('To use popper, use the PopperProvider above in the dom hierarchy');
+    }
+    return context;
+};
+
+export { PopperProvider, popperContext, usePopper };

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

@@ -0,0 +1 @@
+export { PopperProvider, usePopper } from './PopperContext';

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

@@ -0,0 +1,2 @@
+export { Popper } from './Popper';
+export { PopperProvider } from './PopperContext';

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getChildPosition = (root, element) => {
+    const rootRect = root.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return {
+        left: elementRect.x - rootRect.x,
+        top: elementRect.y - rootRect.y,
+    };
+};
+
+exports.getChildPosition = getChildPosition;

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

@@ -0,0 +1,2 @@
+import { Position } from '../../Popper.types';
+export declare const getChildPosition: (root: HTMLElement, element: HTMLElement) => Position;

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

@@ -0,0 +1,10 @@
+const getChildPosition = (root, element) => {
+    const rootRect = root.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return {
+        left: elementRect.x - rootRect.x,
+        top: elementRect.y - rootRect.y,
+    };
+};
+
+export { getChildPosition };

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

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

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,31 @@ 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('../SendBalanceForm/SendBalanceForm.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -36,7 +45,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,31 @@ 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 '../SendBalanceForm/SendBalanceForm.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
@@ -28,7 +37,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,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var formik = require('formik');
+var yup = require('yup');
+var Input = require('../Input/Input.cjs');
+var Button = require('../Button/Button.cjs');
+
+const sendBalanceFormValidationSchema = yup.object().shape({
+    amount: yup.string()
+        .required('required')
+        .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat'),
+    recipient: yup.string()
+        .required('required')
+        .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+});
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        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 }) => (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, { 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, { 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,10 @@
+import { FC } from 'react';
+export type SendBalanceFormValues = {
+    amount: string;
+    recipient: string;
+};
+export type Props = {
+    initialValues?: SendBalanceFormValues;
+    onSubmit: (formValues: SendBalanceFormValues) => void;
+};
+export declare const SendBalanceForm: FC<Props>;

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Formik, Form, Field } from 'formik';
+import { object, string } from 'yup';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
+
+const sendBalanceFormValidationSchema = object().shape({
+    amount: string()
+        .required('required')
+        .matches(/^\d+(\.\d{1,8})?$/, 'invalidFormat'),
+    recipient: string()
+        .required('required')
+        .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
+});
+const sendBalanceFormInitialValues = {
+    amount: '',
+    recipient: '',
+};
+const mapFieldAndErrorToMessage = {
+    amount: {
+        invalidFormat: 'The amount is in invalid format',
+        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 }) => (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, { 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, { 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,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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');
+require('react');
+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 TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+    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, {}) })));
+    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 })) }))) })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), 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,17 @@
+import { FC, MouseEventHandler } 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;
+    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,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 'react';
+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 { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, }) => {
+    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, {}) })));
+    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 })) }))) })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { SendBalancePageLayout };