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

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

@@ -25,7 +25,6 @@ var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyRe
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
-    const [connectedWallet, setConnectedWallet] = React.useState(null);
     const getNextIdAvailable = React.useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
@@ -53,19 +52,23 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         };
     })
         .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
+    const connectedWallet = connectedWallets[0] || null;
     const setConnectedStates = React.useCallback((walletConnector, address, chain) => {
-        setConnectedWallet({
-            address,
-            chain,
-            connected: true,
-            connector: walletConnector,
-            id: 'connect-only-wallet',
-        });
         setConnectedWalletsInfo((currentWallets) => {
+            const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
             const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
+            // this is done, to make sure we're not adding two wallets with the same address to the array
             if (exists) {
                 return currentWallets;
             }
+            // when calling this function with a new wallet that has the same wallet connector as
+            // an existing one in the array, we intend to replace the existing wallet with the new one.
+            if (existingWalletIndex !== -1) {
+                const updatedWallets = [...currentWallets];
+                updatedWallets[existingWalletIndex] = Object.assign(Object.assign({}, updatedWallets[existingWalletIndex]), { chain, provider: getWalletProvider.getWalletProvider(walletConnector), walletPublicKey: address });
+                return updatedWallets;
+            }
+            // otherwise, add new wallet to connectedWalletsInfo array
             return [
                 ...currentWallets,
                 {
@@ -91,28 +94,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                 setConnectedStates(walletConnector, address, chain);
             }
             else {
-                setConnectedWallet(null);
+                removeConnectedWalletsInfo();
             }
         }
         else {
-            setConnectedWallet(null);
-        }
-    }), [setConnectedStates, wallets]);
-    React.useEffect(() => {
-        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' && connectedWalletsInfo.length;
-        if (shouldUpdateConnectedWalletsState) {
-            connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }) => {
-                if (chain) {
-                    connectWalletByAddressAndChain(name, walletPublicKey, chain);
-                }
-            });
+            removeConnectedWalletsInfo();
         }
-    }, [
-        authMode,
-        connectWalletByAddressAndChain,
-        connectedWallets.length,
-        connectedWalletsInfo,
-    ]);
+    }), [removeConnectedWalletsInfo, setConnectedStates, wallets]);
     const shouldSkipCreatingVisit = React.useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
     const connectWallet = (walletConnector, fetchPublicAddressOpts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -161,7 +149,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         connectedWalletsInfo,
         getConnectedWalletById,
         removeConnectedWalletsInfo,
-        setConnectedWallet,
         unlinkConnectedWallet,
     };
 };

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { AuthModeType, Wallet, WalletOption } from '../../../shared';
 export type ConnectedWalletConnectorType = {
@@ -20,12 +19,11 @@ type Props = {
 export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
-    connectedWallet: Wallet | null;
+    connectedWallet: Wallet;
     connectedWallets: Wallet[];
     connectedWalletsInfo: [] | ConnectedWalletConnectorType[];
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
     removeConnectedWalletsInfo: () => void;
-    setConnectedWallet: import("react").Dispatch<import("react").SetStateAction<Wallet | null>>;
     unlinkConnectedWallet: (walletId: string) => void;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useCallback, useMemo } from 'react';
 import { getWalletConnectorByName, isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
@@ -21,7 +21,6 @@ import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManually
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
-    const [connectedWallet, setConnectedWallet] = useState(null);
     const getNextIdAvailable = useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
@@ -49,19 +48,23 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         };
     })
         .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
+    const connectedWallet = connectedWallets[0] || null;
     const setConnectedStates = useCallback((walletConnector, address, chain) => {
-        setConnectedWallet({
-            address,
-            chain,
-            connected: true,
-            connector: walletConnector,
-            id: 'connect-only-wallet',
-        });
         setConnectedWalletsInfo((currentWallets) => {
+            const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
             const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
+            // this is done, to make sure we're not adding two wallets with the same address to the array
             if (exists) {
                 return currentWallets;
             }
+            // when calling this function with a new wallet that has the same wallet connector as
+            // an existing one in the array, we intend to replace the existing wallet with the new one.
+            if (existingWalletIndex !== -1) {
+                const updatedWallets = [...currentWallets];
+                updatedWallets[existingWalletIndex] = Object.assign(Object.assign({}, updatedWallets[existingWalletIndex]), { chain, provider: getWalletProvider(walletConnector), walletPublicKey: address });
+                return updatedWallets;
+            }
+            // otherwise, add new wallet to connectedWalletsInfo array
             return [
                 ...currentWallets,
                 {
@@ -87,28 +90,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                 setConnectedStates(walletConnector, address, chain);
             }
             else {
-                setConnectedWallet(null);
+                removeConnectedWalletsInfo();
             }
         }
         else {
-            setConnectedWallet(null);
-        }
-    }), [setConnectedStates, wallets]);
-    useEffect(() => {
-        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' && connectedWalletsInfo.length;
-        if (shouldUpdateConnectedWalletsState) {
-            connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }) => {
-                if (chain) {
-                    connectWalletByAddressAndChain(name, walletPublicKey, chain);
-                }
-            });
+            removeConnectedWalletsInfo();
         }
-    }, [
-        authMode,
-        connectWalletByAddressAndChain,
-        connectedWallets.length,
-        connectedWalletsInfo,
-    ]);
+    }), [removeConnectedWalletsInfo, setConnectedStates, wallets]);
     const shouldSkipCreatingVisit = useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
     const connectWallet = (walletConnector, fetchPublicAddressOpts) => __awaiter(void 0, void 0, void 0, function* () {
@@ -157,7 +145,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         connectedWalletsInfo,
         getConnectedWalletById,
         removeConnectedWalletsInfo,
-        setConnectedWallet,
         unlinkConnectedWallet,
     };
 };

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

@@ -18,7 +18,7 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 
 const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, authMode, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
     React.useEffect(() => {
@@ -95,6 +95,10 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
                 const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+                if (authMode === 'connect-only') {
+                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
+                    return;
+                }
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -124,11 +128,17 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                setNetwork(parseInt(chain));
+                if (primaryWallet.chain === 'starknet') {
+                    setNetwork(chain);
+                }
+                else {
+                    setNetwork(parseInt(chain));
+                }
             }),
             onDisconnect: handleLogOut,
         });
     }, [
+        authMode,
         primaryWallet,
         setMultiWalletWidgetState,
         multiWallet,
@@ -144,7 +154,12 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
     ]);
     const addSecondaryWalletEventListeners = React.useCallback((seen) => {
         const secondaryListeners = {
-            onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                if (authMode === 'connect-only' && secondaryWallets.length) {
+                    const [newAddress] = accounts;
+                    connectWalletByAddressAndChain(secondaryWallets[0].connector.name, newAddress, secondaryWallets[0].chain);
+                    return;
+                }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
                 }
@@ -166,7 +181,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             wallet.connector.setupEventListeners(secondaryListeners);
         }
     }, [
+        authMode,
         computeConnectedStateForWallets,
+        connectWalletByAddressAndChain,
         selectedWalletConnector,
         selectedWalletWithAction,
         handleAccountChangeWhenAwaitingAccountSwitch,

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Chain, WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
+import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 export type UseWalletEventListenersArgs = {
     computeConnectedStateForWallets(): Promise<void>;
@@ -17,8 +17,9 @@ export type UseWalletEventListenersArgs = {
     setSelectedWalletConnector(connector: WalletConnector | null): void;
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
+    authMode: AuthModeType;
 };
-export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }: UseWalletEventListenersArgs) => {
+export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, authMode, }: UseWalletEventListenersArgs) => {
     loadingNetwork: boolean;
     network: string | number | undefined;
     setNetwork: import("react").Dispatch<import("react").SetStateAction<string | number | undefined>>;

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

@@ -14,7 +14,7 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 
 const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, authMode, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
     useEffect(() => {
@@ -91,6 +91,10 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
                 const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+                if (authMode === 'connect-only') {
+                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
+                    return;
+                }
                 if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -120,11 +124,17 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                setNetwork(parseInt(chain));
+                if (primaryWallet.chain === 'starknet') {
+                    setNetwork(chain);
+                }
+                else {
+                    setNetwork(parseInt(chain));
+                }
             }),
             onDisconnect: handleLogOut,
         });
     }, [
+        authMode,
         primaryWallet,
         setMultiWalletWidgetState,
         multiWallet,
@@ -140,7 +150,12 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
     ]);
     const addSecondaryWalletEventListeners = useCallback((seen) => {
         const secondaryListeners = {
-            onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+            onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
+                if (authMode === 'connect-only' && secondaryWallets.length) {
+                    const [newAddress] = accounts;
+                    connectWalletByAddressAndChain(secondaryWallets[0].connector.name, newAddress, secondaryWallets[0].chain);
+                    return;
+                }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
                 }
@@ -162,7 +177,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             wallet.connector.setupEventListeners(secondaryListeners);
         }
     }, [
+        authMode,
         computeConnectedStateForWallets,
+        connectWalletByAddressAndChain,
         selectedWalletConnector,
         selectedWalletWithAction,
         handleAccountChangeWhenAwaitingAccountSwitch,

package/src/lib/views/BridgeSummaryView/BridgeSummaryView.cjs

@@ -25,20 +25,20 @@ var Balance = require('../../widgets/DynamicWidget/components/Balance/Balance.cj
 
 const BridgeSummaryView = () => {
     const { primaryWallet, setShowAuthFlow, appName, walletsByChain = [], } = useInternalDynamicContext.useInternalDynamicContext();
-    if (!primaryWallet) {
-        throw new Error('primaryWallet should be defined');
-    }
-    const PrimaryWalletChainIcon = getChainIcon.getChainIcon(primaryWallet.chain);
-    const primaryWalletChainInfo = walletConnectorCore.getChainInfo(primaryWallet.chain);
     const onClickClose = () => setShowAuthFlow(false);
     const body = React.useMemo(() => {
         const blockchainNames = walletsByChain.map(({ chain }) => { var _a; return (_a = walletConnectorCore.getChainInfo(chain)) === null || _a === void 0 ? void 0 : _a.blockchainName; });
         const [firstBlockchainName, secondBlockchainName] = blockchainNames;
         return `Congratulations on connecting both your ${firstBlockchainName} and ${secondBlockchainName} wallets`;
     }, [walletsByChain]);
-    return (jsxRuntime.jsxs(ConnectedWalletsListLayout.ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: `Welcome to ${appName}`, body: body }, { children: [jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletName: primaryWallet.connector.name, walletAddress: primaryWallet.address, walletBalance: 
-                    // eslint-disable-next-line react/jsx-wrap-multilines
-                    jsxRuntime.jsx(Balance.Balance, { address: primaryWallet.address, connector: primaryWallet.connector, network: primaryWallet.chain }) }) })), jsxRuntime.jsx(SecondaryWallets.MemoSecondaryWallets, { hideUnlinkAction: true })] })));
+    const createPrimaryWalletCard = (wallet) => {
+        const PrimaryWalletChainIcon = getChainIcon.getChainIcon(wallet.chain);
+        const primaryWalletChainInfo = walletConnectorCore.getChainInfo(wallet.chain);
+        return (jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletName: wallet.connector.name, walletAddress: wallet.address, walletBalance: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxRuntime.jsx(Balance.Balance, { address: wallet.address, connector: wallet.connector, network: wallet.chain }) }) })));
+    };
+    return (jsxRuntime.jsxs(ConnectedWalletsListLayout.ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: `Welcome to ${appName}`, body: body }, { children: [primaryWallet && createPrimaryWalletCard(primaryWallet), jsxRuntime.jsx(SecondaryWallets.MemoSecondaryWallets, { hideUnlinkAction: true })] })));
 };
 
 exports.BridgeSummaryView = BridgeSummaryView;

package/src/lib/views/BridgeSummaryView/BridgeSummaryView.js

@@ -21,20 +21,20 @@ import { Balance } from '../../widgets/DynamicWidget/components/Balance/Balance.
 
 const BridgeSummaryView = () => {
     const { primaryWallet, setShowAuthFlow, appName, walletsByChain = [], } = useInternalDynamicContext();
-    if (!primaryWallet) {
-        throw new Error('primaryWallet should be defined');
-    }
-    const PrimaryWalletChainIcon = getChainIcon(primaryWallet.chain);
-    const primaryWalletChainInfo = getChainInfo(primaryWallet.chain);
     const onClickClose = () => setShowAuthFlow(false);
     const body = useMemo(() => {
         const blockchainNames = walletsByChain.map(({ chain }) => { var _a; return (_a = getChainInfo(chain)) === null || _a === void 0 ? void 0 : _a.blockchainName; });
         const [firstBlockchainName, secondBlockchainName] = blockchainNames;
         return `Congratulations on connecting both your ${firstBlockchainName} and ${secondBlockchainName} wallets`;
     }, [walletsByChain]);
-    return (jsxs(ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: `Welcome to ${appName}`, body: body }, { children: [jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: primaryWallet.connector.name, walletAddress: primaryWallet.address, walletBalance: 
-                    // eslint-disable-next-line react/jsx-wrap-multilines
-                    jsx(Balance, { address: primaryWallet.address, connector: primaryWallet.connector, network: primaryWallet.chain }) }) })), jsx(MemoSecondaryWallets, { hideUnlinkAction: true })] })));
+    const createPrimaryWalletCard = (wallet) => {
+        const PrimaryWalletChainIcon = getChainIcon(wallet.chain);
+        const primaryWalletChainInfo = getChainInfo(wallet.chain);
+        return (jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: wallet.connector.name, walletAddress: wallet.address, walletBalance: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsx(Balance, { address: wallet.address, connector: wallet.connector, network: wallet.chain }) }) })));
+    };
+    return (jsxs(ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: `Welcome to ${appName}`, body: body }, { children: [primaryWallet && createPrimaryWalletCard(primaryWallet), jsx(MemoSecondaryWallets, { hideUnlinkAction: true })] })));
 };
 
 export { BridgeSummaryView };

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';