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

Multi chain wallet aggregator for web3Auth

import { AUTH_CONNECTION } from '@web3auth/auth';
import { cn, getIcons } from '../../utils.js';
import Button from '../Button/Button.js';
import { BUTTON_TYPE } from '../Button/Button.type.js';
import LoginHint from '../LoginHint/LoginHint.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

function getProviderIcon(method, isDark, extension) {
  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
  const hoverId = method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx("img", {
      id: "active-login-img",
      src: `https://images.web3auth.io/${hoverId}${extension}`,
      alt: "active-login-img",
      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
    }), /*#__PURE__*/jsx("img", {
      id: "login-img",
      src: `https://images.web3auth.io/${imageId}${extension}`,
      alt: "login-img",
      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
    })]
  });
}
function SocialLoginList(props) {
  const {
    visibleRow,
    otherRow,
    isDark,
    canShowMore,
    handleSocialLoginClick,
    handleExpandSocialLogins,
    buttonRadius
  } = props;
  const getGridRowFromVisibleLogin = () => {
    if (visibleRow.length === 1) {
      return "w3a--grid-cols-1";
    } else if (visibleRow.length === 2) {
      return "w3a--grid-cols-2";
    } else if (visibleRow.length === 3) {
      return "w3a--grid-cols-3";
    } else {
      return "w3a--grid-cols-4";
    }
  };
  if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
    return /*#__PURE__*/jsx("div", {
      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
      children: /*#__PURE__*/jsxs("div", {
        className: cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
        children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
          content: "Last Login",
          isDark: isDark,
          hideHint: true,
          children: /*#__PURE__*/jsx(Button, {
            type: BUTTON_TYPE.SOCIAL,
            props: {
              showText: false,
              method: row.method,
              isDark,
              isPrimaryBtn: false,
              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
              children: /*#__PURE__*/jsx(Fragment, {
                children: getProviderIcon(row.method, isDark, ".svg")
              }),
              onClick: () => handleSocialLoginClick({
                connector: row.connector,
                loginParams: row.loginParams
              }),
              buttonRadius
            }
          }, row.method)
        }, row.method)), canShowMore && visibleRow.length > 4 && /*#__PURE__*/jsx(Button, {
          type: BUTTON_TYPE.SOCIAL,
          props: {
            showIcon: false,
            onClick: handleExpandSocialLogins,
            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
            children: /*#__PURE__*/jsx("img", {
              src: getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
              alt: "Logo",
              className: "w3a--object-contain"
            }),
            buttonRadius
          }
        })]
      })
    });
  }
  return /*#__PURE__*/jsxs("div", {
    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-4",
    children: [/*#__PURE__*/jsx("button", {
      type: "button",
      className: "w3a--appearance-none",
      onClick: () => handleExpandSocialLogins(),
      children: /*#__PURE__*/jsx("img", {
        src: getIcons(isDark ? "arrow-left-dark" : "arrow-left-light"),
        alt: "Logo",
        className: "w3a--object-contain"
      })
    }), /*#__PURE__*/jsx("div", {
      className: "w3a--social-container w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--pl-2 w3a--pr-3",
      children: otherRow.map(row => /*#__PURE__*/jsx("div", {
        className: "w3a--h-11 w3a--w-full",
        children: /*#__PURE__*/jsx(Button, {
          type: BUTTON_TYPE.SOCIAL,
          props: {
            method: row.method,
            isDark,
            isPrimaryBtn: false,
            onClick: () => handleSocialLoginClick({
              connector: row.connector,
              loginParams: row.loginParams
            }),
            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
            buttonRadius,
            children: /*#__PURE__*/jsxs(Fragment, {
              children: [getProviderIcon(row.method, isDark, ".svg"), /*#__PURE__*/jsx("p", {
                className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
                children: row.name
              }), /*#__PURE__*/jsx("img", {
                id: "login-arrow",
                className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -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"
              })]
            })
          }
        })
      }, row.method))
    })]
  });
}

export { SocialLoginList as default };