@web3auth/ui/dist/lib.cjs/packages/ui/src/components/AdapterLoader.js

Ui modal for web3Auth

'use strict';

var base = require('@web3auth/base');
var React = require('react');
var reactI18next = require('react-i18next');
var interfaces = require('../interfaces.js');
var localeImport = require('../localeImport.js');
var Icon = require('./Icon.js');
var Image = require('./Image.js');
var jsxRuntime = require('react/jsx-runtime');

const closeIcon = /*#__PURE__*/jsxRuntime.jsx(Icon, {
  iconName: "x-light",
  darkIconName: "close"
});
function DetailedLoader(props) {
  const {
    adapter,
    appLogo,
    message,
    modalStatus,
    adapterName,
    onClose
  } = props;
  const providerIcon = adapter === "twitter" ? /*#__PURE__*/jsxRuntime.jsx(Image, {
    imageId: "login-x-dark"
  }) : /*#__PURE__*/jsxRuntime.jsx(Image, {
    imageId: `login-${adapter}`,
    height: "30",
    width: "30"
  });
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  React.useEffect(() => {
    base.log.debug("adapter loader re-rendering");
    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
      setTimeout(() => {
        onClose();
      }, 3000);
    }
  }, [modalStatus, onClose]);
  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "w3ajs-modal-loader w3a-modal__loader w3a--h-full",
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "w3a-modal__loader-content",
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "w3a-modal__loader-info",
        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "w3a-modal__loader-bridge",
            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
              className: "w3a-modal__loader-app-logo",
              children: [/*#__PURE__*/jsxRuntime.jsx("img", {
                src: appLogo,
                className: "w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10",
                alt: ""
              }), /*#__PURE__*/jsxRuntime.jsx("img", {
                src: appLogo,
                className: "w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10",
                alt: ""
              })]
            }), /*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a-modal__connector",
              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
                className: "w3a-modal__connector-beat",
                children: [/*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {}), /*#__PURE__*/jsxRuntime.jsx("div", {})]
              })
            }), /*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a-modal__loader-social-logo",
              children: providerIcon
            })]
          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a-modal__loader-bridge-message",
              children: t("modal.adapter-loader.message1", {
                adapter: adapterName
              })
            }), /*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a-modal__loader-bridge-message",
              children: t("modal.adapter-loader.message2", {
                adapter: adapterName
              })
            })]
          })]
        }), modalStatus === base.ADAPTER_STATUS.CONNECTED && /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "w3a--flex w3a--flex-col w3a--items-center",
          children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
            iconName: "connected"
          }), /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4",
            children: message
          })]
        }), modalStatus === base.ADAPTER_STATUS.ERRORED && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
          children: message
        })]
      })
    }), (modalStatus === base.ADAPTER_STATUS.CONNECTED || modalStatus === base.ADAPTER_STATUS.ERRORED) && /*#__PURE__*/jsxRuntime.jsx("button", {
      type: "button",
      className: "w3a-header__button w3ajs-loader-close-btn",
      onClick: onClose,
      children: closeIcon
    })]
  }) : null;
}

module.exports = DetailedLoader;