@dynamic-labs/sdk-react-core 4.101.0 → 4.103.0

package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpAuthentication.types.d.ts

@@ -8,6 +8,7 @@ export type StepUpAuthenticationState = {
 };
 export type SendOtpParams = {
     credentialId?: string;
+    requestedScopes?: TokenScope[];
 };
 export type VerifyOtpParams = {
     requestedScopes?: TokenScope[];

package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpOtp.cjs

@@ -42,11 +42,14 @@ const resolveTargetCredential = (credentials, credentialId) => {
     }
     return ((_b = credentials.find((cred) => cred.signInEnabled && isOtpCapableCredential(cred))) !== null && _b !== void 0 ? _b : 'No sign-in enabled email or SMS credential found for step-up authentication');
 };
-const sendEmailOtp = (credential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+const sendEmailOtp = (credential, purpose) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     if (!credential.email) {
         throw new Error('Email credential is missing email address');
     }
-    return client.sendEmailOTP({ email: credential.email });
+    // `purpose` lets the API tailor the verification email to the step-up
+    // operation; client versions predating the param ignore it.
+    const params = Object.assign({ email: credential.email }, (purpose !== undefined && { purpose }));
+    return client.sendEmailOTP(params);
 });
 const sendSmsOtp = (credential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     var _a;
@@ -60,21 +63,22 @@ const sendSmsOtp = (credential) => _tslib.__awaiter(void 0, void 0, void 0, func
     }
     return client.sendSmsOTP({ isoCountryCode, phoneNumber: credential.phoneNumber });
 });
-const dispatchOtp = (credential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+const dispatchOtp = (credential, purpose) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     return credential.format === sdkApiCore.JwtVerifiedCredentialFormatEnum.Email
-        ? sendEmailOtp(credential)
+        ? sendEmailOtp(credential, purpose)
         : sendSmsOtp(credential);
 });
 const useStepUpOtp = ({ credentialId, stateActions, }) => {
     const user = useUser.useUser();
     const { setError, setLoading, setState, setSuccess } = stateActions;
     const otpVerificationRef = React.useRef(null);
-    // Holds the credential whose OTP send is blocked awaiting a captcha token.
-    const pendingCaptchaCredentialRef = React.useRef(null);
-    const dispatchAndStoreOtp = React.useCallback((credential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    // Holds the credential and send purpose whose OTP send is blocked awaiting
+    // a captcha token.
+    const pendingCaptchaSendRef = React.useRef(null);
+    const dispatchAndStoreOtp = React.useCallback((credential, purpose) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setLoading();
         try {
-            const otpVerification = yield dispatchOtp(credential);
+            const otpVerification = yield dispatchOtp(credential, purpose);
             otpVerificationRef.current = otpVerification;
             setSuccess({ otpVerification });
             return otpVerification;
@@ -86,7 +90,7 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         }
     }), [setError, setLoading, setSuccess]);
     const sendOtp = React.useCallback((params) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _a, _b;
         const credentials = user === null || user === void 0 ? void 0 : user.verifiedCredentials;
         if (!(credentials === null || credentials === void 0 ? void 0 : credentials.length)) {
             setError('No verified credentials found for the authenticated user');
@@ -98,6 +102,9 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
             setError(result);
             return null;
         }
+        // The first requested scope names the operation (e.g. wallet:export),
+        // so the OTP email can describe it instead of a sign-in.
+        const purpose = (_b = params === null || params === void 0 ? void 0 : params.requestedScopes) === null || _b === void 0 ? void 0 : _b[0];
         if (!isOtpCapableCredential(result)) {
             setError(`Credential format "${result.format}" does not support OTP verification. Only email and SMS credentials are supported`);
             return null;
@@ -106,11 +113,11 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         // captcha-enabled environments. Defer the send and surface the challenge
         // to the UI, which collects a token and completes it via submitCaptchaToken.
         if (client.isCaptchaRequired()) {
-            pendingCaptchaCredentialRef.current = result;
+            pendingCaptchaSendRef.current = { credential: result, purpose };
             setState((prev) => (Object.assign(Object.assign({}, prev), { captchaRequired: true, error: null })));
             return null;
         }
-        return dispatchAndStoreOtp(result);
+        return dispatchAndStoreOtp(result, purpose);
     }), [
         credentialId,
         dispatchAndStoreOtp,
@@ -119,16 +126,16 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         user === null || user === void 0 ? void 0 : user.verifiedCredentials,
     ]);
     const submitCaptchaToken = React.useCallback((captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const credential = pendingCaptchaCredentialRef.current;
-        if (!credential) {
+        const pending = pendingCaptchaSendRef.current;
+        if (!pending) {
             return null;
         }
-        pendingCaptchaCredentialRef.current = null;
+        pendingCaptchaSendRef.current = null;
         client.setCaptchaToken({ captchaToken });
         setState((prev) => (Object.assign(Object.assign({}, prev), { captchaRequired: false })));
-        return dispatchAndStoreOtp(credential);
+        return dispatchAndStoreOtp(pending.credential, pending.purpose);
     }), [dispatchAndStoreOtp, setState]);
-    const verifyOtp = React.useCallback((_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ requestedScopes, verificationToken, }) {
+    const verifyOtp = React.useCallback((_c) => _tslib.__awaiter(void 0, [_c], void 0, function* ({ requestedScopes, verificationToken, }) {
         const otpVerification = otpVerificationRef.current;
         if (!otpVerification) {
             setError('OTP verification has not been initiated. Call sendOtp() first');
@@ -152,7 +159,7 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
     }), [setError, setLoading, setSuccess]);
     const resetOtpRef = React.useCallback(() => {
         otpVerificationRef.current = null;
-        pendingCaptchaCredentialRef.current = null;
+        pendingCaptchaSendRef.current = null;
     }, []);
     return { resetOtpRef, sendOtp, submitCaptchaToken, verifyOtp };
 };

package/src/lib/utils/hooks/useStepUpAuthentication/useStepUpOtp.js

@@ -38,11 +38,14 @@ const resolveTargetCredential = (credentials, credentialId) => {
     }
     return ((_b = credentials.find((cred) => cred.signInEnabled && isOtpCapableCredential(cred))) !== null && _b !== void 0 ? _b : 'No sign-in enabled email or SMS credential found for step-up authentication');
 };
-const sendEmailOtp = (credential) => __awaiter(void 0, void 0, void 0, function* () {
+const sendEmailOtp = (credential, purpose) => __awaiter(void 0, void 0, void 0, function* () {
     if (!credential.email) {
         throw new Error('Email credential is missing email address');
     }
-    return sendEmailOTP({ email: credential.email });
+    // `purpose` lets the API tailor the verification email to the step-up
+    // operation; client versions predating the param ignore it.
+    const params = Object.assign({ email: credential.email }, (purpose !== undefined && { purpose }));
+    return sendEmailOTP(params);
 });
 const sendSmsOtp = (credential) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
@@ -56,21 +59,22 @@ const sendSmsOtp = (credential) => __awaiter(void 0, void 0, void 0, function* (
     }
     return sendSmsOTP({ isoCountryCode, phoneNumber: credential.phoneNumber });
 });
-const dispatchOtp = (credential) => __awaiter(void 0, void 0, void 0, function* () {
+const dispatchOtp = (credential, purpose) => __awaiter(void 0, void 0, void 0, function* () {
     return credential.format === JwtVerifiedCredentialFormatEnum.Email
-        ? sendEmailOtp(credential)
+        ? sendEmailOtp(credential, purpose)
         : sendSmsOtp(credential);
 });
 const useStepUpOtp = ({ credentialId, stateActions, }) => {
     const user = useUser();
     const { setError, setLoading, setState, setSuccess } = stateActions;
     const otpVerificationRef = useRef(null);
-    // Holds the credential whose OTP send is blocked awaiting a captcha token.
-    const pendingCaptchaCredentialRef = useRef(null);
-    const dispatchAndStoreOtp = useCallback((credential) => __awaiter(void 0, void 0, void 0, function* () {
+    // Holds the credential and send purpose whose OTP send is blocked awaiting
+    // a captcha token.
+    const pendingCaptchaSendRef = useRef(null);
+    const dispatchAndStoreOtp = useCallback((credential, purpose) => __awaiter(void 0, void 0, void 0, function* () {
         setLoading();
         try {
-            const otpVerification = yield dispatchOtp(credential);
+            const otpVerification = yield dispatchOtp(credential, purpose);
             otpVerificationRef.current = otpVerification;
             setSuccess({ otpVerification });
             return otpVerification;
@@ -82,7 +86,7 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         }
     }), [setError, setLoading, setSuccess]);
     const sendOtp = useCallback((params) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _a, _b;
         const credentials = user === null || user === void 0 ? void 0 : user.verifiedCredentials;
         if (!(credentials === null || credentials === void 0 ? void 0 : credentials.length)) {
             setError('No verified credentials found for the authenticated user');
@@ -94,6 +98,9 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
             setError(result);
             return null;
         }
+        // The first requested scope names the operation (e.g. wallet:export),
+        // so the OTP email can describe it instead of a sign-in.
+        const purpose = (_b = params === null || params === void 0 ? void 0 : params.requestedScopes) === null || _b === void 0 ? void 0 : _b[0];
         if (!isOtpCapableCredential(result)) {
             setError(`Credential format "${result.format}" does not support OTP verification. Only email and SMS credentials are supported`);
             return null;
@@ -102,11 +109,11 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         // captcha-enabled environments. Defer the send and surface the challenge
         // to the UI, which collects a token and completes it via submitCaptchaToken.
         if (isCaptchaRequired()) {
-            pendingCaptchaCredentialRef.current = result;
+            pendingCaptchaSendRef.current = { credential: result, purpose };
             setState((prev) => (Object.assign(Object.assign({}, prev), { captchaRequired: true, error: null })));
             return null;
         }
-        return dispatchAndStoreOtp(result);
+        return dispatchAndStoreOtp(result, purpose);
     }), [
         credentialId,
         dispatchAndStoreOtp,
@@ -115,16 +122,16 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
         user === null || user === void 0 ? void 0 : user.verifiedCredentials,
     ]);
     const submitCaptchaToken = useCallback((captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
-        const credential = pendingCaptchaCredentialRef.current;
-        if (!credential) {
+        const pending = pendingCaptchaSendRef.current;
+        if (!pending) {
             return null;
         }
-        pendingCaptchaCredentialRef.current = null;
+        pendingCaptchaSendRef.current = null;
         setCaptchaToken({ captchaToken });
         setState((prev) => (Object.assign(Object.assign({}, prev), { captchaRequired: false })));
-        return dispatchAndStoreOtp(credential);
+        return dispatchAndStoreOtp(pending.credential, pending.purpose);
     }), [dispatchAndStoreOtp, setState]);
-    const verifyOtp = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ requestedScopes, verificationToken, }) {
+    const verifyOtp = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ requestedScopes, verificationToken, }) {
         const otpVerification = otpVerificationRef.current;
         if (!otpVerification) {
             setError('OTP verification has not been initiated. Call sendOtp() first');
@@ -148,7 +155,7 @@ const useStepUpOtp = ({ credentialId, stateActions, }) => {
     }), [setError, setLoading, setSuccess]);
     const resetOtpRef = useCallback(() => {
         otpVerificationRef.current = null;
-        pendingCaptchaCredentialRef.current = null;
+        pendingCaptchaSendRef.current = null;
     }, []);
     return { resetOtpRef, sendOtp, submitCaptchaToken, verifyOtp };
 };

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

@@ -123,7 +123,9 @@ const useWalletCreation = () => {
             }
             logger.logger.error('Error creating dynamic waas wallet', error);
             setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
-            clearStackAndPush('backup-unsuccessful');
+            clearStackAndPush('backup-unsuccessful', {
+                errorMessage: error.message,
+            });
         },
     });
 };

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

@@ -119,7 +119,9 @@ const useWalletCreation = () => {
             }
             logger.error('Error creating dynamic waas wallet', error);
             setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
-            clearStackAndPush('backup-unsuccessful');
+            clearStackAndPush('backup-unsuccessful', {
+                errorMessage: error.message,
+            });
         },
     });
 };

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.cjs

@@ -124,7 +124,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
-const BackupUnsuccessfulView = () => {
+const BackupUnsuccessfulView = ({ errorMessage, }) => {
     var _a, _b;
     const { t } = reactI18next.useTranslation();
     const projectSettings = useProjectSettings.useProjectSettings();
@@ -167,7 +167,7 @@ const BackupUnsuccessfulView = () => {
                                             position: 'absolute',
                                             top: '50%',
                                             transform: 'translate(-50%, -50%)',
-                                        } })] })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), jsxRuntime.jsx("div", { className: classNames.classNames('button-group', {
+                                        } })] })] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), errorMessage && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'error-1', className: 'backup-error-message', children: errorMessage })), jsxRuntime.jsx("div", { className: classNames.classNames('button-group', {
                             'button-group--with-help-section': hasContactInfo,
                         }), children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'retry-button', buttonVariant: 'brand-primary', type: 'submit', onClick: onTryAgainClick, copykey: 'dyn_waas.backup_unsuccessful.try_again', typographyProps: {
                                 color: 'inherit',

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-export declare const BackupUnsuccessfulView: React.FC;
+type BackupUnsuccessfulViewProps = {
+    errorMessage?: string;
+};
+export declare const BackupUnsuccessfulView: React.FC<BackupUnsuccessfulViewProps>;
 export default BackupUnsuccessfulView;

package/src/lib/views/BackupUnsuccessfulView/BackupUnsuccessfulView.js

@@ -120,7 +120,7 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
-const BackupUnsuccessfulView = () => {
+const BackupUnsuccessfulView = ({ errorMessage, }) => {
     var _a, _b;
     const { t } = useTranslation();
     const projectSettings = useProjectSettings();
@@ -163,7 +163,7 @@ const BackupUnsuccessfulView = () => {
                                             position: 'absolute',
                                             top: '50%',
                                             transform: 'translate(-50%, -50%)',
-                                        } })] })] }), jsx(Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), jsx("div", { className: classNames('button-group', {
+                                        } })] })] }), jsx(Typography, { variant: 'body_normal', className: 'backup-message', color: 'primary', copykey: 'dyn_waas.backup_unsuccessful.description', children: t('dyn_waas.backup_unsuccessful.description') }), errorMessage && (jsx(Typography, { variant: 'body_mini', color: 'error-1', className: 'backup-error-message', children: errorMessage })), jsx("div", { className: classNames('button-group', {
                             'button-group--with-help-section': hasContactInfo,
                         }), children: jsx(TypographyButton, { buttonClassName: 'retry-button', buttonVariant: 'brand-primary', type: 'submit', onClick: onTryAgainClick, copykey: 'dyn_waas.backup_unsuccessful.try_again', typographyProps: {
                                 color: 'inherit',

package/src/lib/views/StepUpReauthOtpView/StepUpReauthOtpView.cjs

@@ -24,8 +24,8 @@ const StepUpReauthOtpView = ({ credentialId, displayLabel, requestedScopes, type
         if (hasSentInitialOtpRef.current)
             return;
         hasSentInitialOtpRef.current = true;
-        sendOtp();
-    }, [sendOtp]);
+        sendOtp({ requestedScopes });
+    }, [requestedScopes, sendOtp]);
     const handlePinComplete = (verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const response = yield verifyOtp({
             requestedScopes,
@@ -46,7 +46,7 @@ const StepUpReauthOtpView = ({ credentialId, displayLabel, requestedScopes, type
         return jsxRuntime.jsx(CaptchaChallenge.CaptchaChallenge, { onSuccess: submitCaptchaToken });
     }
     return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: MainIcon, displayedDestination: displayLabel, error: displayError, isLoading: isLoading, isValid: verificationSuccess, onPinComplete: handlePinComplete, retryHandler: () => {
-            void sendOtp();
+            void sendOtp({ requestedScopes });
         }, successBannerTextKey: 'dyn_otp_verification.verification_succeeded' }));
 };
 

package/src/lib/views/StepUpReauthOtpView/StepUpReauthOtpView.js

@@ -20,8 +20,8 @@ const StepUpReauthOtpView = ({ credentialId, displayLabel, requestedScopes, type
         if (hasSentInitialOtpRef.current)
             return;
         hasSentInitialOtpRef.current = true;
-        sendOtp();
-    }, [sendOtp]);
+        sendOtp({ requestedScopes });
+    }, [requestedScopes, sendOtp]);
     const handlePinComplete = (verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
         const response = yield verifyOtp({
             requestedScopes,
@@ -42,7 +42,7 @@ const StepUpReauthOtpView = ({ credentialId, displayLabel, requestedScopes, type
         return jsx(CaptchaChallenge, { onSuccess: submitCaptchaToken });
     }
     return (jsx(OTPVerificationView, { MainIcon: MainIcon, displayedDestination: displayLabel, error: displayError, isLoading: isLoading, isValid: verificationSuccess, onPinComplete: handlePinComplete, retryHandler: () => {
-            void sendOtp();
+            void sendOtp({ requestedScopes });
         }, successBannerTextKey: 'dyn_otp_verification.verification_succeeded' }));
 };
 

package/src/lib/views/viewToComponentMap.d.ts

@@ -4,7 +4,9 @@ export declare const viewToComponentMap: {
     'account-exists': () => JSX.Element;
     'account-upgraded': import("react").FC;
     'auth-loading': import("react").FC;
-    'backup-unsuccessful': import("react").FC<{}>;
+    'backup-unsuccessful': import("react").FC<{
+        errorMessage?: string | undefined;
+    }>;
     'bridge-next-wallet-connection': import("react").FC;
     'bridge-summary': () => JSX.Element;
     'bridge-welcome': () => JSX.Element;