@turnkey/react-wallet-kit/dist/components/auth/wallet/ExternalWalletChainSelector.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$1 = require('../../../providers/modal/Hook.js');
var Hook = require('../../../providers/client/Hook.js');
var ConnectedIndicator = require('../../design/ConnectedIndicator.js');
var utils = require('./utils.js');

function ExternalWalletChainSelector(props) {
  const {
    providers,
    onSelect,
    onDisconnect
  } = props;
  const {
    walletProviders
  } = Hook.useTurnkey();
  const {
    isMobile,
    popPage
  } = Hook$1.useModal();
  const [loadingProvider, setLoadingProvider] = react.useState();
  // we find matching providers in current state, matching by wallet identity
  // (rdns preferred, name as fallback) in addition to interfaceType + namespace
  // to avoid picking a different wallet that happens to support the same chain
  const currentProviders = providers.map(inputProvider => walletProviders.find(p => p.interfaceType === inputProvider.interfaceType && p.chainInfo.namespace === inputProvider.chainInfo.namespace && (p.info.rdns && inputProvider.info.rdns ? p.info.rdns === inputProvider.info.rdns : p.info.name === inputProvider.info.name))).filter(p => p !== undefined);
  // if no providers are found then that means that the user entered this screen
  // while WalletConnect was still initializing, and then it failed to initialize
  react.useEffect(() => {
    if (currentProviders.length === 0) {
      popPage();
    }
  }, [currentProviders.length, popPage]);
  const shouldShowDisconnect = onDisconnect !== undefined;
  const handleSelect = async provider => {
    setLoadingProvider(provider);
    if (utils.canDisconnect(provider, shouldShowDisconnect)) {
      await onDisconnect(provider);
    } else {
      await onSelect(provider);
    }
    setLoadingProvider(undefined);
  };
  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: providers[0]?.info.icon,
      className: "size-14 rounded-full"
    }), jsxRuntime.jsxs("span", {
      className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
      children: [providers[0]?.info.name ?? "This wallet provider", " supports multiple chains. Select which chain you would like to use."]
    }), jsxRuntime.jsx("div", {
      className: "w-full flex flex-col gap-2",
      children: currentProviders.map(p => {
        const [isHovering, setIsHovering] = react.useState(false);
        return jsxRuntime.jsxs(Buttons.ActionButton, {
          loading: loadingProvider === p,
          loadingText: "Preparing...",
          onClick: () => handleSelect(p),
          ...(!isMobile && {
            // This looks weird on mobile since there's no hover state
            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: [core.isEthereumProvider(p) ? jsxRuntime.jsxs("div", {
            className: "relative",
            children: [jsxRuntime.jsx(Svg.EthereumLogo, {
              className: "size-5"
            }), utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsx(ConnectedIndicator.ConnectedIndicator, {
              isPinging: true
            })]
          }) : core.isSolanaProvider(p) ? jsxRuntime.jsxs("div", {
            className: "relative",
            children: [jsxRuntime.jsx(Svg.SolanaLogo, {
              className: "size-5"
            }), utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsx(ConnectedIndicator.ConnectedIndicator, {
              isPinging: true
            })]
          }) :
          // we should never reach here
          // if we do then it means we forgot to update the auth component after adding a new chain
          jsxRuntime.jsx("div", {
            className: "relative",
            children: jsxRuntime.jsx("span", {
              className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
              children: "?"
            })
          }), jsxRuntime.jsxs("div", {
            className: "flex flex-col items-start",
            children: [core.isEthereumProvider(p) ? "EVM" : core.isSolanaProvider(p) ? "Solana" :
            // we should never reach here
            // if we do then it means we forgot to update the auth component after adding a new chain
            `?`, utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsxs("span", {
              className: "text-xs text-icon-text-light dark:text-icon-text-dark",
              children: ["Connected: ", p.connectedAddresses[0]?.slice(0, 4), "...", p.connectedAddresses[0]?.slice(-3)]
            })]
          }), jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
            className: clsx(`absolute transition-all duration-200`, isHovering ? "right-4" : "-right-4", utils.canDisconnect(p, shouldShowDisconnect) ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
            size: utils.canDisconnect(p, shouldShowDisconnect) ? "lg" : "1x",
            icon: utils.canDisconnect(p, shouldShowDisconnect) ? freeSolidSvgIcons.faClose : freeSolidSvgIcons.faChevronRight
          })]
        }, p.chainInfo.namespace);
      })
    })]
  });
}

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