@daimo/pay/build/src/assets/ScanIconWithLogos.js

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

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 = [
        jsx(Logos.MetaMask, {}, "metamask"),
        jsx(Logos.Coinbase, {}, "coinbase"),
        jsx(Logos.Phantom, {}, "phantom"),
        jsx(Logos.Backpack, {}, "backpack"),
        jsx(Logos.Rainbow, {}, "rainbow"),
        jsx(Logos.Trust, {}, "trust"),
    ];
    return (jsx(IconContainer, { children: jsxs("svg", { "aria-hidden": "true", width: "47", height: "52", viewBox: "0 0 47 52", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { mask: "url(#gradient-mask)", children: [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 ? (jsx("foreignObject", { x: "13", y: "21", width: "18", height: "18", rx: "5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 5 }, children: logo }) })) : (jsxs(Fragment, { children: [jsx("foreignObject", { x: "12", y: "15", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[0] }) }), jsx("foreignObject", { x: "23", y: "15", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[1] }) }), jsx("foreignObject", { x: "12", y: "26", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[2] }) }), jsx("foreignObject", { x: "23", y: "26", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[3] }) }), jsx("foreignObject", { x: "12", y: "37", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[4] }) }), jsx("foreignObject", { x: "23", y: "37", width: "9", height: "9", rx: "2.5", children: jsx("div", { style: { overflow: "hidden", borderRadius: 2.5 }, children: logoList[5] }) })] })), 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" }), jsx("rect", { width: "7", height: "2", x: "18", y: "11", fill: "var(--ck-graphic-scaniconwithlogos-01)", rx: "1" }), jsx("rect", { x: "1", y: "47", width: "43", height: "5", rx: "1", fill: "var(--ck-tooltip-background)" }), showQR && (jsxs(Fragment, { children: [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" }), jsx("rect", { x: "34.5", y: "10", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "31", y: "10", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "31", y: "13.5", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), jsx("rect", { x: "34.5", y: "13.5", width: "2.5", height: "2.5", rx: "0.75", fill: "#373737" }), 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" }), 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" }), 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" }), 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" })] }))] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_924_12568", x1: "22", y1: "8.2549", x2: "22", y2: "47", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-graphic-scaniconwithlogos-01)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-graphic-scaniconwithlogos-02)" })] }), jsxs("linearGradient", { id: "linear-gradient-mask", x1: "47", y1: "42", x2: "47", y2: "47", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "white" }), jsx("stop", { offset: "1", stopColor: "black", stopOpacity: "0" })] }), jsx("mask", { id: "gradient-mask", children: jsx("rect", { x: "0", y: "0", width: "47", height: "52", fill: "url(#linear-gradient-mask)" }) })] })] }) }));
};

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