@dynamic-labs/sdk-react-core 4.2.3 → 4.3.1

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

@@ -1,7 +1,7 @@
 'use client'
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { isEmbeddedConnector } from '@dynamic-labs/wallet-connector-core';
-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';
@@ -51,6 +51,7 @@ import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/walletOptions/walletOptions.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';
@@ -96,16 +97,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;
     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.isAvailable),
             text: 'Select wallet',
         },
@@ -138,7 +142,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 };