@dynamic-labs/sdk-react-core 0.17.0-RC.13 → 0.17.0-RC.15

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

@@ -16,7 +16,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, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
     React.useEffect(() => {
@@ -42,6 +42,51 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             return;
         }
         const seen = new Set();
+        addPrimaryWalletEventListeners(seen);
+        addSecondaryWalletEventListeners(seen);
+        return () => {
+            primaryWallet.connector.teardownEventListeners();
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+        // justification: we don't want to setup event listeners more than needed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        user,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        multiWalletWidgetState,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+    ]);
+    const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
+        const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+        // this means the user is linking a new account, so we need proof of ownership...
+        if (!linkedSecondaryWallet) {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+            if (isPrimaryWallet && primaryWallet) {
+                setSelectedWalletConnector(primaryWallet.connector);
+            }
+            return;
+        }
+        // ...otherwise, the user is switching primary accounts betweeen the same wallet
+        setSelectedWalletWithAction(null);
+        setPrimaryWalletId(linkedSecondaryWallet.id);
+        setMultiWalletWidgetState('idle');
+    }, [
+        setMultiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        setSelectedWalletWithAction,
+        setPrimaryWalletId,
+    ]);
+    const addPrimaryWalletEventListeners = React.useCallback((seen) => {
+        if (!primaryWallet) {
+            return;
+        }
         seen.add(primaryWallet.connector.name);
         primaryWallet.connector.setupEventListeners({
             onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -54,16 +99,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     yield handleLogOut();
                 }
                 else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
-                    // this means the user is linking a new account, so we need proof of ownership...
-                    if (!linkedSecondaryWallet) {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        return;
-                    }
-                    // ...otherwise, the user is switching primary accounts betweeen the same wallet
-                    setPrimaryWalletId(linkedSecondaryWallet.id);
-                    setMultiWalletWidgetState('idle');
+                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
                     yield computeConnectedStateForWallets();
                 }
                 else if (multiWalletWidgetState === 'idle' &&
@@ -90,50 +126,49 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             }),
             onDisconnect: handleLogOut,
         });
+    }, [
+        primaryWallet,
+        setMultiWalletWidgetState,
+        multiWallet,
+        user,
+        computeConnectedStateForWallets,
+        handleLogOut,
+        connectWalletByAddressAndChain,
+        multiWalletWidgetState,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        handleAccountChangeWhenAwaitingAccountSwitch,
+    ]);
+    const addSecondaryWalletEventListeners = React.useCallback((seen) => {
+        const secondaryListeners = {
+            onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                if (multiWalletWidgetState === 'awaiting_account_switch') {
+                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+                }
+                yield computeConnectedStateForWallets();
+            }),
+            onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                yield computeConnectedStateForWallets();
+            }),
+        };
         if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
             seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners({
-                onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    if (multiWalletWidgetState === 'awaiting_account_switch') {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                    }
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            selectedWalletConnector.setupEventListeners(secondaryListeners);
         }
         for (const wallet of secondaryWallets) {
             if (seen.has(wallet.connector.name)) {
                 continue;
             }
             seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners({
-                onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            wallet.connector.setupEventListeners(secondaryListeners);
         }
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
-            }
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        computeConnectedStateForWallets,
+        selectedWalletConnector,
+        selectedWalletWithAction,
+        handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        secondaryWallets,
     ]);
     return {
         loadingNetwork,

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 } from '../../../shared';
+import { MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 export type UseWalletEventListenersArgs = {
     computeConnectedStateForWallets(): Promise<void>;
@@ -11,12 +11,14 @@ export type UseWalletEventListenersArgs = {
     primaryWallet: Wallet | null;
     secondaryWallets: Wallet[];
     selectedWalletConnector: WalletConnector | null;
+    selectedWalletWithAction: WalletWithAction | null;
     setMultiWalletWidgetState: MultiWalletWidgetStateSetter;
     setPrimaryWalletId(walletId: string): void;
     setSelectedWalletConnector(connector: WalletConnector | null): void;
+    setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
 };
-export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }: UseWalletEventListenersArgs) => {
+export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }: 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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -12,7 +12,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, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
     useEffect(() => {
@@ -38,6 +38,51 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             return;
         }
         const seen = new Set();
+        addPrimaryWalletEventListeners(seen);
+        addSecondaryWalletEventListeners(seen);
+        return () => {
+            primaryWallet.connector.teardownEventListeners();
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+        // justification: we don't want to setup event listeners more than needed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        user,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        multiWalletWidgetState,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+    ]);
+    const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
+        const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        // this means the user is linking a new account, so we need proof of ownership...
+        if (!linkedSecondaryWallet) {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+            if (isPrimaryWallet && primaryWallet) {
+                setSelectedWalletConnector(primaryWallet.connector);
+            }
+            return;
+        }
+        // ...otherwise, the user is switching primary accounts betweeen the same wallet
+        setSelectedWalletWithAction(null);
+        setPrimaryWalletId(linkedSecondaryWallet.id);
+        setMultiWalletWidgetState('idle');
+    }, [
+        setMultiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        setSelectedWalletWithAction,
+        setPrimaryWalletId,
+    ]);
+    const addPrimaryWalletEventListeners = useCallback((seen) => {
+        if (!primaryWallet) {
+            return;
+        }
         seen.add(primaryWallet.connector.name);
         primaryWallet.connector.setupEventListeners({
             onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
@@ -50,16 +95,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     yield handleLogOut();
                 }
                 else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-                    // this means the user is linking a new account, so we need proof of ownership...
-                    if (!linkedSecondaryWallet) {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        return;
-                    }
-                    // ...otherwise, the user is switching primary accounts betweeen the same wallet
-                    setPrimaryWalletId(linkedSecondaryWallet.id);
-                    setMultiWalletWidgetState('idle');
+                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
                     yield computeConnectedStateForWallets();
                 }
                 else if (multiWalletWidgetState === 'idle' &&
@@ -86,50 +122,49 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             }),
             onDisconnect: handleLogOut,
         });
+    }, [
+        primaryWallet,
+        setMultiWalletWidgetState,
+        multiWallet,
+        user,
+        computeConnectedStateForWallets,
+        handleLogOut,
+        connectWalletByAddressAndChain,
+        multiWalletWidgetState,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        handleAccountChangeWhenAwaitingAccountSwitch,
+    ]);
+    const addSecondaryWalletEventListeners = useCallback((seen) => {
+        const secondaryListeners = {
+            onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (multiWalletWidgetState === 'awaiting_account_switch') {
+                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+                }
+                yield computeConnectedStateForWallets();
+            }),
+            onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield computeConnectedStateForWallets();
+            }),
+        };
         if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
             seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners({
-                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                    if (multiWalletWidgetState === 'awaiting_account_switch') {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                    }
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            selectedWalletConnector.setupEventListeners(secondaryListeners);
         }
         for (const wallet of secondaryWallets) {
             if (seen.has(wallet.connector.name)) {
                 continue;
             }
             seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners({
-                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            wallet.connector.setupEventListeners(secondaryListeners);
         }
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
-            }
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        computeConnectedStateForWallets,
+        selectedWalletConnector,
+        selectedWalletWithAction,
+        handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        secondaryWallets,
     ]);
     return {
         loadingNetwork,

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
 var utils = require('@dynamic-labs/utils');
 var MockContext = require('../../../context/MockContext/MockContext.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -16,6 +15,7 @@ require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
+require('react');
 require('ethers');
 var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
 var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
@@ -31,33 +31,30 @@ const useWalletItemActions = () => {
     const { setView } = ViewContext.useViewContext();
     const { onlyConnectUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
     const connectAndSignWallet = useConnectAndSign.useConnectAndSign();
-    const setWalletConnectorAndWalletColor = React.useCallback((walletConnector) => {
-        setSelectedWalletConnector(walletConnector);
-    }, [setSelectedWalletConnector]);
     const handleCustodialWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -87,7 +84,7 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
     });
     const openWallet = (walletKey, handlers) => {
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};

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

@@ -1,5 +1,4 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback } from 'react';
 import { isMobile } from '@dynamic-labs/utils';
 import { useMockContext } from '../../../context/MockContext/MockContext.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
@@ -12,6 +11,7 @@ import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
+import 'react';
 import 'ethers';
 import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
@@ -27,33 +27,30 @@ const useWalletItemActions = () => {
     const { setView } = useViewContext();
     const { onlyConnectUser } = useConnectAndSignSplitSteps();
     const connectAndSignWallet = useConnectAndSign();
-    const setWalletConnectorAndWalletColor = useCallback((walletConnector) => {
-        setSelectedWalletConnector(walletConnector);
-    }, [setSelectedWalletConnector]);
     const handleCustodialWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -83,7 +80,7 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
     });
     const openWallet = (walletKey, handlers) => {
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};

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

@@ -6,7 +6,7 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
     const [wallets, setWallets] = React.useState([]);
     React.useEffect(() => {
         const getWalletList = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -15,6 +15,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
                     appLogoUrl,
                     appName,
                     customerApiProviders: projectSettings.providers || [],
+                    flowNetwork,
                     networkConfigurations,
                     skipMemo: true,
                     walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
@@ -24,6 +25,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
                     appLogoUrl,
                     appName,
                     customerApiProviders: projectSettings.providers || [],
+                    flowNetwork,
                     networkConfigurations,
                     skipMemo: true,
                     walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
@@ -45,6 +47,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
         appName,
         networkConfigurations,
         walletConnectorsProp,
+        flowNetwork,
     ]);
     return { wallets };
 };

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

@@ -5,12 +5,13 @@ import { WalletOption } from '../../../shared';
 type Props = {
     appLogoUrl?: string;
     appName?: string;
+    flowNetwork?: 'mainnet' | 'testnet';
     networkConfigurations: NetworkConfigurationMap | undefined;
     projectSettings: ProjectSettings | undefined;
     walletConnectorsProp?: WalletConnectorsMethod[];
     walletUiUtils: WalletUiUtils;
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, networkConfigurations, walletUiUtils, walletConnectorsProp, }: Props) => {
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: WalletOption[];
 };
 export {};

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

@@ -2,7 +2,7 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useEffect } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
     const [wallets, setWallets] = useState([]);
     useEffect(() => {
         const getWalletList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -11,6 +11,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
                     appLogoUrl,
                     appName,
                     customerApiProviders: projectSettings.providers || [],
+                    flowNetwork,
                     networkConfigurations,
                     skipMemo: true,
                     walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
@@ -20,6 +21,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
                     appLogoUrl,
                     appName,
                     customerApiProviders: projectSettings.providers || [],
+                    flowNetwork,
                     networkConfigurations,
                     skipMemo: true,
                     walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
@@ -41,6 +43,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfiguration
         appName,
         networkConfigurations,
         walletConnectorsProp,
+        flowNetwork,
     ]);
     return { wallets };
 };

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var DetectedKnownSecondaryWalletModal = require('../../prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.cjs');
 var DetectedNewWalletModal = require('../../prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs');
 var PendingAccountSwitchModal = require('../../prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.cjs');
@@ -22,18 +21,18 @@ const mapAccountSwitchStateToPromptComponent = {
     switching_primary: PendingAccountSwitchModal.PendingAccountSwitchModal,
 };
 const DynamicWidgetPrompts = () => {
-    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { walletIdToUnlink, newWalletId, setNewWalletId } = DynamicWidgetContext.useWidgetContext();
+    var _a, _b, _c;
+    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
     const AccountSwitchModal = React.useMemo(() => {
         if (multiWalletWidgetState !== 'awaiting_account_switch')
             return null;
         return mapAccountSwitchStateToPromptComponent[accountSwitchState] || null;
     }, [accountSwitchState, multiWalletWidgetState]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}), AccountSwitchModal && jsxRuntime.jsx(AccountSwitchModal, {}), walletIdToUnlink && jsxRuntime.jsx(UnlinkWalletPopUp.UnlinkWalletPopUp, { walletId: walletIdToUnlink }), multiWalletWidgetState === 'awaiting_connection' &&
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}), AccountSwitchModal && jsxRuntime.jsx(AccountSwitchModal, {}), (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.action) === 'unlink' && (jsxRuntime.jsx(UnlinkWalletPopUp.UnlinkWalletPopUp, { walletId: (_a = selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.id })), multiWalletWidgetState === 'awaiting_connection' &&
                 (showQrcodeModal ? (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: () => {
                         setShowQrcodeModal(false);
                         setDesktopUri('');
-                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsxRuntime.jsx(QrCodeModalView.QrCodeModalView, { walletId: newWalletId })) : (jsxRuntime.jsx(NoQrNotInstalledModalView.NoQrNotInstalledModalView, {})) }))) : (jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsxRuntime.jsx(DetectedKnownSecondaryWalletModal.DetectedKnownSecondaryWalletModal, { setNewWalletId: setNewWalletId })), multiWalletWidgetState === 'detected_new_wallet' && (jsxRuntime.jsx(DetectedNewWalletModal.DetectedNewWalletModal, {}))] }));
+                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsxRuntime.jsx(QrCodeModalView.QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsxRuntime.jsx(NoQrNotInstalledModalView.NoQrNotInstalledModalView, {})) }))) : (jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsxRuntime.jsx(DetectedKnownSecondaryWalletModal.DetectedKnownSecondaryWalletModal, { setSelectedWalletWithAction: setSelectedWalletWithAction })), multiWalletWidgetState === 'detected_new_wallet' && (jsxRuntime.jsx(DetectedNewWalletModal.DetectedNewWalletModal, {}))] }));
 };
 
 exports.DynamicWidgetPrompts = DynamicWidgetPrompts;

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

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { DetectedKnownSecondaryWalletModal } from '../../prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.js';
 import { DetectedNewWalletModal } from '../../prompts/DetectedNewWalletModal/DetectedNewWalletModal.js';
 import { PendingAccountSwitchModal } from '../../prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.js';
@@ -18,18 +17,18 @@ const mapAccountSwitchStateToPromptComponent = {
     switching_primary: PendingAccountSwitchModal,
 };
 const DynamicWidgetPrompts = () => {
-    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, } = useInternalDynamicContext();
-    const { walletIdToUnlink, newWalletId, setNewWalletId } = useWidgetContext();
+    var _a, _b, _c;
+    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletWithAction, } = useInternalDynamicContext();
     const AccountSwitchModal = useMemo(() => {
         if (multiWalletWidgetState !== 'awaiting_account_switch')
             return null;
         return mapAccountSwitchStateToPromptComponent[accountSwitchState] || null;
     }, [accountSwitchState, multiWalletWidgetState]);
-    return (jsxs(Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsx(PendingSignModal, {}), AccountSwitchModal && jsx(AccountSwitchModal, {}), walletIdToUnlink && jsx(UnlinkWalletPopUp, { walletId: walletIdToUnlink }), multiWalletWidgetState === 'awaiting_connection' &&
+    return (jsxs(Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsx(PendingSignModal, {}), AccountSwitchModal && jsx(AccountSwitchModal, {}), (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.action) === 'unlink' && (jsx(UnlinkWalletPopUp, { walletId: (_a = selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.id })), multiWalletWidgetState === 'awaiting_connection' &&
                 (showQrcodeModal ? (jsx(WidgetPortal, Object.assign({ onBackdropClick: () => {
                         setShowQrcodeModal(false);
                         setDesktopUri('');
-                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsx(QrCodeModalView, { walletId: newWalletId })) : (jsx(NoQrNotInstalledModalView, {})) }))) : (jsx(PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsx(DetectedKnownSecondaryWalletModal, { setNewWalletId: setNewWalletId })), multiWalletWidgetState === 'detected_new_wallet' && (jsx(DetectedNewWalletModal, {}))] }));
+                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsx(QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsx(NoQrNotInstalledModalView, {})) }))) : (jsx(PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsx(DetectedKnownSecondaryWalletModal, { setSelectedWalletWithAction: setSelectedWalletWithAction })), multiWalletWidgetState === 'detected_new_wallet' && (jsx(DetectedNewWalletModal, {}))] }));
 };
 
 export { DynamicWidgetPrompts };