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

Ui modal for web3Auth

'use strict';

var reactI18next = require('react-i18next');
var localeImport = require('../../localeImport.js');
var Button = require('../Button/Button.js');
var Image = require('../Image.js');
var jsxRuntime = require('react/jsx-runtime');

function ExternalWalletButton(props) {
  const {
    button,
    handleWalletClick
  } = props;
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  return /*#__PURE__*/jsxRuntime.jsxs(Button, {
    variant: "tertiary",
    type: "button",
    onClick: () => handleWalletClick(button),
    className: "w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
    title: button.name,
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "w3a--flex w3a--items-center",
      children: [/*#__PURE__*/jsxRuntime.jsx(Image, {
        imageId: `login-${button.name}`,
        hoverImageId: `login-${button.name}`,
        fallbackImageId: "wallet",
        height: "24",
        width: "24",
        isButton: true,
        extension: button.imgExtension
      }), /*#__PURE__*/jsxRuntime.jsx("p", {
        className: "w3a--ml-2 w3a--text-left w3a--text-sm",
        children: button.displayName
      })]
    }), button.hasInjectedWallet && /*#__PURE__*/jsxRuntime.jsx("span", {
      className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
      children: t("modal.external.installed")
    })]
  });
}

module.exports = ExternalWalletButton;