@dynamic-labs/sdk-react-core 4.9.1-preview.0 → 4.9.1

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

@@ -14,6 +14,7 @@ export type ConnectSocialAccountProps = {
     captchaToken?: string;
     redirectUrl?: string;
     telegramAuthToken?: string;
+    showWidgetAfterConnection?: boolean;
 };
 export declare const useSocialAuth: ({ onSettled, onError, onFarcasterUrl, }: UseSocialAuthProps) => {
     readonly checkValidProvider: (provider: ProviderEnum, authMode: SocialAuthMode) => boolean;
@@ -27,7 +28,7 @@ export declare const useSocialAuth: ({ onSettled, onError, onFarcasterUrl, }: Us
         telegramAuthToken?: string | undefined;
         forceCreateUser?: boolean | undefined;
     }) => Promise<void>;
-    readonly connectSocialAccount: ({ authMode, provider, validator, captchaToken, redirectUrl, telegramAuthToken, }: ConnectSocialAccountProps) => Promise<void>;
+    readonly connectSocialAccount: ({ authMode, provider, validator, captchaToken, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }: ConnectSocialAccountProps) => Promise<void>;
     readonly error: SocialOAuthError | undefined;
     readonly handleError: (provider: ProviderEnum | undefined, code: SocialOAuthErrorCode, message: string, options?: {
         raiseAuthFailure?: boolean | undefined;

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

@@ -350,7 +350,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         shouldRegisterSessionKeysOnSignin,
         signInAccount,
     ]);
-    const connectSocialAccount = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ authMode, provider, validator, captchaToken, redirectUrl, telegramAuthToken, }) {
+    const connectSocialAccount = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ authMode, provider, validator, captchaToken, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }) {
         var _d, _e;
         clearError();
         setIsProcessing(true);
@@ -384,6 +384,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
             captchaToken,
             codeVerifier: usingPkce ? verifier : undefined,
             mode: authMode,
+            showWidgetAfterConnection,
             state,
         });
         const loginUrlString = getOauthLoginUrl((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);

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

@@ -108,7 +108,7 @@ const useUserAuth = ({ authMethod, }) => {
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const handleAuthenticatedUser = useHandleAuthenticatedUser.useHandleAuthenticatedUser();
-    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport } = useEmbeddedWallet.useEmbeddedWallet();
+    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport, embeddedWalletSettingVersion, } = useEmbeddedWallet.useEmbeddedWallet();
     const isVerifyResponse = (response) => response.user;
     const initAuth = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ isSignIn = true, verifyFunction, onVerifySuccess, onSettled, onError, showSuccessMessage = false, skipDefaultErrorHandling = false, }) {
         var _b;
@@ -145,6 +145,7 @@ const useUserAuth = ({ authMethod, }) => {
             // we should only close auth flow if no wallet is going to be created or there is no key export
             // otherwise there will be a glitch with auth flow closing and then reopening for passkeys or export
             const shouldCreateWallet = shouldAutoCreateEmbeddedWallet(verifiedUser);
+            // only support export prompt on v2 and higher
             const shouldPromptExport = shouldPromptForKeyExport();
             if (showSuccessMessage) {
                 // this timeout is set to make sure that the user will see success message
@@ -153,7 +154,12 @@ const useUserAuth = ({ authMethod, }) => {
             if (isSignIn) {
                 setCallback('authSuccess');
             }
-            if (!shouldCreateWallet && !shouldPromptExport) {
+            const walletVersion = embeddedWalletSettingVersion();
+            if (walletVersion === sdkApiCore.EmbeddedWalletVersionEnum.V1 &&
+                shouldCreateWallet) {
+                setShowAuthFlow(true);
+            }
+            else if (!shouldCreateWallet || !shouldPromptExport) {
                 setShowAuthFlow(false);
             }
             onSettled === null || onSettled === void 0 ? void 0 : onSettled();

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { DynamicError, MfaInvalidOtpError, MfaRateLimitedError, EmailAlreadyExistsError, CustomFieldNotUniqueError, UsernameAlreadyExistsError, TooManyEmailVerificationsError, InvalidPhoneNumberError, NoAccessError, AccountExistsError, SandboxMaximumThresholdReachedError, UserHasAccountWithEmailError, sleep } from '@dynamic-labs/utils';
-import { MfaBackupCodeAcknowledgement } from '@dynamic-labs/sdk-api-core';
+import { EmbeddedWalletVersionEnum, MfaBackupCodeAcknowledgement } from '@dynamic-labs/sdk-api-core';
 import { useAccountExistsContext } from '../../../context/AccountExistsContext/AccountExistsContext.js';
 import 'react';
 import '../../../context/DynamicContext/DynamicContext.js';
@@ -104,7 +104,7 @@ const useUserAuth = ({ authMethod, }) => {
     const { setErrorMessage, setError } = useErrorContext();
     const { setExistentAccountData } = useAccountExistsContext();
     const handleAuthenticatedUser = useHandleAuthenticatedUser();
-    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport } = useEmbeddedWallet();
+    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport, embeddedWalletSettingVersion, } = useEmbeddedWallet();
     const isVerifyResponse = (response) => response.user;
     const initAuth = (_a) => __awaiter(void 0, [_a], void 0, function* ({ isSignIn = true, verifyFunction, onVerifySuccess, onSettled, onError, showSuccessMessage = false, skipDefaultErrorHandling = false, }) {
         var _b;
@@ -141,6 +141,7 @@ const useUserAuth = ({ authMethod, }) => {
             // we should only close auth flow if no wallet is going to be created or there is no key export
             // otherwise there will be a glitch with auth flow closing and then reopening for passkeys or export
             const shouldCreateWallet = shouldAutoCreateEmbeddedWallet(verifiedUser);
+            // only support export prompt on v2 and higher
             const shouldPromptExport = shouldPromptForKeyExport();
             if (showSuccessMessage) {
                 // this timeout is set to make sure that the user will see success message
@@ -149,7 +150,12 @@ const useUserAuth = ({ authMethod, }) => {
             if (isSignIn) {
                 setCallback('authSuccess');
             }
-            if (!shouldCreateWallet && !shouldPromptExport) {
+            const walletVersion = embeddedWalletSettingVersion();
+            if (walletVersion === EmbeddedWalletVersionEnum.V1 &&
+                shouldCreateWallet) {
+                setShowAuthFlow(true);
+            }
+            else if (!shouldCreateWallet || !shouldPromptExport) {
                 setShowAuthFlow(false);
             }
             onSettled === null || onSettled === void 0 ? void 0 : onSettled();

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

@@ -210,8 +210,7 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
-            walletConnectorCore.isPhantomRedirectConnector(walletConnector) ||
-            walletConnectorCore.isWalletConnectConnector(walletConnector);
+            walletConnectorCore.isPhantomRedirectConnector(walletConnector);
         logger.logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,
@@ -242,8 +241,7 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
         }
         if (!allowAlreadyConnectedWallet &&
             isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
-            walletConnector.connectedChain !== 'FLOW' &&
-            !walletConnector.isWalletConnect) {
+            walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);
         }

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { StorageService, isMobile, UserRejectedRequestError } from '@dynamic-labs/utils';
-import { isPhantomRedirectConnector, isWalletConnectConnector } from '@dynamic-labs/wallet-connector-core';
+import { isPhantomRedirectConnector } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
@@ -206,8 +206,7 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
-            isPhantomRedirectConnector(walletConnector) ||
-            isWalletConnectConnector(walletConnector);
+            isPhantomRedirectConnector(walletConnector);
         logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,
@@ -238,8 +237,7 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
         }
         if (!allowAlreadyConnectedWallet &&
             isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
-            walletConnector.connectedChain !== 'FLOW' &&
-            !walletConnector.isWalletConnect) {
+            walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);
         }

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -102,14 +102,12 @@ var SandboxIndicatorWrapper = require('../../../components/SandboxIndicatorWrapp
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn.useIsLoggedIn();
-    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    isRenderingEmbeddedAuthFlow.current = !hide;
     // Keep isRenderingEmbeddedAuthFlow up to date
-    React.useEffect(() => {
-        setIsRenderingEmbeddedAuthFlow(!hide);
-        return () => {
-            setIsRenderingEmbeddedAuthFlow(false);
-        };
-    }, [setIsRenderingEmbeddedAuthFlow, hide]);
+    React.useEffect(() => () => {
+        isRenderingEmbeddedAuthFlow.current = false;
+    }, [isRenderingEmbeddedAuthFlow]);
     if (hide)
         return null;
     const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsxRuntime.jsx(RenderView.RenderView, {}) }));

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -98,14 +98,12 @@ import { SandboxIndicatorWrapper } from '../../../components/SandboxIndicatorWra
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn();
-    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
+    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
+    isRenderingEmbeddedAuthFlow.current = !hide;
     // Keep isRenderingEmbeddedAuthFlow up to date
-    useEffect(() => {
-        setIsRenderingEmbeddedAuthFlow(!hide);
-        return () => {
-            setIsRenderingEmbeddedAuthFlow(false);
-        };
-    }, [setIsRenderingEmbeddedAuthFlow, hide]);
+    useEffect(() => () => {
+        isRenderingEmbeddedAuthFlow.current = false;
+    }, [isRenderingEmbeddedAuthFlow]);
     if (hide)
         return null;
     const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsx(RenderView, {}) }));

package/src/lib/widgets/OnrampWidget/OnrampWidget.cjs

@@ -95,14 +95,23 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
+/**
+ * Widget for displaying iframe-based onramp providers
+ * Note: Popup-based providers (like Coinbase) are handled separately in their onClick handlers
+ */
 const OnrampWidget = () => {
     const { showOnramp, selectedOnramp, onrampEnabled, setShowOnramp } = OnrampContext.useOnrampContext();
     const [onrampRef, setOnrampRef] = React.useState(null);
     index.useOnClickOutside(onrampRef, () => setShowOnramp(false));
-    if (!onrampEnabled || !(selectedOnramp === null || selectedOnramp === void 0 ? void 0 : selectedOnramp.iframeUrl)) {
+    const shouldRenderWidget = onrampEnabled &&
+        selectedOnramp &&
+        selectedOnramp.openMode === 'iframe' &&
+        selectedOnramp.url;
+    // If onramp is not enabled or there's no selected onramp, don't render anything
+    if (!shouldRenderWidget) {
         return null;
     }
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsxs(OpacityTransition.OpacityTransition, { isShown: showOnramp, children: [jsxRuntime.jsx("div", { className: 'onramp-widget__backdrop', "aria-hidden": 'true', "data-testid": 'onramp-widget-backdrop' }), jsxRuntime.jsx("div", { className: 'onramp-widget__modal', children: jsxRuntime.jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.iframeUrl, allow: 'camera *;geolocation *', title: 'Crypto Onramp', ref: setOnrampRef, "data-testid": 'onramp-widget-modal' }) })] }) }));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsxs(OpacityTransition.OpacityTransition, { isShown: showOnramp, children: [jsxRuntime.jsx("div", { className: 'onramp-widget__backdrop', "aria-hidden": 'true', "data-testid": 'onramp-widget-backdrop' }), jsxRuntime.jsx("div", { className: 'onramp-widget__modal', children: jsxRuntime.jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.url, allow: 'camera *;geolocation *', title: 'Crypto Onramp', ref: setOnrampRef, "data-testid": 'onramp-widget-modal' }) })] }) }));
 };
 
 exports.OnrampWidget = OnrampWidget;

package/src/lib/widgets/OnrampWidget/OnrampWidget.d.ts

@@ -1,2 +1,6 @@
 import { type FC } from 'react';
+/**
+ * Widget for displaying iframe-based onramp providers
+ * Note: Popup-based providers (like Coinbase) are handled separately in their onClick handlers
+ */
 export declare const OnrampWidget: FC;

package/src/lib/widgets/OnrampWidget/OnrampWidget.js

@@ -91,14 +91,23 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
+/**
+ * Widget for displaying iframe-based onramp providers
+ * Note: Popup-based providers (like Coinbase) are handled separately in their onClick handlers
+ */
 const OnrampWidget = () => {
     const { showOnramp, selectedOnramp, onrampEnabled, setShowOnramp } = useOnrampContext();
     const [onrampRef, setOnrampRef] = useState(null);
     useOnClickOutside(onrampRef, () => setShowOnramp(false));
-    if (!onrampEnabled || !(selectedOnramp === null || selectedOnramp === void 0 ? void 0 : selectedOnramp.iframeUrl)) {
+    const shouldRenderWidget = onrampEnabled &&
+        selectedOnramp &&
+        selectedOnramp.openMode === 'iframe' &&
+        selectedOnramp.url;
+    // If onramp is not enabled or there's no selected onramp, don't render anything
+    if (!shouldRenderWidget) {
         return null;
     }
-    return (jsx(ShadowDOM, { children: jsxs(OpacityTransition, { isShown: showOnramp, children: [jsx("div", { className: 'onramp-widget__backdrop', "aria-hidden": 'true', "data-testid": 'onramp-widget-backdrop' }), jsx("div", { className: 'onramp-widget__modal', children: jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.iframeUrl, allow: 'camera *;geolocation *', title: 'Crypto Onramp', ref: setOnrampRef, "data-testid": 'onramp-widget-modal' }) })] }) }));
+    return (jsx(ShadowDOM, { children: jsxs(OpacityTransition, { isShown: showOnramp, children: [jsx("div", { className: 'onramp-widget__backdrop', "aria-hidden": 'true', "data-testid": 'onramp-widget-backdrop' }), jsx("div", { className: 'onramp-widget__modal', children: jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.url, allow: 'camera *;geolocation *', title: 'Crypto Onramp', ref: setOnrampRef, "data-testid": 'onramp-widget-modal' }) })] }) }));
 };
 
 export { OnrampWidget };

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.cjs

@@ -1,27 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const formatCoinbaseOnrampUrl = (url, wallet) => {
-    if (wallet) {
-        const networks = wallet.connector.getEnabledNetworks();
-        if (!networks || networks.length === 0) {
-            return url;
-        }
-        const filteredNetworks = networks.filter((network) => !network.isTestnet);
-        const onlyKeys = filteredNetworks
-            .filter((network) => Boolean(network.key)) // filter out networks without keys
-            .map((network) => network.key);
-        const addressesObj = {
-            [wallet.address]: onlyKeys,
-        };
-        const baseUrl = new URL(url);
-        // Construct the URL with the raw query parameters
-        const finalUrl = `${baseUrl.origin}${baseUrl.pathname}?appId=${baseUrl.searchParams.get('appId')}&addresses=${encodeURIComponent(JSON.stringify(addressesObj))}`;
-        return finalUrl;
-    }
-    return url;
-};
-
-exports.formatCoinbaseOnrampUrl = formatCoinbaseOnrampUrl;

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.d.ts

@@ -1,2 +0,0 @@
-import type { Wallet } from '@dynamic-labs/wallet-connector-core';
-export declare const formatCoinbaseOnrampUrl: (url: string, wallet: Wallet) => string;

package/src/lib/utils/functions/coinbaseOnramp/formatCoinbaseOnrampUrl.js

@@ -1,23 +0,0 @@
-'use client'
-const formatCoinbaseOnrampUrl = (url, wallet) => {
-    if (wallet) {
-        const networks = wallet.connector.getEnabledNetworks();
-        if (!networks || networks.length === 0) {
-            return url;
-        }
-        const filteredNetworks = networks.filter((network) => !network.isTestnet);
-        const onlyKeys = filteredNetworks
-            .filter((network) => Boolean(network.key)) // filter out networks without keys
-            .map((network) => network.key);
-        const addressesObj = {
-            [wallet.address]: onlyKeys,
-        };
-        const baseUrl = new URL(url);
-        // Construct the URL with the raw query parameters
-        const finalUrl = `${baseUrl.origin}${baseUrl.pathname}?appId=${baseUrl.searchParams.get('appId')}&addresses=${encodeURIComponent(JSON.stringify(addressesObj))}`;
-        return finalUrl;
-    }
-    return url;
-};
-
-export { formatCoinbaseOnrampUrl };

package/src/lib/utils/functions/coinbaseOnramp/index.d.ts

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