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

Ui modal for web3Auth

'use strict';

var Bowser = require('bowser');
var copyToClipboard = require('copy-to-clipboard');
var React = require('react');
var reactI18next = require('react-i18next');
var reactQrcodeLogo = require('react-qrcode-logo');
var ThemeContext = require('../context/ThemeContext.js');
var interfaces = require('../interfaces.js');
var localeImport = require('../localeImport.js');
var jsxRuntime = require('react/jsx-runtime');

function WalletConnect(props) {
  var _getComputedStyle;
  const {
    walletConnectUri,
    logoImage,
    primaryColor
  } = props;
  const {
    isDark
  } = React.useContext(ThemeContext.ThemedContext);
  const isDesktop = React.useMemo(() => {
    const browser = Bowser.getParser(window.navigator.userAgent);
    return browser.getPlatformType() === "desktop";
  }, []);
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const [isCopied, setIsCopied] = React.useState(false);
  const handleCopy = () => {
    copyToClipboard(walletConnectUri);
    setIsCopied(true);
    setTimeout(() => {
      setIsCopied(false);
    }, 3000);
  };
  const root = document.documentElement;
  const whiteColor = "#FFFFFF";
  const blackColor = "#000000";
  const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
  const qrColor = primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: "w3ajs-wallet-connect w3a-wallet-connect",
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "w3ajs-wallet-connect__container w3a-wallet-connect__container",
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "w3a-wallet-connect__container-desktop",
        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "w3ajs-wallet-connect-qr w3a-wallet-connect-qr w3a--rounded-md w3a--mb-2",
          tabIndex: 0,
          role: "button",
          onClick: handleCopy,
          onKeyDown: () => copyToClipboard(walletConnectUri),
          children: [isCopied && /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "tooltip",
            children: ["Copied", /*#__PURE__*/jsxRuntime.jsx("div", {
              className: "w3a--absolute w3a--border-8 w3a--border-b-0 w3a--border-r-transparent w3a--border-t-app-gray-900 w3a--border-l-transparent w3a--top-[100%] w3a--left-[calc(50%_-_8px)]"
            })]
          }), /*#__PURE__*/jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
            size: isDesktop ? 300 : 260,
            eyeRadius: 5,
            qrStyle: "dots",
            removeQrCodeBehindLogo: true,
            logoImage: logoImage || interfaces.WALLET_CONNECT_LOGO,
            value: walletConnectUri,
            logoHeight: 32,
            logoWidth: 32,
            logoPadding: 10,
            eyeColor: isDark ? whiteColor : qrColor,
            bgColor: isDark ? modalColor : whiteColor,
            fgColor: isDark ? whiteColor : blackColor
          })]
        }), /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "text-xs",
          children: t("modal.external.walletconnect-copy")
        })]
      })
    })
  });
}
var WalletConnect$1 = /*#__PURE__*/React.memo(WalletConnect);

module.exports = WalletConnect$1;