@web3auth/ui
Version:
Ui modal for web3Auth
149 lines (144 loc) • 6.41 kB
JavaScript
'use strict';
var auth = require('@web3auth/auth');
var classNames = require('classnames');
var React = require('react');
var reactI18next = require('react-i18next');
var config = require('../config.js');
var ThemeContext = require('../context/ThemeContext.js');
var localeImport = require('../localeImport.js');
var Button = require('./Button/Button.js');
var Image = require('./Image.js');
var jsxRuntime = require('react/jsx-runtime');
function getProviderIcon(method, isDark, isPrimaryBtn) {
const imageId = method === auth.LOGIN_PROVIDER.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
const hoverId = method === auth.LOGIN_PROVIDER.APPLE || method === auth.LOGIN_PROVIDER.GITHUB || method === auth.LOGIN_PROVIDER.TWITTER ? imageId : `login-${method}-active`;
if (isPrimaryBtn) {
return /*#__PURE__*/jsxRuntime.jsx(Image, {
width: "20",
imageId: hoverId,
hoverImageId: hoverId,
isButton: true
});
}
return /*#__PURE__*/jsxRuntime.jsx(Image, {
width: "20",
imageId: imageId,
hoverImageId: hoverId,
isButton: true
});
}
function SocialLogins(props) {
const [canShowMore, setCanShowMore] = React.useState(false);
const [isExpanded, setIsExpanded] = React.useState(false);
const {
socialLoginsConfig = {
loginMethods: {},
loginMethodsOrder: [],
adapter: "",
uiConfig: {}
},
handleSocialLoginClick
} = props;
const {
isDark
} = React.useContext(ThemeContext.ThemedContext);
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
// Too small a function to use `useCallback`
const expandClickHandler = () => {
setIsExpanded(!isExpanded);
};
React.useEffect(() => {
const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
});
setCanShowMore(maxOptions.length > 4);
}, [socialLoginsConfig.loginMethods]);
const adapterListClass = classNames("w3a-adapter-list", "w3ajs-socials-adapters", !isExpanded ? " w3a-adapter-list--shrink" : "");
const adapterButtonClass = classNames("w3a-button-expand", "w3ajs-button-expand", isExpanded ? "w3a-button--rotate" : "");
const adapterExpandText = isExpanded ? t("modal.social.view-less") : t("modal.social.view-more");
const loginMethodsCount = Object.keys(socialLoginsConfig.loginMethods).length + 1;
const restrictedLoginMethods = [auth.LOGIN_PROVIDER.WEBAUTHN, auth.LOGIN_PROVIDER.JWT, auth.LOGIN_PROVIDER.SMS_PASSWORDLESS, auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS, auth.LOGIN_PROVIDER.AUTHENTICATOR, auth.LOGIN_PROVIDER.PASSKEYS];
return /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "w3ajs-social-logins w3a-group",
children: [/*#__PURE__*/jsxRuntime.jsx("ul", {
className: adapterListClass,
children: Object.keys(socialLoginsConfig.loginMethods).map(method => {
var _socialLoginsConfig$u, _socialLoginsConfig$u2;
const name = config.capitalizeFirstLetter(socialLoginsConfig.loginMethods[method].name || method);
const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
const order = orderIndex || Object.keys(socialLoginsConfig.loginMethods).length + 1;
const isMainOption = socialLoginsConfig.loginMethods[method].mainOption;
const isPrimaryBtn = (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u === void 0 ? void 0 : _socialLoginsConfig$u.primaryButton) === "socialLogin" && order === 1;
const providerIcon = getProviderIcon(method, isDark, isPrimaryBtn);
if (socialLoginsConfig.loginMethods[method].showOnModal === false || restrictedLoginMethods.includes(method)) {
return null;
}
const loginMethodSpan = classNames("w3a-adapter-item", (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u2 = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u2 === void 0 ? void 0 : _socialLoginsConfig$u2.loginGridCol) === 2 ? "w3a--col-span-3" : "w3a--col-span-2");
if (isMainOption || order === 1) {
return /*#__PURE__*/jsxRuntime.jsx("li", {
className: "w3a--col-span-6 w3a-adapter-item",
style: {
order
},
children: /*#__PURE__*/jsxRuntime.jsxs(Button, {
variant: "secondary",
onClick: () => handleSocialLoginClick({
adapter: socialLoginsConfig.adapter,
loginParams: {
loginProvider: method,
name,
login_hint: ""
}
}),
className: "w3a--w-full",
title: name,
children: [providerIcon, /*#__PURE__*/jsxRuntime.jsx("p", {
className: "w3a--ml-2",
children: t("modal.social.continueCustom", {
adapter: name
})
})]
})
}, method);
}
return /*#__PURE__*/jsxRuntime.jsx("li", {
className: loginMethodSpan,
style: {
order: order + loginMethodsCount
},
children: /*#__PURE__*/jsxRuntime.jsx(Button, {
variant: "secondary",
onClick: () => handleSocialLoginClick({
adapter: socialLoginsConfig.adapter,
loginParams: {
loginProvider: method,
name,
login_hint: ""
}
}),
className: "w3a--w-full",
title: name,
children: providerIcon
})
}, method);
})
}), /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a-social__policy",
children: t("modal.social.policy")
}), canShowMore && /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a--text-right",
children: /*#__PURE__*/jsxRuntime.jsx("button", {
type: "button",
className: adapterButtonClass,
onClick: expandClickHandler,
children: /*#__PURE__*/jsxRuntime.jsx("span", {
className: "w3ajs-button-expand-text",
children: adapterExpandText
})
})
})]
});
}
module.exports = SocialLogins;