@dynamic-labs/sdk-react-core 1.0.0-alpha.8 → 1.0.0

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

@@ -30,7 +30,7 @@ var useCreateDynamicEmbeddedWalletMutation = require('../useCreateDynamicEmbedde
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 const useEmbeddedWallet = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, walletConnectorOptions, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { createDynamicEmbeddedWalletMutation } = useCreateDynamicEmbeddedWalletMutation.useCreateDynamicEmbeddedWalletMutation();
     const userHasEmbeddedWallet = () => {
@@ -46,7 +46,7 @@ const useEmbeddedWallet = () => {
             authToken: jwt,
             decodedJwt,
             environmentId,
-            wallets,
+            walletConnectorOptions,
             withAuthenticator: false,
         });
         internalSetShowAuthFlow(false); // close email otp pin modal
@@ -57,7 +57,7 @@ const useEmbeddedWallet = () => {
     }), [
         createDynamicEmbeddedWalletMutation,
         environmentId,
-        wallets,
+        walletConnectorOptions,
         internalSetShowAuthFlow,
         internalEvents,
     ]);
@@ -79,9 +79,9 @@ const useEmbeddedWallet = () => {
         });
     });
     const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const decodedJwt = decodeJwt.decodeJwt(jwt);
-        const turnkeyWallet = findTurnkeyWallet.findTurnkeyWallet(wallets);
+        const turnkeyWallet = findTurnkeyWallet.findTurnkeyWallet(walletConnectorOptions);
         // if user already has embedded wallet, set it as primary wallet
         if (decodedJwt) {
             (_a = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _a === void 0 ? void 0 : _a.setVerifiedCredentials(decodedJwt.verifiedCredentials);
@@ -90,7 +90,7 @@ const useEmbeddedWallet = () => {
                 yield smartWallet.initializeSmartWallet({
                     account: smartWallet$1,
                     verifiedCredentials: decodedJwt.verifiedCredentials,
-                    walletOptions: wallets,
+                    walletConnectorOptions,
                 });
                 setPrimaryWalletId(smartWallet$1.id);
             }
@@ -98,9 +98,12 @@ const useEmbeddedWallet = () => {
                 setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
             }
         }
+        /** It's not authenticated if it still hasn't created a passkey */
+        const authenticated = Boolean((_b = embeddedWalletVerifiedCredential.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
         const passkeyWallet = {
-            address: (yield ((_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.fetchPublicAddress())) || '',
-            chain: ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.connectedChain) || '',
+            address: (yield ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.fetchPublicAddress())) || '',
+            authenticated,
+            chain: ((_d = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _d === void 0 ? void 0 : _d.connectedChain) || '',
             connected: true,
             connector: (turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) || {},
             id: embeddedWalletVerifiedCredential.id,
@@ -108,8 +111,8 @@ const useEmbeddedWallet = () => {
         return Promise.resolve(passkeyWallet);
     });
     const createEmbeddedWallet = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f;
-        const jwt = (_d = getAuthToken.getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+        var _e, _f, _g;
+        const jwt = (_e = getAuthToken.getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
         const decodedJwt = decodeJwt.decodeJwt(jwt);
         if (!jwt || !decodedJwt) {
             throw new Error('User is not logged in');
@@ -120,7 +123,7 @@ const useEmbeddedWallet = () => {
         const userWaletsCredentials = getUserWalletsFromVerifiedCredentials.getUserWalletsFromVerifiedCredentials(jwt);
         // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
         if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
-            if (((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) === 0) {
+            if (((_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0) === 0) {
                 return startPregeneratedWalletCreationFlow(jwt, decodedJwt);
             }
             return startEmbeddedWalletCreationFlow();

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

@@ -26,7 +26,7 @@ import { useCreateDynamicEmbeddedWalletMutation } from '../useCreateDynamicEmbed
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 const useEmbeddedWallet = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, walletConnectorOptions, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { createDynamicEmbeddedWalletMutation } = useCreateDynamicEmbeddedWalletMutation();
     const userHasEmbeddedWallet = () => {
@@ -42,7 +42,7 @@ const useEmbeddedWallet = () => {
             authToken: jwt,
             decodedJwt,
             environmentId,
-            wallets,
+            walletConnectorOptions,
             withAuthenticator: false,
         });
         internalSetShowAuthFlow(false); // close email otp pin modal
@@ -53,7 +53,7 @@ const useEmbeddedWallet = () => {
     }), [
         createDynamicEmbeddedWalletMutation,
         environmentId,
-        wallets,
+        walletConnectorOptions,
         internalSetShowAuthFlow,
         internalEvents,
     ]);
@@ -75,9 +75,9 @@ const useEmbeddedWallet = () => {
         });
     });
     const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const decodedJwt = decodeJwt(jwt);
-        const turnkeyWallet = findTurnkeyWallet(wallets);
+        const turnkeyWallet = findTurnkeyWallet(walletConnectorOptions);
         // if user already has embedded wallet, set it as primary wallet
         if (decodedJwt) {
             (_a = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _a === void 0 ? void 0 : _a.setVerifiedCredentials(decodedJwt.verifiedCredentials);
@@ -86,7 +86,7 @@ const useEmbeddedWallet = () => {
                 yield initializeSmartWallet({
                     account: smartWallet,
                     verifiedCredentials: decodedJwt.verifiedCredentials,
-                    walletOptions: wallets,
+                    walletConnectorOptions,
                 });
                 setPrimaryWalletId(smartWallet.id);
             }
@@ -94,9 +94,12 @@ const useEmbeddedWallet = () => {
                 setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
             }
         }
+        /** It's not authenticated if it still hasn't created a passkey */
+        const authenticated = Boolean((_b = embeddedWalletVerifiedCredential.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
         const passkeyWallet = {
-            address: (yield ((_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.fetchPublicAddress())) || '',
-            chain: ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.connectedChain) || '',
+            address: (yield ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.fetchPublicAddress())) || '',
+            authenticated,
+            chain: ((_d = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _d === void 0 ? void 0 : _d.connectedChain) || '',
             connected: true,
             connector: (turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) || {},
             id: embeddedWalletVerifiedCredential.id,
@@ -104,8 +107,8 @@ const useEmbeddedWallet = () => {
         return Promise.resolve(passkeyWallet);
     });
     const createEmbeddedWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f;
-        const jwt = (_d = getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+        var _e, _f, _g;
+        const jwt = (_e = getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
         const decodedJwt = decodeJwt(jwt);
         if (!jwt || !decodedJwt) {
             throw new Error('User is not logged in');
@@ -116,7 +119,7 @@ const useEmbeddedWallet = () => {
         const userWaletsCredentials = getUserWalletsFromVerifiedCredentials(jwt);
         // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
         if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
-            if (((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) === 0) {
+            if (((_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0) === 0) {
                 return startPregeneratedWalletCreationFlow(jwt, decodedJwt);
             }
             return startEmbeddedWalletCreationFlow();

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

@@ -22,10 +22,25 @@ const useIsTurnkeyWallet = () => {
         }
         return turnkeyVC;
     };
+    const getUnclaimedTurnkeyTheSignerOfScw = () => {
+        if (!primaryWallet || !user) {
+            return false;
+        }
+        const unclaimedTurnkeyVc = user.verifiedCredentials.find((vc) => {
+            var _a, _b;
+            return ((_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('turnkey')) &&
+                ((_b = vc.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached) === false;
+        });
+        const smartContractWalletWithUnclaimedTurnkeySigner = user.verifiedCredentials.find((vc) => unclaimedTurnkeyVc && vc.signerRefId === unclaimedTurnkeyVc.id);
+        return smartContractWalletWithUnclaimedTurnkeySigner;
+    };
     const turnkeyVerifiedCredential = getTurnkeyVerifiedCredential();
+    const unclaimedTurnkeyTheSignerOfScw = getUnclaimedTurnkeyTheSignerOfScw();
     const isTurnkeyWallet = Boolean(turnkeyVerifiedCredential);
+    const isUnclaimedTurnkeyTheSignerOfScw = Boolean(unclaimedTurnkeyTheSignerOfScw);
     const hasTurnkeyVerifiedCredentialAuthenticator = Boolean((_a = turnkeyVerifiedCredential === null || turnkeyVerifiedCredential === void 0 ? void 0 : turnkeyVerifiedCredential.walletProperties) === null || _a === void 0 ? void 0 : _a.isAuthenticatorAttached);
-    const isTurnkeyWalletWithoutAuthenticator = isTurnkeyWallet && !hasTurnkeyVerifiedCredentialAuthenticator;
+    const isTurnkeyWalletWithoutAuthenticator = (isTurnkeyWallet && !hasTurnkeyVerifiedCredentialAuthenticator) ||
+        isUnclaimedTurnkeyTheSignerOfScw;
     return {
         hasTurnkeyVerifiedCredentialAuthenticator,
         isTurnkeyWallet,

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

@@ -18,10 +18,25 @@ const useIsTurnkeyWallet = () => {
         }
         return turnkeyVC;
     };
+    const getUnclaimedTurnkeyTheSignerOfScw = () => {
+        if (!primaryWallet || !user) {
+            return false;
+        }
+        const unclaimedTurnkeyVc = user.verifiedCredentials.find((vc) => {
+            var _a, _b;
+            return ((_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('turnkey')) &&
+                ((_b = vc.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached) === false;
+        });
+        const smartContractWalletWithUnclaimedTurnkeySigner = user.verifiedCredentials.find((vc) => unclaimedTurnkeyVc && vc.signerRefId === unclaimedTurnkeyVc.id);
+        return smartContractWalletWithUnclaimedTurnkeySigner;
+    };
     const turnkeyVerifiedCredential = getTurnkeyVerifiedCredential();
+    const unclaimedTurnkeyTheSignerOfScw = getUnclaimedTurnkeyTheSignerOfScw();
     const isTurnkeyWallet = Boolean(turnkeyVerifiedCredential);
+    const isUnclaimedTurnkeyTheSignerOfScw = Boolean(unclaimedTurnkeyTheSignerOfScw);
     const hasTurnkeyVerifiedCredentialAuthenticator = Boolean((_a = turnkeyVerifiedCredential === null || turnkeyVerifiedCredential === void 0 ? void 0 : turnkeyVerifiedCredential.walletProperties) === null || _a === void 0 ? void 0 : _a.isAuthenticatorAttached);
-    const isTurnkeyWalletWithoutAuthenticator = isTurnkeyWallet && !hasTurnkeyVerifiedCredentialAuthenticator;
+    const isTurnkeyWalletWithoutAuthenticator = (isTurnkeyWallet && !hasTurnkeyVerifiedCredentialAuthenticator) ||
+        isUnclaimedTurnkeyTheSignerOfScw;
     return {
         hasTurnkeyVerifiedCredentialAuthenticator,
         isTurnkeyWallet,

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

@@ -26,7 +26,7 @@ var useEmbeddedWallet = require('../useEmbeddedWallet/useEmbeddedWallet.cjs');
 
 // Hook exposed to customers and used internally to trigger passkey recovery
 const usePasskeyRecovery = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, walletConnectorOptions, internalSetShowAuthFlow, internalEvents, } = useInternalDynamicContext.useInternalDynamicContext();
     const { userHasEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
     const { setView } = ViewContext.useViewContext();
     const initPasskeyRecoveryProcess = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -57,7 +57,7 @@ const usePasskeyRecovery = () => {
         projectSettings,
         setPrimaryWalletId,
         setView,
-        wallets,
+        walletConnectorOptions,
     ]);
     return {
         initPasskeyRecoveryProcess,

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

@@ -22,7 +22,7 @@ import { useEmbeddedWallet } from '../useEmbeddedWallet/useEmbeddedWallet.js';
 
 // Hook exposed to customers and used internally to trigger passkey recovery
 const usePasskeyRecovery = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, } = useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, walletConnectorOptions, internalSetShowAuthFlow, internalEvents, } = useInternalDynamicContext();
     const { userHasEmbeddedWallet } = useEmbeddedWallet();
     const { setView } = useViewContext();
     const initPasskeyRecoveryProcess = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -53,7 +53,7 @@ const usePasskeyRecovery = () => {
         projectSettings,
         setPrimaryWalletId,
         setView,
-        wallets,
+        walletConnectorOptions,
     ]);
     return {
         initPasskeyRecoveryProcess,

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

@@ -308,6 +308,11 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             // start pooling oauth result
             shouldPool.current = true;
             poolOauthResult(provider, state);
+            // if this is mobile, set a longer timeout to allow the user to login to the provider in the browser
+            let authWindowTimeout = sessionTimeout;
+            if (utils.isMobile()) {
+                authWindowTimeout = authWindowTimeout * 3;
+            }
             authWindowInterval.current = setInterval(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 var _g;
                 shouldPool.current = false;
@@ -319,7 +324,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
                 clearInterval(authWindowInterval.current);
                 setIsProcessing(false);
                 onSettled === null || onSettled === void 0 ? void 0 : onSettled();
-            }), sessionTimeout);
+            }), authWindowTimeout);
         }
     });
     return {

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

@@ -2,7 +2,7 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useRef } from 'react';
 import { OauthResultStatus } from '@dynamic-labs/sdk-api';
 import { SocialOAuthErrorCode } from '@dynamic-labs/types';
-import { SocialAccountAlreadyExistsError, NoAccessError } from '@dynamic-labs/utils';
+import { isMobile, SocialAccountAlreadyExistsError, NoAccessError } from '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { getOAuthResult, verifyOAuth, signInOAuth } from '../../../data/api.js';
 import { useUpdateUserProfileByJWTCallback } from '../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
@@ -304,6 +304,11 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             // start pooling oauth result
             shouldPool.current = true;
             poolOauthResult(provider, state);
+            // if this is mobile, set a longer timeout to allow the user to login to the provider in the browser
+            let authWindowTimeout = sessionTimeout;
+            if (isMobile()) {
+                authWindowTimeout = authWindowTimeout * 3;
+            }
             authWindowInterval.current = setInterval(() => __awaiter(void 0, void 0, void 0, function* () {
                 var _g;
                 shouldPool.current = false;
@@ -315,7 +320,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
                 clearInterval(authWindowInterval.current);
                 setIsProcessing(false);
                 onSettled === null || onSettled === void 0 ? void 0 : onSettled();
-            }), sessionTimeout);
+            }), authWindowTimeout);
         }
     });
     return {

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

@@ -38,7 +38,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, eventsCallbacks, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallets, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, eventsCallbacks, } = useInternalDynamicContext.useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -136,7 +136,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setView('account-exists');
             return;
         }
-        if (connectedWallet && authMode === 'connect-only') {
+        if (connectedWallets.length && authMode === 'connect-only') {
             throw new utils.DynamicError(e.message);
         }
         goToInitialView();

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

@@ -34,7 +34,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     const { setExistentAccountData } = useAccountExistsContext();
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage, setError } = useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, eventsCallbacks, } = useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallets, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, eventsCallbacks, } = useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -132,7 +132,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setView('account-exists');
             return;
         }
-        if (connectedWallet && authMode === 'connect-only') {
+        if (connectedWallets.length && authMode === 'connect-only') {
             throw new DynamicError(e.message);
         }
         goToInitialView();

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

@@ -3,13 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
 
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
 const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
     const callbackRef = React.useRef(handler);
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        callbackRef.current = handler;
-    }, [handler]);
+    callbackRef.current = handler;
     React.useEffect(() => {
         if (!eventEmitters)
             return;
@@ -24,7 +53,7 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
         const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
             const callback = (...args) => {
-                callbackRef.current(emitter, ...args);
+                callbackRef.current(...args, emitter);
             };
             emitter.on(eventName, callback);
             return () => emitter.off(eventName, callback);

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

@@ -8,5 +8,37 @@ type ArgumentMap<T extends object> = {
     [K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
 };
 type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<WalletConnectorEventTypes>[Extract<Event, keyof WalletConnectorEventTypes>];
-export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (connector: WalletConnector, ...args: EventArg<Event_1>) => void) => void;
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (...args: [...EventArg<Event_1>, import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector]) => void) => void;
 export {};

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

@@ -1,11 +1,40 @@
 import { useRef, useEffect } from 'react';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
 const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
     const callbackRef = useRef(handler);
-    useIsomorphicLayoutEffect(() => {
-        callbackRef.current = handler;
-    }, [handler]);
+    callbackRef.current = handler;
     useEffect(() => {
         if (!eventEmitters)
             return;
@@ -20,7 +49,7 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
         const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
             const callback = (...args) => {
-                callbackRef.current(emitter, ...args);
+                callbackRef.current(...args, emitter);
             };
             emitter.on(eventName, callback);
             return () => emitter.off(eventName, callback);

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

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

package/src/lib/utils/hooks/{useWallets/useWallets.cjs → useWalletConnectorOptions/useWalletConnectorOptions.cjs}

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
-var verifyMagicIsSetup = require('./utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+var verifyRequiredConnectorsAreSetup = require('./utils/verifyRequiredConnectorsAreSetup/verifyRequiredConnectorsAreSetup.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
-    const wallets = React.useMemo(() => {
+const useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
+    const walletConnectorOptions = React.useMemo(() => {
         if (!projectSettings ||
             !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length ||
             !networkConfigurations)
@@ -42,11 +42,11 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference,
         networkConfigurations,
     ]);
     React.useEffect(() => {
-        if (!projectSettings || wallets.length === 0)
+        if (!projectSettings || walletConnectorOptions.length === 0)
             return;
-        verifyMagicIsSetup.verifyMagicIsSetup(projectSettings, wallets.map(({ walletConnector }) => walletConnector));
-    }, [wallets, projectSettings]);
-    return { wallets };
+        verifyRequiredConnectorsAreSetup.verifyRequiredConnectorsAreSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
+    }, [walletConnectorOptions, projectSettings]);
+    return { walletConnectorOptions };
 };
 
-exports.useWallets = useWallets;
+exports.useWalletConnectorOptions = useWalletConnectorOptions;

package/src/lib/utils/hooks/{useWallets/useWallets.d.ts → useWalletConnectorOptions/useWalletConnectorOptions.d.ts}

@@ -16,7 +16,7 @@ type Props = {
     walletUiUtils: WalletUiUtils<WalletConnector>;
     walletConnectorExtensions?: WalletConnectorExtension[];
 };
-export declare const useWallets: ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }: Props) => {
-    wallets: import("../../../shared").WalletOption[];
+export declare const useWalletConnectorOptions: ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }: Props) => {
+    walletConnectorOptions: import("../../../shared").WalletOption[];
 };
 export {};

package/src/lib/utils/hooks/{useWallets/useWallets.js → useWalletConnectorOptions/useWalletConnectorOptions.js}

@@ -1,9 +1,9 @@
 import { useMemo, useEffect } from 'react';
 import { getWallets } from '../../../views/WalletList/data.js';
-import { verifyMagicIsSetup } from './utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import { verifyRequiredConnectorsAreSetup } from './utils/verifyRequiredConnectorsAreSetup/verifyRequiredConnectorsAreSetup.js';
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
-    const wallets = useMemo(() => {
+const useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
+    const walletConnectorOptions = useMemo(() => {
         if (!projectSettings ||
             !Object.keys(walletBook !== null && walletBook !== void 0 ? walletBook : {}).length ||
             !networkConfigurations)
@@ -38,11 +38,11 @@ const useWallets = ({ projectSettings, appLogoUrl, appName, deepLinkPreference,
         networkConfigurations,
     ]);
     useEffect(() => {
-        if (!projectSettings || wallets.length === 0)
+        if (!projectSettings || walletConnectorOptions.length === 0)
             return;
-        verifyMagicIsSetup(projectSettings, wallets.map(({ walletConnector }) => walletConnector));
-    }, [wallets, projectSettings]);
-    return { wallets };
+        verifyRequiredConnectorsAreSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
+    }, [walletConnectorOptions, projectSettings]);
+    return { walletConnectorOptions };
 };
 
-export { useWallets };
+export { useWalletConnectorOptions };

package/src/lib/utils/hooks/useWalletConnectorOptions/utils/errors/ConnectorSetupError.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@dynamic-labs/utils');
+
+class ConnectorSetupError extends utils.DynamicError {
+    constructor(providerName, connectorName) {
+        super(`${providerName} is enabled but ${connectorName} is not in your walletConnectors list. See https://docs.dynamic.xyz/react-sdk/wallet-connectors for more information.`);
+    }
+}
+
+exports.ConnectorSetupError = ConnectorSetupError;

package/src/lib/utils/hooks/useWalletConnectorOptions/utils/errors/ConnectorSetupError.d.ts

@@ -0,0 +1,4 @@
+import { DynamicError } from '@dynamic-labs/utils';
+export declare class ConnectorSetupError extends DynamicError {
+    constructor(providerName: string, connectorName: string);
+}

package/src/lib/utils/hooks/useWalletConnectorOptions/utils/errors/ConnectorSetupError.js

@@ -0,0 +1,9 @@
+import { DynamicError } from '@dynamic-labs/utils';
+
+class ConnectorSetupError extends DynamicError {
+    constructor(providerName, connectorName) {
+        super(`${providerName} is enabled but ${connectorName} is not in your walletConnectors list. See https://docs.dynamic.xyz/react-sdk/wallet-connectors for more information.`);
+    }
+}
+
+export { ConnectorSetupError };

package/src/lib/utils/hooks/useWalletConnectorOptions/utils/errors/index.d.ts

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

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

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