@daimo/pay/build/src/components/Common/OptionsList/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
import { useEffect } from 'react';
import { keyframes } from 'styled-components';
import { usePayContext } from '../../../hooks/usePayContext.js';
import styled from '../../../styles/styled/index.js';
import { OrDivider } from '../Modal/index.js';
import { ScrollArea } from '../ScrollArea/index.js';
import { OptionsContainer, OptionButton, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';

const OptionsList = ({
  options,
  isLoading,
  requiredSkeletons,
  scrollHeight = 300,
  orDivider = false,
  hideBottomLine = false
}) => {
  const { triggerResize, log } = usePayContext();
  const optionsLength = options.length;
  useEffect(() => {
    log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
    if (optionsLength > 0) triggerResize();
  }, [optionsLength]);
  if (isLoading) {
    const skeletonCount = requiredSkeletons ? Math.max(requiredSkeletons - optionsLength, 0) : 0;
    return /* @__PURE__ */ jsxs(OptionsContainer, { $totalResults: options.length, children: [
      options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)),
      isLoading && Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonOptionItem, {}, index))
    ] });
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ScrollArea,
      {
        mobileDirection: "vertical",
        height: scrollHeight,
        hideBottomLine: orDivider || hideBottomLine,
        totalItems: options.length,
        children: /* @__PURE__ */ jsx(OptionsContainer, { $totalResults: options.length, children: options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)) })
      }
    ),
    orDivider && /* @__PURE__ */ jsx(OrDivider, {})
  ] });
};
const SkeletonOptionItem = () => {
  return /* @__PURE__ */ jsxs(OptionButton, { type: "button", children: [
    /* @__PURE__ */ jsx(SkeletonIcon, {}),
    /* @__PURE__ */ jsx(SkeletonLabel, {})
  ] });
};
const pulse = keyframes`
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
`;
const SkeletonIcon = styled.div`
  position: absolute;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 22.5%;
  background-color: rgba(0, 0, 0, 0.1);
  animation: ${pulse} 1.5s ease-in-out infinite;
`;
const SkeletonLabel = styled.div`
  width: 100px;
  height: 16px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.1);
  animation: ${pulse} 1.5s ease-in-out infinite;
`;
const OptionItem = ({ option }) => {
  const hydratedIcons = option.icons.map((icon) => {
    if (typeof icon === "string") {
      return /* @__PURE__ */ jsx("img", { src: icon, alt: "" }, option.id);
    }
    return icon;
  });
  const iconContent = (() => {
    return /* @__PURE__ */ jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => /* @__PURE__ */ jsx(
      IconStackItem,
      {
        $marginRight: index !== hydratedIcons.length - 1 ? -12 : 0,
        $zIndex: hydratedIcons.length - index,
        children: icon
      },
      index
    )) });
  })();
  return /* @__PURE__ */ jsxs(
    OptionButton,
    {
      type: "button",
      onClick: option.onClick,
      disabled: option.disabled,
      children: [
        iconContent,
        /* @__PURE__ */ jsxs(OptionLabel, { children: [
          /* @__PURE__ */ jsx(OptionTitle, { children: option.title }),
          option.subtitle && /* @__PURE__ */ jsx(OptionSubtitle, { children: option.subtitle })
        ] })
      ]
    }
  );
};
const IconStackContainer = styled(motion.div)`
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const IconStackItem = styled(motion.div)`
  display: block;
  overflow: hidden;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: ${(props) => props.$marginRight || 0}px;
  z-index: ${(props) => props.$zIndex || 2};
  width: 32px;
  height: 32px;
  overflow: hidden;
  svg,
  img {
    display: block;
    position: relative;
    pointer-events: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  border-radius: 22.5%;
`;

export { OptionsList };
//# sourceMappingURL=index.js.map