@web3auth/modal
Version:
Multi chain wallet aggregator for web3Auth
120 lines (116 loc) • 4.7 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var auth = require('@web3auth/auth');
var react = require('react');
var reactI18next = require('react-i18next');
var localeImport = require('../../../localeImport.js');
var utils = require('../../../utils.js');
var Otp = require('../../Otp/Otp.js');
/**
* OtpInput component
* @param props - OtpInputProps
* @returns OtpInput component
*/
function OtpInput(props) {
const {
setShowOtpFlow,
handleOtpComplete,
authConnection,
loginHint = "",
errorMessage,
otpLoading,
countryFlag
} = props;
const isMobileOtp = react.useMemo(() => authConnection === auth.AUTH_CONNECTION.SMS_PASSWORDLESS, [authConnection]);
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const parsedLoginHint = react.useMemo(() => {
if (authConnection === auth.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [jsxRuntime.jsx("div", {
className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
children: jsxRuntime.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: jsxRuntime.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: jsxRuntime.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"
})
})
})
}), jsxRuntime.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: [jsxRuntime.jsx("img", {
src: utils.getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light"),
alt: "otp",
className: "w3a--size-auto"
}), jsxRuntime.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: [jsxRuntime.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")
}), jsxRuntime.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: [jsxRuntime.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")
}), jsxRuntime.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
})
})]
})]
}), jsxRuntime.jsx(Otp, {
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 jsxRuntime.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: jsxRuntime.jsx(OtpInput, {
errorMessage: errorMessage,
setShowOtpFlow: setShowOtpFlow,
handleOtpComplete: handleOtpComplete,
authConnection: authConnection,
loginHint: loginHint,
otpLoading: otpLoading,
countryFlag: countryFlag
})
});
}
module.exports = LoginOtp;