@web3auth/modal/dist/lib.cjs/packages/modal/src/ui/components/Button/ButtonWallet/ButtonWallet.js

Multi chain wallet aggregator for web3Auth

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var cn = require('classnames');
var react = require('react');
var reactI18next = require('react-i18next');
var ThemeContext = require('../../../context/ThemeContext.js');
var localeImport = require('../../../localeImport.js');
var utils = require('../../../utils.js');
var Image = require('../../Image/Image.js');

function ButtonWallet(props) {
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const {
    deviceDetails,
    button,
    walletConnectUri,
    onClick,
    label,
    buttonRadius
  } = props;
  const isDark = react.useContext(ThemeContext.ThemedContext);
  const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.isInstalled, [deviceDetails, button]);
  const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
    uri: walletConnectUri,
    link: button.href
  }) : walletConnectUri, [button, walletConnectUri]);
  const handleBtnClick = () => {
    if (href && isLink) {
      window.open(href, "_blank");
    } else if (onClick) {
      onClick();
    }
  };
  return jsxRuntime.jsxs("button", {
    type: "button",
    className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 
        hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
      "w3a--rounded-full": buttonRadius === "pill",
      "w3a--rounded-lg": buttonRadius === "rounded",
      "w3a--rounded-none": buttonRadius === "square"
    }),
    onClick: handleBtnClick,
    children: [jsxRuntime.jsxs("div", {
      className: "w3a--flex w3a--items-center w3a--gap-x-2",
      children: [jsxRuntime.jsx("figure", {
        className: "w3a--size-5",
        children: jsxRuntime.jsx(Image, {
          imageData: button.icon,
          imageId: `login-${button.name}`,
          hoverImageId: `login-${button.name}`,
          fallbackImageId: "wallet",
          height: "24",
          width: "24",
          isButton: true,
          extension: button.imgExtension || "webp"
        })
      }), jsxRuntime.jsx("p", {
        className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
        children: label
      })]
    }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 \n        dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
      children: t("modal.external.installed")
    }), jsxRuntime.jsx("img", {
      id: "injected-wallet-arrow",
      className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
      src: utils.getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
      alt: "arrow"
    })]
  });
}

module.exports = ButtonWallet;