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

Multi chain wallet aggregator for web3Auth

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactI18next = require('react-i18next');
var localeImport = require('../../../localeImport.js');
var utils = require('../../../utils.js');
var Image = require('../../Image/Image.js');

const ConnectWalletChainNamespaceSelect = props => {
  const {
    isDark,
    wallet,
    handleExternalWalletClick
  } = props;
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  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 jsxRuntime.jsxs("div", {
    children: [jsxRuntime.jsx("div", {
      className: "w3a--flex w3a--items-center w3a--justify-center",
      children: jsxRuntime.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")
      })
    }), jsxRuntime.jsx("div", {
      className: "w3a--my-6 w3a--flex w3a--justify-center",
      children: jsxRuntime.jsx(Image, {
        imageId: `login-${wallet.name}`,
        hoverImageId: `login-${wallet.name}`,
        fallbackImageId: "wallet",
        height: "100",
        width: "100",
        isButton: true,
        extension: wallet.imgExtension
      })
    }), jsxRuntime.jsx("p", {
      className: "w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
      children: t("modal.external.select-chain-description", {
        wallet: wallet.displayName
      })
    }), jsxRuntime.jsx("ul", {
      className: "w3a--flex w3a--flex-col w3a--gap-3",
      children: chainNamespaces.map(({
        chainNamespace,
        displayName,
        imageId
      }) => jsxRuntime.jsx("li", {
        children: jsxRuntime.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: [jsxRuntime.jsxs("div", {
            className: "w3a--flex w3a--items-center",
            children: [jsxRuntime.jsx(Image, {
              imageId: imageId,
              hoverImageId: imageId,
              fallbackImageId: "wallet",
              height: "24",
              width: "24",
              isButton: true,
              extension: "svg"
            }), jsxRuntime.jsx("p", {
              className: "w3a--ml-2 w3a--text-left w3a--text-sm w3a--text-app-gray-900 first-letter:w3a--capitalize dark:w3a--text-app-gray-200",
              children: displayName
            })]
          }), jsxRuntime.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\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
            src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
            alt: "arrow"
          })]
        })
      }, chainNamespace))
    })]
  });
};

module.exports = ConnectWalletChainNamespaceSelect;