@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
105 lines (102 loc) • 3.39 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { LogoContainer, Logo, SpinnerContainer, Spinner, ExpiringSpinner } from './styles.js';
import { AnimatePresence } from 'framer-motion';
const CircleSpinner = ({
logo,
smallLogo,
loading = true,
unavailable = false,
countdown = false
}) => {
return /* @__PURE__ */ jsxs(
LogoContainer,
{
transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] },
children: [
/* @__PURE__ */ jsx(
Logo,
{
$small: !unavailable && smallLogo,
style: unavailable ? { borderRadius: 0 } : void 0,
children: logo
}
),
/* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
loading && /* @__PURE__ */ jsx(
Spinner,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: {
opacity: 0,
transition: {
duration: countdown ? 1 : 0
}
},
children: /* @__PURE__ */ jsxs(
"svg",
{
"aria-hidden": "true",
width: "102",
height: "102",
viewBox: "0 0 102 102",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M52 100C24.3858 100 2 77.6142 2 50",
stroke: "url(#paint0_linear_1943_4139)",
strokeWidth: "3.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
"linearGradient",
{
id: "paint0_linear_1943_4139",
x1: "2",
y1: "48.5",
x2: "53",
y2: "100",
gradientUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ jsx("stop", { stopColor: "var(--ck-spinner-color)" }),
/* @__PURE__ */ jsx(
"stop",
{
offset: "1",
stopColor: "var(--ck-spinner-color)",
stopOpacity: "0"
}
)
]
}
) })
]
}
)
}
),
countdown && /* @__PURE__ */ jsxs(
ExpiringSpinner,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.25 },
children: [
/* @__PURE__ */ jsx("div", {}),
/* @__PURE__ */ jsx("div", {})
]
}
)
] }) })
]
}
);
};
export { CircleSpinner as default };
//# sourceMappingURL=index.js.map