@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
119 lines (115 loc) • 4.71 kB
JavaScript
import { AUTH_CONNECTION } from '@web3auth/auth';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import i18nInstance from '../../../localeImport.js';
import { getIcons } from '../../../utils.js';
import OtpInput$1 from '../../Otp/Otp.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
/**
* OtpInput component
* @param props - OtpInputProps
* @returns OtpInput component
*/
function OtpInput(props) {
const {
setShowOtpFlow,
handleOtpComplete,
authConnection,
loginHint = "",
errorMessage,
otpLoading,
countryFlag
} = props;
const isMobileOtp = useMemo(() => authConnection === AUTH_CONNECTION.SMS_PASSWORDLESS, [authConnection]);
const [t] = useTranslation(undefined, {
i18n: i18nInstance
});
const parsedLoginHint = useMemo(() => {
if (authConnection === AUTH_CONNECTION.EMAIL_PASSWORDLESS) return loginHint;
const [countryCode, number] = loginHint.includes("-") ? loginHint.split("-") : ["", loginHint];
const masked = `${number}`.slice(-Math.floor(number.length / 2)).padStart(`${number}`.length, "*");
return `${countryFlag} ${countryCode} ${masked}`;
}, [loginHint, authConnection, countryFlag]);
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx("div", {
className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
children: /*#__PURE__*/jsx("button", {
type: "button",
className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
onClick: () => setShowOtpFlow(false),
children: /*#__PURE__*/jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 20 20",
className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
children: /*#__PURE__*/jsx("path", {
fill: "currentColor",
fillRule: "evenodd",
d: "M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414",
clipRule: "evenodd"
})
})
})
}), /*#__PURE__*/jsxs("div", {
className: "-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
children: [/*#__PURE__*/jsx("img", {
src: getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light"),
alt: "otp",
className: "w3a--size-auto"
}), /*#__PURE__*/jsxs("div", {
className: "w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
children: [/*#__PURE__*/jsx("p", {
className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
}), /*#__PURE__*/jsxs("div", {
className: "w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
children: [/*#__PURE__*/jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
}), /*#__PURE__*/jsx("p", {
className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
email: parsedLoginHint
})
})]
})]
}), /*#__PURE__*/jsx(OtpInput$1, {
length: 6,
onComplete: handleOtpComplete,
error: Boolean(errorMessage),
helperText: errorMessage,
loading: otpLoading,
disabled: otpLoading
})]
})]
});
}
/**
* LoginOtp component
* @param props - LoginOtpProps
* @returns LoginOtp component
*/
function LoginOtp(props) {
const {
otpLoading,
setShowOtpFlow,
handleOtpComplete,
authConnection,
loginHint,
errorMessage,
countryFlag
} = props;
return /*#__PURE__*/jsx("div", {
className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
children: /*#__PURE__*/jsx(OtpInput, {
errorMessage: errorMessage,
setShowOtpFlow: setShowOtpFlow,
handleOtpComplete: handleOtpComplete,
authConnection: authConnection,
loginHint: loginHint,
otpLoading: otpLoading,
countryFlag: countryFlag
})
});
}
export { LoginOtp as default };