@dynamic-labs/sdk-react-core 0.18.100-viem.5 → 0.18.100-viem.7

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

@@ -20,11 +20,15 @@ require('../../../shared/consts/index.cjs');
 var primaryWalletIdValidator = require('../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.cjs');
 require('@dynamic-labs/multi-wallet');
 
-const usePrimaryWalletId = () => {
-    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);
+const usePrimaryWalletId = (internalEvents) => {
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);
     const setPrimaryWalletId = React.useCallback((walletId) => {
         setPrimaryWalletIdState(walletId);
     }, [setPrimaryWalletIdState]);
+    const clearPrimaryWalletId = () => {
+        clearPrimaryWalletIdStorage();
+        internalEvents.emit('clearPrimaryWallet');
+    };
     return {
         clearPrimaryWalletId,
         primaryWalletId,

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

@@ -1,4 +1,5 @@
-export declare const usePrimaryWalletId: () => {
+import { InternalEventEmitter } from '../../../context/DynamicContext/internalEvents';
+export declare const usePrimaryWalletId: (internalEvents: InternalEventEmitter) => {
     clearPrimaryWalletId: () => void;
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => void;

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

@@ -16,11 +16,15 @@ import '../../../shared/consts/index.js';
 import { primaryWalletIdValidator } from '../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.js';
 import '@dynamic-labs/multi-wallet';
 
-const usePrimaryWalletId = () => {
-    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);
+const usePrimaryWalletId = (internalEvents) => {
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);
     const setPrimaryWalletId = useCallback((walletId) => {
         setPrimaryWalletIdState(walletId);
     }, [setPrimaryWalletIdState]);
+    const clearPrimaryWalletId = () => {
+        clearPrimaryWalletIdStorage();
+        internalEvents.emit('clearPrimaryWallet');
+    };
     return {
         clearPrimaryWalletId,
         primaryWalletId,

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

@@ -41,13 +41,17 @@ const socialProviders = [
 // pkce params are only required for twitter and break if added for other providers, like google
 // so we should only add provider that support pkce to this list
 const providersRequiringPkce = ['twitter', 'github'];
-const useSocialAccounts = () => {
+const providersWithoutWindowOpenerRefence = ['twitter'];
+const useSocialAccounts = ({ sessionTimeout } = {
+    sessionTimeout: 10000,
+}) => {
     var _a;
     const { environmentId, user, projectSettings, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
     const [isProcessing, setIsProcessing] = React.useState(false);
     const [error, setError] = React.useState();
     const providersWaitingOauthMessages = React.useRef({});
+    const authWindowInterval = React.useRef();
     const userJwt = (_a = getAuthToken.getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
     const oauthProviders = index.getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const verifiedOAuthCredentialsMap = React.useMemo(() => {
@@ -116,6 +120,7 @@ const useSocialAccounts = () => {
     };
     const linkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _b;
+        clearInterval(authWindowInterval.current);
         setError(undefined);
         setIsProcessing(true);
         // invalid linking request
@@ -124,7 +129,13 @@ const useSocialAccounts = () => {
         }
         const state = randomString.randomString(8);
         const verifier = randomString.randomString(43);
+        const clearListeners = () => {
+            removeOAuthIFrame();
+            window.removeEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+        };
         const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _c;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
@@ -135,9 +146,11 @@ const useSocialAccounts = () => {
             if (!isValidMessage) {
                 return;
             }
-            removeOAuthIFrame();
-            window.removeEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+                handleError(`Linking ${provider} account session timeout.`);
+                return;
+            }
+            clearListeners();
             const { code, error } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
@@ -183,10 +196,40 @@ const useSocialAccounts = () => {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
         }
-        window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        if (!providersWithoutWindowOpenerRefence.includes(provider)) {
+            // For provider that support window.opener, we need to clear all states/listeners when the window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
+                    return;
+                }
+                // window was closed by user, before completing oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window closed.`);
+                }
+                clearInterval(authWindowInterval.current);
+                setIsProcessing(false);
+            });
+        }
+        else {
+            // For provider that don't support window.opener, we need to use a timeout to try to detect when the
+            // window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                // user didn't complete oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window timeout.`);
+                }
+                setIsProcessing(false);
+                clearInterval(authWindowInterval.current);
+            }, sessionTimeout);
+        }
     });
     const unlinkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _d;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -200,7 +243,7 @@ const useSocialAccounts = () => {
         try {
             const jwt = yield api.unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_c = verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

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

@@ -1,6 +1,9 @@
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
 import { SocialAccountInformation } from '@dynamic-labs/types';
-export declare const useSocialAccounts: () => {
+type UseSocialAccountsProps = {
+    sessionTimeout: number;
+};
+export declare const useSocialAccounts: ({ sessionTimeout }?: UseSocialAccountsProps) => {
     readonly error: string | undefined;
     readonly getLinkedAccountInformation: (provider: ProviderEnum) => SocialAccountInformation | undefined;
     readonly isLinked: (provider: ProviderEnum) => boolean;
@@ -8,3 +11,4 @@ export declare const useSocialAccounts: () => {
     readonly linkSocialAccount: (provider: ProviderEnum) => Promise<void>;
     readonly unlinkSocialAccount: (provider: ProviderEnum) => Promise<void>;
 };
+export {};

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

@@ -37,13 +37,17 @@ const socialProviders = [
 // pkce params are only required for twitter and break if added for other providers, like google
 // so we should only add provider that support pkce to this list
 const providersRequiringPkce = ['twitter', 'github'];
-const useSocialAccounts = () => {
+const providersWithoutWindowOpenerRefence = ['twitter'];
+const useSocialAccounts = ({ sessionTimeout } = {
+    sessionTimeout: 10000,
+}) => {
     var _a;
     const { environmentId, user, projectSettings, onboardingOnlyJwt } = useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
     const [isProcessing, setIsProcessing] = useState(false);
     const [error, setError] = useState();
     const providersWaitingOauthMessages = useRef({});
+    const authWindowInterval = useRef();
     const userJwt = (_a = getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
     const oauthProviders = getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const verifiedOAuthCredentialsMap = useMemo(() => {
@@ -112,6 +116,7 @@ const useSocialAccounts = () => {
     };
     const linkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
+        clearInterval(authWindowInterval.current);
         setError(undefined);
         setIsProcessing(true);
         // invalid linking request
@@ -120,7 +125,13 @@ const useSocialAccounts = () => {
         }
         const state = randomString(8);
         const verifier = randomString(43);
+        const clearListeners = () => {
+            removeOAuthIFrame();
+            window.removeEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+        };
         const handleAuthWindowMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            var _c;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
@@ -131,9 +142,11 @@ const useSocialAccounts = () => {
             if (!isValidMessage) {
                 return;
             }
-            removeOAuthIFrame();
-            window.removeEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+                handleError(`Linking ${provider} account session timeout.`);
+                return;
+            }
+            clearListeners();
             const { code, error } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
@@ -179,10 +192,40 @@ const useSocialAccounts = () => {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
         }
-        window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        if (!providersWithoutWindowOpenerRefence.includes(provider)) {
+            // For provider that support window.opener, we need to clear all states/listeners when the window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
+                    return;
+                }
+                // window was closed by user, before completing oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window closed.`);
+                }
+                clearInterval(authWindowInterval.current);
+                setIsProcessing(false);
+            });
+        }
+        else {
+            // For provider that don't support window.opener, we need to use a timeout to try to detect when the
+            // window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                // user didn't complete oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window timeout.`);
+                }
+                setIsProcessing(false);
+                clearInterval(authWindowInterval.current);
+            }, sessionTimeout);
+        }
     });
     const unlinkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _d;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -196,7 +239,7 @@ const useSocialAccounts = () => {
         try {
             const jwt = yield unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_c = verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -65,7 +65,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'Sign in to access your email based wallet' }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -61,7 +61,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'Sign in to access your email based wallet' }));
 };
 
 export { EmailWalletOTPVerificationView };

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.cjs

@@ -19,6 +19,7 @@ require('viem');
 require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isMagicConnector = require('../../../../utils/functions/isMagicConnector/isMagicConnector.cjs');
+var sendTransactionWithAutoNonce = require('../../../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -55,19 +56,12 @@ const TransactionStage = (_a) => {
         provider,
         transaction,
     });
-    return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce.sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, (transaction) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             walletUiUtils.disabledConfirmationOnce();
             const signer = yield walletConnector.getSigner();
-            const sentTransaction = yield signer.sendTransaction({
-                account: transactionWithGasPrice.from,
-                chain: null,
-                gasPrice: transactionWithGasPrice.gasPrice,
-                to: transactionWithGasPrice.to,
-                type: 'eip2930',
-                value: transactionWithGasPrice.value,
-            });
+            const sentTransaction = yield signer.sendTransaction(Object.assign(Object.assign({}, transaction), { account: transaction.from, chain: null }));
             return sentTransaction;
-        }) }, rest)));
+        })) }, rest)));
 };
 
 exports.TransactionStage = TransactionStage;

package/src/lib/views/SendBalanceView/components/TransactionStage/TransactionStage.js

@@ -15,6 +15,7 @@ import 'viem';
 import '../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isMagicConnector } from '../../../../utils/functions/isMagicConnector/isMagicConnector.js';
+import { sendTransactionWithAutoNonce } from '../../../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
@@ -51,19 +52,12 @@ const TransactionStage = (_a) => {
         provider,
         transaction,
     });
-    return (jsx(TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => __awaiter(void 0, void 0, void 0, function* () {
+    return (jsx(TransactionConfirmationView, Object.assign({ provider: provider, transaction: transactionWithGasPrice, mutation: () => sendTransactionWithAutoNonce(walletConnector, transactionWithGasPrice, (transaction) => __awaiter(void 0, void 0, void 0, function* () {
             walletUiUtils.disabledConfirmationOnce();
             const signer = yield walletConnector.getSigner();
-            const sentTransaction = yield signer.sendTransaction({
-                account: transactionWithGasPrice.from,
-                chain: null,
-                gasPrice: transactionWithGasPrice.gasPrice,
-                to: transactionWithGasPrice.to,
-                type: 'eip2930',
-                value: transactionWithGasPrice.value,
-            });
+            const sentTransaction = yield signer.sendTransaction(Object.assign(Object.assign({}, transaction), { account: transaction.from, chain: null }));
             return sentTransaction;
-        }) }, rest)));
+        })) }, rest)));
 };
 
 export { TransactionStage };

package/src/lib/views/WalletGroupView/components/WalletGroupItem/WalletGroupItem.cjs

@@ -13,6 +13,7 @@ require('@dynamic-labs/wallet-book');
 var getWalletListItemLabel = require('../../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.cjs');
 require('viem');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('@dynamic-labs/utils');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var stroke = require('../../../../shared/assets/stroke.cjs');
 require('../../../../shared/consts/index.cjs');

package/src/lib/views/WalletGroupView/components/WalletGroupItem/WalletGroupItem.js

@@ -9,6 +9,7 @@ import '@dynamic-labs/wallet-book';
 import { getWalletListItemLabel } from '../../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.js';
 import 'viem';
 import '../../../../shared/utils/classes/storage/localStorage.js';
+import '@dynamic-labs/utils';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
 import '../../../../shared/consts/index.js';

package/src/lib/views/WalletList/WalletListItem/WalletListItem.cjs

@@ -16,11 +16,11 @@ require('@dynamic-labs/wallet-connector-core');
 var getWalletListItemLabel = require('../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.cjs');
 require('viem');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../utils/constants/colors.cjs');
 require('@dynamic-labs/multi-wallet');
-require('@dynamic-labs/utils');
 var pixelToRem = require('../../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');

package/src/lib/views/WalletList/WalletListItem/WalletListItem.js

@@ -12,11 +12,11 @@ import '@dynamic-labs/wallet-connector-core';
 import { getWalletListItemLabel } from '../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.js';
 import 'viem';
 import '../../../shared/utils/classes/storage/localStorage.js';
+import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../utils/constants/colors.js';
 import '@dynamic-labs/multi-wallet';
-import '@dynamic-labs/utils';
 import { pixelToRem } from '../../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../context/ThemeContext/ThemeContext.js';