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

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+const updateUserWalletsFromConnectedWallets = (userWallets, connectedWallets) => {
+    const userWalletsCopy = [...userWallets];
+    /** We will use this to find wallets addresses that were removed */
+    const newWalletsAddresses = new Set();
+    // First pass: add missing wallets and update changed properties
+    for (const connectedWallet of connectedWallets) {
+        newWalletsAddresses.add(connectedWallet.address);
+        const userWallet = userWalletsCopy.find((wallet) => wallet.address === connectedWallet.address);
+        // Catch new wallets
+        if (!userWallet) {
+            userWalletsCopy.push(connectedWallet);
+            continue;
+        }
+        // If already present, just update properties that might have changed
+        userWallet.connected = connectedWallet.connected;
+        userWallet.network = connectedWallet.network;
+    }
+    // This filter is to remove a wallet that was previously added to userWallets but is not present
+    // among the connected wallets (it should not be removed if it's authenticated to the suer tho)
+    return userWalletsCopy.filter((userWallet) => 
+    // Keep wallets that are still in the new list
+    newWalletsAddresses.has(userWallet.address) ||
+        // Or are linked to the current user
+        userWallet.authenticated);
+};
+
+exports.updateUserWalletsFromConnectedWallets = updateUserWalletsFromConnectedWallets;

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

@@ -0,0 +1,8 @@
+import { Wallet } from '../../../../shared';
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+export declare const updateUserWalletsFromConnectedWallets: (userWallets: Wallet[], connectedWallets: Wallet[]) => Wallet[];

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

@@ -0,0 +1,33 @@
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+const updateUserWalletsFromConnectedWallets = (userWallets, connectedWallets) => {
+    const userWalletsCopy = [...userWallets];
+    /** We will use this to find wallets addresses that were removed */
+    const newWalletsAddresses = new Set();
+    // First pass: add missing wallets and update changed properties
+    for (const connectedWallet of connectedWallets) {
+        newWalletsAddresses.add(connectedWallet.address);
+        const userWallet = userWalletsCopy.find((wallet) => wallet.address === connectedWallet.address);
+        // Catch new wallets
+        if (!userWallet) {
+            userWalletsCopy.push(connectedWallet);
+            continue;
+        }
+        // If already present, just update properties that might have changed
+        userWallet.connected = connectedWallet.connected;
+        userWallet.network = connectedWallet.network;
+    }
+    // This filter is to remove a wallet that was previously added to userWallets but is not present
+    // among the connected wallets (it should not be removed if it's authenticated to the suer tho)
+    return userWalletsCopy.filter((userWallet) => 
+    // Keep wallets that are still in the new list
+    newWalletsAddresses.has(userWallet.address) ||
+        // Or are linked to the current user
+        userWallet.authenticated);
+};
+
+export { updateUserWalletsFromConnectedWallets };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var UserWalletsContext = require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
 var api = require('../../../data/api.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
@@ -22,10 +23,17 @@ require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 var getWalletProvider = require('../../functions/getWalletProvider/getWalletProvider.cjs');
+var updateUserWalletsFromConnectedWallets = require('./updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs');
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
-    const [connectedWallets, setConnectedWallets] = React.useState([]);
+    const [connectedWallets, _setConnectedWallets] = React.useState([]);
+    const { setUserWallets } = UserWalletsContext.useInternalUserWallets();
+    /** This wrapper is to ensure userWallets is always properly updated alongside connectedWallets */
+    const setConnectedWallets = (newWallets) => {
+        _setConnectedWallets(newWallets);
+        setUserWallets((userWallets) => updateUserWalletsFromConnectedWallets.updateUserWalletsFromConnectedWallets(userWallets, newWallets));
+    };
     const disconnectWallet = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletToDisconnect = connectedWallets.find((wallet) => wallet.id === walletId);
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
@@ -79,6 +87,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             const walletChain = walletConnector.connectedChain;
             const walletObject = {
                 address: walletAddress || '',
+                authenticated: false,
                 chain: walletChain || '',
                 connected: true,
                 connector: walletConnector,

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

@@ -1,6 +1,7 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useCallback, useEffect } from 'react';
 import { getWalletConnectorByKey, logger } from '@dynamic-labs/wallet-connector-core';
+import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
 import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
@@ -18,10 +19,17 @@ import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
+import { updateUserWalletsFromConnectedWallets } from './updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.js';
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
-    const [connectedWallets, setConnectedWallets] = useState([]);
+    const [connectedWallets, _setConnectedWallets] = useState([]);
+    const { setUserWallets } = useInternalUserWallets();
+    /** This wrapper is to ensure userWallets is always properly updated alongside connectedWallets */
+    const setConnectedWallets = (newWallets) => {
+        _setConnectedWallets(newWallets);
+        setUserWallets((userWallets) => updateUserWalletsFromConnectedWallets(userWallets, newWallets));
+    };
     const disconnectWallet = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
         const walletToDisconnect = connectedWallets.find((wallet) => wallet.id === walletId);
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
@@ -75,6 +83,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             const walletChain = walletConnector.connectedChain;
             const walletObject = {
                 address: walletAddress || '',
+                authenticated: false,
                 chain: walletChain || '',
                 connected: true,
                 connector: walletConnector,

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

@@ -29,7 +29,7 @@ var useMutation = require('../useMutation/useMutation.cjs');
 const useCreateDynamicEmbeddedWalletMutation = () => {
     const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
     const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation.useMutation(({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _a, _b;
         const createEmbeddedWalletMethodToUse = withAuthenticator
             ? createEmbeddedWalletWithPasskey.createEmbeddedWalletWithPasskey
             : createPregeneratedWallet.createPregeneratedWallet;
@@ -39,8 +39,12 @@ const useCreateDynamicEmbeddedWalletMutation = () => {
             user: user !== null && user !== void 0 ? user : createUserProfile.createUserProfile(decodedJwt),
             walletConnector: findPasskeyEmailWalletConnector.findPasskeyEmailWalletConnector(walletConnectorOptions),
         });
+        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
+        /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
+        const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
         const passkeyWallet = {
             address: (yield walletConnector.fetchPublicAddress()) || '',
+            authenticated,
             chain: walletConnector.connectedChain || '',
             connected: true,
             connector: walletConnector,
@@ -62,7 +66,6 @@ const useCreateDynamicEmbeddedWalletMutation = () => {
         index.storeAuthToken(jwt);
         setUser(createUserProfile.createUserProfile(updatedDecodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

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

@@ -25,7 +25,7 @@ import { useMutation } from '../useMutation/useMutation.js';
 const useCreateDynamicEmbeddedWalletMutation = () => {
     const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext();
     const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation(({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _a, _b;
         const createEmbeddedWalletMethodToUse = withAuthenticator
             ? createEmbeddedWalletWithPasskey
             : createPregeneratedWallet;
@@ -35,8 +35,12 @@ const useCreateDynamicEmbeddedWalletMutation = () => {
             user: user !== null && user !== void 0 ? user : createUserProfile(decodedJwt),
             walletConnector: findPasskeyEmailWalletConnector(walletConnectorOptions),
         });
+        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
+        /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
+        const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
         const passkeyWallet = {
             address: (yield walletConnector.fetchPublicAddress()) || '',
+            authenticated,
             chain: walletConnector.connectedChain || '',
             connected: true,
             connector: walletConnector,
@@ -58,7 +62,6 @@ const useCreateDynamicEmbeddedWalletMutation = () => {
         storeAuthToken(jwt);
         setUser(createUserProfile(updatedDecodedJwt));
         setShowAuthFlow(false);
-        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
         setCallback('embeddedWalletCreated', {
             email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
             verifiedCredential: turnkeyVerifiedCredentials,

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

@@ -79,7 +79,7 @@ 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(walletConnectorOptions);
         // if user already has embedded wallet, set it as primary wallet
@@ -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

@@ -75,7 +75,7 @@ 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(walletConnectorOptions);
         // if user already has embedded wallet, set it as primary wallet
@@ -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/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/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/useWalletConnectorOptions.cjs

@@ -4,7 +4,7 @@ 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 useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
     const walletConnectorOptions = React.useMemo(() => {
@@ -44,7 +44,7 @@ const useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepL
     React.useEffect(() => {
         if (!projectSettings || walletConnectorOptions.length === 0)
             return;
-        verifyMagicIsSetup.verifyMagicIsSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
+        verifyRequiredConnectorsAreSetup.verifyRequiredConnectorsAreSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
     }, [walletConnectorOptions, projectSettings]);
     return { walletConnectorOptions };
 };

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

@@ -1,6 +1,6 @@
 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 useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepLinkPreference, flowNetwork, networkConfigurations, walletBook, walletConnectV1Bridge, walletUiUtils, walletConnectorsProp, walletConnectPreferredChains, walletConnectorExtensions, }) => {
     const walletConnectorOptions = useMemo(() => {
@@ -40,7 +40,7 @@ const useWalletConnectorOptions = ({ projectSettings, appLogoUrl, appName, deepL
     useEffect(() => {
         if (!projectSettings || walletConnectorOptions.length === 0)
             return;
-        verifyMagicIsSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
+        verifyRequiredConnectorsAreSetup(projectSettings, walletConnectorOptions.map(({ walletConnector }) => walletConnector));
     }, [walletConnectorOptions, projectSettings]);
     return { walletConnectorOptions };
 };

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