@dynamic-labs/sdk-react-core 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -64,6 +64,7 @@ require('../../components/UserProfile/parts/UserProfileField/components/Verified
 require('@dynamic-labs/types');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
 var useFetchCurrency = require('../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs');
 var useTransactionGas = require('./hooks/useTransactionGas/useTransactionGas.cjs');
 var useTransactionTotal = require('./hooks/useTransactionTotal/useTransactionTotal.cjs');
@@ -99,7 +100,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         },
     });
     const { mutate: send, isLoading, error: transactionError, } = useMutation.useMutation(() => {
-        if (transactionError instanceof utils.TransactionGasCannotBeSponsoredError) {
+        if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             const { connector } = primaryWallet;
             if (walletConnectorCore.isAccountAbstractionConnector(connector)) {
                 connector.disableGasSponsorshipOnce();
@@ -108,7 +109,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return mutation();
     }, {
         onFailure: (error) => {
-            if (error instanceof utils.TransactionGasCannotBeSponsoredError) {
+            if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
                 setIsGasSponsored(false);
             }
             onError === null || onError === void 0 ? void 0 : onError(error);
@@ -138,8 +139,10 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         isTransactionToAddressLoading ||
         isTransactionFromAddressLoading ||
         isGasSponsoredLoading;
-    const ChainIconComponent = getChainIcon.getChainIcon(primaryWallet.chain);
-    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain.useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon.getChainIcon(chainName);
+    const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsxRuntime.jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsxRuntime.jsx(ChainIconComponent, {})) }));
     const errorMessage = transactionError && transactionErrorMessage.transactionErrorMessage(transactionError);
     const missingFunds = React.useMemo(() => {
         if (balance === undefined || total === undefined)
@@ -152,7 +155,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = React.useMemo(() => {
-        if (transactionError instanceof utils.TransactionGasCannotBeSponsoredError) {
+        if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
         const showInsufficientFundsWarningMessage = hasInsufficientFunds && missingFunds;
@@ -163,15 +166,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, transactionError]);
+    }, [currencySymbol, hasInsufficientFunds, missingFunds, t, transactionError]);
     return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, alert: alert, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
-                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber.formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
-                    ? t('dyn_send_transaction.confirmation.data.gas_estimate')
-                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
-                    ? 'transaction-estimated-gas-fee'
-                    : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice, 10) : '--' })), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber.formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
-                    ? formatBigNumber.formatBigNumber(total, 10)
-                    : t('dyn_send_transaction.confirmation.not_applied') })] }));
+                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber.formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
+                            ? t('dyn_send_transaction.confirmation.data.gas_estimate')
+                            : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
+                            ? 'transaction-estimated-gas-fee'
+                            : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice, 10) : '--' }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber.formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
+                            ? formatBigNumber.formatBigNumber(total, 10)
+                            : t('dyn_send_transaction.confirmation.not_applied') })] }))] }));
 };
 
 exports.TransactionConfirmationView = TransactionConfirmationView;

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseEther, isHex, hexToBigInt } from 'viem';
@@ -60,6 +60,7 @@ import '../../components/UserProfile/parts/UserProfileField/components/VerifiedE
 import '@dynamic-labs/types';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
 import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js';
 import { useTransactionGas } from './hooks/useTransactionGas/useTransactionGas.js';
 import { useTransactionTotal } from './hooks/useTransactionTotal/useTransactionTotal.js';
@@ -95,7 +96,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         },
     });
     const { mutate: send, isLoading, error: transactionError, } = useMutation(() => {
-        if (transactionError instanceof TransactionGasCannotBeSponsoredError) {
+        if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             const { connector } = primaryWallet;
             if (isAccountAbstractionConnector(connector)) {
                 connector.disableGasSponsorshipOnce();
@@ -104,7 +105,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return mutation();
     }, {
         onFailure: (error) => {
-            if (error instanceof TransactionGasCannotBeSponsoredError) {
+            if (TransactionGasCannotBeSponsoredError.isInstance(error)) {
                 setIsGasSponsored(false);
             }
             onError === null || onError === void 0 ? void 0 : onError(error);
@@ -134,8 +135,10 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         isTransactionToAddressLoading ||
         isTransactionFromAddressLoading ||
         isGasSponsoredLoading;
-    const ChainIconComponent = getChainIcon(primaryWallet.chain);
-    const chainIcon = (jsx(Icon, { size: 'small', children: jsx(ChainIconComponent, {}) }));
+    const [chain] = useFetchChain(primaryWallet.connector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || primaryWallet.chain;
+    const ChainIconComponent = getChainIcon(chainName);
+    const chainIcon = (jsx(Icon, { size: 'small', children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsx(ChainIconComponent, {})) }));
     const errorMessage = transactionError && transactionErrorMessage(transactionError);
     const missingFunds = useMemo(() => {
         if (balance === undefined || total === undefined)
@@ -148,7 +151,7 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = useMemo(() => {
-        if (transactionError instanceof TransactionGasCannotBeSponsoredError) {
+        if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsx(Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
         const showInsufficientFundsWarningMessage = hasInsufficientFunds && missingFunds;
@@ -159,15 +162,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, transactionError]);
+    }, [currencySymbol, hasInsufficientFunds, missingFunds, t, transactionError]);
     return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress(transactionFromAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
-                    shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsx(TransactionRow, { label: isGasEstimated
-                    ? t('dyn_send_transaction.confirmation.data.gas_estimate')
-                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
-                    ? 'transaction-estimated-gas-fee'
-                    : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber(gasTotalPrice, 10) : '--' })), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
-                    ? formatBigNumber(total, 10)
-                    : t('dyn_send_transaction.confirmation.not_applied') })] }));
+                    shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxs(Fragment, { children: [jsx(TransactionRow, { label: isGasEstimated
+                            ? t('dyn_send_transaction.confirmation.data.gas_estimate')
+                            : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
+                            ? 'transaction-estimated-gas-fee'
+                            : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber(gasTotalPrice, 10) : '--' }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
+                            ? formatBigNumber(total, 10)
+                            : t('dyn_send_transaction.confirmation.not_applied') })] }))] }));
 };
 
 export { TransactionConfirmationView };

package/src/lib/views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs

@@ -28,7 +28,7 @@ const errorReasonsMapping = {
 const transactionErrorMessage = (error) => {
     var _a;
     logger.logger.debug('transaction error]:', error);
-    if (error instanceof utils.TransactionGasCannotBeSponsoredError) {
+    if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
     const { code } = error;

package/src/lib/views/TransactionConfirmationView/helpers/transactionErrorMessage.js

@@ -24,7 +24,7 @@ const errorReasonsMapping = {
 const transactionErrorMessage = (error) => {
     var _a;
     logger.debug('transaction error]:', error);
-    if (error instanceof TransactionGasCannotBeSponsoredError) {
+    if (TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
     const { code } = error;

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs

@@ -66,6 +66,7 @@ require('react-focus-lock');
 var FundingContext = require('../../../../../context/FundingContext/FundingContext.cjs');
 var SendBalanceContext = require('../../../../../context/SendBalanceContext/SendBalanceContext.cjs');
 var ActiveWalletInformation = require('../../ActiveWalletInformation/ActiveWalletInformation.cjs');
+var UnknownWalletInformation = require('../../UnknownWalletInformation/UnknownWalletInformation.cjs');
 var UserAvatar = require('../../../../../components/UserAvatar/UserAvatar.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -99,8 +100,20 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
         return shortenEmail.shortenEmail(user === null || user === void 0 ? void 0 : user.email);
     };
+    const renderWalletHeader = () => {
+        const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
+        if (primaryWallet) {
+            return jsxRuntime.jsx(ActiveWalletInformation.ActiveWalletInformation, {});
+        }
+        else if (unknownWallet) {
+            return jsxRuntime.jsx(UnknownWalletInformation.UnknownWalletInformation, { address: unknownWallet.address });
+        }
+        else {
+            return (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: user }) }));
+        }
+    };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsxRuntime.jsx(ActiveWalletInformation.ActiveWalletInformation, {})) : (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: user }) })), primaryWallet ? (jsxRuntime.jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxRuntime.jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines
                             jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -62,6 +62,7 @@ import 'react-focus-lock';
 import { useFundingContext } from '../../../../../context/FundingContext/FundingContext.js';
 import { useSendBalance } from '../../../../../context/SendBalanceContext/SendBalanceContext.js';
 import { ActiveWalletInformation } from '../../ActiveWalletInformation/ActiveWalletInformation.js';
+import { UnknownWalletInformation } from '../../UnknownWalletInformation/UnknownWalletInformation.js';
 import { UserAvatar } from '../../../../../components/UserAvatar/UserAvatar.js';
 
 const DynamicWidgetWalletHeader = ({ variant, }) => {
@@ -91,8 +92,20 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
         return shortenEmail(user === null || user === void 0 ? void 0 : user.email);
     };
+    const renderWalletHeader = () => {
+        const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
+        if (primaryWallet) {
+            return jsx(ActiveWalletInformation, {});
+        }
+        else if (unknownWallet) {
+            return jsx(UnknownWalletInformation, { address: unknownWallet.address });
+        }
+        else {
+            return (jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsx(UserAvatar, { user: user }) }));
+        }
+    };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsx(ActiveWalletInformation, {})) : (jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsx(UserAvatar, { user: user }) })), primaryWallet ? (jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
+    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines
                             jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.cjs

@@ -61,10 +61,14 @@ require('react-focus-lock');
 
 const SingleWalletButtons = () => {
     const { primaryWallet, handleLogOut, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
     return (jsxRuntime.jsxs("div", { className: 'single-wallet-buttons', children: [jsxRuntime.jsx(Button.Button, { dataTestId: 'Copy address', expanded: true, buttonPadding: 'medium', typographyProps: {
                     className: 'single-wallet-buttons--center',
                     variant: 'button_primary',
-                }, onClick: () => helpers.copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) || (user === null || user === void 0 ? void 0 : user.email) || ''), feedback: 
+                }, onClick: () => helpers.copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) ||
+                    (unknownWallet === null || unknownWallet === void 0 ? void 0 : unknownWallet.address) ||
+                    (user === null || user === void 0 ? void 0 : user.email) ||
+                    ''), feedback: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxRuntime.jsxs("div", { className: 'single-wallet-buttons__copied', children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), " Copied!"] }), children: "Copy address" }), jsxRuntime.jsx(Button.Button, { dataTestId: 'Disconnect', expanded: true, buttonPadding: 'medium', typographyProps: {
                     className: 'single-wallet-buttons--center',

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.js

@@ -57,10 +57,14 @@ import 'react-focus-lock';
 
 const SingleWalletButtons = () => {
     const { primaryWallet, handleLogOut, user } = useInternalDynamicContext();
+    const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
     return (jsxs("div", { className: 'single-wallet-buttons', children: [jsx(Button, { dataTestId: 'Copy address', expanded: true, buttonPadding: 'medium', typographyProps: {
                     className: 'single-wallet-buttons--center',
                     variant: 'button_primary',
-                }, onClick: () => copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) || (user === null || user === void 0 ? void 0 : user.email) || ''), feedback: 
+                }, onClick: () => copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) ||
+                    (unknownWallet === null || unknownWallet === void 0 ? void 0 : unknownWallet.address) ||
+                    (user === null || user === void 0 ? void 0 : user.email) ||
+                    ''), feedback: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxs("div", { className: 'single-wallet-buttons__copied', children: [jsx(SvgCheckCircle, {}), " Copied!"] }), children: "Copy address" }), jsx(Button, { dataTestId: 'Disconnect', expanded: true, buttonPadding: 'medium', typographyProps: {
                     className: 'single-wallet-buttons--center',

package/src/lib/widgets/DynamicWidget/components/UnknownWalletInformation/UnknownWalletInformation.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/sdk-api');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/rpc-providers');
+require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('react-dom');
+require('react-i18next');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/QrCodeContext/QrCodeContext.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('qrcode');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('i18next');
+require('../../context/DynamicWidgetContext.cjs');
+var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
+require('yup');
+require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('formik');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+
+const UnknownWalletInformation = ({ address, }) => {
+    const { handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
+    const options = [
+        {
+            Icon: null,
+            callback: () => address && navigator.clipboard.writeText(address),
+            hide: !address,
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: handleLogOut,
+            text: 'Disconnect',
+        },
+    ];
+    return (jsxRuntime.jsx("div", { className: 'unknown-wallet-information-container', children: jsxRuntime.jsx("div", { className: 'unknown-wallet-information', children: jsxRuntime.jsx("div", { className: 'unknown-wallet-information__header', children: jsxRuntime.jsx("div", { className: 'unknown-wallet-information__details', children: jsxRuntime.jsxs("div", { className: 'unknown-wallet-information__actions-container', children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { className: 'unknown-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }) }), jsxRuntime.jsx(DotsMenu.DotsMenu, { options: options, buttonClassName: 'unknown-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'unknown-wallet-information__dots-menu' })] }) }) }) }) }));
+};
+
+exports.UnknownWalletInformation = UnknownWalletInformation;

package/src/lib/widgets/DynamicWidget/components/UnknownWalletInformation/UnknownWalletInformation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const UnknownWalletInformation: ({ address, }: {
+    address: string | undefined;
+}) => JSX.Element;

package/src/lib/widgets/DynamicWidget/components/UnknownWalletInformation/UnknownWalletInformation.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/sdk-api';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/rpc-providers';
+import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import 'react-dom';
+import 'react-i18next';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/QrCodeContext/QrCodeContext.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'qrcode';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import 'i18next';
+import '../../context/DynamicWidgetContext.js';
+import { DotsMenu } from '../DotsMenu/DotsMenu.js';
+import 'yup';
+import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import 'formik';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+
+const UnknownWalletInformation = ({ address, }) => {
+    const { handleLogOut } = useInternalDynamicContext();
+    const options = [
+        {
+            Icon: null,
+            callback: () => address && navigator.clipboard.writeText(address),
+            hide: !address,
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: handleLogOut,
+            text: 'Disconnect',
+        },
+    ];
+    return (jsx("div", { className: 'unknown-wallet-information-container', children: jsx("div", { className: 'unknown-wallet-information', children: jsx("div", { className: 'unknown-wallet-information__header', children: jsx("div", { className: 'unknown-wallet-information__details', children: jsxs("div", { className: 'unknown-wallet-information__actions-container', children: [jsx("div", { children: jsx(Typography, { className: 'unknown-wallet-information__address', weight: 'medium', variant: 'body_normal', color: 'primary', children: shortenWalletAddress(address, 4, 4) }) }), jsx(DotsMenu, { options: options, buttonClassName: 'unknown-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'unknown-wallet-information__dots-menu' })] }) }) }) }) }));
+};
+
+export { UnknownWalletInformation };

package/src/lib/widgets/DynamicWidget/components/UnknownWalletInformation/index.d.ts

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