@web3auth/modal/dist/lib.esm/packages/modal/src/ui/components/Loader/Loader.js

Multi chain wallet aggregator for web3Auth

import { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { MODAL_STATUS } from '../../interfaces.js';
import i18nInstance from '../../localeImport.js';
import Image from '../Image/Image.js';
import PulseLoader from '../PulseLoader/PulseLoader.js';
import { jsxs, jsx } from 'react/jsx-runtime';

/**
 * ConnectingStatus component
 * @param props - ConnectingStatusType
 * @returns ConnectingStatus component
 */
function ConnectingStatus(props) {
  const [t] = useTranslation(undefined, {
    i18n: i18nInstance
  });
  const {
    connector,
    appLogo,
    connectorName
  } = props;
  const providerIcon = useMemo(() => connector === "twitter" ? /*#__PURE__*/jsx(Image, {
    imageId: "login-x-dark"
  }) : /*#__PURE__*/jsx(Image, {
    imageId: `login-${connector}`,
    height: "40",
    width: "40"
  }), [connector]);
  return /*#__PURE__*/jsxs("div", {
    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
    children: [/*#__PURE__*/jsxs("div", {
      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
      children: [/*#__PURE__*/jsx("figure", {
        className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
        children: /*#__PURE__*/jsx("img", {
          src: appLogo,
          alt: "",
          className: "w3a--size-full w3a--object-contain"
        })
      }), /*#__PURE__*/jsx(PulseLoader, {}), providerIcon]
    }), /*#__PURE__*/jsxs("div", {
      className: "w3a--flex w3a--flex-col w3a--gap-y-1",
      children: [/*#__PURE__*/jsx("div", {
        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
        children: t("modal.adapter-loader.message1", {
          adapter: connectorName
        })
      }), /*#__PURE__*/jsx("div", {
        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
        children: t("modal.adapter-loader.message2", {
          adapter: connectorName
        })
      })]
    })]
  });
}

/**
 * ConnectedStatus component
 * @param props - ConnectedStatusType
 * @returns ConnectedStatus component
 */
function ConnectedStatus(props) {
  const {
    message
  } = props;
  return /*#__PURE__*/jsxs("div", {
    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
    children: [/*#__PURE__*/jsx("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      fill: "none",
      viewBox: "0 0 20 20",
      className: "w3a--connected-logo",
      children: /*#__PURE__*/jsx("path", {
        fill: "currentColor",
        fillRule: "evenodd",
        d: "M6.267 3.455a3.07 3.07 0 0 0 1.745-.723 3.066 3.066 0 0 1 3.976 0 3.07 3.07 0 0 0 1.745.723 3.066 3.066 0 0 1 2.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 0 1 0 3.976 3.07 3.07 0 0 0-.723 1.745 3.066 3.066 0 0 1-2.812 2.812 3.07 3.07 0 0 0-1.745.723 3.066 3.066 0 0 1-3.976 0 3.07 3.07 0 0 0-1.745-.723 3.066 3.066 0 0 1-2.812-2.812 3.07 3.07 0 0 0-.723-1.745 3.066 3.066 0 0 1 0-3.976 3.07 3.07 0 0 0 .723-1.745 3.066 3.066 0 0 1 2.812-2.812m7.44 5.252a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z",
        clipRule: "evenodd"
      })
    }), /*#__PURE__*/jsx("p", {
      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
      children: message
    })]
  });
}

/**
 * ErroredStatus component
 * @param props - ErroredStatusType
 * @returns ErroredStatus component
 */
function ErroredStatus(props) {
  const {
    message
  } = props;
  return /*#__PURE__*/jsxs("div", {
    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
    children: [/*#__PURE__*/jsx("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      fill: "none",
      viewBox: "0 0 20 20",
      className: "w3a--error-logo",
      children: /*#__PURE__*/jsx("path", {
        fill: "currentColor",
        fillRule: "evenodd",
        d: "M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1",
        clipRule: "evenodd"
      })
    }), /*#__PURE__*/jsx("p", {
      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
      children: message
    })]
  });
}

/**
 * Loader component
 * @param props - LoaderProps
 * @returns Loader component
 */
function Loader(props) {
  const {
    connector,
    connectorName,
    modalStatus,
    onClose,
    appLogo,
    message
  } = props;
  useEffect(() => {
    if (modalStatus === MODAL_STATUS.CONNECTED) {
      setTimeout(() => {
        onClose();
      }, 1000);
    }
  }, [modalStatus, onClose]);
  return /*#__PURE__*/jsxs("div", {
    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
    children: [modalStatus === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx(ConnectingStatus, {
      connector: connector,
      connectorName: connectorName,
      appLogo: appLogo
    }), modalStatus === MODAL_STATUS.CONNECTED && /*#__PURE__*/jsx(ConnectedStatus, {
      message: message
    }), modalStatus === MODAL_STATUS.ERRORED && /*#__PURE__*/jsx(ErroredStatus, {
      message: message
    })]
  });
}

export { Loader as default };