@web3auth/ui
Version:
Ui modal for web3Auth
245 lines (240 loc) • 12.2 kB
JavaScript
'use strict';
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var auth = require('@web3auth/auth');
var base = require('@web3auth/base');
var deepmerge = require('deepmerge');
var React = require('react');
var reactI18next = require('react-i18next');
var interfaces = require('../interfaces.js');
var localeImport = require('../localeImport.js');
var AdapterLoader = require('./AdapterLoader.js');
var Button = require('./Button/Button.js');
var ExternalWallets = require('./ExternalWallets.js');
var Footer = require('./Footer.js');
var Header = require('./Header.js');
var SocialLoginPasswordless = require('./SocialLoginPasswordless.js');
var SocialLogins = require('./SocialLogins.js');
var jsxRuntime = require('react/jsx-runtime');
base.log.enableAll();
function Modal(props) {
var _modalState$socialLog, _modalState$socialLog2, _modalState$socialLog5, _modalState$socialLog7, _modalState$socialLog9, _modalState$socialLog10;
const [modalTransitionClasses, setModalTransitionClasses] = React.useState(["w3a-modal__inner"]);
const [modalState, setModalState] = React.useState({
externalWalletsVisibility: false,
status: interfaces.MODAL_STATUS.INITIALIZED,
hasExternalWallets: false,
externalWalletsInitialized: false,
modalVisibility: false,
modalVisibilityDelayed: false,
postLoadingMessage: "",
walletConnectUri: "",
socialLoginsConfig: {
loginMethods: {},
loginMethodsOrder: [],
adapter: "",
uiConfig: {}
},
externalWalletsConfig: {},
detailedLoaderAdapter: "",
detailedLoaderAdapterName: "",
showExternalWalletsOnly: false
});
const [t] = reactI18next.useTranslation(undefined, {
i18n: localeImport
});
const {
stateListener,
appLogo,
appName,
chainNamespace,
walletRegistry,
handleSocialLoginClick,
handleExternalWalletClick,
handleShowExternalWallets,
closeModal
} = props;
const [transition, setTransition] = React.useState("");
React.useEffect(() => {
stateListener.emit("MOUNTED");
stateListener.on("STATE_UPDATED", newModalState => {
base.log.debug("state updated", newModalState);
setModalState(prevState => {
const mergedState = base.cloneDeep(deepmerge(prevState, newModalState));
return mergedState;
});
});
}, [stateListener]);
React.useEffect(() => {
let timeOutId;
if (modalState.modalVisibility) {
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
modalVisibilityDelayed: modalState.modalVisibility
});
});
timeOutId = window.setTimeout(() => {
setModalTransitionClasses(["w3a-modal__inner", modalState.modalVisibility ? "w3a-modal__inner--active" : ""]);
// hide external wallets, if modal is closing, so that it will show social login screen on reopen.
}, 100);
} else {
setModalTransitionClasses(["w3a-modal__inner", modalState.modalVisibility ? "w3a-modal__inner--active" : ""]);
// hide external wallets, if modal is closing, so that it will show social login screen on reopen.
timeOutId = window.setTimeout(() => {
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
modalVisibilityDelayed: modalState.modalVisibility
});
});
}, 250);
}
return () => {
clearTimeout(timeOutId);
};
}, [modalState.modalVisibility]);
const onCloseLoader = React.useCallback(() => {
if (modalState.status === interfaces.MODAL_STATUS.CONNECTED) {
closeModal();
}
if (modalState.status === interfaces.MODAL_STATUS.ERRORED) {
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
modalVisibility: true,
status: interfaces.MODAL_STATUS.INITIALIZED
});
});
}
}, [closeModal, modalState.status]);
const preHandleExternalWalletClick = React.useCallback(params => {
const {
adapter
} = params;
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
detailedLoaderAdapter: adapter,
detailedLoaderAdapterName: base.ADAPTER_NAMES[adapter]
});
});
handleExternalWalletClick(params);
}, [handleExternalWalletClick]);
const preHandleSocialWalletClick = params => {
const {
loginParams
} = params;
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
detailedLoaderAdapter: loginParams.loginProvider,
detailedLoaderAdapterName: loginParams.name
});
});
handleSocialLoginClick(params);
};
const isEmailPrimary = ((_modalState$socialLog = modalState.socialLoginsConfig) === null || _modalState$socialLog === void 0 || (_modalState$socialLog = _modalState$socialLog.uiConfig) === null || _modalState$socialLog === void 0 ? void 0 : _modalState$socialLog.primaryButton) === "emailLogin";
const isExternalPrimary = ((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 || (_modalState$socialLog2 = _modalState$socialLog2.uiConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.primaryButton) === "externalLogin";
const externalWalletButton = /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3ajs-external-wallet w3a-group w3a--w-full",
children: /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a-external-toggle w3ajs-external-toggle",
children: /*#__PURE__*/jsxRuntime.jsx(Button, {
variant: isExternalPrimary ? "primary" : "tertiary",
type: "button",
className: "w3a--w-full w3ajs-external-toggle__button",
style: {
width: "100%"
},
onClick: () => {
setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
externalWalletsVisibility: true
});
});
setTransition("slide-enter");
handleShowExternalWallets(modalState.externalWalletsInitialized);
setTimeout(() => {
setTransition("slide-exit");
}, 300);
},
children: t("modal.external.connect")
})
})
});
const areSocialLoginsVisible = React.useMemo(() => {
var _modalState$socialLog3, _modalState$socialLog4;
if (modalState.showExternalWalletsOnly) return false;
if (Object.keys(((_modalState$socialLog3 = modalState.socialLoginsConfig) === null || _modalState$socialLog3 === void 0 ? void 0 : _modalState$socialLog3.loginMethods) || {}).length === 0) return false;
const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog4 = modalState.socialLoginsConfig) === null || _modalState$socialLog4 === void 0 ? void 0 : _modalState$socialLog4.loginMethods) || {}).some(([k, v]) => k !== auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS && v.showOnModal !== false);
if (isAnySocialLoginVisible) return true;
return false;
}, [modalState.showExternalWalletsOnly, (_modalState$socialLog5 = modalState.socialLoginsConfig) === null || _modalState$socialLog5 === void 0 ? void 0 : _modalState$socialLog5.loginMethods]);
base.log.info("modal state", modalState, areSocialLoginsVisible);
const isEmailPasswordlessLoginVisible = React.useMemo(() => {
var _modalState$socialLog6;
return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[auth.LOGIN_PROVIDER.EMAIL_PASSWORDLESS]) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.showOnModal;
}, [(_modalState$socialLog7 = modalState.socialLoginsConfig) === null || _modalState$socialLog7 === void 0 ? void 0 : _modalState$socialLog7.loginMethods]);
const isSmsPasswordlessLoginVisible = React.useMemo(() => {
var _modalState$socialLog8;
return (_modalState$socialLog8 = modalState.socialLoginsConfig) === null || _modalState$socialLog8 === void 0 || (_modalState$socialLog8 = _modalState$socialLog8.loginMethods[auth.LOGIN_PROVIDER.SMS_PASSWORDLESS]) === null || _modalState$socialLog8 === void 0 ? void 0 : _modalState$socialLog8.showOnModal;
}, [(_modalState$socialLog9 = modalState.socialLoginsConfig) === null || _modalState$socialLog9 === void 0 ? void 0 : _modalState$socialLog9.loginMethods]);
return modalState.modalVisibilityDelayed && /*#__PURE__*/jsxRuntime.jsx("div", {
id: "w3a-modal",
className: "w3a-modal",
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
className: `${modalTransitionClasses.join(" ")} ${modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? "w3a--p-6 w3a--pt-7" : ""} ${(areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? "" : "wallet-adapter-container"}`,
children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
onClose: closeModal,
appLogo: appLogo,
appName: appName
}), /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a-modal__content w3ajs-content",
children: /*#__PURE__*/jsxRuntime.jsx(AdapterLoader, {
onClose: onCloseLoader,
appLogo: appLogo,
modalStatus: modalState.status,
message: t(modalState.postLoadingMessage),
adapter: modalState.detailedLoaderAdapter,
adapterName: modalState.detailedLoaderAdapterName
})
})]
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
className: `transition-wrapper ${transition}`,
children: (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
onClose: closeModal,
appLogo: appLogo,
appName: appName
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "w3a-modal__content w3ajs-content",
children: [areSocialLoginsVisible ? /*#__PURE__*/jsxRuntime.jsx(SocialLogins, {
handleSocialLoginClick: params => preHandleSocialWalletClick(params),
socialLoginsConfig: modalState.socialLoginsConfig
}) : null, (isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && /*#__PURE__*/jsxRuntime.jsx(SocialLoginPasswordless, {
isEmailVisible: isEmailPasswordlessLoginVisible,
isSmsVisible: isSmsPasswordlessLoginVisible,
adapter: (_modalState$socialLog10 = modalState.socialLoginsConfig) === null || _modalState$socialLog10 === void 0 ? void 0 : _modalState$socialLog10.adapter,
handleSocialLoginClick: params => preHandleSocialWalletClick(params),
isPrimaryBtn: isEmailPrimary
}), modalState.hasExternalWallets && externalWalletButton]
})]
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
className: "w3a-modal__content_external_wallet w3ajs-content",
children: /*#__PURE__*/jsxRuntime.jsx(ExternalWallets, {
modalStatus: modalState.status,
showBackButton: areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible,
handleExternalWalletClick: preHandleExternalWalletClick,
chainNamespace: chainNamespace,
walletConnectUri: modalState.walletConnectUri,
config: modalState.externalWalletsConfig,
hideExternalWallets: () => setModalState(prevState => {
return _objectSpread(_objectSpread({}, prevState), {}, {
externalWalletsVisibility: false
});
}),
walletRegistry: walletRegistry,
closeModal: closeModal
})
})
}), /*#__PURE__*/jsxRuntime.jsx(Footer, {})]
})
});
}
module.exports = Modal;