@daimo/pay/build/src/components/Common/CircleTimer.js

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

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';

const CircleTimer = ({
  total,
  size = 24,
  stroke = 3,
  currentTime,
  onTimeChange,
  children
}) => {
  const [target, setTarget] = useState(
    Date.now() + (currentTime ?? total) * 1e3
  );
  const [left, setLeft] = useState(currentTime ?? total);
  useEffect(() => {
    if (currentTime !== void 0) {
      setTarget(Date.now() + currentTime * 1e3);
      setLeft(currentTime);
    }
  }, [currentTime]);
  useEffect(() => {
    const id = setInterval(() => {
      const secs = Math.max(0, Math.ceil((target - Date.now()) / 1e3));
      setLeft(secs);
      onTimeChange?.(secs);
      if (secs === 0) clearInterval(id);
    }, 1e3);
    return () => clearInterval(id);
  }, [target, onTimeChange]);
  const ratio = Math.round(left * 100 / total);
  const radius = Math.floor((size - stroke) / 2);
  const circumference = Math.round(2 * 314 * radius / 100);
  const dashoffset = Math.round(circumference * (100 - ratio) / 100);
  const color = ratio <= 10 ? "var(--timer-red, #D92D20)" : ratio <= 40 ? "var(--timer-orange, #F79009)" : "var(--timer-green, #12D18E)";
  const center = Math.round(size / 2);
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      viewBox: `0 0 ${size} ${size}`,
      width: size,
      height: size,
      role: "img",
      "aria-label": `Timer: ${left}s left of ${total}s`,
      children: [
        /* @__PURE__ */ jsx(
          "circle",
          {
            cx: center,
            cy: center,
            r: radius,
            fill: "transparent",
            stroke: "var(--ck-body-background-secondary, #EEE)",
            strokeWidth: stroke
          }
        ),
        /* @__PURE__ */ jsx(
          "circle",
          {
            cx: center,
            cy: center,
            r: radius,
            fill: "transparent",
            stroke: color,
            strokeWidth: stroke,
            strokeDasharray: circumference,
            strokeDashoffset: dashoffset,
            strokeLinecap: "round",
            style: { transition: "stroke-dashoffset 1s linear" },
            transform: `rotate(-90 ${center} ${center})`
          }
        ),
        children && /* @__PURE__ */ jsx("foreignObject", { x: "0", y: "0", width: size, height: size, children: /* @__PURE__ */ jsx(
          "div",
          {
            style: {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: "100%",
              height: "100%"
            },
            children
          }
        ) })
      ]
    }
  );
};

export { CircleTimer as default };
//# sourceMappingURL=CircleTimer.js.map