@dynamic-labs/sdk-react-core 3.9.10 → 3.9.12

package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs

@@ -136,6 +136,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 copykey: 'dyn_chainalysis_blocked_wallet.title',
                 heading: t('dyn_chainalysis_blocked_wallet.title'),
             },
+            'embedded-wallet-exists': {
+                copykey: 'dyn_wallet_link.already_exists.title',
+                heading: t('dyn_wallet_link.already_exists.title'),
+            },
             'farcaster-connect-view': {
                 copykey: 'dyn_login.qr_code.title',
                 heading: t('dyn_login.qr_code.title'),

package/src/lib/utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js

@@ -132,6 +132,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 copykey: 'dyn_chainalysis_blocked_wallet.title',
                 heading: t('dyn_chainalysis_blocked_wallet.title'),
             },
+            'embedded-wallet-exists': {
+                copykey: 'dyn_wallet_link.already_exists.title',
+                heading: t('dyn_wallet_link.already_exists.title'),
+            },
             'farcaster-connect-view': {
                 copykey: 'dyn_login.qr_code.title',
                 heading: t('dyn_login.qr_code.title'),

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs

@@ -189,6 +189,11 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
                 option: walletConnector.name,
                 type: 'wallet',
             }, { error: e });
+        if (e instanceof utils.EmbeddedWalletExistsError) {
+            setView('embedded-wallet-exists');
+            setShowAuthFlow(true);
+            return;
+        }
         if (e instanceof utils.WalletUsedError) {
             handleDisconnectWallet({ endSession: false, walletConnector });
             return handleWalletUsedError(e);

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { DynamicError, StorageService, WalletUsedError, MergeAccountsConfirmationError, ChainalysisError, GateBlockedError, SandboxMaximumThresholdReachedError, NoAccessError, AccountExistsError } from '@dynamic-labs/utils';
+import { DynamicError, StorageService, EmbeddedWalletExistsError, WalletUsedError, MergeAccountsConfirmationError, ChainalysisError, GateBlockedError, SandboxMaximumThresholdReachedError, NoAccessError, AccountExistsError } from '@dynamic-labs/utils';
 import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import { dynamicEvents } from '../../../events/dynamicEvents.js';
@@ -185,6 +185,11 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
                 option: walletConnector.name,
                 type: 'wallet',
             }, { error: e });
+        if (e instanceof EmbeddedWalletExistsError) {
+            setView('embedded-wallet-exists');
+            setShowAuthFlow(true);
+            return;
+        }
         if (e instanceof WalletUsedError) {
             handleDisconnectWallet({ endSession: false, walletConnector });
             return handleWalletUsedError(e);

package/src/lib/views/WalletAlreadyExistsView/WalletAlreadyExistsView.cjs

@@ -0,0 +1,101 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
+require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../components/Alert/Alert.cjs');
+require('react');
+require('../../events/dynamicEvents.cjs');
+require('@dynamic-labs/utils');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
+require('../../store/state/loadingAndLifecycle.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../config/ApiEndpoint.cjs');
+require('../../store/state/user/user.cjs');
+require('../../locale/locale.cjs');
+require('../../store/state/projectSettings/projectSettings.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('../../context/WalletContext/WalletContext.cjs');
+require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+require('../CollectUserDataView/useFields.cjs');
+require('../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../store/state/environmentId.cjs');
+require('../../store/state/walletConnectorOptions.cjs');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('formik');
+require('../../store/state/sendBalances.cjs');
+require('../../components/Input/Input.cjs');
+require('../TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../index.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/IsBrowser/IsBrowser.cjs');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('qrcode');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+
+const WalletAlreadyExistsView = () => {
+    const { selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
+    const { data: walletAddress } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const accounts = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getConnectedAccounts());
+        return accounts === null || accounts === void 0 ? void 0 : accounts[0];
+    }), {
+        deps: [walletConnector],
+    });
+    const shortenedWalletAddress = shortenWalletAddress.shortenWalletAddress(walletAddress);
+    return (jsxRuntime.jsxs("div", { className: 'wallet-already-exists-view__container', children: [jsxRuntime.jsx("div", { className: 'wallet-already-exists-view__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-already-exists-view__shorten-wallet-address', variant: 'body_normal', weight: 'medium', color: 'primary', children: shortenedWalletAddress }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-already-exists-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_wallet_link.already_exists.description') })] }));
+};
+
+exports.WalletAlreadyExistsView = WalletAlreadyExistsView;

package/src/lib/views/WalletAlreadyExistsView/WalletAlreadyExistsView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WalletAlreadyExistsView: () => JSX.Element;

package/src/lib/views/WalletAlreadyExistsView/WalletAlreadyExistsView.js

@@ -0,0 +1,97 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../components/Alert/Alert.js';
+import 'react';
+import '../../events/dynamicEvents.js';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../store/state/loadingAndLifecycle.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../config/ApiEndpoint.js';
+import '../../store/state/user/user.js';
+import '../../locale/locale.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import '../../context/LoadingContext/LoadingContext.js';
+import '../../context/WalletContext/WalletContext.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../CollectUserDataView/useFields.js';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../store/state/environmentId.js';
+import '../../store/state/walletConnectorOptions.js';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import 'formik';
+import '../../store/state/sendBalances.js';
+import '../../components/Input/Input.js';
+import '../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../index.js';
+import '../../store/state/tokenBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/IsBrowser/IsBrowser.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'qrcode';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+
+const WalletAlreadyExistsView = () => {
+    const { selectedWalletConnector: walletConnector } = useInternalDynamicContext();
+    const { t } = useTranslation();
+    const { data: walletAddress } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const accounts = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getConnectedAccounts());
+        return accounts === null || accounts === void 0 ? void 0 : accounts[0];
+    }), {
+        deps: [walletConnector],
+    });
+    const shortenedWalletAddress = shortenWalletAddress(walletAddress);
+    return (jsxs("div", { className: 'wallet-already-exists-view__container', children: [jsx("div", { className: 'wallet-already-exists-view__icon', children: jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, width: 64, height: 64 }) }), jsx(Typography, { className: 'wallet-already-exists-view__shorten-wallet-address', variant: 'body_normal', weight: 'medium', color: 'primary', children: shortenedWalletAddress }), jsx(Typography, { className: 'wallet-already-exists-view__copy', variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_wallet_link.already_exists.description') })] }));
+};
+
+export { WalletAlreadyExistsView };

package/src/lib/views/WalletAlreadyExistsView/index.d.ts

@@ -0,0 +1 @@
+export * from './WalletAlreadyExistsView';

package/src/lib/views/viewToComponentMap.cjs

@@ -133,6 +133,7 @@ var WalletLockedView = require('./WalletLockedView/WalletLockedView.cjs');
 var WalletRedirectView = require('./WalletRedirectView/WalletRedirectView.cjs');
 var WalletSignSpinnerView = require('./WalletSignSpinnerView/WalletSignSpinnerView.cjs');
 var WalletUsedView = require('./WalletUsedView/WalletUsedView.cjs');
+var WalletAlreadyExistsView = require('./WalletAlreadyExistsView/WalletAlreadyExistsView.cjs');
 var PasskeyNewDomainDetectedView = require('./Passkey/PasskeyNewDomainDetectedView/PasskeyNewDomainDetectedView.cjs');
 
 const viewToComponentMap = {
@@ -150,6 +151,7 @@ const viewToComponentMap = {
     'embedded-reveal-account-view': EmbeddedRevealView.EmbeddedRevealView,
     'embedded-reveal-view': EmbeddedRevealView.EmbeddedRevealView,
     'embedded-wallet-auth-choice': EmbeddedAuthChoice.EmbeddedAuthChoice,
+    'embedded-wallet-exists': WalletAlreadyExistsView.WalletAlreadyExistsView,
     'farcaster-connect-view': FarcasterConnectView.FarcasterConnectView,
     'gate-blocked-wallet': NoAccess.NoAccess,
     'global-wallet-confirm': GlobalWalletConfirmView.GlobalWalletConfirmView,

package/src/lib/views/viewToComponentMap.d.ts

@@ -17,6 +17,7 @@ export declare const viewToComponentMap: {
     'embedded-reveal-account-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
     'embedded-reveal-view': import("react").FC<import("./EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView").EmbeddedRevealViewProps>;
     'embedded-wallet-auth-choice': import("react").FC<import("./Passkey/EmbeddedAuthChoice/EmbeddedAuthChoice").EmbeddedAuthChoiceProps>;
+    'embedded-wallet-exists': () => JSX.Element;
     'farcaster-connect-view': ({ url }: import("./FarcasterConnectView/FarcasterConnectView").FarcasterConnectViewProps) => JSX.Element;
     'gate-blocked-wallet': () => JSX.Element;
     'global-wallet-confirm': import("react").FC<import("./GlobalWalletConfirmView").GlobalWalletConfirmViewProps>;

package/src/lib/views/viewToComponentMap.js

@@ -129,6 +129,7 @@ import { WalletLockedView } from './WalletLockedView/WalletLockedView.js';
 import { WalletRedirectView } from './WalletRedirectView/WalletRedirectView.js';
 import { WalletSignSpinnerView } from './WalletSignSpinnerView/WalletSignSpinnerView.js';
 import { WalletUsedView } from './WalletUsedView/WalletUsedView.js';
+import { WalletAlreadyExistsView } from './WalletAlreadyExistsView/WalletAlreadyExistsView.js';
 import { PasskeyNewDomainDetectedView } from './Passkey/PasskeyNewDomainDetectedView/PasskeyNewDomainDetectedView.js';
 
 const viewToComponentMap = {
@@ -146,6 +147,7 @@ const viewToComponentMap = {
     'embedded-reveal-account-view': EmbeddedRevealView,
     'embedded-reveal-view': EmbeddedRevealView,
     'embedded-wallet-auth-choice': EmbeddedAuthChoice,
+    'embedded-wallet-exists': WalletAlreadyExistsView,
     'farcaster-connect-view': FarcasterConnectView,
     'gate-blocked-wallet': NoAccess,
     'global-wallet-confirm': GlobalWalletConfirmView,

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

@@ -111,7 +111,7 @@ const DynamicWidgetWallets = () => {
                                 : t('dyn_widget.empty_wallets_action_connect'),
                         }) })) : (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallets__body__wallet-list', children: secondaryWallets.map((wallet, index) => {
                             var _a;
-                            return (jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id));
+                            return (jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet, clickable: true }, wallet.id));
                         }) })) }) })] }));
 };
 

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

@@ -107,7 +107,7 @@ const DynamicWidgetWallets = () => {
                                 : t('dyn_widget.empty_wallets_action_connect'),
                         }) })) : (jsx("div", { className: 'dynamic-widget-wallets__body__wallet-list', children: secondaryWallets.map((wallet, index) => {
                             var _a;
-                            return (jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id));
+                            return (jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet, clickable: true }, wallet.id));
                         }) })) }) })] }));
 };
 

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

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
-require('react');
 var copy = require('../../../../shared/assets/copy.cjs');
 var key = require('../../../../shared/assets/key.cjs');
 var switchHorizontal = require('../../../../shared/assets/switch-horizontal.cjs');
@@ -52,6 +52,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/environmentId.cjs');
 require('../../../../store/state/walletConnectorOptions.cjs');
 require('react-i18next');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
@@ -92,16 +93,19 @@ require('../../../../store/state/tokenBalances.cjs');
 require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
-const Wallet = ({ wallet, ens }) => {
+const Wallet = ({ wallet, ens, clickable }) => {
     var _a, _b;
     const { connector, address } = wallet;
     const switchWallet = useSwitchWallet.useSwitchWallet();
     const { setSelectedWalletWithAction, projectSettings, authMode } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleSwitchWallet = React.useCallback(() => {
+        switchWallet(wallet.id);
+    }, [switchWallet, wallet.id]);
     const iconSize = 20;
     const options = [
         {
             Icon: jsxRuntime.jsx(switchHorizontal.ReactComponent, {}),
-            callback: () => switchWallet(wallet.id),
+            callback: handleSwitchWallet,
             hide: ((_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === 'unknown' || !((_b = wallet.connector) === null || _b === void 0 ? void 0 : _b.isAvailable),
             text: 'Select wallet',
         },
@@ -134,7 +138,9 @@ const Wallet = ({ wallet, ens }) => {
             text: 'Export private keys',
         });
     }
-    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, wallet: wallet, showNetworkIcon: 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' })] }));
+    return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('wallet__row', {
+                    'wallet__row--clickable': clickable,
+                }), onClick: clickable ? handleSwitchWallet : undefined, children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showNetworkIcon: 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__separator' }), 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("div", { className: 'wallet__row__separator wallet__row__menu__separator ' }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
 };
 
 exports.Wallet = Wallet;

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

@@ -2,11 +2,13 @@
 import { NameServiceData } from '@dynamic-labs/sdk-api-core';
 import { Wallet as WalletType } from '../../../../shared/types';
 type Props = {
+    /** If true, clicking the wallet will set it as the primary wallet */
+    clickable?: boolean;
     ens?: NameServiceData;
     expanded?: boolean;
     expandedWallet?: string;
     setExpandedWallet?: (str?: string) => void;
     wallet: WalletType;
 };
-export declare const Wallet: ({ wallet, ens }: Props) => JSX.Element;
+export declare const Wallet: ({ wallet, ens, clickable }: Props) => JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 'use client'
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { isEmbeddedConnector } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
-import 'react';
 import { ReactComponent as SvgCopy } from '../../../../shared/assets/copy.js';
 import { ReactComponent as SvgKey } from '../../../../shared/assets/key.js';
 import { ReactComponent as SvgSwitchHorizontal } from '../../../../shared/assets/switch-horizontal.js';
@@ -48,6 +48,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/environmentId.js';
 import '../../../../store/state/walletConnectorOptions.js';
 import 'react-i18next';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
@@ -88,16 +89,19 @@ import '../../../../store/state/tokenBalances.js';
 import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const Wallet = ({ wallet, ens }) => {
+const Wallet = ({ wallet, ens, clickable }) => {
     var _a, _b;
     const { connector, address } = wallet;
     const switchWallet = useSwitchWallet();
     const { setSelectedWalletWithAction, projectSettings, authMode } = useInternalDynamicContext();
+    const handleSwitchWallet = useCallback(() => {
+        switchWallet(wallet.id);
+    }, [switchWallet, wallet.id]);
     const iconSize = 20;
     const options = [
         {
             Icon: jsx(SvgSwitchHorizontal, {}),
-            callback: () => switchWallet(wallet.id),
+            callback: handleSwitchWallet,
             hide: ((_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === 'unknown' || !((_b = wallet.connector) === null || _b === void 0 ? void 0 : _b.isAvailable),
             text: 'Select wallet',
         },
@@ -130,7 +134,9 @@ const Wallet = ({ wallet, ens }) => {
             text: 'Export private keys',
         });
     }
-    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, wallet: wallet, showNetworkIcon: 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' })] }));
+    return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: classNames('wallet__row', {
+                    'wallet__row--clickable': clickable,
+                }), onClick: clickable ? handleSwitchWallet : undefined, children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showNetworkIcon: 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__separator' }), 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("div", { className: 'wallet__row__separator wallet__row__menu__separator ' }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
 };
 
 export { Wallet };