@dynamic-labs/sdk-react-core 0.18.0-RC.11 → 0.18.0-RC.13

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

@@ -35,6 +35,7 @@ import '../../context/MockContext/MockContext.js';
 import { useConnectAndSign } from '../../utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useWalletConnectorEvents } from '../../utils/hooks/useWalletConnectorEvents/useWalletConnectorEvents.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
@@ -44,27 +45,26 @@ import '../../components/InlineWidget/InlineWidget.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
 import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { AuthProviderIcon } from '../../components/AuthProviderIcon/AuthProviderIcon.js';
-import { useUpdateUserProfileByJWTCallback } from '../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { SelectNetworkButton } from '../../components/SelectNetworkButton/SelectNetworkButton.js';
 
 const NetworkNotSupported = () => {
     var _a, _b, _c, _d;
-    const { onboardingOnlyJwt, network, onboardingImageUrl, selectedWalletConnector: walletConnector, decodedOnboardingOnlyToken, setShowAuthFlow, setCallback, setNetwork, } = useInternalDynamicContext();
-    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
+    const { onboardingOnlyJwt, network, onboardingImageUrl, selectedWalletConnector: walletConnector, decodedOnboardingOnlyToken, setNetwork, } = useInternalDynamicContext();
     const finishConnectAndSign = useConnectAndSign();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
+    const onChainChange = (network) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isSupportedNetwork({ network, walletConnector })) {
+            finishConnectAndSign({
+                walletConnector: walletConnector,
+            });
+        }
+    });
+    // We can't listen on the network defined in the context,
+    // because events on the primaryWallet are defined after message is signed.
+    useWalletConnectorEvents(walletConnector, { onChainChange });
     if (!walletConnector) {
         return null;
     }
-    const handleNetworkChange = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!onboardingOnlyJwt) {
-            finishConnectAndSign({ walletConnector });
-            return;
-        }
-        setCallback('authSuccess');
-        yield updateUserProfileByJWT(onboardingOnlyJwt);
-        setShowAuthFlow(false);
-    });
     const userProfile = decodedOnboardingOnlyToken && createUserProfile(decodedOnboardingOnlyToken);
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
@@ -74,13 +74,13 @@ const NetworkNotSupported = () => {
                 networkChainId: networkId,
             });
             setNetwork(networkId);
-            handleNetworkChange();
+            finishConnectAndSign({ walletConnector });
         }
         catch (e) {
             logger.debug(e);
         }
     });
-    return (jsxs("div", Object.assign({ 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, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsxs("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: [((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _a === void 0 ? void 0 : _a.avatar) && (jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: jsx("img", { src: (_b = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported__img' }) }))), !((_c = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _c === void 0 ? void 0 : _c.avatar) && onboardingOnlyJwt && (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt })), !((_d = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _d === void 0 ? void 0 : _d.avatar) && !onboardingOnlyJwt && (jsx(WalletIcon, { style: { height: 64, width: 64 }, walletName: walletConnector.name }))] })), jsx(UserAddress, { walletConnector: walletConnector, userProfile: userProfile }), jsx("div", Object.assign({ 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', customCallbackOnSuccess: handleNetworkChange })) })), jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] }))] })));
+    return (jsxs("div", Object.assign({ 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, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsxs("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: [((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _a === void 0 ? void 0 : _a.avatar) && (jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: jsx("img", { src: (_b = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: 'user ens avatar', className: 'network-not-supported__img' }) }))), !((_c = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _c === void 0 ? void 0 : _c.avatar) && onboardingOnlyJwt && (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt })), !((_d = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _d === void 0 ? void 0 : _d.avatar) && !onboardingOnlyJwt && (jsx(WalletIcon, { style: { height: 64, width: 64 }, walletName: walletConnector.name }))] })), jsx(UserAddress, { walletConnector: walletConnector, userProfile: userProfile }), jsx("div", Object.assign({ 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' })) })), jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), 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/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -41,6 +41,7 @@ require('../../context/MockContext/MockContext.cjs');
 var useConnectAndSign = require('../../utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useWalletConnectorEvents = require('../../utils/hooks/useWalletConnectorEvents/useWalletConnectorEvents.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
@@ -52,31 +53,26 @@ var useUpdateUserProfileByJWTCallback = require('../../utils/hooks/useUpdateUser
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, onboardingOnlyJwt, selectedWalletConnector: walletConnector, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { user, onboardingOnlyJwt, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
-    const finishSign = useConnectAndSign.useConnectAndSign();
-    // Listen for network changes
-    React.useEffect(() => {
-        if (!walletConnector)
-            return;
-        const onChainChange = (network) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            if (isSupportedNetwork.isSupportedNetwork({ network, walletConnector })) {
-                if (onboardingOnlyJwt) {
-                    updateUserProfileByJWT(onboardingOnlyJwt);
-                    setShowAuthFlow(false);
-                }
-                else {
-                    finishSign({ walletConnector });
-                }
-            }
-        });
-        walletConnector.setupEventListeners({
-            onChainChange,
-        });
-        return () => {
-            walletConnector.teardownEventListeners();
-        };
-    }, [onboardingOnlyJwt, walletConnector, updateUserProfileByJWT]);
+    const finishConnectAndSign = useConnectAndSign.useConnectAndSign();
+    const onChainChange = React.useCallback((network) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (isSupportedNetwork.isSupportedNetwork({ network, walletConnector })) {
+            finishConnectAndSign({
+                walletConnector: walletConnector,
+            });
+        }
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        finishConnectAndSign,
+        onboardingOnlyJwt,
+        updateUserProfileByJWT,
+        walletConnector,
+    ]);
+    // We can't listen on the network defined in the context,
+    // because events on the primaryWallet are defined after message is signed.
+    useWalletConnectorEvents.useWalletConnectorEvents(walletConnector, { onChainChange });
     const iconSize = 80;
     const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
             height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
@@ -37,6 +37,7 @@ import '../../context/MockContext/MockContext.js';
 import { useConnectAndSign } from '../../utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useWalletConnectorEvents } from '../../utils/hooks/useWalletConnectorEvents/useWalletConnectorEvents.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
@@ -48,31 +49,26 @@ import { useUpdateUserProfileByJWTCallback } from '../../utils/hooks/useUpdateUs
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, onboardingOnlyJwt, selectedWalletConnector: walletConnector, setShowAuthFlow, } = useInternalDynamicContext();
+    const { user, onboardingOnlyJwt, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
-    const finishSign = useConnectAndSign();
-    // Listen for network changes
-    useEffect(() => {
-        if (!walletConnector)
-            return;
-        const onChainChange = (network) => __awaiter(void 0, void 0, void 0, function* () {
-            if (isSupportedNetwork({ network, walletConnector })) {
-                if (onboardingOnlyJwt) {
-                    updateUserProfileByJWT(onboardingOnlyJwt);
-                    setShowAuthFlow(false);
-                }
-                else {
-                    finishSign({ walletConnector });
-                }
-            }
-        });
-        walletConnector.setupEventListeners({
-            onChainChange,
-        });
-        return () => {
-            walletConnector.teardownEventListeners();
-        };
-    }, [onboardingOnlyJwt, walletConnector, updateUserProfileByJWT]);
+    const finishConnectAndSign = useConnectAndSign();
+    const onChainChange = useCallback((network) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isSupportedNetwork({ network, walletConnector })) {
+            finishConnectAndSign({
+                walletConnector: walletConnector,
+            });
+        }
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        finishConnectAndSign,
+        onboardingOnlyJwt,
+        updateUserProfileByJWT,
+        walletConnector,
+    ]);
+    // We can't listen on the network defined in the context,
+    // because events on the primaryWallet are defined after message is signed.
+    useWalletConnectorEvents(walletConnector, { onChainChange });
     const iconSize = 80;
     const icon = (jsx(WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
             height: pixelToRem(iconSize * iconRatio),

package/src/lib/views/WalletList/{SearchInstead/SearchInstead.cjs → SearchNotFoundMessage/SearchNotFoundMessage.cjs}

@@ -41,6 +41,6 @@ require('formik');
 require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 
-const SearchInstead = () => (jsxRuntime.jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: "Don't see your wallet?" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: "Try search instead" }))] })));
+const SearchNotFoundMessage = ({ title, subtitle, image, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [image && jsxRuntime.jsx("div", { children: image }), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: title || "Don't see your wallet?" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: subtitle || 'Try search instead' }))] })));
 
-exports.SearchInstead = SearchInstead;
+exports.SearchNotFoundMessage = SearchNotFoundMessage;

package/src/lib/views/WalletList/SearchNotFoundMessage/SearchNotFoundMessage.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    title?: string;
+    subtitle?: string;
+    image?: ReactNode;
+}
+export declare const SearchNotFoundMessage: FC<Props>;
+export {};

package/src/lib/views/WalletList/{SearchInstead/SearchInstead.js → SearchNotFoundMessage/SearchNotFoundMessage.js}

@@ -37,6 +37,6 @@ import 'formik';
 import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
 
-const SearchInstead = () => (jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: "Don't see your wallet?" })), jsx(Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: "Try search instead" }))] })));
+const SearchNotFoundMessage = ({ title, subtitle, image, }) => (jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [image && jsx("div", { children: image }), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: title || "Don't see your wallet?" })), jsx(Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: subtitle || 'Try search instead' }))] })));
 
-export { SearchInstead };
+export { SearchNotFoundMessage };

package/src/lib/views/WalletList/SearchNotFoundMessage/index.d.ts

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

package/src/lib/views/WalletList/WalletList.cjs

@@ -26,7 +26,8 @@ require('@dynamic-labs/utils');
 var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
-var SearchInstead = require('./SearchInstead/SearchInstead.cjs');
+var noWalletFound = require('../../assets/no-wallet-found.cjs');
+var SearchNotFoundMessage = require('./SearchNotFoundMessage/SearchNotFoundMessage.cjs');
 var WalletListItem = require('./WalletListItem/WalletListItem.cjs');
 
 localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, '');
@@ -77,7 +78,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-list__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsxRuntime.jsx(Search.Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }))), jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('wallet-list__scroll-container', {
                             'wallet-list__scroll-container--full-height': isSearchEnabled,
-                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [wallets.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key)))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchInstead.SearchInstead, {}))] }))] })), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
+                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [wallets.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: "Oops, no login methods have been configured." })), wallets.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: 'No wallet found.', subtitle: 'Try seaching for a different wallet', image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }))] })), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };

package/src/lib/views/WalletList/WalletList.js

@@ -22,7 +22,8 @@ import '@dynamic-labs/utils';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
-import { SearchInstead } from './SearchInstead/SearchInstead.js';
+import { ReactComponent as SvgNoWalletFound } from '../../assets/no-wallet-found.js';
+import { SearchNotFoundMessage } from './SearchNotFoundMessage/SearchNotFoundMessage.js';
 import { WalletListItem } from './WalletListItem/WalletListItem.js';
 
 LocalStorage.setToLS(WALLET_PICKER_SEARCH_KEY, '');
@@ -73,7 +74,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     };
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'wallet-list__container' }, { children: [error && jsx(ErrorContainer, { children: error }), !projectSettings ? (jsx(Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsx(Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }))), jsxs("div", Object.assign({ className: classNames('wallet-list__scroll-container', {
                             'wallet-list__scroll-container--full-height': isSearchEnabled,
-                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [wallets.length === 0 && (jsx(ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key)))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchInstead, {}))] }))] })), noDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
+                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [wallets.length === 0 && (jsx(ErrorContainer, { children: "Oops, no login methods have been configured." })), wallets.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: 'No wallet found.', subtitle: 'Try seaching for a different wallet', image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }))] })), noDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };

package/src/lib/widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.cjs

@@ -5,14 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var walletBook = require('@dynamic-labs/wallet-book');
 require('react');
-var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
-var unlink = require('../../../../shared/assets/unlink.cjs');
-var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
@@ -33,8 +30,6 @@ require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagic
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
-var StatusDot = require('../../../../components/StatusDot/StatusDot.cjs');
-var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -44,9 +39,33 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+var WalletInformationCard = require('../../../../components/WalletInformationCard/WalletInformationCard.cjs');
+var DotsMenu = require('../../../DynamicWidget/components/DotsMenu/DotsMenu.cjs');
+var useFetchNameService = require('../../../DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');
 
-const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletCurrency, walletName, onUnlinkClick, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__body' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { className: 'dynamic-bridge-wallet-card__wallet-icon', walletName: walletName }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__wallet-address' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })), jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'green' })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__balance' }, { children: [walletBalance, jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'medium', as: 'span', color: 'secondary' }, { children: walletCurrency }))] }))] }), onUnlinkClick && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'dynamic-bridge-wallet-card__unlink-button', buttonPadding: 'none', buttonVariant: 'secondary', typographyProps: {
-                color: 'secondary',
-            }, startSlot: jsxRuntime.jsx(unlink.ReactComponent, {}), onClick: onUnlinkClick }, { children: "Unlink" })))] })));
+const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletName, onUnlinkClick }) => {
+    const nameService = useFetchNameService.useFetchNameService(walletAddress);
+    const options = [
+        {
+            Icon: null,
+            callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            hide: !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            text: 'Copy ENS',
+        },
+        {
+            Icon: null,
+            callback: () => walletAddress && navigator.clipboard.writeText(walletAddress),
+            hide: !walletAddress,
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: () => onUnlinkClick === null || onUnlinkClick === void 0 ? void 0 : onUnlinkClick(),
+            hide: !onUnlinkClick,
+            text: 'Disconnect',
+        },
+    ];
+    return (jsxRuntime.jsx(WalletInformationCard.WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }), balance: walletBalance, menu: jsxRuntime.jsx(DotsMenu.DotsMenu, { options: options }) }));
+};
 
 exports.DynamicBridgeWalletCardBody = DynamicBridgeWalletCardBody;

package/src/lib/widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.d.ts

@@ -2,7 +2,6 @@ import { FC, ReactElement } from 'react';
 export type DynamicBridgeWalletCardBodyProps = {
     walletName: string;
     walletAddress: string;
-    walletCurrency?: string;
     walletBalance?: ReactElement;
     onUnlinkClick?: () => void;
 };

package/src/lib/widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.js

@@ -1,14 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import 'react';
-import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgUnlink } from '../../../../shared/assets/unlink.js';
-import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
@@ -29,8 +26,6 @@ import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicI
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../components/IconButton/IconButton.js';
-import { StatusDot } from '../../../../components/StatusDot/StatusDot.js';
-import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -40,9 +35,33 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import { WalletInformationCard } from '../../../../components/WalletInformationCard/WalletInformationCard.js';
+import { DotsMenu } from '../../../DynamicWidget/components/DotsMenu/DotsMenu.js';
+import { useFetchNameService } from '../../../DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';
 
-const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletCurrency, walletName, onUnlinkClick, }) => (jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__body' }, { children: [jsx(WalletIcon, { className: 'dynamic-bridge-wallet-card__wallet-icon', walletName: walletName }), jsxs("div", { children: [jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__wallet-address' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: shortenWalletAddress(walletAddress, 3, 3) })), jsx(StatusDot, { variant: 'green' })] })), jsxs("div", Object.assign({ className: 'dynamic-bridge-wallet-card__balance' }, { children: [walletBalance, jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'medium', as: 'span', color: 'secondary' }, { children: walletCurrency }))] }))] }), onUnlinkClick && (jsx(Button, Object.assign({ buttonClassName: 'dynamic-bridge-wallet-card__unlink-button', buttonPadding: 'none', buttonVariant: 'secondary', typographyProps: {
-                color: 'secondary',
-            }, startSlot: jsx(SvgUnlink, {}), onClick: onUnlinkClick }, { children: "Unlink" })))] })));
+const DynamicBridgeWalletCardBody = ({ walletAddress, walletBalance, walletName, onUnlinkClick }) => {
+    const nameService = useFetchNameService(walletAddress);
+    const options = [
+        {
+            Icon: null,
+            callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            hide: !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            text: 'Copy ENS',
+        },
+        {
+            Icon: null,
+            callback: () => walletAddress && navigator.clipboard.writeText(walletAddress),
+            hide: !walletAddress,
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: () => onUnlinkClick === null || onUnlinkClick === void 0 ? void 0 : onUnlinkClick(),
+            hide: !onUnlinkClick,
+            text: 'Disconnect',
+        },
+    ];
+    return (jsx(WalletInformationCard, { ens: nameService === null || nameService === void 0 ? void 0 : nameService.name, address: walletAddress, icon: jsx(WalletIcon, { walletName: walletName }), balance: walletBalance, menu: jsx(DotsMenu, { options: options }) }));
+};
 
 export { DynamicBridgeWalletCardBody };

package/src/lib/views/WalletList/SearchInstead/SearchInstead.d.ts

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

package/src/lib/views/WalletList/SearchInstead/index.d.ts

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