@dynamic-labs/sdk-react-core
Version:
A React SDK for implementing wallet web3 authentication and authorization to your website.
214 lines (211 loc) • 10.4 kB
JavaScript
'use client'
import { __awaiter } from '../../../../../_virtual/_tslib.js';
import { useState, useRef, useCallback } from 'react';
import { removeDialCode } from 'react-international-phone';
import '../../../context/DynamicContext/DynamicContext.js';
import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import '@dynamic-labs/sdk-api-core';
import { logger } from '../../../shared/logger.js';
import '@dynamic-labs/iconic';
import '@dynamic-labs/wallet-connector-core';
import 'react/jsx-runtime';
import '../../../context/ViewContext/ViewContext.js';
import '@dynamic-labs/wallet-book';
import '@dynamic-labs/utils';
import '../../../utils/constants/colors.js';
import '../../../utils/constants/values.js';
import '../../../shared/consts/index.js';
import { dynamicEvents } from '../../../events/dynamicEvents.js';
import '../../../context/CaptchaContext/CaptchaContext.js';
import '../../../context/ErrorContext/ErrorContext.js';
import '@dynamic-labs/multi-wallet';
import '../../../store/state/nonce/nonce.js';
import '../../../store/state/projectSettings/projectSettings.js';
import '../../../config/ApiEndpoint.js';
import '../../../store/state/user/user.js';
import { signInWithSmsVerification, retrySmsVerification } from '../../../data/api/sms/sms.js';
import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../../context/AccountExistsContext/AccountExistsContext.js';
import '../../../context/UserWalletsContext/UserWalletsContext.js';
import '../../../store/state/authMode/authMode.js';
import { useOtpVerificationRequest } from '../../../utils/hooks/authenticationHooks/useOtpVerificationRequest/useOtpVerificationRequest.js';
import 'react-dom';
import '../../../utils/functions/compareChains/compareChains.js';
import '../../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import { useEmbeddedWalletSessionKeys } from '../../../utils/hooks/useEmbeddedWalletSessionKeys/useEmbeddedWalletSessionKeys.js';
import '../../../context/ThemeContext/ThemeContext.js';
import { useVerification } from '../../../context/VerificationContext/VerificationContext.js';
import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import { useMutation } from '../../../utils/hooks/useMutation/useMutation.js';
import { useOnUnmount } from '../../../utils/hooks/useOnUnmount/useOnUnmount.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
import { useUserAuth } from '../../../utils/hooks/useUserAuth/useUserAuth.js';
import 'yup';
import '../../../context/MockContext/MockContext.js';
import '../../CollectUserDataView/useFields.js';
import '../../../context/FieldsStateContext/FieldsStateContext.js';
import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../../store/state/walletOptions/walletOptions.js';
import 'react-i18next';
import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
import '../../../components/Alert/Alert.js';
import '../../../context/WalletContext/WalletContext.js';
import '../../../components/ShadowDOM/ShadowDOM.js';
import '../../../components/IconButton/IconButton.js';
import '../../../components/InlineWidget/InlineWidget.js';
import '../../../components/Input/Input.js';
import '../../../components/IsBrowser/IsBrowser.js';
import '../../../components/MenuList/Dropdown/Dropdown.js';
import '../../../components/OverlayCard/OverlayCard.js';
import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../../../components/Popper/Popper/Popper.js';
import '../../../components/Popper/PopperContext/PopperContext.js';
import 'react-focus-lock';
import 'qrcode';
import 'formik';
import '../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
import '../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '../../../locale/locale.js';
import '@hcaptcha/react-hcaptcha';
import '../../../context/LoadingContext/LoadingContext.js';
import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../context/FooterAnimationContext/index.js';
import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../../context/PasskeyContext/PasskeyContext.js';
import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../store/state/sendBalances.js';
import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
import '../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
import '../../../context/OnrampContext/OnrampContext.js';
import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../index.js';
import '../../../store/state/tokenBalances.js';
import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
const useSmsVerification = (type) => {
const { verificationUUID, displayedDestination: formattedPhone, retryData, } = useVerification();
const { environmentId, user, userWithMissingInfo, projectSettings } = useInternalDynamicContext();
const [error, setError] = useState();
const { verifyOtp } = useOtpVerificationRequest();
const { generateSessionKey, shouldRegisterSessionKeysOnSignin } = useEmbeddedWalletSessionKeys({
environmentId,
projectSettings,
});
const { initAuth, completeAuth, cancelAuth } = useUserAuth({
authMethod: 'sms',
});
/** Whether verification was successfully performed */
const isValidatedRef = useRef(false);
useOnUnmount(() => {
const phone = retryData !== null && retryData !== void 0 ? retryData : {
dialCode: '',
iso2: '',
phone: '',
};
if (!retryData)
logger.warn('WARNING: emitted smsVerificationResult with incomplete params because retryData was undefined');
dynamicEvents.emit('smsVerificationResult', isValidatedRef.current, phone);
if (!isValidatedRef.current)
dynamicEvents.emit('authFailure', { option: phone, phone, type: 'sms' }, 'user-cancelled');
});
const retryOneTimePassword = () => __awaiter(void 0, void 0, void 0, function* () {
setError(undefined);
if (!verificationUUID || !retryData) {
yield cancelAuth();
return;
}
retrySmsVerification({
environmentId,
isoCountryCode: retryData.iso2,
phoneCountryCode: retryData.dialCode,
phoneNumber: removeDialCode({
dialCode: retryData.dialCode,
phone: retryData.phone,
}),
verificationUUID,
});
});
const submitOtpForVerification = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
if (!verificationUUID || (!user && !userWithMissingInfo)) {
yield cancelAuth();
return;
}
yield completeAuth({
onValidUpdatedJwt: () => (isValidatedRef.current = true),
updateJwtFunction: () => __awaiter(void 0, void 0, void 0, function* () { return verifyOtp(verificationToken, 'sms', verificationUUID); }),
});
}), [
cancelAuth,
completeAuth,
user,
userWithMissingInfo,
verificationUUID,
verifyOtp,
]);
const submitOtpForLogin = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
if (!verificationUUID) {
yield cancelAuth();
return;
}
yield initAuth({
onError: (error) => setError(error),
onVerifySuccess: () => {
isValidatedRef.current = true;
},
options: { phone: retryData },
showSuccessMessage: true,
verifyFunction: () => __awaiter(void 0, void 0, void 0, function* () {
let sessionPublicKey = undefined;
if (shouldRegisterSessionKeysOnSignin()) {
const keypair = yield generateSessionKey();
sessionPublicKey = keypair.publicKey;
}
return signInWithSmsVerification({
environmentId,
sessionPublicKey,
verificationToken,
verificationUUID,
});
}),
});
}), [
verificationUUID,
initAuth,
retryData,
cancelAuth,
environmentId,
generateSessionKey,
shouldRegisterSessionKeysOnSignin,
]);
const { isLoading, mutate: onSubmit } = useMutation(type === 'login' ? submitOtpForLogin : submitOtpForVerification, {
onFailure: (error) => {
setError(error);
},
});
return {
error,
formattedPhone: formattedPhone !== null && formattedPhone !== void 0 ? formattedPhone : '',
isLoading,
isValid: isValidatedRef.current,
onSubmit,
retryOneTimePassword,
setError,
};
};
export { useSmsVerification };