@web3auth/modal/dist/lib.esm/packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js

Multi chain wallet aggregator for web3Auth

import { useTranslation } from 'react-i18next';
import i18nInstance from '../../../localeImport.js';
import { getIcons } from '../../../utils.js';
import Image from '../../Image/Image.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const ConnectWalletChainNamespaceSelect = props => {
  const {
    isDark,
    wallet,
    handleExternalWalletClick
  } = props;
  const [t] = useTranslation(undefined, {
    i18n: i18nInstance
  });
  const chainNamespaces = wallet.chainNamespaces.sort().map(chainNamespace => {
    const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
    const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
    return {
      chainNamespace,
      displayName,
      imageId: `chain-${imageId}`
    };
  });
  return /*#__PURE__*/jsxs("div", {
    children: [/*#__PURE__*/jsx("div", {
      className: "w3a--flex w3a--items-center w3a--justify-center",
      children: /*#__PURE__*/jsx("p", {
        className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
        children: t("modal.external.select-chain")
      })
    }), /*#__PURE__*/jsx("div", {
      className: "w3a--my-6 w3a--flex w3a--justify-center",
      children: /*#__PURE__*/jsx(Image, {
        imageId: `login-${wallet.name}`,
        hoverImageId: `login-${wallet.name}`,
        fallbackImageId: "wallet",
        height: "100",
        width: "100",
        isButton: true,
        extension: wallet.imgExtension
      })
    }), /*#__PURE__*/jsx("p", {
      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500",
      children: t("modal.external.select-chain-description", {
        wallet: wallet.displayName
      })
    }), /*#__PURE__*/jsx("ul", {
      className: "w3a--flex w3a--flex-col w3a--gap-3",
      children: chainNamespaces.map(({
        chainNamespace,
        displayName,
        imageId
      }) => /*#__PURE__*/jsx("li", {
        children: /*#__PURE__*/jsxs("button", {
          type: "button",
          className: "w3a--btn w3a--group w3a--relative w3a--h-11 w3a--w-full w3a--items-center !w3a--justify-between w3a--overflow-hidden w3a--rounded-full",
          onClick: () => handleExternalWalletClick({
            connector: wallet.name,
            chainNamespace
          }),
          children: [/*#__PURE__*/jsxs("div", {
            className: "w3a--flex w3a--items-center",
            children: [/*#__PURE__*/jsx(Image, {
              imageId: imageId,
              hoverImageId: imageId,
              fallbackImageId: "wallet",
              height: "24",
              width: "24",
              isButton: true,
              extension: "svg"
            }), /*#__PURE__*/jsx("p", {
              className: "w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize",
              children: displayName
            })]
          }), /*#__PURE__*/jsx("img", {
            id: "chain-namespace-arrow",
            className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
            src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
            alt: "arrow"
          })]
        })
      }, chainNamespace))
    })]
  });
};

export { ConnectWalletChainNamespaceSelect as default };