@dynamic-labs/sdk-react-core 0.19.0 → 0.19.2

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -28,6 +28,7 @@ import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
 import 'react-dom';
+import 'react-i18next';
 import '../../ShadowDOM/ShadowDOM.js';
 import '../../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
@@ -36,7 +37,6 @@ import '../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../Transition/OpacityTransition/OpacityTransition.js';
 import '../../IconButton/IconButton.js';
 import '../../Alert/Alert.js';
-import 'react-i18next';
 import 'formik';
 import 'yup';
 import '../../InlineWidget/InlineWidget.js';

package/src/lib/components/Modal/Modal.cjs

@@ -28,12 +28,12 @@ require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('react-dom');
+require('react-i18next');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
-require('react-i18next');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');

package/src/lib/components/Modal/Modal.js

@@ -24,12 +24,12 @@ import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import 'react-dom';
+import 'react-i18next';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
-import 'react-i18next';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';

package/src/lib/components/NeedHelpSection/NeedHelpSection.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var Typography = require('../Typography/Typography.cjs');
+
+const NeedHelpSection = () => {
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
+    const supportEmail = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportEmail;
+    if (!supportEmail)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: 'need-help-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) })] }));
+};
+
+exports.NeedHelpSection = NeedHelpSection;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NeedHelpSection: () => JSX.Element | null;

package/src/lib/components/NeedHelpSection/NeedHelpSection.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { Typography } from '../Typography/Typography.js';
+
+const NeedHelpSection = () => {
+    const { projectSettings } = useInternalDynamicContext();
+    const { t } = useTranslation();
+    const supportEmail = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportEmail;
+    if (!supportEmail)
+        return null;
+    return (jsxs("div", { className: 'need-help-section', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) })] }));
+};
+
+export { NeedHelpSection };

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

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

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -12,10 +12,10 @@ require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isNetworkUnsupported = require('../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.cjs');
@@ -27,6 +27,7 @@ require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('react-dom');
+require('react-i18next');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
@@ -35,7 +36,6 @@ require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
-require('react-i18next');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -8,10 +8,10 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isNetworkUnsupported } from '../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.js';
@@ -23,6 +23,7 @@ import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import 'react-dom';
+import 'react-i18next';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
@@ -31,7 +32,6 @@ import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
-import 'react-i18next';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs

@@ -34,11 +34,11 @@ require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagic
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-i18next');
 require('../../../OverlayCard/OverlayCard.context.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
-require('react-i18next');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.js

@@ -30,11 +30,11 @@ import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicI
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-i18next';
 import '../../../OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
-import 'react-i18next';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/NetworkPicker/components/Network/Network.cjs

@@ -13,10 +13,10 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 var error = require('../../../../shared/assets/error.cjs');
 var check = require('../../../../shared/assets/check.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -34,11 +34,11 @@ require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagic
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-i18next');
 require('../../../OverlayCard/OverlayCard.context.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
-require('react-i18next');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var Spinner = require('../../../IconWithSpinner/Spinner/Spinner.cjs');

package/src/lib/components/NetworkPicker/components/Network/Network.js

@@ -9,10 +9,10 @@ import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgError } from '../../../../shared/assets/error.js';
 import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -30,11 +30,11 @@ import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicI
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-i18next';
 import '../../../OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
-import 'react-i18next';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { Spinner } from '../../../IconWithSpinner/Spinner/Spinner.js';

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs

@@ -10,10 +10,10 @@ require('../../../../shared/logger.cjs');
 var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../shared/consts/index.cjs');
@@ -34,11 +34,11 @@ require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagic
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-i18next');
 require('../../../OverlayCard/OverlayCard.context.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
-require('react-i18next');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.js

@@ -6,10 +6,10 @@ import '../../../../shared/logger.js';
 import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 import '../../../../shared/consts/index.js';
@@ -30,11 +30,11 @@ import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicI
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-i18next';
 import '../../../OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
-import 'react-i18next';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/UnsupportedNetwork.cjs

@@ -12,10 +12,10 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 require('react');
 var error = require('../../../../shared/assets/error.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('../../../../shared/consts/index.cjs');
 var Icon = require('../../../Icon/Icon.cjs');
 var Typography = require('../../../Typography/Typography.cjs');

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/UnsupportedNetwork.js

@@ -8,10 +8,10 @@ import '../../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgError } from '../../../../shared/assets/error.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../../../shared/consts/index.js';
 import { Icon } from '../../../Icon/Icon.js';
 import { Typography } from '../../../Typography/Typography.js';

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs

@@ -16,10 +16,10 @@ var check = require('../../shared/assets/check.cjs');
 var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
 var signInWithEmail = require('../../shared/assets/sign-in-with-email.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -12,10 +12,10 @@ import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
 import { ReactComponent as SvgSignInWithEmail } from '../../shared/assets/sign-in-with-email.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';

package/src/lib/components/OverlayCard/OverlayCard.cjs

@@ -29,13 +29,13 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-i18next');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
-require('react-i18next');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');

package/src/lib/components/OverlayCard/OverlayCard.js

@@ -25,13 +25,13 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-i18next';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
-import 'react-i18next';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';

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

@@ -29,12 +29,12 @@ require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
+require('react-i18next');
 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('react-i18next');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');

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

@@ -25,12 +25,12 @@ import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
+import 'react-i18next';
 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 'react-i18next';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';

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

@@ -12,10 +12,10 @@ require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 var arrowDown = require('../../shared/assets/arrow-down.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 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

@@ -8,10 +8,10 @@ import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgArrowDown } from '../../shared/assets/arrow-down.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactI18next = require('react-i18next');
 var formik = require('formik');
 var yup = require('yup');
 var Input = require('../Input/Input.cjs');
@@ -14,10 +15,10 @@ require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getOrdinalNumber = require('../../utils/functions/getOrdinalNumber/getOrdinalNumber.cjs');
@@ -26,19 +27,19 @@ const sendBalanceFormInitialValues = {
     amount: '',
     recipient: '',
 };
-const mapFieldAndErrorToMessage = {
-    amount: {
-        invalidDecimals: 'Please enter a value up to the {decimals} decimal place.',
-        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, decimals) => {
+const getDisplayErrorMessage = (errors, t, field, decimals) => {
+    const mapFieldAndErrorToMessage = {
+        amount: {
+            invalidDecimals: t('dyn_send_transaction.validation.amount.invalid_decimals', { decimals }),
+            invalidFormat: t('dyn_send_transaction.validation.amount.invalid_decimals', { decimals }),
+            overBalance: t('dyn_send_transaction.validation.amount.over_balance'),
+            required: t('dyn_send_transaction.validation.amount.required'),
+        },
+        recipient: {
+            invalidFormat: t('dyn_send_transaction.validation.recipient.invalid_format'),
+            required: t('dyn_send_transaction.validation.recipient.required'),
+        },
+    };
     const errorType = errors[field];
     if (errorType) {
         const errorMessage = mapFieldAndErrorToMessage[field][errorType];
@@ -47,6 +48,7 @@ const getDisplayErrorMessage = (errors, field, decimals) => {
     return '';
 };
 const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) => {
+    const { t } = reactI18next.useTranslation();
     const sendBalanceFormValidationSchema = React.useMemo(() => {
         const decimalsRegex = new RegExp(`^\\d*(\\.\\d{1,${decimals}})?$`);
         return yup.object().shape({
@@ -73,9 +75,9 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
                 .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
         });
     }, [balance, decimals]);
-    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', decimals) }), 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: 'medium', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
+    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: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input.Input, error: errors['amount'], message: touched['amount'] &&
+                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 exports.SendBalanceForm = SendBalanceForm;

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Formik, Form, Field } from 'formik';
 import { object, string } from 'yup';
 import { Input } from '../Input/Input.js';
@@ -10,10 +11,10 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getOrdinalNumber } from '../../utils/functions/getOrdinalNumber/getOrdinalNumber.js';
@@ -22,19 +23,19 @@ const sendBalanceFormInitialValues = {
     amount: '',
     recipient: '',
 };
-const mapFieldAndErrorToMessage = {
-    amount: {
-        invalidDecimals: 'Please enter a value up to the {decimals} decimal place.',
-        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, decimals) => {
+const getDisplayErrorMessage = (errors, t, field, decimals) => {
+    const mapFieldAndErrorToMessage = {
+        amount: {
+            invalidDecimals: t('dyn_send_transaction.validation.amount.invalid_decimals', { decimals }),
+            invalidFormat: t('dyn_send_transaction.validation.amount.invalid_decimals', { decimals }),
+            overBalance: t('dyn_send_transaction.validation.amount.over_balance'),
+            required: t('dyn_send_transaction.validation.amount.required'),
+        },
+        recipient: {
+            invalidFormat: t('dyn_send_transaction.validation.recipient.invalid_format'),
+            required: t('dyn_send_transaction.validation.recipient.required'),
+        },
+    };
     const errorType = errors[field];
     if (errorType) {
         const errorMessage = mapFieldAndErrorToMessage[field][errorType];
@@ -43,6 +44,7 @@ const getDisplayErrorMessage = (errors, field, decimals) => {
     return '';
 };
 const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) => {
+    const { t } = useTranslation();
     const sendBalanceFormValidationSchema = useMemo(() => {
         const decimalsRegex = new RegExp(`^\\d*(\\.\\d{1,${decimals}})?$`);
         return object().shape({
@@ -69,9 +71,9 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
                 .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
         });
     }, [balance, decimals]);
-    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', decimals) }), 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: 'medium', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
+    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: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input, error: errors['amount'], message: touched['amount'] &&
+                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 export { SendBalanceForm };