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

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

@@ -1,7 +1,8 @@
 import { FC, PropsWithChildren, ReactElement, ElementType } from 'react';
+import { CopyKey } from '../../shared';
 export type TooltipProps = {
     as?: ElementType;
     className?: string;
     content: string | ReactElement;
-};
+} & CopyKey;
 export declare const Tooltip: FC<PropsWithChildren<TooltipProps>>;

package/src/lib/components/Tooltip/Tooltip.js

@@ -15,6 +15,7 @@ import 'viem';
 import '@dynamic-labs/utils';
 import { tooltipZIndex } from '../../shared/consts/index.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';
@@ -60,7 +61,7 @@ import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/Verif
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 
-const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
+const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
     const portalRoot = useElementById('dynamic-tooltips');
     const [childrenHover, childrenHoverHandlers] = useHover(false, true);
     const [hoversTooltip, setHoversTooltip] = useState(false);
@@ -116,7 +117,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
     });
     return (jsxs(Fragment, { children: [createPortal(jsx(ShadowDOM, { zIndex: tooltipZIndex, children: jsxs("div", { "data-testid": 'dynamicTooltip', className: classNames('dynamic-tooltip', {
                         'dynamic-tooltip--visible': visible,
-                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef, children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef, copykey: copykey, children: [content, jsx(SvgTooltipArrow, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
 };
 
 export { Tooltip };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -37,14 +37,14 @@ var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurn
 var SecureTurnkeyWalletCard = require('../SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.cjs');
 var PasskeyCreatedSuccessBanner = require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
     const { t } = reactI18next.useTranslation();
     const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'transaction-confirmation__secure-wallet' }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: alert && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'transaction-confirmation__secure-wallet' }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
                                     onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
-                                }, expanded: true, loading: isLoading, disabled: disableSendButton || isTurnkeyWalletWithoutAuthenticator, children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+                                }, expanded: true, loading: isLoading, disabled: disableSendButton || isTurnkeyWalletWithoutAuthenticator, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

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

@@ -1,4 +1,5 @@
 import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+import { CopyKey } from '../../shared';
 type TransactionConfirmationPageLayoutProps = {
     appLogoUrl?: string;
     appName?: string;
@@ -12,6 +13,6 @@ type TransactionConfirmationPageLayoutProps = {
     onClickSend: MouseEventHandler<HTMLButtonElement>;
     title?: ReactNode;
     alert?: ReactNode;
-};
+} & CopyKey;
 export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
 export {};

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -33,14 +33,14 @@ import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTu
 import { SecureTurnkeyWalletCard } from '../SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.js';
 import { PasskeyCreatedSuccessBanner } from '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 
-const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, copykey, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, alert, children, }) => {
     const { t } = useTranslation();
     const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsx(SecureTurnkeyWalletCard, { className: 'transaction-confirmation__secure-wallet' }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'transaction-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', copykey: copykey, children: title }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'transaction-confirmation__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxs("div", { className: 'transaction-confirmation__content', children: [jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: alert && (jsx("div", { className: 'transaction-confirmation__warning', children: alert })) }), jsx(SecureTurnkeyWalletCard, { className: 'transaction-confirmation__secure-wallet' }), jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsx(Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_send_transaction.confirmation.cancel_button', children: t('dyn_send_transaction.confirmation.cancel_button') })), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
                                     onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
-                                }, expanded: true, loading: isLoading, disabled: disableSendButton || isTurnkeyWalletWithoutAuthenticator, children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+                                }, expanded: true, loading: isLoading, disabled: disableSendButton || isTurnkeyWalletWithoutAuthenticator, copykey: 'dyn_send_transaction.confirmation.confirm_button', children: t('dyn_send_transaction.confirmation.confirm_button') })] }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var Typography = require('../../../Typography/Typography.cjs');
 var Skeleton = require('../../../Skeleton/Skeleton.cjs');
 
-const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxRuntime.jsxs("div", { className: 'transaction-row', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label', children: label }), jsxRuntime.jsxs("div", { className: 'transaction-row__content', "data-testid": dataTestId, children: [isLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true, children: children }), suffix && (jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', weight: 'regular', children: suffix })), icon] }))] })] }));
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, copykey, }) => (jsxRuntime.jsxs("div", { className: 'transaction-row', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label', copykey: copykey, children: label }), jsxRuntime.jsxs("div", { className: 'transaction-row__content', "data-testid": dataTestId, children: [isLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true, children: children }), suffix && (jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', weight: 'regular', children: suffix })), icon] }))] })] }));
 
 exports.TransactionRow = TransactionRow;

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.d.ts

@@ -1,4 +1,5 @@
 import { FC, PropsWithChildren, ReactNode } from 'react';
+import { CopyKey } from '../../../../shared';
 type TransactionRowProps = {
     dataTestId?: string;
     icon?: ReactNode;
@@ -7,6 +8,6 @@ type TransactionRowProps = {
     label: ReactNode;
     suffix?: ReactNode;
     title?: string;
-};
+} & CopyKey;
 export declare const TransactionRow: FC<PropsWithChildren<TransactionRowProps>>;
 export {};

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js

@@ -2,6 +2,6 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Typography } from '../../../Typography/Typography.js';
 import { Skeleton } from '../../../Skeleton/Skeleton.js';
 
-const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxs("div", { className: 'transaction-row', children: [jsx(Typography, { color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label', children: label }), jsxs("div", { className: 'transaction-row__content', "data-testid": dataTestId, children: [isLoading && (jsx(Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxs(Fragment, { children: [jsx(Typography, { title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true, children: children }), suffix && (jsx(Typography, { as: 'span', color: 'secondary', weight: 'regular', children: suffix })), icon] }))] })] }));
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, copykey, }) => (jsxs("div", { className: 'transaction-row', children: [jsx(Typography, { color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label', copykey: copykey, children: label }), jsxs("div", { className: 'transaction-row__content', "data-testid": dataTestId, children: [isLoading && (jsx(Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxs(Fragment, { children: [jsx(Typography, { title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true, children: children }), suffix && (jsx(Typography, { as: 'span', color: 'secondary', weight: 'regular', children: suffix })), icon] }))] })] }));
 
 export { TransactionRow };

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -28,6 +28,7 @@ var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 var Button = require('../Button/Button.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../events/dynamicEvents.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -72,7 +73,7 @@ const TransactionStatusLayout = ({ destinationAddress, amount, networkName, netw
     const { t } = reactI18next.useTranslation();
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const networkIcon = (jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) }), jsxRuntime.jsxs("div", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: t('dyn_send_transaction.succeeded.title') }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.succeeded.recipient.label'), children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.succeeded.network.label'), children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.succeeded.total_amount.label'), children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) }), jsxRuntime.jsxs("div", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', copykey: 'dyn_send_transaction.succeeded.title', children: t('dyn_send_transaction.succeeded.title') }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.succeeded.recipient.label', label: t('dyn_send_transaction.succeeded.recipient.label'), children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.succeeded.network.label', label: t('dyn_send_transaction.succeeded.network.label'), children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { copykey: 'dyn_send_transaction.succeeded.total_amount.label', label: t('dyn_send_transaction.succeeded.total_amount.label'), children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, copykey: 'dyn_send_transaction.succeeded.continue_button', children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -24,6 +24,7 @@ import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import { Button } from '../Button/Button.js';
 import '@dynamic-labs/multi-wallet';
 import '../../context/ThemeContext/ThemeContext.js';
+import '../../events/dynamicEvents.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
@@ -68,7 +69,7 @@ const TransactionStatusLayout = ({ destinationAddress, amount, networkName, netw
     const { t } = useTranslation();
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsx(SvgClose, {}) }));
     const networkIcon = (jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: t('dyn_send_transaction.succeeded.title') }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: t('dyn_send_transaction.succeeded.recipient.label'), children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: t('dyn_send_transaction.succeeded.network.label'), children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: t('dyn_send_transaction.succeeded.total_amount.label'), children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', copykey: 'dyn_send_transaction.succeeded.title', children: t('dyn_send_transaction.succeeded.title') }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { copykey: 'dyn_send_transaction.succeeded.recipient.label', label: t('dyn_send_transaction.succeeded.recipient.label'), children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { copykey: 'dyn_send_transaction.succeeded.network.label', label: t('dyn_send_transaction.succeeded.network.label'), children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { copykey: 'dyn_send_transaction.succeeded.total_amount.label', label: t('dyn_send_transaction.succeeded.total_amount.label'), children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, copykey: 'dyn_send_transaction.succeeded.continue_button', children: t('dyn_send_transaction.succeeded.continue_button') }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 export { TransactionStatusLayout };

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = 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/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -1,6 +1,7 @@
 import { __rest } from '../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
+import '../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
+import { CopyKey } from '../../shared';
 export type TypographyTag = ElementType;
 export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium';
 export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip' | 'green-1' | 'inherit';
@@ -12,5 +13,5 @@ export type TypographyProps<TAG extends ElementType = 'p'> = {
     truncate?: boolean;
     variant?: TypographyVariant;
     weight?: TypographyWeight;
-} & ComponentPropsWithoutRef<TAG>;
+} & ComponentPropsWithoutRef<TAG> & CopyKey;
 export type TypographyComponent = <TAG extends ElementType>(props: TypographyProps<TAG>, ref?: any) => ReactElement;

package/src/lib/components/UserAddress/UserAddress.cjs

@@ -19,6 +19,7 @@ require('../../shared/consts/index.cjs');
 var useFetchNameService = require('../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');
 var StatusDot = require('../StatusDot/StatusDot.cjs');
 var Typography = require('../Typography/Typography.cjs');
+require('../../events/dynamicEvents.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/UserAddress/UserAddress.js

@@ -15,6 +15,7 @@ import '../../shared/consts/index.js';
 import { useFetchNameService } from '../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';
 import { StatusDot } from '../StatusDot/StatusDot.js';
 import { Typography } from '../Typography/Typography.js';
+import '../../events/dynamicEvents.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -50,9 +50,9 @@ const UserProfile = ({ rootClassName }) => {
     if (!user)
         return null;
     return (jsxRuntime.jsxs("div", { "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: 'My information', children: jsxRuntime.jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name }) => {
-                        const { label } = index$1.getValueByKey(fieldsConfig, name);
+                        const { label, key } = index$1.getValueByKey(fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
-                        return (jsxRuntime.jsx(UserProfileField.UserProfileField, { name: name, label: label, value: value }, name));
+                        return (jsxRuntime.jsx(UserProfileField.UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
                     }) }) })), (providers === null || providers === void 0 ? void 0 : providers.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: 'Social accounts', children: jsxRuntime.jsx("div", { className: 'user-profile__social-accounts', children: providers.map(({ provider }) => (jsxRuntime.jsx(UserProfileSocialAccount.UserProfileSocialAccount, { provider: provider }, provider))) }) }))] }));
 };
 

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

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 export type UserProfileField = {
     label: string;
+    key: string;
     type: string;
 };
 export type UserProfileProps = {

package/src/lib/components/UserProfile/UserProfile.js

@@ -46,9 +46,9 @@ const UserProfile = ({ rootClassName }) => {
     if (!user)
         return null;
     return (jsxs("div", { "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsx(ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, { title: 'My information', children: jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name }) => {
-                        const { label } = getValueByKey(fieldsConfig, name);
+                        const { label, key } = getValueByKey(fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
-                        return (jsx(UserProfileField, { name: name, label: label, value: value }, name));
+                        return (jsx(UserProfileField, { copykey: key, name: name, label: label, value: value }, name));
                     }) }) })), (providers === null || providers === void 0 ? void 0 : providers.length) > 0 && (jsx(UserProfileSection, { title: 'Social accounts', children: jsx("div", { className: 'user-profile__social-accounts', children: providers.map(({ provider }) => (jsx(UserProfileSocialAccount, { provider: provider }, provider))) }) }))] }));
 };
 

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
+require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');
@@ -59,10 +60,10 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
-const UserProfileField = ({ name, label, value, }) => {
+const UserProfileField = ({ name, label, value, copykey, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxRuntime.jsxs("div", { className: 'user-profile-field', children: [label && (jsxRuntime.jsx(Typography.Typography, { as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', children: label })), jsxRuntime.jsxs("div", { className: 'user-profile-field__value', children: [jsxRuntime.jsx(Typography.Typography, { color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal', children: value }), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'user-profile-field', children: [label && (jsxRuntime.jsx(Typography.Typography, { as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', copykey: copykey, children: label })), jsxRuntime.jsxs("div", { className: 'user-profile-field__value', children: [jsxRuntime.jsx(Typography.Typography, { color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal', children: value }), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] })] }));
 };
 
 exports.UserProfileField = UserProfileField;

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { CopyKey } from '../../../../shared';
 export type UserProfileFieldProps = {
     disabled?: boolean;
     label?: string;
     name: string;
     value?: string | boolean | null;
-};
-export declare const UserProfileField: ({ name, label, value, }: UserProfileFieldProps) => JSX.Element;
+} & CopyKey;
+export declare const UserProfileField: ({ name, label, value, copykey, }: UserProfileFieldProps) => JSX.Element;

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
+import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';
@@ -55,10 +56,10 @@ import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
-const UserProfileField = ({ name, label, value, }) => {
+const UserProfileField = ({ name, label, value, copykey, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxs("div", { className: 'user-profile-field', children: [label && (jsx(Typography, { as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', children: label })), jsxs("div", { className: 'user-profile-field__value', children: [jsx(Typography, { color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal', children: value }), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] })] }));
+    return (jsxs("div", { className: 'user-profile-field', children: [label && (jsx(Typography, { as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', copykey: copykey, children: label })), jsxs("div", { className: 'user-profile-field__value', children: [jsx(Typography, { color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal', children: value }), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] })] }));
 };
 
 export { UserProfileField };

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 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/UserProfile/parts/UserProfileSection/UserProfileSection.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 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/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

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

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

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

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -11,6 +11,8 @@ var utils = require('@dynamic-labs/utils');
 var walletBook = require('@dynamic-labs/wallet-book');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var app = require('../../app.cjs');
+var dynamicEvents = require('../../events/dynamicEvents.cjs');
+var useEventListener = require('../../utils/hooks/events/useEventListener/useEventListener.cjs');
 var CaptchaContext = require('../CaptchaContext/CaptchaContext.cjs');
 var ErrorContext = require('../ErrorContext/ErrorContext.cjs');
 var ViewContext = require('../ViewContext/ViewContext.cjs');
@@ -33,7 +35,6 @@ var api = require('../../data/api.cjs');
 var EmailVerificationContext = require('../EmailVerificationContext/EmailVerificationContext.cjs');
 require('react-dom');
 var isSameWalletName = require('../../utils/functions/isSameWalletName/isSameWalletName.cjs');
-var useEventListener = require('../../utils/hooks/useEventListener/useEventListener.cjs');
 var useFetchNonce = require('../../utils/hooks/useFetchNonce/useFetchNonce.cjs');
 var useFetchProjectSettings = require('../../utils/hooks/useFetchProjectSettings/useFetchProjectSettings.cjs');
 var ThemeContext = require('../ThemeContext/ThemeContext.cjs');
@@ -105,9 +106,9 @@ var useEmailLoginState = require('./hooks/useEmailLoginState/useEmailLoginState.
 var useNameService = require('./hooks/useNameService/useNameService.cjs');
 var useSelectedWalletConnector = require('./hooks/useSelectedWalletConnector/useSelectedWalletConnector.cjs');
 var useSetShowAuthFlowWithInit = require('./hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.cjs');
-var useVerificationInProgress = require('./hooks/useVerificationInProgress/useVerificationInProgress.cjs');
 var useShowPasskeyCreateSuccess = require('./hooks/useShowPasskeyCreateSuccess/useShowPasskeyCreateSuccess.cjs');
-var internalEvents = require('./internalEvents/internalEvents.cjs');
+var useTieCallbacksToEvents = require('./hooks/useTieCallbacksToEvents/useTieCallbacksToEvents.cjs');
+var useVerificationInProgress = require('./hooks/useVerificationInProgress/useVerificationInProgress.cjs');
 var useCustomerCallbacks = require('./useCustomerCallbacks/useCustomerCallbacks.cjs');
 var useCustomerAuthFlowCallbacks = require('./useCustomerCallbacks/useCustomerAuthFlowCallbacks.cjs');
 var validators = require('./validators.cjs');
@@ -123,8 +124,9 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
     if (bridgeChains) {
         enableForcedNetworkValidation = true;
     }
-    // The internalEventsRef is temporary and should be removed after QNTM-180 is done
-    const internalEventsRef = React.useRef(internalEvents.getInternalEvents());
+    // Ties all client callbacks to dynamic's events, such that
+    // when our events are triggered, so are the client callbacks
+    useTieCallbacksToEvents.useTieCallbacksToEvents(eventsCallbacks);
     let { walletConnectV1Bridge, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', } = settings;
     if (!environmentId) {
         throw new utils.MissingEnvironmentIdError();
@@ -327,7 +329,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
             });
         }
         (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, user);
-        internalEventsRef.current.emit('logout');
+        dynamicEvents.dynamicEvents.emit('logout');
     }), [
         setSdkHasLoaded,
         clearAllWalletConnectSessions,
@@ -398,23 +400,11 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
         helpers.initExpirationTime(handleLogOut);
     }, [handleLogOut]);
     useCustomerAuthFlowCallbacks.useCustomerAuthFlowCallbacks({ eventsCallbacks, showAuthFlow });
-    const onEmailVerificationFailure = (email) => {
-        var _a;
-        (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmailVerificationFailure) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, email);
-        internalEventsRef.current.emit('emailVerificationResult', false, email);
-    };
-    const onEmailVerificationSuccess = (email) => {
-        var _a;
-        (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmailVerificationSuccess) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, email);
-        internalEventsRef.current.emit('emailVerificationResult', true, email);
-    };
     const { setCallback } = useCustomerCallbacks.useCustomerCallbacks({
         authMode,
         callbacks: {
             onAuthSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onAuthSuccess,
             onConnect: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onConnect,
-            onEmailVerificationFailure,
-            onEmailVerificationSuccess,
             onEmbeddedWalletCreated: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onEmbeddedWalletCreated,
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
@@ -506,7 +496,6 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
             handleLogOut,
             handleUnlinkWallet: authMode === 'connect-only' ? disconnectWallet : handleUnlinkWallet,
             i18nSDKInstance,
-            internalEvents: internalEventsRef,
             internalSetShowAuthFlow: setShowAuthFlow,
             isAuthenticated,
             isBridgeFlow,
@@ -692,8 +681,8 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
         termsOfServiceUrl,
         theme,
         toolkitEnabled,
-        walletUiUtils,
         walletConnectorOptions,
+        walletUiUtils,
         walletsFilter,
     ]);
     React.useEffect(() => {
@@ -738,7 +727,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
                                     isBridgeFlow,
                                     isFullyConnected,
                                     isMultiWalletEnabled: multiWallet,
-                                }), internalEvents: internalEventsRef, children: [enableForcedNetworkValidation && jsxRuntime.jsx(UseNetworkValidation.UseNetworkValidation, {}), jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }) }));
+                                }), children: [enableForcedNetworkValidation && jsxRuntime.jsx(UseNetworkValidation.UseNetworkValidation, {}), jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) })] }) }) }) }) }) }) }));
 };
 /** The context provider you need to have access too all of Dynamic's hooks */
 const DynamicContextProvider = (props) => (jsxRuntime.jsx(UserWalletsContext.UserWalletsProvider, { children: jsxRuntime.jsx(InnerDynamicContextProvider, Object.assign({}, props)) }));