@dynamic-labs/sdk-react-core 0.18.0-RC.23 → 0.18.0-RC.24

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+## [0.18.0-RC.24](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.23...v0.18.0-RC.24) (2023-08-01)
+
+
+### Features
+
+* **QNTM-156:** onBeforeConnectSuccessConfirmation on account change ([#2782](https://github.com/dynamic-labs/DynamicAuth/issues/2782)) ([eeabcd0](https://github.com/dynamic-labs/DynamicAuth/commit/eeabcd07889b7284680dc92a83bfa1b8321fa0f5))
+
+
+### Bug Fixes
+
+* **bridge:** reordering not mess connected wallets ([#2758](https://github.com/dynamic-labs/DynamicAuth/issues/2758)) ([2cdc240](https://github.com/dynamic-labs/DynamicAuth/commit/2cdc240b1f5b401880d776174646ebc9383506d2))
+
 ## [0.18.0-RC.23](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.22...v0.18.0-RC.23) (2023-07-31)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-RC.23";
+var version = "0.18.0-RC.24";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.18.0-RC.23";
+var version = "0.18.0-RC.24";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.0-RC.23",
+  "version": "0.18.0-RC.24",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,13 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.0-RC.23",
-    "@dynamic-labs/multi-wallet": "0.18.0-RC.23",
-    "@dynamic-labs/rpc-providers": "0.18.0-RC.23",
-    "@dynamic-labs/types": "0.18.0-RC.23",
-    "@dynamic-labs/utils": "0.18.0-RC.23",
-    "@dynamic-labs/wallet-book": "0.18.0-RC.23",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-RC.23"
+    "@dynamic-labs/logger": "0.18.0-RC.24",
+    "@dynamic-labs/multi-wallet": "0.18.0-RC.24",
+    "@dynamic-labs/rpc-providers": "0.18.0-RC.24",
+    "@dynamic-labs/types": "0.18.0-RC.24",
+    "@dynamic-labs/utils": "0.18.0-RC.24",
+    "@dynamic-labs/wallet-book": "0.18.0-RC.24",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-RC.24"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -21,7 +21,6 @@ var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs'
 require('ethers');
 var useLocalStorage = require('../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var useGlobalLoading = require('../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
-var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 require('../../shared/consts/index.cjs');
 require('react-dom');
 require('react-focus-lock');
@@ -80,7 +79,6 @@ require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 var FundingWidget = require('../../widgets/FundingWidget/FundingWidget.cjs');
 var DynamicBridgeWidgetContext = require('../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 var EmailVerificationContext = require('../EmailVerificationContext/EmailVerificationContext.cjs');
 var FundingContext = require('../FundingContext/FundingContext.cjs');
 var SendBalanceContext = require('../SendBalanceContext/SendBalanceContext.cjs');
@@ -199,10 +197,10 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setShowAuthFlow,
         wallets,
     });
-    useEffectOnce.useEffectOnce(() => {
+    React.useEffect(() => {
         const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
         setWalletsToConnectByChain(missingChains);
-    });
+    }, [walletsByChain]);
     const [selectedWalletConnector, setSelectedWalletConnector] = React.useState(null);
     //selected wallet to perform an action (become primary, unlink, etc)
     const [selectedWalletWithAction, setSelectedWalletWithAction] = React.useState(null);

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { ICONIC_SPRITE_URL } from '@dynamic-labs/iconic';
 import { MissingEnvironmentIdError } from '@dynamic-labs/utils';
 import { useWalletBookCdn, getWalletBookCdnUrl, WalletBookContextProvider } from '@dynamic-labs/wallet-book';
@@ -17,7 +17,6 @@ import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js
 import 'ethers';
 import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
-import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import '../../shared/consts/index.js';
 import 'react-dom';
 import 'react-focus-lock';
@@ -76,7 +75,6 @@ import '../../views/CollectUserDataView/fieldsConfig.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import { FundingWidget } from '../../widgets/FundingWidget/FundingWidget.js';
 import { DynamicBridgeWidgetContextProvider } from '../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import { EmailVerificationContextProvider } from '../EmailVerificationContext/EmailVerificationContext.js';
 import { FundingContextProvider } from '../FundingContext/FundingContext.js';
 import { SendBalanceContextProvider } from '../SendBalanceContext/SendBalanceContext.js';
@@ -195,10 +193,10 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setShowAuthFlow,
         wallets,
     });
-    useEffectOnce(() => {
+    useEffect(() => {
         const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
         setWalletsToConnectByChain(missingChains);
-    });
+    }, [walletsByChain]);
     const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
     //selected wallet to perform an action (become primary, unlink, etc)
     const [selectedWalletWithAction, setSelectedWalletWithAction] = useState(null);

package/src/lib/shared/types/index.d.ts

@@ -102,7 +102,7 @@ export type OnAuthSuccess = (params: {
 export type OnConnectSuccess = (params: {
     walletConnector: WalletConnector | null;
 }) => void;
-export type OnBeforeConnectSuccessConfirmation = (walletAddress: string) => Promise<boolean>;
+export type OnBeforeConnectSuccessConfirmation = (wallet: Partial<Wallet>) => Promise<boolean>;
 export type OnUserProfileUpdate = (user: UserProfile) => void;
 export type MultiWalletWidgetState = 'idle' | 'awaiting_account_switch' | 'awaiting_connection' | 'awaiting_signature' | 'detected_new_wallet';
 export type AccountSwitchState = 'idle' | 'linking_new_wallet' | 'switching_primary' | 'primary_not_connected';

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

@@ -102,11 +102,23 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         return Promise.resolve();
     };
     // Updates connected wallet (network and address) and verifies connected wallet connection
-    const refreshConnectedWallet = (walletId, walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const refreshConnectedWallet = (walletId, walletConnector, shouldCallCallback = false) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(walletConnector)) {
             yield walletConnector.connect();
         }
         const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (onBeforeConnectSuccessConfirmation && shouldCallCallback) {
+            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
+                address: currentWalletConnectorAddress,
+                chain: walletConnector.connectedChain,
+                connector: walletConnector,
+            });
+            if (!shouldProceedWithConnection) {
+                walletConnectorCore.logger.info('Connection was not established because onBeforeConnectSuccessConfirmation returned false');
+                setShowAuthFlow(false);
+                return;
+            }
+        }
         if (!currentWalletConnectorAddress) {
             walletConnectorCore.logger.error('Could not refresh the wallet. The wallet address is not available');
             return;
@@ -127,7 +139,11 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             throw error;
         }
         if (onBeforeConnectSuccessConfirmation) {
-            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation(publicWalletAddress);
+            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
+                address: publicWalletAddress,
+                chain: walletConnector.connectedChain,
+                connector: walletConnector,
+            });
             if (!shouldProceedWithConnection) {
                 walletConnectorCore.logger.info('Connection was not established because onBeforeConnectSuccessConfirmation returned false');
                 setShowAuthFlow(false);

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

@@ -26,7 +26,7 @@ export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enable
     connectedWallets: Wallet[];
     connectedWalletsInfo: ConnectedWalletConnectorType[] | [];
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
-    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector, shouldCallCallback?: boolean) => Promise<void>;
     removeConnectedWalletsInfo: () => void;
     unlinkConnectedWallet: (walletId: string) => void;
 };

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

@@ -98,11 +98,23 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         return Promise.resolve();
     };
     // Updates connected wallet (network and address) and verifies connected wallet connection
-    const refreshConnectedWallet = (walletId, walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+    const refreshConnectedWallet = (walletId, walletConnector, shouldCallCallback = false) => __awaiter(void 0, void 0, void 0, function* () {
         if (shouldManuallyReconnectOnRefresh(walletConnector)) {
             yield walletConnector.connect();
         }
         const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (onBeforeConnectSuccessConfirmation && shouldCallCallback) {
+            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
+                address: currentWalletConnectorAddress,
+                chain: walletConnector.connectedChain,
+                connector: walletConnector,
+            });
+            if (!shouldProceedWithConnection) {
+                logger.info('Connection was not established because onBeforeConnectSuccessConfirmation returned false');
+                setShowAuthFlow(false);
+                return;
+            }
+        }
         if (!currentWalletConnectorAddress) {
             logger.error('Could not refresh the wallet. The wallet address is not available');
             return;
@@ -123,7 +135,11 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             throw error;
         }
         if (onBeforeConnectSuccessConfirmation) {
-            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation(publicWalletAddress);
+            const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
+                address: publicWalletAddress,
+                chain: walletConnector.connectedChain,
+                connector: walletConnector,
+            });
             if (!shouldProceedWithConnection) {
                 logger.info('Connection was not established because onBeforeConnectSuccessConfirmation returned false');
                 setShowAuthFlow(false);

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

@@ -96,7 +96,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 const [newAddress] = accounts;
                 const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector, true);
                     return;
                 }
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
@@ -160,7 +160,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         const secondaryListeners = {
             onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector, true);
                     return;
                 }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {

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

@@ -17,7 +17,7 @@ export type UseWalletEventListenersArgs = {
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
     authMode: AuthModeType;
-    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector, shouldCallCallback?: boolean) => Promise<void>;
 };
 export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
     loadingNetwork: boolean;

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

@@ -92,7 +92,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 const [newAddress] = accounts;
                 const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector, true);
                     return;
                 }
                 if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
@@ -156,7 +156,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         const secondaryListeners = {
             onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
                 if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector, true);
                     return;
                 }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {

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

@@ -50,7 +50,7 @@ var DynamicBridgeUserProfile = require('./components/DynamicBridgeUserProfile/Dy
 var DynamicBridgeWidgetContext = require('./context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 
 const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
-    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, getConnectedWalletById, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
     const closeOnOutsideClick = React.useCallback((e) => {
         var _a;
@@ -62,11 +62,11 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
         }
     }, [inlineControlsRef, variant, showAuthFlow, setShowBridgeWidget]);
     index.useOnClickOutside(widgetRef, closeOnOutsideClick);
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs(ShadowDOM.ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsxRuntime.jsx(InlineWidget.InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }, index) => {
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs(ShadowDOM.ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsxRuntime.jsx(InlineWidget.InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
                         const ChainIcon = getChainIcon.getChainIcon(chain);
-                        const wallet = getConnectedWalletById(`connect-wallet-${index}`);
-                        if (wallet) {
-                            return (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, Object.assign({ icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress.shortenWalletAddress(wallet.address, 3, 3) }), chain));
+                        const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
+                        if (connectedChainWallets.length > 0) {
+                            return connectedChainWallets.map((wallet) => (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, Object.assign({ icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress.shortenWalletAddress(wallet.address, 3, 3) }), wallet.id)));
                         }
                         return (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, Object.assign({ icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true) }, { children: "Connect wallet" }), chain));
                     }) })), jsxRuntime.jsx(DynamicBridgeUserProfile.DynamicBridgeUserProfile, { variant: variant })] })) }));

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

@@ -46,7 +46,7 @@ import { DynamicBridgeUserProfile } from './components/DynamicBridgeUserProfile/
 import { useDynamicBridgeWidgetContext } from './context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
 
 const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
-    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, getConnectedWalletById, } = useInternalDynamicContext();
+    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
     const closeOnOutsideClick = useCallback((e) => {
         var _a;
@@ -58,11 +58,11 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
         }
     }, [inlineControlsRef, variant, showAuthFlow, setShowBridgeWidget]);
     useOnClickOutside(widgetRef, closeOnOutsideClick);
-    return (jsx(IsBrowser, { children: jsxs(ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsx(InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }, index) => {
+    return (jsx(IsBrowser, { children: jsxs(ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsx(InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
                         const ChainIcon = getChainIcon(chain);
-                        const wallet = getConnectedWalletById(`connect-wallet-${index}`);
-                        if (wallet) {
-                            return (jsx(InlineWidgetButton, Object.assign({ icon: jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress(wallet.address, 3, 3) }), chain));
+                        const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
+                        if (connectedChainWallets.length > 0) {
+                            return connectedChainWallets.map((wallet) => (jsx(InlineWidgetButton, Object.assign({ icon: jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress(wallet.address, 3, 3) }), wallet.id)));
                         }
                         return (jsx(InlineWidgetButton, Object.assign({ icon: jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true) }, { children: "Connect wallet" }), chain));
                     }) })), jsx(DynamicBridgeUserProfile, { variant: variant })] })) }));

package/src/lib/widgets/DynamicBridgeWidget/views/WalletsView/WalletsView.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
-var DynamicWidgetFooter = require('../../../DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
 require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
@@ -44,20 +43,24 @@ require('formik');
 require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Balance = require('../../../DynamicWidget/components/Balance/Balance.cjs');
+var DynamicWidgetFooter = require('../../../DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
 var DynamicBridgeWalletCard = require('../../components/DynamicBridgeWalletCard/DynamicBridgeWalletCard.cjs');
 var DynamicBridgeWalletCardBody = require('../../components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.cjs');
-var Balance = require('../../../DynamicWidget/components/Balance/Balance.cjs');
 var DynamicBridgeWidgetEmptyCard = require('../../components/DynamicBridgeWidgetEmptyCard/DynamicBridgeWidgetEmptyCard.cjs');
-var SecondaryWallets = require('./components/SecondaryWallets/SecondaryWallets.cjs');
 
 const WalletsView = () => {
-    const { unlinkConnectedWallet, walletsByChain, getConnectedWalletById } = useInternalDynamicContext.useInternalDynamicContext();
-    const firstWallet = getConnectedWalletById('connect-wallet-0');
-    const PrimaryWalletChainIcon = firstWallet && getChainIcon.getChainIcon(firstWallet.chain);
-    const primaryWalletChainInfo = firstWallet && walletConnectorCore.getChainInfo(firstWallet.chain);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-bridge-widget-wallets-view' }, { children: [firstWallet && PrimaryWalletChainIcon && (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: firstWallet.connector.name, walletAddress: firstWallet.address, walletBalance: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsxRuntime.jsx(Balance.Balance, { address: firstWallet.address, connector: firstWallet.connector, network: firstWallet.chain }), onUnlinkClick: () => unlinkConnectedWallet(firstWallet.id) }) }))), !firstWallet && (jsxRuntime.jsx(DynamicBridgeWidgetEmptyCard.DynamicBridgeWidgetEmptyCard, { chain: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain[0].chain })), jsxRuntime.jsx(SecondaryWallets.MemoSecondaryWallets, {})] })), jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: jsxRuntime.jsx(LogoutButton.LogoutButton, { buttonClassName: 'dynamic-bridge-widget-wallets-view__logout-button', isTextButton: true }) })] }));
+    const { unlinkConnectedWallet, walletsByChain, connectedWallets } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'dynamic-bridge-widget-wallets-view' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
+                    const chainWallets = connectedWallets.filter(({ chain: walletChain }) => chain === walletChain);
+                    // "Connect wallet" for empty chains
+                    if (!chainWallets.length)
+                        return jsxRuntime.jsx(DynamicBridgeWidgetEmptyCard.DynamicBridgeWidgetEmptyCard, { chain: chain });
+                    const WalletIcon = getChainIcon.getChainIcon(chain);
+                    const walletInfo = walletConnectorCore.getChainInfo(chain);
+                    // Wallets info for chains with connected wallets
+                    return chainWallets.map(({ connector, address, id }) => (jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(WalletIcon, {}), networkName: walletInfo === null || walletInfo === void 0 ? void 0 : walletInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletName: connector.name, walletAddress: address, walletBalance: jsxRuntime.jsx(Balance.Balance, { address: address, connector: connector, network: chain }), onUnlinkClick: () => unlinkConnectedWallet(id) }) }), id)));
+                }) })), jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: jsxRuntime.jsx(LogoutButton.LogoutButton, { buttonClassName: 'dynamic-bridge-widget-wallets-view__logout-button', isTextButton: true }) })] }));
 };
 
 exports.WalletsView = WalletsView;

package/src/lib/widgets/DynamicBridgeWidget/views/WalletsView/WalletsView.js

@@ -1,6 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
-import { DynamicWidgetFooter } from '../../../DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.js';
 import 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
@@ -40,20 +39,24 @@ import 'formik';
 import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Balance } from '../../../DynamicWidget/components/Balance/Balance.js';
+import { DynamicWidgetFooter } from '../../../DynamicWidget/components/DynamicWidgetFooter/DynamicWidgetFooter.js';
 import { DynamicBridgeWalletCard } from '../../components/DynamicBridgeWalletCard/DynamicBridgeWalletCard.js';
 import { DynamicBridgeWalletCardBody } from '../../components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.js';
-import { Balance } from '../../../DynamicWidget/components/Balance/Balance.js';
 import { DynamicBridgeWidgetEmptyCard } from '../../components/DynamicBridgeWidgetEmptyCard/DynamicBridgeWidgetEmptyCard.js';
-import { MemoSecondaryWallets } from './components/SecondaryWallets/SecondaryWallets.js';
 
 const WalletsView = () => {
-    const { unlinkConnectedWallet, walletsByChain, getConnectedWalletById } = useInternalDynamicContext();
-    const firstWallet = getConnectedWalletById('connect-wallet-0');
-    const PrimaryWalletChainIcon = firstWallet && getChainIcon(firstWallet.chain);
-    const primaryWalletChainInfo = firstWallet && getChainInfo(firstWallet.chain);
-    return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'dynamic-bridge-widget-wallets-view' }, { children: [firstWallet && PrimaryWalletChainIcon && (jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: firstWallet.connector.name, walletAddress: firstWallet.address, walletBalance: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsx(Balance, { address: firstWallet.address, connector: firstWallet.connector, network: firstWallet.chain }), onUnlinkClick: () => unlinkConnectedWallet(firstWallet.id) }) }))), !firstWallet && (jsx(DynamicBridgeWidgetEmptyCard, { chain: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain[0].chain })), jsx(MemoSecondaryWallets, {})] })), jsx(DynamicWidgetFooter, { children: jsx(LogoutButton, { buttonClassName: 'dynamic-bridge-widget-wallets-view__logout-button', isTextButton: true }) })] }));
+    const { unlinkConnectedWallet, walletsByChain, connectedWallets } = useInternalDynamicContext();
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: 'dynamic-bridge-widget-wallets-view' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
+                    const chainWallets = connectedWallets.filter(({ chain: walletChain }) => chain === walletChain);
+                    // "Connect wallet" for empty chains
+                    if (!chainWallets.length)
+                        return jsx(DynamicBridgeWidgetEmptyCard, { chain: chain });
+                    const WalletIcon = getChainIcon(chain);
+                    const walletInfo = getChainInfo(chain);
+                    // Wallets info for chains with connected wallets
+                    return chainWallets.map(({ connector, address, id }) => (jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(WalletIcon, {}), networkName: walletInfo === null || walletInfo === void 0 ? void 0 : walletInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: connector.name, walletAddress: address, walletBalance: jsx(Balance, { address: address, connector: connector, network: chain }), onUnlinkClick: () => unlinkConnectedWallet(id) }) }), id)));
+                }) })), jsx(DynamicWidgetFooter, { children: jsx(LogoutButton, { buttonClassName: 'dynamic-bridge-widget-wallets-view__logout-button', isTextButton: true }) })] }));
 };
 
 export { WalletsView, WalletsView as default };