@turnkey/react-wallet-kit/dist/components/auth/wallet/WalletConnectAppChainSelector.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 core = require('@turnkey/core');
var Hook = require('../../../providers/modal/Hook.js');

/**
 * A chain selector specifically for WalletConnect app entries.
 * Displays available chains for a wallet app and allows the user to select one.
 */
function WalletConnectAppChainSelector(props) {
  const {
    apps,
    onSelect
  } = props;
  const {
    isMobile
  } = Hook.useModal();
  const [loadingApp, setLoadingApp] = react.useState();
  const handleSelect = async app => {
    setLoadingApp(app);
    try {
      await onSelect(app);
    } finally {
      setLoadingApp(undefined);
    }
  };
  const first = apps[0];
  return jsxRuntime.jsxs("div", {
    className: clsx("flex flex-col w-72 gap-4 mt-11 items-center justify-center", isMobile ? "w-full" : "w-72"),
    children: [jsxRuntime.jsx("img", {
      src: first?.icon,
      className: "size-14 rounded-full"
    }), jsxRuntime.jsxs("span", {
      className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
      children: [first?.name ?? "This wallet", " supports multiple chains. Select which chain you would like to use."]
    }), jsxRuntime.jsx("div", {
      className: "w-full flex flex-col gap-2",
      children: apps.map(app => {
        const [isHovering, setIsHovering] = react.useState(false);
        const isEthereum = app.chain === core.Chain.Ethereum;
        const isSolana = app.chain === core.Chain.Solana;
        return jsxRuntime.jsxs(Buttons.ActionButton, {
          loading: loadingApp === app,
          loadingText: "Preparing...",
          onClick: () => handleSelect(app),
          ...(!isMobile && {
            onMouseEnter: () => setIsHovering(true),
            onMouseLeave: () => setIsHovering(false)
          }),
          className: "relative overflow-hidden flex items-center justify-start gap-2 w-full text-inherit bg-button-light dark:bg-button-dark",
          children: [isEthereum ? jsxRuntime.jsx(Svg.EthereumLogo, {
            className: "size-5"
          }) : isSolana ? jsxRuntime.jsx(Svg.SolanaLogo, {
            className: "size-5"
          }) : jsxRuntime.jsx("span", {
            className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
            children: "?"
          }), jsxRuntime.jsx("div", {
            className: "flex flex-col items-start",
            children: isEthereum ? "EVM" : isSolana ? "Solana" : "Unknown"
          }), jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
            className: clsx("absolute transition-all duration-200 text-icon-text-light dark:text-icon-text-dark", isHovering ? "right-4" : "-right-4"),
            icon: freeSolidSvgIcons.faChevronRight
          })]
        }, app.chain);
      })
    })]
  });
}

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