@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
244 lines (241 loc) • 8.53 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
import styled from '../styles/styled/index.js';
import Logos from './logos.js';
const IconContainer = styled(motion.div)`
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: 47px;
max-height: 52px;
aspect-ratio: 47 / 52;
svg {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
`;
const ScanIconWithLogos = ({ logo, showQR = true }) => {
const logoList = [
/* @__PURE__ */ jsx(Logos.MetaMask, {}, "metamask"),
/* @__PURE__ */ jsx(Logos.Base, {}, "base"),
/* @__PURE__ */ jsx(Logos.Phantom, {}, "phantom"),
/* @__PURE__ */ jsx(Logos.Backpack, {}, "backpack"),
/* @__PURE__ */ jsx(Logos.Rainbow, {}, "rainbow"),
/* @__PURE__ */ jsx(Logos.Trust, {}, "trust")
];
return /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsxs(
"svg",
{
"aria-hidden": "true",
width: "47",
height: "52",
viewBox: "0 0 47 52",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsxs("g", { mask: "url(#gradient-mask)", children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M7 14.5C7 11.4624 9.46243 9 12.5 9H31.5C34.5376 9 37 11.4624 37 14.5V47H7V14.5Z",
fill: "var(--ck-graphic-scaniconwithlogos-04)"
}
),
logo ? /* @__PURE__ */ jsx("foreignObject", { x: "13", y: "21", width: "18", height: "18", rx: "5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 5 }, children: logo }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("foreignObject", { x: "12", y: "15", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[0] }) }),
/* @__PURE__ */ jsx("foreignObject", { x: "23", y: "15", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[1] }) }),
/* @__PURE__ */ jsx("foreignObject", { x: "12", y: "26", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[2] }) }),
/* @__PURE__ */ jsx("foreignObject", { x: "23", y: "26", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[3] }) }),
/* @__PURE__ */ jsx("foreignObject", { x: "12", y: "37", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[4] }) }),
/* @__PURE__ */ jsx("foreignObject", { x: "23", y: "37", width: "9", height: "9", rx: "2.5", children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[5] }) })
] }),
/* @__PURE__ */ jsx(
"path",
{
d: "M36 47V13.7143C36 11.1107 33.8893 9 31.2857 9H12.7143C10.1107 9 8 11.1107 8 13.7143V47",
stroke: "url(#paint0_linear_924_12568)",
strokeWidth: "2"
}
),
/* @__PURE__ */ jsx(
"rect",
{
width: "7",
height: "2",
x: "18",
y: "11",
fill: "var(--ck-graphic-scaniconwithlogos-01)",
rx: "1"
}
),
/* @__PURE__ */ jsx(
"rect",
{
x: "1",
y: "47",
width: "43",
height: "5",
rx: "1",
fill: "var(--ck-tooltip-background)"
}
),
showQR && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"rect",
{
x: "22",
y: "1",
width: "24",
height: "24",
rx: "12",
fill: "var(--ck-graphic-scaniconwithlogos-03)",
stroke: "var(--ck-tooltip-background)",
strokeWidth: "2"
}
),
/* @__PURE__ */ jsx(
"rect",
{
x: "34.5",
y: "10",
width: "2.5",
height: "2.5",
rx: "0.75",
fill: "#373737"
}
),
/* @__PURE__ */ jsx(
"rect",
{
x: "31",
y: "10",
width: "2.5",
height: "2.5",
rx: "0.75",
fill: "#373737"
}
),
/* @__PURE__ */ jsx(
"rect",
{
x: "31",
y: "13.5",
width: "2.5",
height: "2.5",
rx: "0.75",
fill: "#373737"
}
),
/* @__PURE__ */ jsx(
"rect",
{
x: "34.5",
y: "13.5",
width: "2.5",
height: "2.5",
rx: "0.75",
fill: "#373737"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M28.5 10.5V9C28.5 8.17157 29.1716 7.5 30 7.5H31.5",
stroke: "#373737",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M36.5 7.5L38 7.5C38.8284 7.5 39.5 8.17157 39.5 9L39.5 10.5",
stroke: "#373737",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M39.5 15.5L39.5 17C39.5 17.8284 38.8284 18.5 38 18.5L36.5 18.5",
stroke: "#373737",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M31.5 18.5L30 18.5C29.1716 18.5 28.5 17.8284 28.5 17L28.5 15.5",
stroke: "#373737",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] })
] }),
/* @__PURE__ */ jsxs("defs", { children: [
/* @__PURE__ */ jsxs(
"linearGradient",
{
id: "paint0_linear_924_12568",
x1: "22",
y1: "8.2549",
x2: "22",
y2: "47",
gradientUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ jsx("stop", { stopColor: "var(--ck-graphic-scaniconwithlogos-01)" }),
/* @__PURE__ */ jsx(
"stop",
{
offset: "1",
stopColor: "var(--ck-graphic-scaniconwithlogos-02)"
}
)
]
}
),
/* @__PURE__ */ jsxs(
"linearGradient",
{
id: "linear-gradient-mask",
x1: "47",
y1: "42",
x2: "47",
y2: "47",
gradientUnits: "userSpaceOnUse",
children: [
/* @__PURE__ */ jsx("stop", { stopColor: "white" }),
/* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "black", stopOpacity: "0" })
]
}
),
/* @__PURE__ */ jsx("mask", { id: "gradient-mask", children: /* @__PURE__ */ jsx(
"rect",
{
x: "0",
y: "0",
width: "47",
height: "52",
fill: "url(#linear-gradient-mask)"
}
) })
] })
]
}
) });
};
export { ScanIconWithLogos as default };
//# sourceMappingURL=ScanIconWithLogos.js.map