@dynamic-labs/sdk-react-core 1.0.1 → 1.0.3

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

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

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

@@ -63,7 +63,7 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/
 const PasskeyCreatedSuccessBanner = ({ className }) => {
     const { showPasskeyCreatedSuccess } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'success', className: className, children: t('dyn_passkey_created_success.text') })) }));
+    return (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'success', className: className, copykey: 'dyn_passkey_created_success.text', children: t('dyn_passkey_created_success.text') })) }));
 };
 
 exports.PasskeyCreatedSuccessBanner = PasskeyCreatedSuccessBanner;

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

@@ -59,7 +59,7 @@ import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/P
 const PasskeyCreatedSuccessBanner = ({ className }) => {
     const { showPasskeyCreatedSuccess } = useInternalDynamicContext();
     const { t } = useTranslation();
-    return (jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsx(ErrorContainer, { variant: 'success', className: className, children: t('dyn_passkey_created_success.text') })) }));
+    return (jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, {}), children: showPasskeyCreatedSuccess && (jsx(ErrorContainer, { variant: 'success', className: className, copykey: 'dyn_passkey_created_success.text', children: t('dyn_passkey_created_success.text') })) }));
 };
 
 export { PasskeyCreatedSuccessBanner };

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

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

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

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

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

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

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

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

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

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

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

@@ -78,9 +78,9 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
                 .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
         });
     }, [balance, decimals]);
-    return (jsxRuntime.jsx(formik.Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { className: 'send-balance-form', children: [jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input.Input, error: errors['amount'], message: touched['amount'] &&
-                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] &&
-                        getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
+    return (jsxRuntime.jsx(formik.Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { className: 'send-balance-form', children: [jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input.Input, error: errors['amount'], copykey: 'dyn_send_transaction.data.amount.label', message: touched['amount'] &&
+                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.send_button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 exports.SendBalanceForm = SendBalanceForm;

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

@@ -74,9 +74,9 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
                 .matches(/^0x[0-9a-fA-F]{40}$/, 'invalidFormat'),
         });
     }, [balance, decimals]);
-    return (jsx(Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { className: 'send-balance-form', children: [jsx(Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input, error: errors['amount'], message: touched['amount'] &&
-                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] &&
-                        getDisplayErrorMessage(errors, t, 'recipient') }), jsx(SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', children: t('dyn_send_transaction.send_button') })] })) }));
+    return (jsx(Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { className: 'send-balance-form', children: [jsx(Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: t('dyn_send_transaction.data.amount.label'), placeholder: t('dyn_send_transaction.data.amount.placeholder'), as: Input, error: errors['amount'], copykey: 'dyn_send_transaction.data.amount.label', message: touched['amount'] &&
+                        getDisplayErrorMessage(errors, t, 'amount', decimals) }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        getDisplayErrorMessage(errors, t, 'recipient') }), jsx(SecureTurnkeyWalletCard, { className: 'send-balance-form__secure-wallet' }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'medium', disabled: isTurnkeyWalletWithoutAuthenticator, buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.send_button', children: t('dyn_send_transaction.send_button') })] })) }));
 };
 
 export { SendBalanceForm };

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

@@ -47,7 +47,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -43,7 +43,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };

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

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

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

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

package/src/lib/components/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/Tooltip/Tooltip.cjs

@@ -64,7 +64,7 @@ require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/Veri
 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 +120,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

@@ -60,7 +60,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 +116,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

@@ -72,7 +72,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

@@ -68,7 +68,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/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/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

@@ -59,10 +59,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

@@ -55,10 +55,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/context/DynamicContext/DynamicContext.cjs

@@ -71,7 +71,7 @@ var useMultiWalletWidgetState = require('../../utils/hooks/multiWallet/useMultiW
 var useMultiWallet = require('../../utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs');
 var useClearWalletConnectSessions = require('../../utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.cjs');
 var useConnectWallet = require('../../utils/hooks/useConnectWallet/useConnectWallet.cjs');
-var useFetchNetworkConfigurations = require('../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.cjs');
+var useProcessNetworkConfigurations = require('../../utils/hooks/useProcessNetworkConfigurations/useProcessNetworkConfigurations.cjs');
 var useFetchWalletsForChainsMap = require('../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.cjs');
 var useHandleUnlinkWallet = require('../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.cjs');
 var usePrimaryWalletId = require('../../utils/hooks/usePrimaryWalletId/usePrimaryWalletId.cjs');
@@ -176,10 +176,11 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale
     // Set to true when a customer starts any auth verification process and set to false when it ends
     const [isVerificationInProgress, setIsVerificationInProgress] = useVerificationInProgress.useVerificationInProgress();
     const walletBook$1 = walletBook.useWalletBookCdn();
-    const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations.useFetchNetworkConfigurations({
+    const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useProcessNetworkConfigurations.useProcessNetworkConfigurations({
         authToken: getAuthToken.getAuthToken(),
         environmentId,
         evmNetworks,
+        projectSettings,
     });
     const { imageUserInAccessList, imageUserNotInAccessList, displayName, appLogo, } = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) || {};
     appLogoUrl = appLogo || appLogoUrl;

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -67,7 +67,7 @@ import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMult
 import { useMultiWallet } from '../../utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js';
 import { useClearWalletConnectSessions } from '../../utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.js';
 import { useConnectWallet } from '../../utils/hooks/useConnectWallet/useConnectWallet.js';
-import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.js';
+import { useProcessNetworkConfigurations } from '../../utils/hooks/useProcessNetworkConfigurations/useProcessNetworkConfigurations.js';
 import { useFetchWalletsForChainsMap } from '../../utils/hooks/useFetchWalletsForChainsMap/useFetchWalletsForChainsMap.js';
 import { useHandleUnlinkWallet } from '../../utils/hooks/useHandleUnlinkWallet/useHandleUnlinkWallet.js';
 import { usePrimaryWalletId } from '../../utils/hooks/usePrimaryWalletId/usePrimaryWalletId.js';
@@ -172,10 +172,11 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, }) =>
     // Set to true when a customer starts any auth verification process and set to false when it ends
     const [isVerificationInProgress, setIsVerificationInProgress] = useVerificationInProgress();
     const walletBook = useWalletBookCdn();
-    const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useFetchNetworkConfigurations({
+    const { configurations: serverNetworkConfigurations, handleRemoveLsNetworks, } = useProcessNetworkConfigurations({
         authToken: getAuthToken(),
         environmentId,
         evmNetworks,
+        projectSettings,
     });
     const { imageUserInAccessList, imageUserNotInAccessList, displayName, appLogo, } = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) || {};
     appLogoUrl = appLogo || appLogoUrl;