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

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.cjs

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 var Typography = require('../Typography/Typography.cjs');
 var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', children: "This wallet supports multiple chains. Select which chain you'd like to connect to" }), jsxRuntime.jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => {
+    const { t } = reactI18next.useTranslation();
+    return (jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', copykey: 'dyn_select_chain.description', children: t('dyn_select_chain.description') }), jsxRuntime.jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
+};
 
 exports.SelectWalletChainLayout = SelectWalletChainLayout;

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

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { Typography } from '../Typography/Typography.js';
 import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
 
-const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsx(Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', children: "This wallet supports multiple chains. Select which chain you'd like to connect to" }), jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => {
+    const { t } = useTranslation();
+    return (jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsx(Typography, { className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal', copykey: 'dyn_select_chain.description', children: t('dyn_select_chain.description') }), jsx("div", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
+};
 
 export { SelectWalletChainLayout };

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/ShadowDOM/index.d.ts

@@ -1 +1 @@
-export { ShadowDOM } from './ShadowDOM';
+export { ShadowDOM, type ShadowDOMProps } from './ShadowDOM';

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');
@@ -62,8 +63,8 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');

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';
@@ -58,8 +59,8 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';

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');
@@ -55,8 +56,8 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');

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';
@@ -51,8 +52,8 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';

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;

package/src/lib/components/Toggle/Toggle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const Toggle = (_a) => {
+    var { icon, variant = 'primary', className } = _a, props = _tslib.__rest(_a, ["icon", "variant", "className"]);
+    return (jsxRuntime.jsxs("label", { className: classNames.classNames('toggle', className), children: [jsxRuntime.jsx("input", Object.assign({ type: 'checkbox', className: 'toggle--input' }, props)), jsxRuntime.jsx("div", { className: classNames.classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsxRuntime.jsx("div", { className: 'toggle--knob', children: icon }) })] }));
+};
+
+exports.Toggle = Toggle;

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

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, FC } from 'react';
+type ToggleProps = ComponentPropsWithoutRef<'input'> & {
+    icon?: JSX.Element;
+    variant?: 'primary';
+};
+export declare const Toggle: FC<ToggleProps>;
+export {};

package/src/lib/components/Toggle/Toggle.js

@@ -0,0 +1,10 @@
+import { __rest } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const Toggle = (_a) => {
+    var { icon, variant = 'primary', className } = _a, props = __rest(_a, ["icon", "variant", "className"]);
+    return (jsxs("label", { className: classNames('toggle', className), children: [jsx("input", Object.assign({ type: 'checkbox', className: 'toggle--input' }, props)), jsx("div", { className: classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsx("div", { className: 'toggle--knob', children: icon }) })] }));
+};
+
+export { Toggle };

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

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

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -19,6 +19,7 @@ require('viem');
 require('@dynamic-labs/utils');
 var index = require('../../shared/consts/index.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');
@@ -57,14 +58,14 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 
-const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
+const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
     const portalRoot = useElementById.useElementById('dynamic-tooltips');
     const [childrenHover, childrenHoverHandlers] = useHover.useHover(false, true);
     const [hoversTooltip, setHoversTooltip] = React.useState(false);
@@ -120,7 +121,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
     });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: index.tooltipZIndex, children: jsxRuntime.jsxs("div", { "data-testid": 'dynamicTooltip', className: classNames.classNames('dynamic-tooltip', {
                         'dynamic-tooltip--visible': visible,
-                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef, children: [content, jsxRuntime.jsx(tooltipArrow.ReactComponent, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsxRuntime.jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
+                    }, className), style: { left: vector[0], top: vector[1] }, ref: tooltipRef, copykey: copykey, children: [content, jsxRuntime.jsx(tooltipArrow.ReactComponent, { className: 'dynamic-tooltip__arrow' })] }) }), portalRoot.current), jsxRuntime.jsx(Tag, Object.assign({ ref: childrenRef }, childrenHoverHandlers, { children: children }))] }));
 };
 
 exports.Tooltip = Tooltip;

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';
@@ -53,14 +54,14 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 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');
@@ -60,8 +61,8 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');
@@ -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';
@@ -56,8 +57,8 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';
@@ -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');
@@ -55,8 +56,8 @@ require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');

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';
@@ -51,8 +52,8 @@ import '../../../context/FooterAnimationContext/index.js';
 import '../../../context/QrCodeContext/QrCodeContext.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';

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;