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

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -68,7 +68,7 @@ var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var SelectNetworkButton = require('../../components/SelectNetworkButton/SelectNetworkButton.cjs');
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
@@ -108,10 +108,13 @@ const NetworkNotSupported = () => {
         }
     });
     const evmNetworks = walletConnector.evmNetworks || [];
-    const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
+    const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
+        network: walletConnectorNetwork,
+        walletConnector,
+    });
     return (jsxRuntime.jsxs("div", { className: 'network-not-supported', "data-testid": 'network-not-supported', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported', children: t('dyn_network_not_supported.warning_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('network-not-supported__content-container', {
                     'network-not-supported__content-container--error': !_isSupportedNetwork,
-                }), children: [jsxRuntime.jsx("div", { className: 'network-not-supported__img-container', children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsxRuntime.jsx("div", { className: 'network-not-supported__welcome-container', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
+                }), children: [jsxRuntime.jsx("div", { className: 'network-not-supported__img-container', children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: walletConnectorNetwork, evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsxRuntime.jsx("div", { className: 'network-not-supported__welcome-container', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
 };
 
 exports.NetworkNotSupported = NetworkNotSupported;

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -64,7 +64,7 @@ import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { SelectNetworkButton } from '../../components/SelectNetworkButton/SelectNetworkButton.js';
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
     const { t } = useTranslation();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
@@ -104,10 +104,13 @@ const NetworkNotSupported = () => {
         }
     });
     const evmNetworks = walletConnector.evmNetworks || [];
-    const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
+    const _isSupportedNetwork = isSupportedNetwork({
+        network: walletConnectorNetwork,
+        walletConnector,
+    });
     return (jsxs("div", { className: 'network-not-supported', "data-testid": 'network-not-supported', children: [onboardingImageUrl && (jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported', children: t('dyn_network_not_supported.warning_message') })), jsxs("div", { className: classNames('network-not-supported__content-container', {
                     'network-not-supported__content-container--error': !_isSupportedNetwork,
-                }), children: [jsx("div", { className: 'network-not-supported__img-container', children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsx("div", { className: 'network-not-supported__welcome-container', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
+                }), children: [jsx("div", { className: 'network-not-supported__img-container', children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) }), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", { className: 'network-not-supported__network-container', children: evmNetworks.length > 1 && (jsx(NetworkPicker, { currentNetwork: walletConnectorNetwork, evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) }), jsx("div", { className: 'network-not-supported__welcome-container', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_network_not_supported.subtitle') }) }), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] })] }));
 };
 
 export { NetworkNotSupported };

package/src/lib/views/Passkey/PasskeyIntroView/PasskeyIntroView.cjs

@@ -116,7 +116,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         index$1.storeAuthToken(jwt);
         setUser(createUserProfile.createUserProfile(decodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === 'turnkey');
+        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

package/src/lib/views/Passkey/PasskeyIntroView/PasskeyIntroView.js

@@ -112,7 +112,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         storeAuthToken(jwt);
         setUser(createUserProfile(decodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === 'turnkey');
+        const turnkeyVerifiedCredentials = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

package/src/lib/views/Passkey/utils/passkeyRecovery/passkeyRecovery.cjs

@@ -95,7 +95,7 @@ const completePasskeyRecovery = ({ authToken, userEmail, environmentId, wallet,
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === 'turnkey')) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
+    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
     if (!organizationId) {
         throw new utils.DynamicError('Invalid token!');
     }

package/src/lib/views/Passkey/utils/passkeyRecovery/passkeyRecovery.js

@@ -91,7 +91,7 @@ const completePasskeyRecovery = ({ authToken, userEmail, environmentId, wallet,
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === 'turnkey')) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
+    const organizationId = (_f = (_e = (_d = decodedJwt.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties) === null || _f === void 0 ? void 0 : _f.turnkeySubOrganizationId;
     if (!organizationId) {
         throw new DynamicError('Invalid token!');
     }

package/src/lib/views/QrCodeView/QrCodeContainer/QrCodeContainer.cjs

@@ -60,10 +60,10 @@ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCa
 var CopyButton = require('../../../components/CopyButton/CopyButton.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TextButton = require('../../../components/TextButton/TextButton.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-var TextButton = require('../../../components/TextButton/TextButton.cjs');
 
 const QrCodeContainer = ({ accentColor, walletKey, walletName, qrcodeValue, Icon: WalletIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('qrcode-container__container', {
         'qrcode-container__container--message': showQrCodeMessage,

package/src/lib/views/QrCodeView/QrCodeContainer/QrCodeContainer.js

@@ -56,10 +56,10 @@ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCar
 import { CopyButton } from '../../../components/CopyButton/CopyButton.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { TextButton } from '../../../components/TextButton/TextButton.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import { TextButton } from '../../../components/TextButton/TextButton.js';
 
 const QrCodeContainer = ({ accentColor, walletKey, walletName, qrcodeValue, Icon: WalletIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, }) => (jsxs("div", { className: classNames('qrcode-container__container', {
         'qrcode-container__container--message': showQrCodeMessage,

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

@@ -155,6 +155,8 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = React.useMemo(() => {
+        if (isTransactionLoading || Boolean(errorMessage))
+            return null;
         if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
@@ -166,7 +168,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, t, transactionError]);
+    }, [
+        currencySymbol,
+        hasInsufficientFunds,
+        missingFunds,
+        t,
+        transactionError,
+        isTransactionLoading,
+        errorMessage,
+    ]);
     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.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
                             ? t('dyn_send_transaction.confirmation.data.gas_estimate')

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

@@ -151,6 +151,8 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = useMemo(() => {
+        if (isTransactionLoading || Boolean(errorMessage))
+            return null;
         if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsx(Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
@@ -162,7 +164,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, t, transactionError]);
+    }, [
+        currencySymbol,
+        hasInsufficientFunds,
+        missingFunds,
+        t,
+        transactionError,
+        isTransactionLoading,
+        errorMessage,
+    ]);
     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 && (jsxs(Fragment, { children: [jsx(TransactionRow, { label: isGasEstimated
                             ? t('dyn_send_transaction.confirmation.data.gas_estimate')

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

@@ -31,6 +31,9 @@ const transactionErrorMessage = (error) => {
     if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (utils.InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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

@@ -1,4 +1,4 @@
-import { TransactionGasCannotBeSponsoredError } from '@dynamic-labs/utils';
+import { TransactionGasCannotBeSponsoredError, InsufficientFundsError } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -27,6 +27,9 @@ const transactionErrorMessage = (error) => {
     if (TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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

@@ -93,8 +93,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -115,7 +115,7 @@ const ActiveWalletInformation = () => {
         [];
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

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

@@ -89,8 +89,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -111,7 +111,7 @@ const ActiveWalletInformation = () => {
         [];
     return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 export { ActiveWalletInformation };

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

@@ -62,7 +62,7 @@ require('react-focus-lock');
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext.useInternalDynamicContext();
     const { inlineControlsRef } = DynamicWidgetContext.useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -70,7 +70,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsx(DynamicNav, {}) }));
 

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

@@ -58,7 +58,7 @@ import 'react-focus-lock';
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext();
     const { inlineControlsRef } = useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -66,7 +66,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsx(ShadowDOM, { children: jsx(DynamicNav, {}) }));
 

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

@@ -61,7 +61,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext.useInternalDynamicContext();
     const [error, setError] = React.useState();
     const { email } = walletConnector;
     if (!email) {
@@ -73,7 +73,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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

@@ -57,7 +57,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext();
     const [error, setError] = useState();
     const { email } = walletConnector;
     if (!email) {
@@ -69,7 +69,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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

@@ -69,7 +69,7 @@ require('react-focus-lock');
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -118,7 +118,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: 'wallet__row', children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) })] })) : (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

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

@@ -65,7 +65,7 @@ import 'react-focus-lock';
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -114,7 +114,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: 'wallet__row', children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress(address, 3, 3) })] })) : (jsx(Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs

@@ -64,7 +64,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const onUseActiveWalletClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -75,13 +75,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxRuntime.jsxs(Button.Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js

@@ -60,7 +60,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext();
     const onUseActiveWalletClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -71,13 +71,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxs(Fragment, { children: [jsxs(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxs(Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsx(Icon, { size: 'xsmall', children: jsx(WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.cjs

@@ -60,10 +60,10 @@ require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 
 const QrCodeModalView = ({ walletId }) => {
     var _a, _b;

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.js

@@ -56,10 +56,10 @@ import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { TextButton } from '../../../../components/TextButton/TextButton.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import { TextButton } from '../../../../components/TextButton/TextButton.js';
 
 const QrCodeModalView = ({ walletId }) => {
     var _a, _b;

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactI18next = require('react-i18next');
 var iconic = require('@dynamic-labs/iconic');
-require('react');
+var classNames = require('../../../../../utils/functions/classNames/classNames.cjs');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../../config/ApiEndpoint.cjs');
@@ -71,6 +72,7 @@ const mapPasskeyProviderToIcon = {
 };
 const PasskeyCard = ({ passkey }) => {
     const { t } = reactI18next.useTranslation();
+    const [showTooltip, setShowTooltip] = React.useState(false);
     const { value: timeSinceValue, unit: timeSinceUnit } = getTimeSince.getTimeSince(passkey.createdAt);
     const PasskeyProviderIcon = () => {
         if (!passkey.userAgent)
@@ -88,11 +90,19 @@ const PasskeyCard = ({ passkey }) => {
             return null;
         return t(`dyn_manage_passkeys.passkey_providers.${provider}`);
     };
-    return (jsxRuntime.jsxs("div", { className: 'passkey-card', children: [jsxRuntime.jsxs("div", { className: 'passkey-card__info', children: [jsxRuntime.jsx("div", { className: 'passkey-card__info__icon', children: jsxRuntime.jsx(PasskeyProviderIcon, {}) }), jsxRuntime.jsxs("div", { className: 'passkey-card__info__text', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: shortenEmail.shortenEmail(passkey.alias, {
-                                    breakpoint: 12,
-                                    cutEnd: 4,
-                                    cutStart: 4,
-                                }) }), getPasskeyProviderName() && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsxRuntime.jsx("div", { className: 'passkey-card__date', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
+    const handleShowTooltip = () => {
+        setShowTooltip(true);
+        setTimeout(() => {
+            setShowTooltip(false);
+        }, 2000);
+    };
+    return (jsxRuntime.jsxs("div", { className: 'passkey-card', children: [jsxRuntime.jsxs("div", { className: 'passkey-card__info', children: [jsxRuntime.jsx("div", { className: 'passkey-card__info__icon', "data-testId": 'provider-icon', children: jsxRuntime.jsx(PasskeyProviderIcon, {}) }), jsxRuntime.jsxs("div", { className: 'passkey-card__info__text', children: [jsxRuntime.jsxs(Typography.Typography, { "data-testid": 'passkey-alias', variant: 'body_normal', color: 'primary', title: passkey.alias, onClick: handleShowTooltip, children: [shortenEmail.shortenEmail(passkey.alias, {
+                                        breakpoint: 12,
+                                        cutEnd: 4,
+                                        cutStart: 4,
+                                    }), jsxRuntime.jsx("p", { className: classNames.classNames('passkey-card__info__tooltip', {
+                                            'passkey-card__info__tooltip--visible': showTooltip,
+                                        }), children: passkey.alias })] }), getPasskeyProviderName() && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsxRuntime.jsx("div", { className: 'passkey-card__date', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
 };
 
 exports.PasskeyCard = PasskeyCard;

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AndroidIcon, BraveIcon, ChromeIcon, EdgeIcon, FirefoxIcon, AppleIcon, OperaIcon, SafariIcon } from '@dynamic-labs/iconic';
-import 'react';
+import { classNames } from '../../../../../utils/functions/classNames/classNames.js';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../../config/ApiEndpoint.js';
@@ -67,6 +68,7 @@ const mapPasskeyProviderToIcon = {
 };
 const PasskeyCard = ({ passkey }) => {
     const { t } = useTranslation();
+    const [showTooltip, setShowTooltip] = useState(false);
     const { value: timeSinceValue, unit: timeSinceUnit } = getTimeSince(passkey.createdAt);
     const PasskeyProviderIcon = () => {
         if (!passkey.userAgent)
@@ -84,11 +86,19 @@ const PasskeyCard = ({ passkey }) => {
             return null;
         return t(`dyn_manage_passkeys.passkey_providers.${provider}`);
     };
-    return (jsxs("div", { className: 'passkey-card', children: [jsxs("div", { className: 'passkey-card__info', children: [jsx("div", { className: 'passkey-card__info__icon', children: jsx(PasskeyProviderIcon, {}) }), jsxs("div", { className: 'passkey-card__info__text', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: shortenEmail(passkey.alias, {
-                                    breakpoint: 12,
-                                    cutEnd: 4,
-                                    cutStart: 4,
-                                }) }), getPasskeyProviderName() && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsx("div", { className: 'passkey-card__date', children: jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
+    const handleShowTooltip = () => {
+        setShowTooltip(true);
+        setTimeout(() => {
+            setShowTooltip(false);
+        }, 2000);
+    };
+    return (jsxs("div", { className: 'passkey-card', children: [jsxs("div", { className: 'passkey-card__info', children: [jsx("div", { className: 'passkey-card__info__icon', "data-testId": 'provider-icon', children: jsx(PasskeyProviderIcon, {}) }), jsxs("div", { className: 'passkey-card__info__text', children: [jsxs(Typography, { "data-testid": 'passkey-alias', variant: 'body_normal', color: 'primary', title: passkey.alias, onClick: handleShowTooltip, children: [shortenEmail(passkey.alias, {
+                                        breakpoint: 12,
+                                        cutEnd: 4,
+                                        cutStart: 4,
+                                    }), jsx("p", { className: classNames('passkey-card__info__tooltip', {
+                                            'passkey-card__info__tooltip--visible': showTooltip,
+                                        }), children: passkey.alias })] }), getPasskeyProviderName() && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_manage_passkeys.passkey_from'), " ", getPasskeyProviderName()] }))] })] }), jsx("div", { className: 'passkey-card__date', children: jsxs(Typography, { variant: 'body_small', color: 'secondary', children: [t('dyn_time_since.created'), ' ', `${timeSinceValue} ${timeSinceUnit} ${t('dyn_time_since.ago')}`] }) })] }));
 };
 
 export { PasskeyCard };