@coin-voyage/paykit/dist/assets/ScanIconWithLogos.js

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from 'framer-motion';
import styled from '../styles/styled';
import Logos from './logos';
const IconContainer = styled(motion.div) `
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 52px;
  min-width: 47px;
  min-height: 52px;
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
`;
const ScanIconWithLogos = ({ logo }) => {
    const logoList = [
        _jsx(Logos.MetaMask, { background: true }),
        _jsx(Logos.Coinbase, { background: true }),
        _jsx(Logos.Crypto, {}),
        _jsx(Logos.ImToken, {}),
        _jsx(Logos.Argent, {}),
        _jsx(Logos.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: _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("path", { d: "M15 10H29C29 11.1046 28.1046 12 27 12H17C15.8954 12 15 11.1046 15 10Z", fill: "var(--ck-graphic-scaniconwithlogos-01)" }), _jsx("rect", { x: "1", y: "47", width: "43", height: "5", fill: "var(--ck-tooltip-background)" }), _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 default ScanIconWithLogos;
//# sourceMappingURL=ScanIconWithLogos.js.map