UNPKG

@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
'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 };