@dynamic-labs/sdk-react-core 1.1.0-alpha.0 → 1.1.0-alpha.2

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
 import { Typography } from '../Typography/Typography.js';
@@ -12,10 +13,13 @@ const typographyColor = {
     notice: 'brand-primary',
     success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(message) && (jsx("div", { className: classNames('modal-header-banner', {
-            'modal-header-banner__error': type === 'error',
-            'modal-header-banner__notice': type === 'notice',
-            'modal-header-banner__success': type === 'success',
-        }), children: jsx(Typography, { variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false, children: message }) })) }));
+const ModalHeaderBanner = ({ messageKey, type = 'error', disableTruncate = false, }) => {
+    const { t } = useTranslation();
+    return (jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(messageKey) && (jsx("div", { className: classNames('modal-header-banner', {
+                'modal-header-banner__error': type === 'error',
+                'modal-header-banner__notice': type === 'notice',
+                'modal-header-banner__success': type === 'success',
+            }), children: jsx(Typography, { variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false, copykey: messageKey, children: t(messageKey || '') }) })) }));
+};
 
 export { ModalHeaderBanner };

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

@@ -7,6 +7,7 @@ var reactI18next = require('react-i18next');
 var sdkApi = require('@dynamic-labs/sdk-api');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('react');
+require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
@@ -80,7 +81,7 @@ const NeedHelpSection = () => {
         if (!hasContactInfo) {
             return null;
         }
-        return (jsxRuntime.jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
+        return (jsxRuntime.jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', copykey: 'dyn_need_help_section.contact_support', children: jsxRuntime.jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
     };
     const getPasskeyRecoverySession = () => {
         if (!isRecoveryEnabled) {
@@ -90,14 +91,14 @@ const NeedHelpSection = () => {
         const finalRecoveryText = hasContactInfo
             ? recoveryText
             : recoveryText.slice(0, 1).toUpperCase() + recoveryText.slice(1);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasContactInfo && (jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.divider') })), jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('helper-link', {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasContactInfo && (jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', copykey: 'dyn_need_help_section.divider', children: t('dyn_need_help_section.divider') })), jsxRuntime.jsx(TextButton.TextButton, { copykey: 'dyn_need_help_section.recovery_button', className: classNames.classNames('helper-link', {
                         'need-help-section--captalize': !hasContactInfo,
                     }), onClick: initPasskeyRecoveryProcess, children: finalRecoveryText })] }));
     };
     if (!hasContactInfo && !isRecoveryEnabled) {
         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') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
+    return (jsxRuntime.jsxs("div", { className: 'need-help-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', copykey: 'dyn_need_help_section.info', children: t('dyn_need_help_section.info') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
 };
 
 exports.NeedHelpSection = NeedHelpSection;

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

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import 'react';
+import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/CaptchaContext/CaptchaContext.js';
@@ -76,7 +77,7 @@ const NeedHelpSection = () => {
         if (!hasContactInfo) {
             return null;
         }
-        return (jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
+        return (jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsx(Typography, { variant: 'body_small', color: 'link', copykey: 'dyn_need_help_section.contact_support', children: jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
     };
     const getPasskeyRecoverySession = () => {
         if (!isRecoveryEnabled) {
@@ -86,14 +87,14 @@ const NeedHelpSection = () => {
         const finalRecoveryText = hasContactInfo
             ? recoveryText
             : recoveryText.slice(0, 1).toUpperCase() + recoveryText.slice(1);
-        return (jsxs(Fragment, { children: [hasContactInfo && (jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.divider') })), jsx(TextButton, { className: classNames('helper-link', {
+        return (jsxs(Fragment, { children: [hasContactInfo && (jsx(Typography, { color: 'secondary', variant: 'body_small', copykey: 'dyn_need_help_section.divider', children: t('dyn_need_help_section.divider') })), jsx(TextButton, { copykey: 'dyn_need_help_section.recovery_button', className: classNames('helper-link', {
                         'need-help-section--captalize': !hasContactInfo,
                     }), onClick: initPasskeyRecoveryProcess, children: finalRecoveryText })] }));
     };
     if (!hasContactInfo && !isRecoveryEnabled) {
         return null;
     }
-    return (jsxs("div", { className: 'need-help-section', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
+    return (jsxs("div", { className: 'need-help-section', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', copykey: 'dyn_need_help_section.info', children: t('dyn_need_help_section.info') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
 };
 
 export { NeedHelpSection };

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

@@ -21,6 +21,7 @@ require('@dynamic-labs/multi-wallet');
 var isNetworkUnsupported = require('../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var MenuList = require('../MenuList/MenuList/MenuList.cjs');
+require('../../events/dynamicEvents.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

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

@@ -17,6 +17,7 @@ import '@dynamic-labs/multi-wallet';
 import { isNetworkUnsupported } from '../../utils/functions/isNetworkUnsupported/isNetworkUnsupported.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { MenuList } from '../MenuList/MenuList/MenuList.js';
+import '../../events/dynamicEvents.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';

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

@@ -9,6 +9,7 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 require('react');
 var stroke = require('../../../../shared/assets/stroke.cjs');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('../../../../events/dynamicEvents.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');

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

@@ -5,6 +5,7 @@ import '../../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import '../../../../events/dynamicEvents.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/CaptchaContext/CaptchaContext.js';

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('react');
+require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import 'react';
+import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('react');
+require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import 'react';
+import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';

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

@@ -22,7 +22,7 @@ var Typography = require('../../../Typography/Typography.cjs');
 
 const UnsupportedNetwork = ({ showMsg }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(error.ReactComponent, {}) }), showMsg && (jsxRuntime.jsx(Typography.Typography, { className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small', children: t('dyn_network_not_supported.button') }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(error.ReactComponent, {}) }), showMsg && (jsxRuntime.jsx(Typography.Typography, { className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small', copykey: 'dyn_network_not_supported.button', children: t('dyn_network_not_supported.button') }))] }));
 };
 
 exports.UnsupportedNetwork = UnsupportedNetwork;

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

@@ -18,7 +18,7 @@ import { Typography } from '../../../Typography/Typography.js';
 
 const UnsupportedNetwork = ({ showMsg }) => {
     const { t } = useTranslation();
-    return (jsxs(Fragment, { children: [jsx(Icon, { size: 'small', children: jsx(SvgError, {}) }), showMsg && (jsx(Typography, { className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small', children: t('dyn_network_not_supported.button') }))] }));
+    return (jsxs(Fragment, { children: [jsx(Icon, { size: 'small', children: jsx(SvgError, {}) }), showMsg && (jsx(Typography, { className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small', copykey: 'dyn_network_not_supported.button', children: t('dyn_network_not_supported.button') }))] }));
 };
 
 export { UnsupportedNetwork };

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

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');
@@ -71,18 +72,19 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerText, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerTextKey, }) => {
     const { t } = reactI18next.useTranslation();
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     const EmailIcon = React.useMemo(() => {
         const EmailIcon = (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signInWithEmail.ReactComponent, Object.assign({}, props, { "data-testid": 'sign-in-with-email-icon' })) }));
         return EmailIcon;
     }, []);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxRuntime.jsx("div", { className: 'otp-verification-view__status-header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid
-                            ? t('dyn_otp_verification.verification_succeeded')
-                            : t('dyn_otp_verification.confirm_code') }) }) }), successBannerText && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsxs("div", { className: classNames.classNames('otp-verification-view', {
-                    'otp-verification-view--message': Boolean(successBannerText || error),
-                }), children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_otp_verification.hang_tight') })), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_otp_verification.code_sent') }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) }))] })] }))] }), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
+    const titleCopyKey = () => isValid
+        ? 'dyn_otp_verification.verification_succeeded'
+        : 'dyn_otp_verification.confirm_code';
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxRuntime.jsx("div", { className: 'otp-verification-view__status-header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', copykey: titleCopyKey(), children: t(titleCopyKey()) }) }) }), successBannerTextKey && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'notice', messageKey: successBannerTextKey, disableTruncate: true })), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsxs("div", { className: classNames.classNames('otp-verification-view', {
+                    'otp-verification-view--message': Boolean(successBannerTextKey || error),
+                }), children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.hang_tight', children: t('dyn_otp_verification.hang_tight') })), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.code_sent', children: t('dyn_otp_verification.code_sent') }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) }))] })] }))] }), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -8,7 +8,7 @@ type OtpVerificationLayoutProps = {
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;
-    successBannerText?: string;
+    successBannerTextKey?: string;
 };
 export declare const OTPVerificationView: FC<OtpVerificationLayoutProps>;
 export {};

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

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';
@@ -67,18 +68,19 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerText, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerTextKey, }) => {
     const { t } = useTranslation();
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     const EmailIcon = useMemo(() => {
         const EmailIcon = (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignInWithEmail, Object.assign({}, props, { "data-testid": 'sign-in-with-email-icon' })) }));
         return EmailIcon;
     }, []);
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsx("div", { className: 'otp-verification-view__status-header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid
-                            ? t('dyn_otp_verification.verification_succeeded')
-                            : t('dyn_otp_verification.confirm_code') }) }) }), successBannerText && (jsx(ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxs("div", { className: classNames('otp-verification-view', {
-                    'otp-verification-view--message': Boolean(successBannerText || error),
-                }), children: [isValid && (jsx(IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_otp_verification.hang_tight') })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_otp_verification.code_sent') }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) }))] })] }))] }), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
+    const titleCopyKey = () => isValid
+        ? 'dyn_otp_verification.verification_succeeded'
+        : 'dyn_otp_verification.confirm_code';
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsx("div", { className: 'otp-verification-view__status-header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', copykey: titleCopyKey(), children: t(titleCopyKey()) }) }) }), successBannerTextKey && (jsx(ModalHeaderBanner, { type: 'notice', messageKey: successBannerTextKey, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', messageKey: error === null || error === void 0 ? void 0 : error.message }), jsxs("div", { className: classNames('otp-verification-view', {
+                    'otp-verification-view--message': Boolean(successBannerTextKey || error),
+                }), children: [isValid && (jsx(IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.hang_tight', children: t('dyn_otp_verification.hang_tight') })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.code_sent', children: t('dyn_otp_verification.code_sent') }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) }))] })] }))] }), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
 };
 
 export { OTPVerificationView };

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

@@ -9,6 +9,7 @@ var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 var SlideInUpTransition = require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');

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

@@ -5,6 +5,7 @@ import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import { SlideInUpTransition } from '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
+import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';

package/src/lib/components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs

@@ -9,6 +9,7 @@ require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('react');
+require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
@@ -63,7 +64,7 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/
 const PasskeyCreatedSuccessBanner = ({ className }) => {
     const { showPasskeyCreatedSuccess } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'success', className: className, children: t('dyn_passkey_created_success.text') })) }));
+    return (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'success', className: className, copykey: 'dyn_passkey_created_success.text', children: t('dyn_passkey_created_success.text') })) }));
 };
 
 exports.PasskeyCreatedSuccessBanner = PasskeyCreatedSuccessBanner;

package/src/lib/components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js

@@ -5,6 +5,7 @@ import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
 import 'react';
+import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/CaptchaContext/CaptchaContext.js';
@@ -59,7 +60,7 @@ import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/P
 const PasskeyCreatedSuccessBanner = ({ className }) => {
     const { showPasskeyCreatedSuccess } = useInternalDynamicContext();
     const { t } = useTranslation();
-    return (jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsx(ErrorContainer, { variant: 'success', className: className, children: t('dyn_passkey_created_success.text') })) }));
+    return (jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsx(ErrorContainer, { variant: 'success', className: className, copykey: 'dyn_passkey_created_success.text', children: t('dyn_passkey_created_success.text') })) }));
 };
 
 export { PasskeyCreatedSuccessBanner };

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

@@ -9,6 +9,7 @@ require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('react');
+require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');

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

@@ -5,6 +5,7 @@ import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
 import 'react';
+import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';

package/src/lib/components/Search/Search.cjs

@@ -7,6 +7,6 @@ require('react');
 var search = require('../../assets/search.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxRuntime.jsxs("label", { htmlFor: id, className: classNames.classNames('search__container', value ? 'search__container--active' : undefined), children: [jsxRuntime.jsx("div", { className: 'search-icon__container', children: jsxRuntime.jsx(search.ReactComponent, {}) }), jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames.classNames('search__input', className), "data-testid": 'Search' }), value.length > 0 && (jsxRuntime.jsx("button", { type: 'button', onClick: onClickClear, className: 'search__button--clear', children: "Clear" }))] }));
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, copykey, }) => (jsxRuntime.jsxs("label", { htmlFor: id, className: classNames.classNames('search__container', value ? 'search__container--active' : undefined), children: [jsxRuntime.jsx("div", { className: 'search-icon__container', children: jsxRuntime.jsx(search.ReactComponent, {}) }), jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames.classNames('search__input', className), "data-testid": 'Search', copykey: copykey }), value.length > 0 && (jsxRuntime.jsx("button", { type: 'button', onClick: onClickClear, className: 'search__button--clear', children: "Clear" }))] }));
 
 exports.Search = Search;

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

@@ -1,2 +1,3 @@
+import { CopyKey } from '../../shared';
 import { InputProps } from './Search.types';
-export declare const Search: ({ className, id, label, type, onChange, onBlur, name, value, onClickClear, }: InputProps) => JSX.Element;
+export declare const Search: ({ className, id, label, type, onChange, onBlur, name, value, onClickClear, copykey, }: InputProps & CopyKey) => JSX.Element;

package/src/lib/components/Search/Search.js

@@ -3,6 +3,6 @@ import 'react';
 import { ReactComponent as SvgSearch } from '../../assets/search.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxs("label", { htmlFor: id, className: classNames('search__container', value ? 'search__container--active' : undefined), children: [jsx("div", { className: 'search-icon__container', children: jsx(SvgSearch, {}) }), jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames('search__input', className), "data-testid": 'Search' }), value.length > 0 && (jsx("button", { type: 'button', onClick: onClickClear, className: 'search__button--clear', children: "Clear" }))] }));
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, copykey, }) => (jsxs("label", { htmlFor: id, className: classNames('search__container', value ? 'search__container--active' : undefined), children: [jsx("div", { className: 'search-icon__container', children: jsx(SvgSearch, {}) }), jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames('search__input', className), "data-testid": 'Search', copykey: copykey }), value.length > 0 && (jsx("button", { type: 'button', onClick: onClickClear, className: 'search__button--clear', children: "Clear" }))] }));
 
 export { Search };

package/src/lib/components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.cjs

@@ -16,9 +16,9 @@ const SecureTurnkeyWalletCard = ({ className }) => {
     const { initPasskeyRecoveryProcess } = usePasskeyRecovery.usePasskeyRecovery();
     if (!isTurnkeyWalletWithoutAuthenticator)
         return null;
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('secure-turnkey-wallet-card', className), children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', className: 'secure-turnkey-wallet-card__text', color: 'primary', children: t('dyn_secure_pregenerated_wallet.description') }), jsxRuntime.jsx(Button.Button, { onClick: initPasskeyRecoveryProcess, buttonVariant: 'brand-primary', color: 'primary', typographyProps: {
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('secure-turnkey-wallet-card', className), children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', className: 'secure-turnkey-wallet-card__text', color: 'primary', copykey: 'dyn_secure_pregenerated_wallet.description', children: t('dyn_secure_pregenerated_wallet.description') }), jsxRuntime.jsx(Button.Button, { onClick: initPasskeyRecoveryProcess, buttonVariant: 'brand-primary', color: 'primary', typographyProps: {
                     color: 'inherit',
-                }, showInternalLoading: false, children: t('dyn_secure_pregenerated_wallet.secure_button') })] }));
+                }, showInternalLoading: false, copykey: 'dyn_secure_pregenerated_wallet.secure_button', children: t('dyn_secure_pregenerated_wallet.secure_button') })] }));
 };
 
 exports.SecureTurnkeyWalletCard = SecureTurnkeyWalletCard;

package/src/lib/components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.js

@@ -12,9 +12,9 @@ const SecureTurnkeyWalletCard = ({ className }) => {
     const { initPasskeyRecoveryProcess } = usePasskeyRecovery();
     if (!isTurnkeyWalletWithoutAuthenticator)
         return null;
-    return (jsxs("div", { className: classNames('secure-turnkey-wallet-card', className), children: [jsx(Typography, { variant: 'body_small', weight: 'regular', className: 'secure-turnkey-wallet-card__text', color: 'primary', children: t('dyn_secure_pregenerated_wallet.description') }), jsx(Button, { onClick: initPasskeyRecoveryProcess, buttonVariant: 'brand-primary', color: 'primary', typographyProps: {
+    return (jsxs("div", { className: classNames('secure-turnkey-wallet-card', className), children: [jsx(Typography, { variant: 'body_small', weight: 'regular', className: 'secure-turnkey-wallet-card__text', color: 'primary', copykey: 'dyn_secure_pregenerated_wallet.description', children: t('dyn_secure_pregenerated_wallet.description') }), jsx(Button, { onClick: initPasskeyRecoveryProcess, buttonVariant: 'brand-primary', color: 'primary', typographyProps: {
                     color: 'inherit',
-                }, showInternalLoading: false, children: t('dyn_secure_pregenerated_wallet.secure_button') })] }));
+                }, showInternalLoading: false, copykey: 'dyn_secure_pregenerated_wallet.secure_button', children: t('dyn_secure_pregenerated_wallet.secure_button') })] }));
 };
 
 export { SecureTurnkeyWalletCard };

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

@@ -78,9 +78,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: 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(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
+    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'], copykey: 'dyn_send_transaction.data.amount.label', 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'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.send_button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 exports.SendBalanceForm = SendBalanceForm;

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

@@ -74,9 +74,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: 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(SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
+    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'], copykey: 'dyn_send_transaction.data.amount.label', 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'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsx(SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.send_button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 export { SendBalanceForm };

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

@@ -47,7 +47,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), 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, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), 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, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -43,7 +43,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxs(Fragment, { 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: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), 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, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxs(Fragment, { 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', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), 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, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };

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

@@ -9,7 +9,7 @@ var helpers = require('../../../../widgets/DynamicWidget/helpers/helpers.cjs');
 
 const TokenBalanceCard = ({ chainIcon, currencySymbol, balance, }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsxs("div", { className: 'token-balance-card', children: [jsxRuntime.jsxs("div", { className: 'token-balance-card__chain', children: [Boolean(chainIcon) && (jsxRuntime.jsx("div", { className: 'token-balance-card__chain__icon', children: chainIcon })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), balance !== undefined && (jsxRuntime.jsxs("div", { className: 'token-balance-card__balance-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'tertiary', children: t('dyn_send_transaction.data.balance.label') }), jsxRuntime.jsxs("div", { className: 'token-balance-card__balance', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: helpers.roundBalance(balance, 6) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'tertiary', children: currencySymbol })] })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: 'token-balance-card', children: [jsxRuntime.jsxs("div", { className: 'token-balance-card__chain', children: [Boolean(chainIcon) && (jsxRuntime.jsx("div", { className: 'token-balance-card__chain__icon', children: chainIcon })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), balance !== undefined && (jsxRuntime.jsxs("div", { className: 'token-balance-card__balance-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'tertiary', copykey: 'dyn_send_transaction.data.balance.label', children: t('dyn_send_transaction.data.balance.label') }), jsxRuntime.jsxs("div", { className: 'token-balance-card__balance', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: helpers.roundBalance(balance, 6) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'tertiary', children: currencySymbol })] })] }))] }));
 };
 
 exports.TokenBalanceCard = TokenBalanceCard;

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

@@ -5,7 +5,7 @@ import { roundBalance } from '../../../../widgets/DynamicWidget/helpers/helpers.
 
 const TokenBalanceCard = ({ chainIcon, currencySymbol, balance, }) => {
     const { t } = useTranslation();
-    return (jsxs("div", { className: 'token-balance-card', children: [jsxs("div", { className: 'token-balance-card__chain', children: [Boolean(chainIcon) && (jsx("div", { className: 'token-balance-card__chain__icon', children: chainIcon })), jsx(Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), balance !== undefined && (jsxs("div", { className: 'token-balance-card__balance-container', children: [jsx(Typography, { variant: 'body_small', color: 'tertiary', children: t('dyn_send_transaction.data.balance.label') }), jsxs("div", { className: 'token-balance-card__balance', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: roundBalance(balance, 6) }), jsx(Typography, { variant: 'body_small', color: 'tertiary', children: currencySymbol })] })] }))] }));
+    return (jsxs("div", { className: 'token-balance-card', children: [jsxs("div", { className: 'token-balance-card__chain', children: [Boolean(chainIcon) && (jsx("div", { className: 'token-balance-card__chain__icon', children: chainIcon })), jsx(Typography, { variant: 'body_normal', color: 'primary', children: currencySymbol })] }), balance !== undefined && (jsxs("div", { className: 'token-balance-card__balance-container', children: [jsx(Typography, { variant: 'body_small', color: 'tertiary', copykey: 'dyn_send_transaction.data.balance.label', children: t('dyn_send_transaction.data.balance.label') }), jsxs("div", { className: 'token-balance-card__balance', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: roundBalance(balance, 6) }), jsx(Typography, { variant: 'body_small', color: 'tertiary', children: currencySymbol })] })] }))] }));
 };
 
 export { TokenBalanceCard };

package/src/lib/components/SocialSignIn/SocialSignIn.cjs

@@ -19,6 +19,7 @@ require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('../../events/dynamicEvents.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/SocialSignIn/SocialSignIn.js

@@ -15,6 +15,7 @@ import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../../events/dynamicEvents.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/SyncPasskeyFlow/SyncPasskeyFlow.cjs

@@ -18,6 +18,7 @@ var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs'
 require('viem');
 require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
+require('../../events/dynamicEvents.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');

package/src/lib/components/SyncPasskeyFlow/SyncPasskeyFlow.js

@@ -14,6 +14,7 @@ import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js
 import 'viem';
 import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
+import '../../events/dynamicEvents.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';

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

@@ -1,2 +1,3 @@
 import { ComponentPropsWithoutRef } from 'react';
-export declare const TextButton: ({ className, ...props }: ComponentPropsWithoutRef<'button'>) => JSX.Element;
+import { CopyKey } from '../../shared';
+export declare const TextButton: ({ className, ...props }: ComponentPropsWithoutRef<'button'> & CopyKey) => JSX.Element;