@dynamic-labs/sdk-react-core 0.19.4 → 0.19.6

package/src/lib/context/SendBalanceContext/SendBalanceContext.js

@@ -35,6 +35,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import 'i18next';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
@@ -47,7 +48,6 @@ import '../CaptchaContext/CaptchaContext.js';
 import '../EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../LoadingContext/LoadingContext.js';
-import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -37,6 +37,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('i18next');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
@@ -52,7 +53,6 @@ require('../EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../LoadingContext/LoadingContext.cjs');
 require('../AccessDeniedContext/AccessDeniedContext.cjs');
-require('i18next');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');
@@ -63,7 +63,7 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/
 const SocialRedirectContext = React.createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, internalEvents, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
@@ -88,6 +88,20 @@ const SocialRedirectContextProvider = ({ children, }) => {
         : secondaryWallets;
     const wallet = userWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
     const socialAccount = React.useMemo(() => (wallet ? getReferencedAccount.getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
+    // added to make sure to reset the social provider on logout
+    React.useEffect(() => {
+        const events = internalEvents === null || internalEvents === void 0 ? void 0 : internalEvents.current;
+        if (!events) {
+            return;
+        }
+        const handleInternalLogoutEvent = () => {
+            setSocialProvider(undefined);
+        };
+        events.on('logout', handleInternalLogoutEvent);
+        return () => {
+            events.off('logout', handleInternalLogoutEvent);
+        };
+    }, [internalEvents]);
     const handleError = React.useCallback((message) => {
         logger.logger.error(message);
         if (isAuthenticated) {

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useMemo, useCallback, useEffect, useContext } from 'react';
+import { createContext, useState, useMemo, useEffect, useCallback, useContext } from 'react';
 import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../shared/logger.js';
@@ -33,6 +33,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import 'i18next';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
@@ -48,7 +49,6 @@ import '../EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../LoadingContext/LoadingContext.js';
 import '../AccessDeniedContext/AccessDeniedContext.js';
-import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
@@ -59,7 +59,7 @@ import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/P
 const SocialRedirectContext = createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, internalEvents, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext();
     const { setErrorMessage } = useErrorContext();
     const { setView } = useViewContext();
     const verifyWallet = useVerifyWallet({
@@ -84,6 +84,20 @@ const SocialRedirectContextProvider = ({ children, }) => {
         : secondaryWallets;
     const wallet = userWallets.find((wallet) => wallet.connector.key === (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.key));
     const socialAccount = useMemo(() => (wallet ? getReferencedAccount(authToken, wallet.id) : undefined), [authToken, wallet]);
+    // added to make sure to reset the social provider on logout
+    useEffect(() => {
+        const events = internalEvents === null || internalEvents === void 0 ? void 0 : internalEvents.current;
+        if (!events) {
+            return;
+        }
+        const handleInternalLogoutEvent = () => {
+            setSocialProvider(undefined);
+        };
+        events.on('logout', handleInternalLogoutEvent);
+        return () => {
+            events.off('logout', handleInternalLogoutEvent);
+        };
+    }, [internalEvents]);
     const handleError = useCallback((message) => {
         logger.error(message);
         if (isAuthenticated) {

package/src/lib/context/UserFieldEditorContext/UserFieldEditorContext.cjs

@@ -40,6 +40,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('i18next');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
@@ -52,7 +53,6 @@ require('../CaptchaContext/CaptchaContext.cjs');
 require('../EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../LoadingContext/LoadingContext.cjs');
-require('i18next');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');

package/src/lib/context/UserFieldEditorContext/UserFieldEditorContext.js

@@ -36,6 +36,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import 'i18next';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
@@ -48,7 +49,6 @@ import '../CaptchaContext/CaptchaContext.js';
 import '../EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../LoadingContext/LoadingContext.js';
-import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -89,20 +89,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         clearStatesOnBackClick,
     ]);
-    const leadingButtons = React.useMemo(() => {
-        let buttons = [];
-        if (showBackButton) {
-            buttons = [
-                ...buttons,
-                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'),
-            ];
-        }
-        return buttons;
-    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const infoButton = showHelpContent && (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));
+    const leadingButtons = [];
+    if (showBackButton) {
+        leadingButtons.push(jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'));
+    }
+    // if has close button and info button, info button should be on the right
+    if (closeButton && infoButton) {
+        leadingButtons.push(infoButton);
+    }
     const qrCodePreHeader = (jsxRuntime.jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsxRuntime.jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: closeButton || infoButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 exports.Header = Header;

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { Typography } from '../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
@@ -85,20 +85,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         clearStatesOnBackClick,
     ]);
-    const leadingButtons = useMemo(() => {
-        let buttons = [];
-        if (showBackButton) {
-            buttons = [
-                ...buttons,
-                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'),
-            ];
-        }
-        return buttons;
-    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsx(IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsx(SvgClose, {}) }));
     const infoButton = showHelpContent && (jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));
+    const leadingButtons = [];
+    if (showBackButton) {
+        leadingButtons.push(jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'));
+    }
+    // if has close button and info button, info button should be on the right
+    if (closeButton && infoButton) {
+        leadingButtons.push(infoButton);
+    }
     const qrCodePreHeader = (jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsx(Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: closeButton || infoButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 export { Header };

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.cjs

@@ -38,6 +38,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('i18next');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../context/FooterAnimationContext/index.cjs');

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.js

@@ -34,6 +34,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import 'i18next';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../context/FooterAnimationContext/index.js';

package/src/lib/locale/en/translation.cjs

@@ -372,13 +372,17 @@ const translation = {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
-        info: 'Any troubles with your passkey?',
+        info: 'Can’t find your passkey?',
         contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
     },
     /**
      * @description copy keys for network not supported view

package/src/lib/locale/en/translation.d.ts

@@ -367,13 +367,17 @@ export declare const translation: {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
         info: string;
         contact_support: string;
+        divider: string;
+        recovery_button: string;
     };
     /**
      * @description copy keys for network not supported view

package/src/lib/locale/en/translation.js

@@ -368,13 +368,17 @@ const translation = {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
-        info: 'Any troubles with your passkey?',
+        info: 'Can’t find your passkey?',
         contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
     },
     /**
      * @description copy keys for network not supported view

package/src/lib/modals/SignMessageConfirmationModal/getProperErrorMessage.cjs

@@ -8,7 +8,7 @@ const TurnkeyErrorMap = {
     3: 'You reached the limit of passkeys for this account.',
 };
 const DOMExceptionErrorMap = {
-    NotAllowedError: 'Make sure to have you browser tab focused.',
+    NotAllowedError: 'Request Cancelled. Select a device or password manager to set up a passkey.',
 };
 const getProperErrorMessage = (originalError) => {
     var _a, _b;

package/src/lib/modals/SignMessageConfirmationModal/getProperErrorMessage.js

@@ -4,7 +4,7 @@ const TurnkeyErrorMap = {
     3: 'You reached the limit of passkeys for this account.',
 };
 const DOMExceptionErrorMap = {
-    NotAllowedError: 'Make sure to have you browser tab focused.',
+    NotAllowedError: 'Request Cancelled. Select a device or password manager to set up a passkey.',
 };
 const getProperErrorMessage = (originalError) => {
     var _a, _b;