@turnkey/react-wallet-kit/dist/components/auth/wallet/WalletButton.js

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var Buttons = require('../../design/Buttons.js');
var Svg = require('../../design/Svg.js');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var react = require('react');
var clsx = require('clsx');
var ConnectedIndicator = require('../../design/ConnectedIndicator.js');
var constants = require('./constants.js');

function WalletButton(props) {
  const {
    icon,
    name,
    chains,
    onClick,
    shouldShowDisconnect = false,
    isMobile = false
  } = props;
  const [isHovering, setIsHovering] = react.useState(false);
  return jsxRuntime.jsxs(Buttons.ActionButton, {
    ...(!isMobile && {
      // This looks weird on mobile since there's no hover state
      onMouseEnter: () => setIsHovering(true),
      onMouseLeave: () => setIsHovering(false)
    }),
    onClick: onClick,
    style: {
      height: `${constants.WALLET_BUTTON_HEIGHT}px`
    },
    className: "relative flex items-center justify-between w-full text-inherit bg-button-light dark:bg-button-dark overflow-hidden",
    children: [jsxRuntime.jsxs("div", {
      className: "flex items-center gap-2 overflow-hidden w-3/4 ",
      children: [typeof icon === "string" ? jsxRuntime.jsx("img", {
        src: icon,
        alt: name,
        className: "size-6 rounded-full flex-shrink-0"
      }) : icon, jsxRuntime.jsx("span", {
        className: "text-ellipsis whitespace-nowrap overflow-hidden",
        children: name
      })]
    }), jsxRuntime.jsx("div", {
      className: clsx(`flex items-center transition-all gap-1`),
      children: chains.map((c, idx) => {
        let Logo;
        if (c.namespace === "ethereum") {
          Logo = Svg.EthereumLogo;
        } else if (c.namespace === "solana") {
          Logo = Svg.SolanaLogo;
        } else {
          // we should never reach here
          // if we do then it means we forgot to update the auth component after adding a new chain
          throw new Error(`Unsupported provider namespace. Expected Ethereum or Solana.`);
        }
        const delay = 50 + idx * 30; // Staggered delay: leftmost has largest
        return jsxRuntime.jsxs("div", {
          style: {
            transitionDelay: `${delay}ms`
          },
          className: clsx("relative", "size-4", "transition-all duration-200", isHovering ? "-translate-x-8" : "translate-x-0"),
          children: [jsxRuntime.jsx(Logo, {
            className: "size-4"
          }), c.isConnected && jsxRuntime.jsx(ConnectedIndicator.ConnectedIndicator, {
            isPinging: isHovering
          })]
        }, c.namespace);
      })
    }), jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
      className: clsx(`absolute transition-all duration-200`, isHovering ? "right-4" : "-right-4", chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
      size: chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? "lg" : "1x",
      icon: chains.length === 1 && chains[0].isConnected && shouldShowDisconnect ? freeSolidSvgIcons.faClose : freeSolidSvgIcons.faChevronRight
    })]
  });
}

exports.WalletButton = WalletButton;
//# sourceMappingURL=WalletButton.js.map