@dynamic-labs/sdk-react-core 0.18.0-beta.29 → 0.18.100-viem.0

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

@@ -11,29 +11,29 @@ import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
+import 'viem';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography.js';
 import { getDisplayValue } from './utils/getDisplayValue/getDisplayValue.js';
 
-const Select = (_a) => {
-    var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = __rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
-    const selectRef = useRef(null);
-    const [displayValue, setDisplayValue] = useState();
-    useLayoutEffect(() => {
-        if (!value)
-            return;
-        const selectElement = selectRef.current;
-        setDisplayValue(getDisplayValue(selectElement));
-    }, [value, setDisplayValue]);
-    return (jsxs("div", Object.assign({ className: 'select__field' }, { children: [jsxs("div", Object.assign({ className: classNames(className, 'select__container') }, { children: [jsxs("label", Object.assign({ className: classNames('select__body', {
-                            select__error: error,
-                            select__has_value: Boolean(displayValue),
-                        }), htmlFor: id }, { children: [jsx("span", Object.assign({ className: 'select__value' }, { children: displayValue || jsx("span", { children: "\u00A0" }) })), jsx("span", Object.assign({ className: 'select__label' }, { children: label })), jsx("div", Object.assign({ className: 'select__control_icon' }, { children: jsx(Icon, Object.assign({ size: 'medium' }, { children: jsx(SvgArrowDown, {}) })) }))] })), jsx("select", Object.assign({}, selectProps, { "data-testid": selectDataTestId, ref: selectRef, id: id, value: value, placeholder: label, className: 'select' }, { children: children }))] })), message && (jsx(Typography, Object.assign({ className: classNames('select__message', {
-                    select__message__error: error,
-                }), variant: 'body_mini' }, { children: message })))] })));
+const Select = (_a) => {
+    var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = __rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
+    const selectRef = useRef(null);
+    const [displayValue, setDisplayValue] = useState();
+    useLayoutEffect(() => {
+        if (!value)
+            return;
+        const selectElement = selectRef.current;
+        setDisplayValue(getDisplayValue(selectElement));
+    }, [value, setDisplayValue]);
+    return (jsxs("div", { className: 'select__field', children: [jsxs("div", { className: classNames(className, 'select__container'), children: [jsxs("label", { className: classNames('select__body', {
+                            select__error: error,
+                            select__has_value: Boolean(displayValue),
+                        }), htmlFor: id, children: [jsx("span", { className: 'select__value', children: displayValue || jsx("span", { children: "\u00A0" }) }), jsx("span", { className: 'select__label', children: label }), jsx("div", { className: 'select__control_icon', children: jsx(Icon, { size: 'medium', children: jsx(SvgArrowDown, {}) }) })] }), jsx("select", Object.assign({}, selectProps, { "data-testid": selectDataTestId, ref: selectRef, id: id, value: value, placeholder: label, className: 'select', children: children }))] }), message && (jsx(Typography, { className: classNames('select__message', {
+                    select__message__error: error,
+                }), variant: 'body_mini', children: message }))] }));
 };
 
 export { Select };

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

@@ -1,10 +1,10 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
-export type SelectProps = React.ComponentPropsWithoutRef<'select'> & {
-    className?: string;
-    error?: boolean;
-    label: string;
-    message?: ReactNode;
-    optional?: boolean;
-    selectDataTestId?: string;
-};
-export type SelectComponent = FC<PropsWithChildren<SelectProps>>;
+import { FC, PropsWithChildren, ReactNode } from 'react';
+export type SelectProps = React.ComponentPropsWithoutRef<'select'> & {
+    className?: string;
+    error?: boolean;
+    label: string;
+    message?: ReactNode;
+    optional?: boolean;
+    selectDataTestId?: string;
+};
+export type SelectComponent = FC<PropsWithChildren<SelectProps>>;

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

@@ -1,2 +1,2 @@
-export { Select } from './Select';
-export type { SelectComponent } from './Select.types';
+export { Select } from './Select';
+export type { SelectComponent } from './Select.types';

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getDisplayValue = (element) => {
-    if (!element)
-        return;
-    const { selectedIndex } = element;
-    if (selectedIndex === undefined)
-        return;
-    const option = element.options[selectedIndex];
-    if (!option.hasAttribute('value'))
-        return;
-    return option.text;
+const getDisplayValue = (element) => {
+    if (!element)
+        return;
+    const { selectedIndex } = element;
+    if (selectedIndex === undefined)
+        return;
+    const option = element.options[selectedIndex];
+    if (!option.hasAttribute('value'))
+        return;
+    return option.text;
 };
 
 exports.getDisplayValue = getDisplayValue;

package/src/lib/components/Select/utils/getDisplayValue/getDisplayValue.d.ts

@@ -1 +1 @@
-export declare const getDisplayValue: (element: HTMLSelectElement | null) => string | undefined;
+export declare const getDisplayValue: (element: HTMLSelectElement | null) => string | undefined;

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

@@ -1,13 +1,13 @@
-const getDisplayValue = (element) => {
-    if (!element)
-        return;
-    const { selectedIndex } = element;
-    if (selectedIndex === undefined)
-        return;
-    const option = element.options[selectedIndex];
-    if (!option.hasAttribute('value'))
-        return;
-    return option.text;
+const getDisplayValue = (element) => {
+    if (!element)
+        return;
+    const { selectedIndex } = element;
+    if (selectedIndex === undefined)
+        return;
+    const option = element.options[selectedIndex];
+    if (!option.hasAttribute('value'))
+        return;
+    return option.text;
 };
 
 export { getDisplayValue };

package/src/lib/components/Select/utils/getDisplayValue/index.d.ts

@@ -1 +1 @@
-export { getDisplayValue } from './getDisplayValue';
+export { getDisplayValue } from './getDisplayValue';

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

@@ -1 +1 @@
-export * from './getDisplayValue';
+export * from './getDisplayValue';

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

@@ -5,9 +5,9 @@ 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"] })));
+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, { 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

@@ -1,8 +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>;
+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

@@ -1,9 +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"] })));
+const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
+    const networkImage = (jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
+    return (jsxs(Button, { 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.cjs

@@ -7,6 +7,6 @@ var Typography = require('../Typography/Typography.cjs');
 var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
 var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsxRuntime.jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title', children: "Select Chain" }), jsxRuntime.jsx(Typography.Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', children: "This wallet supports multiple chains. Select which chain you'd like to connect to" }), jsxRuntime.jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
 
 exports.SelectWalletChainLayout = SelectWalletChainLayout;

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

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren, ReactElement } from 'react';
-type SelectWalletChainLayoutProps = {
-    HeaderIcon?: ReactElement;
-};
-export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
-export {};
+import { FC, PropsWithChildren, ReactElement } from 'react';
+type SelectWalletChainLayoutProps = {
+    HeaderIcon?: ReactElement;
+};
+export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
+export {};

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.js

@@ -3,6 +3,6 @@ import { Typography } from '../Typography/Typography.js';
 import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
 import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsx(Typography, { className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title', children: "Select Chain" }), jsx(Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', children: "This wallet supports multiple chains. Select which chain you'd like to connect to" }), jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] }), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
 
 export { SelectWalletChainLayout };

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

@@ -9,53 +9,53 @@ 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" }))] }))) })));
+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, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { 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, { 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

@@ -1,11 +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>;
+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

@@ -5,53 +5,53 @@ 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" }))] }))) })));
+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, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { 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, { 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

@@ -17,7 +17,7 @@ var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAd
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
-require('ethers');
+require('viem');
 require('../../shared/consts/index.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
 var Typography = require('../Typography/Typography.cjs');
@@ -34,18 +34,18 @@ 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(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { 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, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletName && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { 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(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -1,19 +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>;
+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

@@ -13,7 +13,7 @@ import { shortenWalletAddress } from '../../shared/utils/functions/shortenWallet
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
+import 'viem';
 import '../../shared/consts/index.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
 import { Typography } from '../Typography/Typography.js';
@@ -30,18 +30,18 @@ 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(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
+    const backButton = onClickBack && (jsx(IconButton, { 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, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: "Send from" }), walletName && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletName: walletName }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };