@turnkey/react-wallet-kit/dist/components/auth/wallet/ExternalWalletChainSelector.mjs

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

import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { ActionButton } from '../../design/Buttons.mjs';
import { EthereumLogo, SolanaLogo } from '../../design/Svg.mjs';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClose, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { useState, useEffect } from 'react';
import clsx from 'clsx';
import { isEthereumProvider, isSolanaProvider } from '@turnkey/core';
import { useModal } from '../../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../../providers/client/Hook.mjs';
import { ConnectedIndicator } from '../../design/ConnectedIndicator.mjs';
import { canDisconnect } from './utils.mjs';

function ExternalWalletChainSelector(props) {
  var _providers$, _providers$0$info$nam, _providers$2;
  var providers = props.providers,
    onSelect = props.onSelect,
    onDisconnect = props.onDisconnect;
  var _useTurnkey = useTurnkey(),
    walletProviders = _useTurnkey.walletProviders;
  var _useModal = useModal(),
    isMobile = _useModal.isMobile,
    popPage = _useModal.popPage;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    loadingProvider = _useState2[0],
    setLoadingProvider = _useState2[1];
  // 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
  var currentProviders = providers.map(function (inputProvider) {
    return walletProviders.find(function (p) {
      return 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(function (p) {
    return 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
  useEffect(function () {
    if (currentProviders.length === 0) {
      popPage();
    }
  }, [currentProviders.length, popPage]);
  var shouldShowDisconnect = onDisconnect !== undefined;
  var handleSelect = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(provider) {
      return _regenerator().w(function (_context) {
        while (1) switch (_context.n) {
          case 0:
            setLoadingProvider(provider);
            if (!canDisconnect(provider, shouldShowDisconnect)) {
              _context.n = 2;
              break;
            }
            _context.n = 1;
            return onDisconnect(provider);
          case 1:
            _context.n = 3;
            break;
          case 2:
            _context.n = 3;
            return onSelect(provider);
          case 3:
            setLoadingProvider(undefined);
          case 4:
            return _context.a(2);
        }
      }, _callee);
    }));
    return function handleSelect(_x) {
      return _ref.apply(this, arguments);
    };
  }();
  return jsxs("div", {
    className: clsx("flex flex-col w-72 gap-4 mt-11 items-center justify-center", isMobile ? "w-full" : "w-72"),
    children: [jsx("img", {
      src: (_providers$ = providers[0]) === null || _providers$ === void 0 ? void 0 : _providers$.info.icon,
      className: "size-14 rounded-full"
    }), jsxs("span", {
      className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
      children: [(_providers$0$info$nam = (_providers$2 = providers[0]) === null || _providers$2 === void 0 ? void 0 : _providers$2.info.name) !== null && _providers$0$info$nam !== void 0 ? _providers$0$info$nam : "This wallet provider", " supports multiple chains. Select which chain you would like to use."]
    }), jsx("div", {
      className: "w-full flex flex-col gap-2",
      children: currentProviders.map(function (p) {
        var _p$connectedAddresses, _p$connectedAddresses2;
        var _useState3 = useState(false),
          _useState4 = _slicedToArray(_useState3, 2),
          isHovering = _useState4[0],
          setIsHovering = _useState4[1];
        return jsxs(ActionButton, _objectSpread2(_objectSpread2({
          loading: loadingProvider === p,
          loadingText: "Preparing...",
          onClick: function onClick() {
            return handleSelect(p);
          }
        }, !isMobile && {
          // This looks weird on mobile since there's no hover state
          onMouseEnter: function onMouseEnter() {
            return setIsHovering(true);
          },
          onMouseLeave: function onMouseLeave() {
            return 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: [isEthereumProvider(p) ? jsxs("div", {
            className: "relative",
            children: [jsx(EthereumLogo, {
              className: "size-5"
            }), canDisconnect(p, shouldShowDisconnect) && jsx(ConnectedIndicator, {
              isPinging: true
            })]
          }) : isSolanaProvider(p) ? jsxs("div", {
            className: "relative",
            children: [jsx(SolanaLogo, {
              className: "size-5"
            }), canDisconnect(p, shouldShowDisconnect) && jsx(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
          jsx("div", {
            className: "relative",
            children: jsx("span", {
              className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
              children: "?"
            })
          }), jsxs("div", {
            className: "flex flex-col items-start",
            children: [isEthereumProvider(p) ? "EVM" : 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
            "?", canDisconnect(p, shouldShowDisconnect) && jsxs("span", {
              className: "text-xs text-icon-text-light dark:text-icon-text-dark",
              children: ["Connected: ", (_p$connectedAddresses = p.connectedAddresses[0]) === null || _p$connectedAddresses === void 0 ? void 0 : _p$connectedAddresses.slice(0, 4), "...", (_p$connectedAddresses2 = p.connectedAddresses[0]) === null || _p$connectedAddresses2 === void 0 ? void 0 : _p$connectedAddresses2.slice(-3)]
            })]
          }), jsx(FontAwesomeIcon, {
            className: clsx("absolute transition-all duration-200", isHovering ? "right-4" : "-right-4", canDisconnect(p, shouldShowDisconnect) ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
            size: canDisconnect(p, shouldShowDisconnect) ? "lg" : "1x",
            icon: canDisconnect(p, shouldShowDisconnect) ? faClose : faChevronRight
          })]
        }), p.chainInfo.namespace);
      })
    })]
  });
}

export { ExternalWalletChainSelector };
//# sourceMappingURL=ExternalWalletChainSelector.mjs.map