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

Multi chain wallet aggregator for web3Auth

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var ThemeContext = require('../../context/ThemeContext.js');
var utils = require('../../utils.js');

/**
 * Image component
 * @param props - ImageProps
 * @returns Image component
 */
function Image(props) {
  const {
    id = "",
    isButton = false,
    imageData = "",
    height = "auto",
    width = "auto",
    extension = "svg",
    darkImageId = "",
    darkHoverImageId = "",
    imageId,
    hoverImageId,
    fallbackImageId
  } = props;
  const {
    isDark
  } = react.useContext(ThemeContext.ThemedContext);
  const imgName = react.useMemo(() => isDark && darkImageId ? darkImageId : imageId, [isDark, darkImageId, imageId]);
  const hoverImgName = react.useMemo(() => isDark && darkHoverImageId ? darkHoverImageId : hoverImageId, [isDark, darkHoverImageId, hoverImageId]);
  if (isButton) {
    if (imageData) {
      return jsxRuntime.jsx("img", {
        id: id,
        src: imageData,
        height: height,
        width: width,
        alt: hoverImageId,
        className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
      });
    }
    return jsxRuntime.jsx("img", {
      id: id,
      src: `https://images.web3auth.io/${hoverImgName}.${extension}`,
      height: height,
      width: width,
      alt: hoverImageId,
      className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
    });
  }
  if (imageData) {
    return jsxRuntime.jsx("img", {
      id: id,
      src: imageData,
      height: height,
      width: width,
      alt: imageId,
      className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
      onError: ({
        currentTarget
      }) => {
        if (fallbackImageId) {
          const img = currentTarget;
          img.onerror = null; // prevents looping
          img.src = `https://images.web3auth.io/${fallbackImageId}.svg`;
        }
      }
    });
  }
  return jsxRuntime.jsx("img", {
    id: id,
    src: `https://images.web3auth.io/${imgName}.${extension}`,
    height: height,
    width: width,
    alt: imageId,
    className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
    onError: ({
      currentTarget
    }) => {
      if (fallbackImageId) {
        const img = currentTarget;
        img.onerror = null; // prevents looping
        img.src = `https://images.web3auth.io/${fallbackImageId}.svg`;
      }
    }
  });
}

module.exports = Image;