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

Ui modal for web3Auth

'use strict';

var React = require('react');
var reactI18next = require('react-i18next');
var interfaces = require('../../interfaces.js');
var localeImport = require('../../localeImport.js');
var Button = require('../Button/Button.js');
var Loader = require('../Loader.js');
var WalletConnect = require('../WalletConnect.js');
var ExternalWalletHeader = require('./ExternalWalletHeader.js');
var ExternalWalletInstall = require('./ExternalWalletInstall.js');
var jsxRuntime = require('react/jsx-runtime');

function ExternalWalletConnect(props) {
  const {
    connectButton,
    walletConnectUri,
    goBack,
    closeModal
  } = props;
  const [isWalletDownloadShown, setIsWalletDownloadShown] = React.useState(false);
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const showWalletDownload = () => {
    setIsWalletDownloadShown(true);
  };
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    children: isWalletDownloadShown ? /*#__PURE__*/jsxRuntime.jsx("div", {
      children: /*#__PURE__*/jsxRuntime.jsx(ExternalWalletInstall, {
        connectButton: connectButton,
        goBack: () => setIsWalletDownloadShown(false),
        closeModal: closeModal
      })
    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [/*#__PURE__*/jsxRuntime.jsx(ExternalWalletHeader, {
        title: connectButton.displayName,
        goBack: goBack,
        closeModal: closeModal
      }), !walletConnectUri ? /*#__PURE__*/jsxRuntime.jsx(Loader, {
        modalStatus: interfaces.MODAL_STATUS.CONNECTING,
        canEmit: false
      }) : /*#__PURE__*/jsxRuntime.jsx(WalletConnect, {
        walletConnectUri: walletConnectUri,
        logoImage: `https://images.web3auth.io/login-${connectButton.name}.${connectButton.imgExtension}`,
        primaryColor: connectButton.walletRegistryItem.primaryColor
      }), connectButton.hasInstallLinks && /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl",
        children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
          className: "w3a--text-sm w3a--truncate w3a--flex-grow-0",
          children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsxRuntime.jsx("span", {
            children: connectButton.displayName
          }), "?"]
        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
          type: "button",
          variant: "secondary",
          size: "xs",
          className: "w3a--flex-grow-1 w3a--flex-shrink-0",
          onClick: showWalletDownload,
          children: t("modal.external.get-wallet")
        })]
      })]
    })
  });
}

module.exports = ExternalWalletConnect;