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

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var PopperContext = require('../PopperContext/PopperContext.cjs');
+var getChildPosition = require('../utils/getChildPosition/getChildPosition.cjs');
+var watchToScrollInHierarchy = require('../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs');
+var PopperContent = require('../PopperContent/PopperContent.cjs');
+
+const Popper = React.forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, }, ref) => {
+    const { containerRef } = PopperContext.usePopper();
+    const [anchorPosition, setAnchorPosition] = React.useState();
+    const container = containerRef.current;
+    React.useEffect(() => {
+        if (!isOpen) {
+            return setAnchorPosition(undefined);
+        }
+        const container = containerRef.current;
+        const anchor = anchorRef.current;
+        if (!container || !anchor)
+            return;
+        setAnchorPosition(getChildPosition.getChildPosition(container, anchor));
+        return watchToScrollInHierarchy.watchToScrollInHierarchy(container, anchor, () => {
+            setIsOpen(false);
+        });
+    }, [anchorRef, containerRef, isOpen, setAnchorPosition, setIsOpen]);
+    const anchorOriginPosition = React.useMemo(() => {
+        var _a;
+        const anchorRect = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!anchorPosition || !anchorRect)
+            return;
+        switch (anchorOrigin) {
+            case 'top-left':
+                return anchorPosition;
+            case 'top-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width });
+            case 'bottom-left':
+                return Object.assign(Object.assign({}, anchorPosition), { top: anchorPosition.top + anchorRect.height });
+            case 'bottom-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width, top: anchorPosition.top + anchorRect.height });
+            default:
+                return undefined;
+        }
+    }, [anchorPosition, anchorRef, anchorOrigin]);
+    if (!isOpen || !anchorOriginPosition || container === null)
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsx(PopperContent.PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: anchorOriginPosition }, { children: children })), container);
+});
+Popper.displayName = 'Popper';
+
+exports.Popper = Popper;

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

@@ -0,0 +1,12 @@
+import { MutableRefObject } from 'react';
+import { AnchorOrigin, TransformOrigin } from '../Popper.types';
+export type PopperProps = {
+    anchorOrigin?: AnchorOrigin;
+    anchorRef: MutableRefObject<HTMLElement | null>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    transformOrigin?: TransformOrigin;
+};
+export declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from '../PopperContext/PopperContext.js';
+import { getChildPosition } from '../utils/getChildPosition/getChildPosition.js';
+import { watchToScrollInHierarchy } from '../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js';
+import { PopperContent } from '../PopperContent/PopperContent.js';
+
+const Popper = forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, }, ref) => {
+    const { containerRef } = usePopper();
+    const [anchorPosition, setAnchorPosition] = useState();
+    const container = containerRef.current;
+    useEffect(() => {
+        if (!isOpen) {
+            return setAnchorPosition(undefined);
+        }
+        const container = containerRef.current;
+        const anchor = anchorRef.current;
+        if (!container || !anchor)
+            return;
+        setAnchorPosition(getChildPosition(container, anchor));
+        return watchToScrollInHierarchy(container, anchor, () => {
+            setIsOpen(false);
+        });
+    }, [anchorRef, containerRef, isOpen, setAnchorPosition, setIsOpen]);
+    const anchorOriginPosition = useMemo(() => {
+        var _a;
+        const anchorRect = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!anchorPosition || !anchorRect)
+            return;
+        switch (anchorOrigin) {
+            case 'top-left':
+                return anchorPosition;
+            case 'top-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width });
+            case 'bottom-left':
+                return Object.assign(Object.assign({}, anchorPosition), { top: anchorPosition.top + anchorRect.height });
+            case 'bottom-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width, top: anchorPosition.top + anchorRect.height });
+            default:
+                return undefined;
+        }
+    }, [anchorPosition, anchorRef, anchorOrigin]);
+    if (!isOpen || !anchorOriginPosition || container === null)
+        return null;
+    return createPortal(jsx(PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: anchorOriginPosition }, { children: children })), container);
+});
+Popper.displayName = 'Popper';
+
+export { Popper };

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

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

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

@@ -0,0 +1,6 @@
+export type AnchorOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TransformOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type Position = {
+    left: number;
+    top: number;
+};

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

@@ -13,6 +13,7 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
@@ -23,12 +24,18 @@ 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('../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');

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

@@ -9,6 +9,7 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
@@ -19,12 +20,18 @@ 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 '../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';

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

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');

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

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useLayoutEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.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 };