@web3auth/ui
Version:
Ui modal for web3Auth
310 lines (303 loc) • 13 kB
JavaScript
'use strict';
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
require('./css/web3auth.css.js');
var auth = require('@web3auth/auth');
var base = require('@web3auth/base');
var client = require('react-dom/client');
var Modal = require('./components/Modal.js');
var ThemeContext = require('./context/ThemeContext.js');
var interfaces = require('./interfaces.js');
var localeImport = require('./localeImport.js');
var utils = require('./utils.js');
var jsxRuntime = require('react/jsx-runtime');
function createWrapper(parentZIndex) {
const existingWrapper = document.getElementById("w3a-parent-container");
if (existingWrapper) existingWrapper.remove();
const parent = document.createElement("section");
parent.classList.add("w3a-parent-container");
parent.setAttribute("id", "w3a-parent-container");
parent.style.zIndex = parentZIndex;
parent.style.position = "relative";
const wrapper = document.createElement("section");
wrapper.setAttribute("id", "w3a-container");
parent.appendChild(wrapper);
document.body.appendChild(parent);
return wrapper;
}
class LoginModal extends auth.SafeEventEmitter {
constructor(_uiConfig) {
super();
_defineProperty(this, "uiConfig", void 0);
_defineProperty(this, "stateEmitter", void 0);
_defineProperty(this, "chainNamespace", void 0);
_defineProperty(this, "walletRegistry", void 0);
_defineProperty(this, "initModal", async () => {
const darkState = {
isDark: this.isDark
};
const useLang = this.uiConfig.defaultLanguage || auth.LANGUAGES.en;
// Load new language resource
if (useLang === auth.LANGUAGES.de) {
Promise.resolve().then(function () { return require('./i18n/german.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.ja) {
Promise.resolve().then(function () { return require('./i18n/japanese.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.ko) {
Promise.resolve().then(function () { return require('./i18n/korean.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.zh) {
Promise.resolve().then(function () { return require('./i18n/mandarin.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.es) {
Promise.resolve().then(function () { return require('./i18n/spanish.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.fr) {
Promise.resolve().then(function () { return require('./i18n/french.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.pt) {
Promise.resolve().then(function () { return require('./i18n/portuguese.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.nl) {
Promise.resolve().then(function () { return require('./i18n/dutch.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.tr) {
Promise.resolve().then(function () { return require('./i18n/turkish.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
} else if (useLang === auth.LANGUAGES.en) {
Promise.resolve().then(function () { return require('./i18n/english.json.js'); }).then(messages => {
localeImport.addResourceBundle(useLang, "translation", messages.default);
return localeImport.changeLanguage(useLang);
}).catch(error => {
base.log.error(error);
});
}
return new Promise(resolve => {
var _this$uiConfig;
this.stateEmitter.once("MOUNTED", () => {
base.log.info("rendered");
this.setState({
status: interfaces.MODAL_STATUS.INITIALIZED
});
return resolve();
});
const container = createWrapper(this.uiConfig.modalZIndex);
if (darkState.isDark) {
container.classList.add("w3a--dark");
} else {
container.classList.remove("w3a--dark");
}
const root = client.createRoot(container);
root.render(/*#__PURE__*/jsxRuntime.jsx(ThemeContext.ThemedContext.Provider, {
value: darkState,
children: /*#__PURE__*/jsxRuntime.jsx(Modal, {
closeModal: this.closeModal,
stateListener: this.stateEmitter,
handleShowExternalWallets: this.handleShowExternalWallets,
handleExternalWalletClick: this.handleExternalWalletClick,
handleSocialLoginClick: this.handleSocialLoginClick,
appLogo: darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight,
appName: this.uiConfig.appName,
chainNamespace: this.chainNamespace,
walletRegistry: this.walletRegistry
})
}));
if ((_this$uiConfig = this.uiConfig) !== null && _this$uiConfig !== void 0 && _this$uiConfig.theme) {
const rootElement = document.getElementById("w3a-parent-container");
auth.applyWhiteLabelTheme(rootElement, this.uiConfig.theme);
}
});
});
_defineProperty(this, "addSocialLogins", (adapter, loginMethods, loginMethodsOrder, uiConfig) => {
this.setState({
socialLoginsConfig: {
adapter,
loginMethods,
loginMethodsOrder,
uiConfig
}
});
base.log.info("addSocialLogins", adapter, loginMethods, loginMethodsOrder, uiConfig);
});
_defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
this.setState({
externalWalletsConfig,
externalWalletsInitialized: true,
showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly),
externalWalletsVisibility: true
});
});
_defineProperty(this, "open", () => {
this.setState({
modalVisibility: true
});
this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, true);
});
_defineProperty(this, "closeModal", () => {
this.setState({
modalVisibility: false,
externalWalletsVisibility: false
});
this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, false);
});
_defineProperty(this, "initExternalWalletContainer", () => {
this.setState({
hasExternalWallets: true
});
});
_defineProperty(this, "handleShowExternalWallets", status => {
this.emit(interfaces.LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, {
externalWalletsInitialized: status
});
});
_defineProperty(this, "handleExternalWalletClick", params => {
base.log.info("external wallet clicked", params);
const {
adapter
} = params;
this.emit(interfaces.LOGIN_MODAL_EVENTS.LOGIN, {
adapter
});
});
_defineProperty(this, "handleSocialLoginClick", params => {
base.log.info("social login clicked", params);
const {
adapter,
loginParams
} = params;
this.emit(interfaces.LOGIN_MODAL_EVENTS.LOGIN, {
adapter,
loginParams: {
loginProvider: loginParams.loginProvider,
login_hint: loginParams.login_hint,
name: loginParams.name
}
});
});
_defineProperty(this, "setState", newState => {
this.stateEmitter.emit("STATE_UPDATED", newState);
});
_defineProperty(this, "updateWalletConnect", walletConnectUri => {
if (!walletConnectUri) return;
this.setState({
walletConnectUri
});
});
_defineProperty(this, "handleAdapterData", adapterData => {
if (adapterData.adapterName === base.WALLET_ADAPTERS.WALLET_CONNECT_V2) {
const walletConnectData = adapterData.data;
this.updateWalletConnect(walletConnectData.uri);
}
});
_defineProperty(this, "subscribeCoreEvents", listener => {
listener.on(base.ADAPTER_EVENTS.CONNECTING, data => {
base.log.info("connecting with adapter", data);
// don't show loader in case of wallet connect, because currently it listens for incoming for incoming
// connections without any user interaction.
if ((data === null || data === void 0 ? void 0 : data.adapter) !== base.WALLET_ADAPTERS.WALLET_CONNECT_V2) {
// const provider = data?.loginProvider || "";
this.setState({
status: interfaces.MODAL_STATUS.CONNECTING
});
}
});
listener.on(base.ADAPTER_EVENTS.CONNECTED, data => {
base.log.debug("connected with adapter", data);
// only show success if not being reconnected again.
if (!data.reconnected) {
this.setState({
status: interfaces.MODAL_STATUS.CONNECTED,
modalVisibility: true,
postLoadingMessage: "modal.post-loading.connected"
});
} else {
this.setState({
status: interfaces.MODAL_STATUS.CONNECTED
});
}
});
// TODO: send adapter name in error
listener.on(base.ADAPTER_EVENTS.ERRORED, error => {
base.log.error("error", error, error.message);
if (error.code === 5000) {
if (this.uiConfig.displayErrorsOnModal) this.setState({
modalVisibility: true,
postLoadingMessage: error.message || "modal.post-loading.something-wrong",
status: interfaces.MODAL_STATUS.ERRORED
});else this.setState({
modalVisibility: false
});
} else {
this.setState({
modalVisibility: true,
status: interfaces.MODAL_STATUS.INITIALIZED
});
}
});
listener.on(base.ADAPTER_EVENTS.DISCONNECTED, () => {
this.setState({
status: interfaces.MODAL_STATUS.INITIALIZED,
externalWalletsVisibility: false
});
// this.toggleMessage("");
});
listener.on(base.ADAPTER_EVENTS.ADAPTER_DATA_UPDATED, adapterData => {
this.handleAdapterData(adapterData);
});
});
this.uiConfig = _uiConfig;
if (!_uiConfig.logoDark) this.uiConfig.logoDark = interfaces.DEFAULT_LOGO_DARK;
if (!_uiConfig.logoLight) this.uiConfig.logoLight = interfaces.DEFAULT_LOGO_LIGHT;
if (!_uiConfig.mode) this.uiConfig.mode = "light";
if (!_uiConfig.modalZIndex) this.uiConfig.modalZIndex = "99998";
if (typeof _uiConfig.displayErrorsOnModal === "undefined") this.uiConfig.displayErrorsOnModal = true;
if (!_uiConfig.appName) this.uiConfig.appName = "Web3Auth";
if (!_uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = utils.getUserLanguage(_uiConfig.defaultLanguage);
this.stateEmitter = new auth.SafeEventEmitter();
this.chainNamespace = _uiConfig.chainNamespace;
this.walletRegistry = _uiConfig.walletRegistry;
this.subscribeCoreEvents(this.uiConfig.adapterListener);
}
get isDark() {
return this.uiConfig.mode === "dark" || this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
}
exports.LoginModal = LoginModal;