@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.20

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

@@ -21,7 +21,7 @@ var useWalletsConnectionState = require('../useWalletsConnectionState/useWallets
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
     const linkedWallets = React.useMemo(() => {
         if (!authToken) {
@@ -33,7 +33,17 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
             walletOptions: availableWallets,
         });
     }, [authToken, primaryWalletId, availableWallets]);
-    const walletsBasedOnAuthMode = React.useMemo(() => (authMode === 'connect-only' ? connectedWallets : linkedWallets), [authMode, connectedWallets, linkedWallets]);
+    const walletsBasedOnAuthMode = React.useMemo(() => {
+        // Before signing the first message we are using connected wallets list
+        // This is because we want the first connected wallet to have events applied by useWalletEventListeners
+        // In connect-and-sign mode, events are only applied after the message is signed.
+        // This change ensures that events will be applied even before the signature.
+        // After signing the message user could be undefined in scenarios like OTP
+        if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     React.useEffect(() => {

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

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { WalletOption, Wallet, MultiWalletWidgetState, AuthModeType } from '../../../shared';
+import { WalletOption, Wallet, MultiWalletWidgetState, AuthModeType, UserProfile } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 import { WalletConnector } from '../../../..';
 type Props = {
@@ -13,6 +13,8 @@ type Props = {
     wallets: WalletOption[];
     setPrimaryWalletId: (walletId: string) => void;
     primaryWalletId: string | undefined;
+    user?: UserProfile;
+    onboardingOnlyJwt?: string;
 };
 export interface UseWalletConnectors {
     computeConnectedStateForWallets: () => Promise<void>;
@@ -27,5 +29,5 @@ export interface UseWalletConnectors {
     walletConnectors: WalletConnector[];
     wallets: Wallet[];
 }
-export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }: Props) => UseWalletConnectors;
+export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }: Props) => UseWalletConnectors;
 export {};

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

@@ -17,7 +17,7 @@ import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalle
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
     const linkedWallets = useMemo(() => {
         if (!authToken) {
@@ -29,7 +29,17 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
             walletOptions: availableWallets,
         });
     }, [authToken, primaryWalletId, availableWallets]);
-    const walletsBasedOnAuthMode = useMemo(() => (authMode === 'connect-only' ? connectedWallets : linkedWallets), [authMode, connectedWallets, linkedWallets]);
+    const walletsBasedOnAuthMode = useMemo(() => {
+        // Before signing the first message we are using connected wallets list
+        // This is because we want the first connected wallet to have events applied by useWalletEventListeners
+        // In connect-and-sign mode, events are only applied after the message is signed.
+        // This change ensures that events will be applied even before the signature.
+        // After signing the message user could be undefined in scenarios like OTP
+        if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     useEffect(() => {

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, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
     React.useEffect(() => {
@@ -62,6 +62,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // eslint-disable-next-line react-hooks/exhaustive-deps
         orderedSecondaryWalletAddresses(secondaryWallets).join(),
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
     ]);
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
@@ -94,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') {
+                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                    return;
+                }
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -114,7 +119,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                         yield computeConnectedStateForWallets();
                         return;
                     }
-                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
                 }
                 else {
                     logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
@@ -123,32 +127,54 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                setNetwork(parseInt(chain));
+                if (!primaryWallet) {
+                    return;
+                }
+                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+                if (primaryWallet.chain === 'starknet') {
+                    setNetwork(chain);
+                }
+                else {
+                    setNetwork(parseInt(chain));
+                }
             }),
             onDisconnect: handleLogOut,
         });
     }, [
+        authMode,
         primaryWallet,
         setMultiWalletWidgetState,
         multiWallet,
         user,
         computeConnectedStateForWallets,
         handleLogOut,
-        connectWalletByAddressAndChain,
         multiWalletWidgetState,
         secondaryWallets,
         setSelectedWalletConnector,
         handleAccountChangeWhenAwaitingAccountSwitch,
         setPrimaryWalletId,
+        refreshConnectedWallet,
     ]);
     const addSecondaryWalletEventListeners = React.useCallback((seen) => {
         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);
+                    return;
+                }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
                 }
                 yield computeConnectedStateForWallets();
             }),
+            onChainChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                // We should pass the proper walletId here
+                if (!secondaryWallets.length) {
+                    return;
+                }
+                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            }),
             onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 yield computeConnectedStateForWallets();
             }),
@@ -165,12 +191,14 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             wallet.connector.setupEventListeners(secondaryListeners);
         }
     }, [
+        authMode,
         computeConnectedStateForWallets,
         selectedWalletConnector,
         selectedWalletWithAction,
         handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
         secondaryWallets,
+        refreshConnectedWallet,
     ]);
     return {
         loadingNetwork,

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import type { Chain, WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
+import type { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 export type UseWalletEventListenersArgs = {
     computeConnectedStateForWallets(): Promise<void>;
-    connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
     handleLogOut(): Promise<void>;
     multiWallet: boolean;
     multiWalletWidgetState: MultiWalletWidgetState;
@@ -17,8 +16,10 @@ export type UseWalletEventListenersArgs = {
     setSelectedWalletConnector(connector: WalletConnector | null): void;
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
+    authMode: AuthModeType;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
 };
-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, authMode, refreshConnectedWallet, }: 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, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
     useEffect(() => {
@@ -58,6 +58,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // eslint-disable-next-line react-hooks/exhaustive-deps
         orderedSecondaryWalletAddresses(secondaryWallets).join(),
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
     ]);
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
@@ -90,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') {
+                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                    return;
+                }
                 if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -110,7 +115,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                         yield computeConnectedStateForWallets();
                         return;
                     }
-                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
                 }
                 else {
                     logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
@@ -119,32 +123,54 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                setNetwork(parseInt(chain));
+                if (!primaryWallet) {
+                    return;
+                }
+                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+                if (primaryWallet.chain === 'starknet') {
+                    setNetwork(chain);
+                }
+                else {
+                    setNetwork(parseInt(chain));
+                }
             }),
             onDisconnect: handleLogOut,
         });
     }, [
+        authMode,
         primaryWallet,
         setMultiWalletWidgetState,
         multiWallet,
         user,
         computeConnectedStateForWallets,
         handleLogOut,
-        connectWalletByAddressAndChain,
         multiWalletWidgetState,
         secondaryWallets,
         setSelectedWalletConnector,
         handleAccountChangeWhenAwaitingAccountSwitch,
         setPrimaryWalletId,
+        refreshConnectedWallet,
     ]);
     const addSecondaryWalletEventListeners = useCallback((seen) => {
         const secondaryListeners = {
             onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (authMode === 'connect-only' && secondaryWallets.length) {
+                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+                    return;
+                }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
                 }
                 yield computeConnectedStateForWallets();
             }),
+            onChainChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                // We should pass the proper walletId here
+                if (!secondaryWallets.length) {
+                    return;
+                }
+                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            }),
             onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
                 yield computeConnectedStateForWallets();
             }),
@@ -161,12 +187,14 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             wallet.connector.setupEventListeners(secondaryListeners);
         }
     }, [
+        authMode,
         computeConnectedStateForWallets,
         selectedWalletConnector,
         selectedWalletWithAction,
         handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
         secondaryWallets,
+        refreshConnectedWallet,
     ]);
     return {
         loadingNetwork,

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var utils = require('@dynamic-labs/utils');
-var MockContext = require('../../../context/MockContext/MockContext.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
+var MockContext = require('../../../context/MockContext/MockContext.cjs');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
@@ -21,14 +21,14 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
+var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
-var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, ongoingVerifications, } = useInternalDynamicContext.useInternalDynamicContext();
     const { mockedSDK } = MockContext.useMockContext();
     const { setError } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
@@ -79,7 +79,7 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const connectedAccounts = yield walletConnector.getConnectedAccounts();
-        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         if (activeAccountAlreadyLinked) {
             setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
         }
@@ -111,8 +111,8 @@ const useWalletItemActions = () => {
         if (walletConnector.connectedChain === 'FLOW') {
             yield walletConnector.endSession();
         }
-        setIsVerifying(false);
-        if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+        ongoingVerifications.setConnectAndSignVerification(false);
+        if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);

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

@@ -1,8 +1,8 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { isMobile } from '@dynamic-labs/utils';
-import { useMockContext } from '../../../context/MockContext/MockContext.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
+import { useMockContext } from '../../../context/MockContext/MockContext.js';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
@@ -17,14 +17,14 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
+import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../../config/ApiEndpoint.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
-import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, ongoingVerifications, } = useInternalDynamicContext();
     const { mockedSDK } = useMockContext();
     const { setError } = useErrorContext();
     const { setView } = useViewContext();
@@ -75,7 +75,7 @@ const useWalletItemActions = () => {
     });
     const handleAlreadyConnectedWallet = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         const connectedAccounts = yield walletConnector.getConnectedAccounts();
-        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        const activeAccountAlreadyLinked = linkedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
         if (activeAccountAlreadyLinked) {
             setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
         }
@@ -107,8 +107,8 @@ const useWalletItemActions = () => {
         if (walletConnector.connectedChain === 'FLOW') {
             yield walletConnector.endSession();
         }
-        setIsVerifying(false);
-        if (isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+        ongoingVerifications.setConnectAndSignVerification(false);
+        if (isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);

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

@@ -29,6 +29,7 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
@@ -41,7 +42,8 @@ require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
-require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
     const confirmationStateRef = React.useRef('enabled');

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

@@ -25,6 +25,7 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
@@ -37,7 +38,8 @@ import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
     const confirmationStateRef = useRef('enabled');

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

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
+var verifyMagicIsSetup = require('./utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = React.useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -17,6 +18,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -28,6 +30,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -39,9 +42,15 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
         networkConfigurations,
         projectSettings,
         walletConnectorsProp,
+        walletConnectV1Bridge,
         flowNetwork,
         Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length,
     ]);
+    React.useEffect(() => {
+        if (!projectSettings || wallets.length === 0)
+            return;
+        verifyMagicIsSetup.verifyMagicIsSetup(projectSettings, wallets.map(({ walletConnector }) => walletConnector));
+    }, [wallets, projectSettings]);
     return { wallets };
 };
 

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

@@ -9,10 +9,11 @@ type Props = {
     networkConfigurations: NetworkConfigurationMap | undefined;
     projectSettings: ProjectSettings | undefined;
     walletBook: WalletBookSchema;
+    walletConnectV1Bridge?: string;
     walletConnectorsProp?: WalletConnectorsMethod[];
     walletUiUtils: WalletUiUtils;
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }: Props) => {
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }: Props) => {
     wallets: import("../../../shared").WalletOption[];
 };
 export {};

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

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
+import { verifyMagicIsSetup } from './utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletUiUtils, walletConnectorsProp, }) => {
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, }) => {
     const wallets = useMemo(() => {
         if (!projectSettings || !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length)
             return [];
@@ -13,6 +14,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -24,6 +26,7 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
             networkConfigurations,
             skipMemo: true,
             walletBook,
+            walletConnectV1Bridge,
             walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
             walletUiUtils,
         });
@@ -35,9 +38,15 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, network
         networkConfigurations,
         projectSettings,
         walletConnectorsProp,
+        walletConnectV1Bridge,
         flowNetwork,
         Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length,
     ]);
+    useEffect(() => {
+        if (!projectSettings || wallets.length === 0)
+            return;
+        verifyMagicIsSetup(projectSettings, wallets.map(({ walletConnector }) => walletConnector));
+    }, [wallets, projectSettings]);
     return { wallets };
 };
 

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

@@ -0,0 +1 @@
+export * from './verifyMagicIsSetup';

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

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

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

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sdkApi = require('@dynamic-labs/sdk-api');
+var utils = require('@dynamic-labs/utils');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('../../../../constants/colors.cjs');
+require('../../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var isProviderEnabled = require('../../../../functions/isProviderEnabled/isProviderEnabled.cjs');
+
+const MissingMagicSetupError = new utils.DynamicError('Magic is enabled but @dynamic-labs/magic package is not set up.\nSee https://docs.dynamic.xyz/docs/reduce-bundle-size-with-modular-sdk for more information');
+const magicEmailOtpWalletConnectorKey = 'magicemailotp';
+const magicSocialWalletConnectorKey = 'magicsocial';
+const verifyMagicIsSetup = (projectSettings, walletConnectors) => {
+    var _a;
+    const isMagicEnabled = isProviderEnabled.isProviderEnabled((_a = projectSettings.providers) !== null && _a !== void 0 ? _a : [], sdkApi.ProviderEnum.MagicLink);
+    const isMagicWalletConnectorPresent = walletConnectors.some(({ key }) => [magicEmailOtpWalletConnectorKey, magicSocialWalletConnectorKey].includes(key));
+    if (isMagicEnabled && !isMagicWalletConnectorPresent) {
+        throw MissingMagicSetupError;
+    }
+};
+
+exports.MissingMagicSetupError = MissingMagicSetupError;
+exports.magicEmailOtpWalletConnectorKey = magicEmailOtpWalletConnectorKey;
+exports.verifyMagicIsSetup = verifyMagicIsSetup;

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

@@ -0,0 +1,6 @@
+import { ProjectSettings } from '@dynamic-labs/sdk-api';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { DynamicError } from '@dynamic-labs/utils';
+export declare const MissingMagicSetupError: DynamicError;
+export declare const magicEmailOtpWalletConnectorKey = "magicemailotp";
+export declare const verifyMagicIsSetup: (projectSettings: ProjectSettings, walletConnectors: WalletConnector[]) => void;