krishan21-react-demo5
Advanced tools
Comparing version 1.0.2 to 1.0.3
'use strict'; | ||
var React = require('react'); | ||
var React$1 = require('react'); | ||
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); | ||
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray'); | ||
var fa = require('react-icons/fa'); | ||
var emptyCart = require('https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png'); | ||
var _defineProperty = require('@babel/runtime/helpers/defineProperty'); | ||
var Chart = require('react-apexcharts'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1); | ||
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); | ||
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray); | ||
var emptyCart__default = /*#__PURE__*/_interopDefaultLegacy(emptyCart); | ||
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty); | ||
var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart); | ||
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}} | ||
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css,{}); | ||
var css$7 = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css$7,{}); | ||
var DygnifyCard = function DygnifyCard(_ref) { | ||
var firstModale = _ref.firstModale, | ||
onHandler = _ref.onHandler, | ||
firstModaleHandler = _ref.firstModaleHandler, | ||
_ref$id = _ref.id, | ||
id = _ref$id === void 0 ? "- - " : _ref$id; | ||
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, firstModale && /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "main" | ||
var css$6 = "body{\r\n\tbackground-color: #0C0E11;\r\n}\r\n.star-modal {\r\n\tposition: absolute;\r\n\ttop: 15%;\r\n\tpadding: 20px;\r\n\tbackground-color: #f8f9fa;\r\n\tcolor: rgb(26, 25, 25);\r\n\tborder-radius: 15px;\r\n\tbox-shadow: inset -1px -1px 1px rgba(185, 185, 185, 0.1);\r\n}\r\n.modal-header{\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\tpadding: 15px 18px;\r\n\tborder-bottom: 1px solid #282c3a;\r\n}\r\n.modal-sub-header{\r\n\tborder-bottom: 0;\r\n\tcolor:rgb(7, 7, 7);\r\n}\r\n.modal-header div{\r\n\tdisplay: flex;\r\n\tgap:5px;\r\n}\r\n.modal-title{\r\n\tcolor: #9281FF;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tfont-size:1.5rem;\r\n}\r\n.modal-close{\r\n\tbackground-color: #c6bef775;\r\n\tborder: 0;\r\n\tborder-radius: 50%;\r\n\r\n\tpadding: 2px 12px;\r\n\tcolor:white;\r\n}\r\n.modal-close:hover{\r\n\tbackground-color: #9281ffd8;\r\n}\r\n.mt-8 {\r\n\tmargin-top: 2rem;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-3 {\r\n\tpadding-top: 0.75rem;\r\n\tpadding-bottom: 0.75rem;\r\n}\r\n\r\n.mb-4 {\r\n\tmargin-bottom: 1rem;\r\n}\r\n\r\n.mt-\\[20px\\] {\r\n\tmargin-top: 20px;\r\n}\r\n\r\n.box-border {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n}\r\n\r\n.h-\\[45px\\] {\r\n\theight: 45px;\r\n}\r\n\r\n.h-full {\r\n\theight: 100%;\r\n}\r\n\r\n.w-\\[45px\\] {\r\n\twidth: 45px;\r\n}\r\n\r\n.w-full {\r\n\twidth: 100%;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.grid-cols-2 {\r\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-sm {\r\n\tborder-radius: 0.125rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.border {\r\n\tborder-width: 1px;\r\n}\r\n\r\n.border-slate-800 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(30 41 59 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-slate-400 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(148 163 184 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-transparent {\r\n\tborder-color: transparent;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-green-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(34 197 94 / var(--tw-bg-opacity));\r\n}\r\n\r\n.p-1 {\r\n\tpadding: 0.25rem;\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-start {\r\n\ttext-align: start;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[20px\\] {\r\n\tfont-size: 20px;\r\n}\r\n\r\n.hover\\:border-red-300:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(252 165 165 / var(--tw-border-opacity));\r\n}\r\n\r\n.hover\\:border-blue-400:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(96 165 250 / var(--tw-border-opacity));\r\n}\r\n\r\n.absolute {\r\n\tposition: absolute;\r\n}\r\n\r\n.right-2 {\r\n\tright: 0.5rem;\r\n}\r\n\r\n.top-2 {\r\n\ttop: 0.5rem;\r\n}\r\n\r\n.mt-2 {\r\n\tmargin-top: 0.5rem;\r\n}\r\n\r\n.mr-4 {\r\n\tmargin-right: 1rem;\r\n}\r\n\r\n.mt-4 {\r\n\tmargin-top: 1rem;\r\n}\r\n\r\n.mr-2 {\r\n\tmargin-right: 0.5rem;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.h-\\[35px\\] {\r\n\theight: 35px;\r\n}\r\n\r\n.w-\\[35px\\] {\r\n\twidth: 35px;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.flex-col {\r\n\tflex-direction: column;\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.justify-end {\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.justify-center {\r\n\tjustify-content: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\r\n\t--tw-space-y-reverse: 0;\r\n\tmargin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\r\n\tmargin-bottom: calc(1rem * var(--tw-space-y-reverse));\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-1 {\r\n\tpadding-top: 0.25rem;\r\n\tpadding-bottom: 0.25rem;\r\n}\r\n\r\n.pb-2 {\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-end {\r\n\ttext-align: end;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[12px\\] {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.text-\\[25px\\] {\r\n\tfont-size: 25px;\r\n}\r\n\r\n.my-blur {\r\n\tfilter: blur(5px);\r\n\t-webkit-filter: blur(5px);\r\n}\r\n.my-blur-remove {\r\n\tfilter: blur(0px);\r\n\t-webkit-filter: blur(0px);\r\n}\r\n\r\n.blur-sm {\r\n\t--tw-blur: blur(4px);\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.filter {\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.bg-slate-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(100 116 139 / var(--tw-bg-opacity));\r\n}\r\n.h-screen {\r\n\theight: 200vh;\r\n}\r\n.text-center {\r\n\ttext-align: center;\r\n}\r\n.flex-center{\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n"; | ||
n(css$6,{}); | ||
var css$5 = ".available-wallets {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 12px 18px;\r\n\tmargin-top: 10px;\r\n}\r\n.single-wallet {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tgap:16px;\r\n\tpadding:8px;\r\n\tborder: 1px solid transparent;\r\n\tborder-radius: 10px;\r\n\tcursor:pointer;\r\n\tbox-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;\r\n}\r\n.single-wallet:hover {\r\n\t/* border: 1px solid #9281ff8e; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;\r\n}\r\n.selected-symbol {\r\n\tpadding-right: 10px;\r\n}\r\n.wallet-name {\r\n\tfont-weight: 400;\r\n}\r\n"; | ||
n(css$5,{}); | ||
var css$4 = "h1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n\tmargin: 0;\r\n}\r\n.macro-wallet-status,\r\n.macro-wallet-card {\r\n\tbackground-image: linear-gradient(\r\n\t\t90deg,\r\n\t\trgba(236, 235, 235, 0.76),\r\n\t\trgba(243, 242, 242, 0.384)\r\n\t);\r\n\tborder-radius: 8px;\r\n\tborder: 1px solid rgba(77, 154, 241, 0.096);\r\n\tmargin-top: 15px;\r\n\tpadding: 3px 6px;\r\n\tpadding-left: 15px;\r\n}\r\n.macro-wallet-status .section {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tbackground-color: #e6e6e6d2;\r\n\tmargin: 10px 2px;\r\n\tpadding: 5px 15px;\r\n\tborder-radius: 8px;\r\n\tborder-top-left-radius: 100px;\r\n\tborder-bottom-left-radius: 100px;\r\n}\r\n.user {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tmargin-left: -24px;\r\n\tborder-radius: 50%;\r\n\tmix-blend-mode: multiply;\r\n}\r\n.macro-wallet-status .section p {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmargin: 0;\r\n\tpadding-left: 5px;\r\n}\r\n.macro-wallet-status .section .wallet-connect {\r\n\ttext-decoration: underline;\r\n\tcolor: gray;\r\n\tcursor: pointer;\r\n}\r\n\r\n/*Macro Score*/\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 8px;\r\n\tborder-radius: 8px;\r\n}\r\n.macro-wallet-card {\r\n\tpadding: 10px 5px;\r\n}\r\n.macro-graph-container {\r\n\ttext-align: center;\r\n\tmargin-top: 10px;\r\n}\r\n.macro-graph {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n border-top-right-radius: 40px;\r\n}\r\n.graph-info{\r\n border-top-left-radius: 40px;\r\n}\r\n.go-back {\r\n\ttext-align: center;\r\n\tcolor: rgb(148, 148, 148);\r\n\tcursor: pointer;\r\n\tmargin-top: 10px;\r\n}\r\n.go-back-button:hover {\r\n\tcolor: rgb(37, 37, 37);\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.macro-score-check {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 15px;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n.graph-card {\r\n\tbackground-color: white;\r\n /* border-top-right-radius: 30px;\r\n border-bottom-left-radius: 30px; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;\r\n padding:5px;\r\n}\r\n.graph-card:hover {\r\n\tbox-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\r\n}\r\n\r\n.gray-header{\r\n\tcolor: rgb(92, 92, 92);\r\n}"; | ||
n(css$4,{}); | ||
var AvailableWallets = function AvailableWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
setAvailableWallets = _ref.setAvailableWallets; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "star-modal", | ||
style: { | ||
width: "55%", | ||
top: '25%', | ||
left: '20%', | ||
border: '1px solid gray' | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-backdrop", | ||
onClick: firstModaleHandler | ||
}), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-modal" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "field-1-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "myCredit" | ||
}, "My Credit Score")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-wallet-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Wallets"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "card-img" | ||
className: "modal-header" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "modal-title" | ||
}, "Available Wallets"), /*#__PURE__*/React__default['default'].createElement("button", { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "available-wallets" | ||
}, availableWallets.map(function (wallet, i) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: i, | ||
onClick: function onClick() { | ||
availableWallets[i].selected = true; | ||
setAvailableWallets(_toConsumableArray__default['default'](availableWallets)); | ||
}, | ||
className: "single-wallet" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex items-center gap-4" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "h-[45px] w-[45px] p-1 rounded-md" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
className: "h-full w-full rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("h4", { | ||
className: "wallet-name" | ||
}, wallet.name)), wallet.selected === true ? /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "selected-symbol" | ||
}, /*#__PURE__*/React__default['default'].createElement(fa.FaCheck, { | ||
className: "bg-green-500 rounded-full p-1 box-border text-[20px]" | ||
})) : ""); | ||
}))); | ||
}; | ||
var css$3 = ".blockpass {\r\n\tmin-height: 100vh;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n.blockpass-button {\r\n\ttext-align: center;\r\n\tmin-width: 120px;\r\n}\r\n"; | ||
n(css$3,{}); | ||
var css$2 = ".gradient-button{\r\n padding: 0.4rem 1rem;\r\n border-radius: 9999px;\r\n border:none;\r\n font-size: 16px;\r\n color: white;\r\n background-image: linear-gradient(90deg, #4B74FF, #9281FF);\r\n}\r\n.gradient-button:hover{\r\n background-image: linear-gradient(270deg, #4B74FF, #9281FF);\r\n}"; | ||
n(css$2,{}); | ||
var Button = function Button(_ref) { | ||
var onClick = _ref.onClick, | ||
className = _ref.className, | ||
children = _ref.children; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
onClick: onClick, | ||
className: "".concat(className, " gradient-button cursor-pointer") | ||
}, children); | ||
}; | ||
var css$1 = "\r\n.connected-wallet {\r\n\tborder: 1px solid #9281ff6b;\r\n\tborder-radius: 40px;\r\n}\r\n.connected-wallet:hover {\r\n\tborder: 1px solid #9281ff;\r\n}\r\n.preview-nfc{\r\n text-align: center;\r\n width: 150px;\r\n}\r\n.preview-nfc span{\r\n letter-spacing:2px;\r\n}\r\n\r\n.is-primary{\r\n color:rgb(83, 83, 83);\r\n}\r\n.button-group{\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top:25px;\r\n}\r\n.empty-card{\r\n flex-direction: column;\r\n padding-bottom: 10px;\r\n border: 1px solid rgb(230, 229, 229);\r\n border-radius: 8px;\r\n}\r\n.empty-card img{\r\n width: 30%;\r\n}\r\n.empty-card h4{\r\n margin-top: -25px;\r\n color: rgb(153, 153, 153);\r\n}"; | ||
n(css$1,{}); | ||
function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } | ||
function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var ConnectedWallets = function ConnectedWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
handleNext = _ref.handleNext; | ||
var _useState = React$1.useState(false), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
isSelected = _useState2[0], | ||
setIsSelected = _useState2[1]; | ||
React$1.useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper$1(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setIsSelected(true); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, isSelected ? /*#__PURE__*/React__default['default'].createElement("section", null, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "connected-wallets-container space-y-4 mt-2" | ||
}, availableWallets.filter(function (wallet) { | ||
return wallet.selected === true; | ||
}).map(function (wallet, i) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: i, | ||
className: "connected-wallet flex gap-4 px-4 py-2" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex-center" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
className: "h-[35px] w-[35px] rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex flex-col" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, wallet.id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "text-[12px] is-primary" | ||
}, wallet.primary ? "Primary wallet" : "Secondary wallet"))); | ||
}))) : /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "empty-card flex-center" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
src: emptyCart__default['default'], | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "p" | ||
}, "Primary Wallet"))), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet" | ||
}), /*#__PURE__*/React__default['default'].createElement("h4", null, "Empty Connected Wallets")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "button-group" | ||
}, /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(true); | ||
}, | ||
className: "flex-center" | ||
}, "+ Add more wallets"), /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return handleNext(); | ||
}, | ||
className: "preview-nfc" | ||
}, "Preview NFC"))); | ||
}; | ||
var css = ".absolute {\r\n position: absolute;\r\n}\r\n\r\n.relative {\r\n position: relative;\r\n}\r\n\r\n.top-0 {\r\n top: 0px;\r\n}\r\n\r\n.mx-auto {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.mt-16 {\r\n margin-top: 4rem;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.h-12 {\r\n height: 3rem;\r\n}\r\n\r\n.w-full {\r\n width: 100%;\r\n}\r\n\r\n.w-12 {\r\n width: 3rem;\r\n}\r\n\r\n.w-20 {\r\n width: 5rem;\r\n}\r\n\r\n.flex-auto {\r\n flex: 1 1 auto;\r\n}\r\n\r\n.flex-col {\r\n flex-direction: column;\r\n}\r\n\r\n.items-center {\r\n align-items: center;\r\n}\r\n\r\n.justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.rounded-full {\r\n border-radius: 9999px;\r\n}\r\n\r\n.border-2 {\r\n border-width: 2px;\r\n}\r\n\r\n.border {\r\n border-width: 1px;\r\n}\r\n.text-\\[\\#6047FF\\] {\r\n --tw-text-opacity: 1;\r\n color: rgb(96 71 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.border-t-2 {\r\n border: 2px solid red;\r\n /* border-top-width: 2px solid red; */\r\n}\r\n\r\n.border-gray-300 {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-\\[\\#6047FF\\] {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(96 71 255 / var(--tw-border-opacity));\r\n}\r\n\r\n.bg-\\[\\#6047FF\\] {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(96 71 255 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-gray-500 {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(107 114 128 / var(--tw-bg-opacity));\r\n}\r\n\r\n.py-3 {\r\n padding-top: 0.75rem;\r\n padding-bottom: 0.75rem;\r\n}\r\n\r\n.px-3 {\r\n padding-left: 0.75rem;\r\n padding-right: 0.75rem;\r\n}\r\n\r\n.text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-\\[0\\.65rem\\] {\r\n font-size: 0.65rem;\r\n}\r\n\r\n.font-bold {\r\n font-weight: 700;\r\n}\r\n\r\n.font-medium {\r\n font-weight: 500;\r\n}\r\n\r\n.uppercase {\r\n text-transform: uppercase;\r\n}\r\n\r\n.text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-black {\r\n --tw-text-opacity: 1;\r\n color: rgb(0 0 0 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-400 {\r\n --tw-text-opacity: 1;\r\n color: rgb(156 163 175 / var(--tw-text-opacity));\r\n}\r\n\r\n.transition {\r\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n}\r\n\r\n.duration-500 {\r\n transition-duration: 500ms;\r\n}\r\n\r\n.ease-in-out {\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .dark\\:text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .md\\:w-20 {\r\n width: 5rem;\r\n }\r\n\r\n .md\\:w-1\\/2 {\r\n width: 50%;\r\n }\r\n\r\n .md\\:px-0 {\r\n padding-left: 0px;\r\n padding-right: 0px;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .lg\\:w-32 {\r\n width: 8rem;\r\n }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .xl\\:text-xs {\r\n font-size: 0.75rem;\r\n line-height: 1rem;\r\n }\r\n}\r\n"; | ||
n(css,{}); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
var Stepper = function Stepper(_ref) { | ||
var steps = _ref.steps, | ||
currentStep = _ref.currentStep; | ||
var _useState = React$1.useState([]), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
newStep = _useState2[0], | ||
setNewStep = _useState2[1]; | ||
var stepsRef = React$1.useRef(); | ||
var updateStep = function updateStep(stepNumber, steps) { | ||
var newSteps = _toConsumableArray__default['default'](steps); | ||
var count = 0; | ||
while (count < newSteps.length) { | ||
//current step | ||
if (count === stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: true, | ||
selected: true, | ||
completed: false | ||
}); | ||
count++; | ||
} //step completed | ||
else if (count < stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: true, | ||
completed: true | ||
}); | ||
count++; | ||
} //step pending | ||
else { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: false, | ||
completed: false | ||
}); | ||
count++; | ||
} | ||
} | ||
return newSteps; | ||
}; | ||
React$1.useEffect(function () { | ||
var stepsState = steps.map(function (step, index) { | ||
return Object.assign({}, { | ||
description: step, | ||
completed: false, | ||
highlighted: index === 0 ? true : false, | ||
selected: index === 0 ? true : false | ||
}); | ||
}); | ||
stepsRef.current = stepsState; | ||
var current = updateStep(currentStep - 1, stepsRef.current); | ||
setNewStep(current); | ||
}, [steps, currentStep]); | ||
var stepsDisplay = newStep.map(function (step, index) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: index, | ||
className: index !== newStep.length - 1 ? "w-full items-center flex" : "items-center flex" // style={{ display: "flex" }} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
// style={{ display: "flex" }} | ||
className: "relative flex-col items-center text-white flex" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex rounded-full transition duration-500 ease-in-out border-2 border-gray-300 h-12 w-12 items-center justify-center ".concat(step.selected ? "bg-[#6047FF] text-white font-bold border border-[#6047FF]" : "bg-gray-500 text-white font-bold border border-[#6047FF]") | ||
}, index + 1), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "absolute top-0 w-20 md:w-20 lg:w-32 text-center mt-16 text-[0.65rem] xl:text-xs font-medium uppercase ".concat(step.highlighted ? "text-[#6047FF]" : "text-gray-400") | ||
}, step.description)), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex-auto border ".concat(newStep.length - 1 === index ? "" : "border-t-2", " transition duration-500 ease-in-out ").concat(step.completed ? "border-[#6047FF] " : "border-gray-300 ", " ") | ||
})); | ||
}); | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex mx-auto px-3 md:px-0 mp-14 justify-between items-center", | ||
style: { | ||
marginTop: '10px', | ||
width: '60%' | ||
} | ||
}, stepsDisplay); | ||
}; | ||
var Charts = function Charts(_ref) { | ||
var _state$otherChart, _state$otherChart2; | ||
var connectedWallet = _ref.connectedWallet; | ||
console.log(connectedWallet); | ||
var _useState = React$1.useState({ | ||
otherChart: { | ||
series: [0], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return "Empty"; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [""] | ||
} | ||
} | ||
}), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
state = _useState2[0], | ||
setState = _useState2[1]; | ||
React$1.useEffect(function () { | ||
if (connectedWallet.name !== "") { | ||
var score = connectedWallet.score, | ||
name = connectedWallet.name; | ||
setState({ | ||
otherChart: { | ||
series: [score / 10], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return name; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [" "] | ||
} | ||
} | ||
}); | ||
} | ||
}, [connectedWallet]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Chart__default['default'], { | ||
options: state === null || state === void 0 ? void 0 : (_state$otherChart = state.otherChart) === null || _state$otherChart === void 0 ? void 0 : _state$otherChart.options, | ||
series: state === null || state === void 0 ? void 0 : (_state$otherChart2 = state.otherChart) === null || _state$otherChart2 === void 0 ? void 0 : _state$otherChart2.series, | ||
type: "radialBar", | ||
width: "280" | ||
})); | ||
}; | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var MacroScore = function MacroScore(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
handlePrev = _ref.handlePrev; | ||
var _useState = React$1.useState({ | ||
logo: emptyCart__default['default'], | ||
name: "", | ||
id: "" | ||
}), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
connectedWallet = _useState2[0], | ||
setConnectedWallet = _useState2[1]; | ||
React$1.useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setConnectedWallet(_objectSpread({}, wallet)); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-status" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "card-img" | ||
className: "section" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
alt: "" | ||
src: connectedWallet.logo, | ||
alt: "", | ||
className: "user" | ||
}), connectedWallet.name === "" ? /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement("span", null, "Wallet not connected"), /*#__PURE__*/React__default['default'].createElement("span", { | ||
className: "wallet-connect" | ||
}, "Connect wallet")) : /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement("span", null, connectedWallet.name), /*#__PURE__*/React__default['default'].createElement("span", { | ||
className: "wallet-connect" | ||
}, connectedWallet.id)))), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-card" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "text-center gray-header" | ||
}, "MACRO Score"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "grid macro-graph-container" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "macro-graph graph-card" | ||
}, /*#__PURE__*/React__default['default'].createElement(Charts, { | ||
connectedWallet: connectedWallet | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "p" | ||
}, "Secondray Wallet")))), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "btn-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("button", { | ||
className: "btn", | ||
className: "flex-center graph-info graph-card" | ||
}, /*#__PURE__*/React__default['default'].createElement("p", null, "Your MACRO Score (Multi Asset Credit Risk Oracle) is your on-chain credit score.")))), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-card macro-score-check" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "gray-header" | ||
}, "Check your MACRO Score"), /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
onHandler("button is clicked"); | ||
return setAvailableWalletModalOpen(true); | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("svg", { | ||
width: "15", | ||
height: "15", | ||
viewBox: "0 0 20 21", | ||
fill: "none", | ||
xmlns: "http://www.w3.org/2000/svg" | ||
}, /*#__PURE__*/React__default['default'].createElement("path", { | ||
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z", | ||
fill: "black" | ||
}), /*#__PURE__*/React__default['default'].createElement("path", { | ||
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z", | ||
fill: "black" | ||
}))), "Add more wallet")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "btn-preview-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("button", { | ||
className: "btnPreview" | ||
}, "Preview NFC"))))); | ||
}, "Connect Wallet")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "go-back" | ||
}, /*#__PURE__*/React__default['default'].createElement("span", { | ||
onClick: function onClick() { | ||
return handlePrev(); | ||
}, | ||
className: "go-back-button" | ||
}, "Go Back"))); | ||
}; | ||
var ModalController = function ModalController(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setModalController = _ref.setModalController, | ||
availableWalletModalOpen = _ref.availableWalletModalOpen, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen; | ||
var _useState = React$1.useState(1), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
currentStep = _useState2[0], | ||
setCurrentStep = _useState2[1]; | ||
var steps = ["wallets", "preview nfc"]; | ||
var displayStep = function displayStep(step) { | ||
switch (step) { | ||
case 1: | ||
return /*#__PURE__*/React__default['default'].createElement(ConnectedWallets, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handleNext: handleNext | ||
}); | ||
case 2: | ||
return /*#__PURE__*/React__default['default'].createElement(MacroScore, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handlePrev: handlePrev | ||
}); | ||
} | ||
}; | ||
var handleNext = function handleNext() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep + 1; | ||
}); | ||
}; | ||
var handlePrev = function handlePrev() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep - 1; | ||
}); | ||
}; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "".concat(availableWalletModalOpen ? "my-blur" : " ", " star-modal"), | ||
style: { | ||
width: "45%", | ||
minHeight: "50vh" | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "modal-header" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "modal-title" | ||
}, "Account"), /*#__PURE__*/React__default['default'].createElement("button", { | ||
onClick: function onClick() { | ||
return setModalController(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Stepper, { | ||
steps: steps, | ||
currentStep: currentStep | ||
}), /*#__PURE__*/React__default['default'].createElement("div", { | ||
style: { | ||
marginTop: "60px" | ||
} | ||
}, displayStep(currentStep)))); | ||
}; | ||
var BlockPass = function BlockPass() { | ||
var _useState = React$1.useState(false), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
modalController = _useState2[0], | ||
setModalController = _useState2[1]; | ||
var _useState3 = React$1.useState(false), | ||
_useState4 = _slicedToArray__default['default'](_useState3, 2), | ||
availableWalletModalOpen = _useState4[0], | ||
setAvailableWalletModalOpen = _useState4[1]; | ||
var _useState5 = React$1.useState([{ | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "MetaMask", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: true, | ||
score: 905, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "WalletConnect", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 700, | ||
grade: "A-" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 650, | ||
grade: "B" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Magic Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 805, | ||
grade: "A" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Portis", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 907, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 750, | ||
grade: "A-" | ||
}]), | ||
_useState6 = _slicedToArray__default['default'](_useState5, 2), | ||
availableWallets = _useState6[0], | ||
setAvailableWallets = _useState6[1]; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "blockpass" | ||
}, /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return setModalController(true); | ||
}, | ||
className: "".concat(modalController ? "my-blur" : " ", " blockpass-button") | ||
}, "My Account"), modalController && /*#__PURE__*/React__default['default'].createElement(ModalController, { | ||
availableWallets: availableWallets, | ||
setModalController: setModalController, | ||
availableWalletModalOpen: availableWalletModalOpen, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen | ||
}), availableWalletModalOpen && /*#__PURE__*/React__default['default'].createElement(AvailableWallets, { | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
availableWallets: availableWallets, | ||
setAvailableWallets: setAvailableWallets | ||
})); | ||
}; | ||
function App() { | ||
return /*#__PURE__*/React.createElement(BlockPass, null); | ||
} | ||
var DygnifyCard = function DygnifyCard() { | ||
return /*#__PURE__*/React__default['default'].createElement(App, null); | ||
}; | ||
module.exports = DygnifyCard; |
@@ -1,75 +0,673 @@ | ||
import React from 'react'; | ||
import React$1, { useState, useEffect, useRef } from 'react'; | ||
import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; | ||
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray'; | ||
import { FaCheck } from 'react-icons/fa'; | ||
import emptyCart from 'https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png'; | ||
import _defineProperty from '@babel/runtime/helpers/defineProperty'; | ||
import Chart from 'react-apexcharts'; | ||
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}} | ||
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css,{}); | ||
var css$7 = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css$7,{}); | ||
var DygnifyCard = function DygnifyCard(_ref) { | ||
var firstModale = _ref.firstModale, | ||
onHandler = _ref.onHandler, | ||
firstModaleHandler = _ref.firstModaleHandler, | ||
_ref$id = _ref.id, | ||
id = _ref$id === void 0 ? "- - " : _ref$id; | ||
return /*#__PURE__*/React.createElement(React.Fragment, null, firstModale && /*#__PURE__*/React.createElement("div", { | ||
className: "main" | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "dygnify-backdrop", | ||
onClick: firstModaleHandler | ||
}), /*#__PURE__*/React.createElement("div", { | ||
className: "dygnify-modal" | ||
}, /*#__PURE__*/React.createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React.createElement("div", { | ||
className: "field-1-box" | ||
}, /*#__PURE__*/React.createElement("p", { | ||
className: "myCredit" | ||
}, "My Credit Score")), /*#__PURE__*/React.createElement("div", { | ||
className: "dygnify-wallet-box" | ||
}, /*#__PURE__*/React.createElement("h3", null, "Wallets"), /*#__PURE__*/React.createElement("div", { | ||
className: "wallet" | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "card-img" | ||
}, /*#__PURE__*/React.createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
var css$6 = "body{\r\n\tbackground-color: #0C0E11;\r\n}\r\n.star-modal {\r\n\tposition: absolute;\r\n\ttop: 15%;\r\n\tpadding: 20px;\r\n\tbackground-color: #f8f9fa;\r\n\tcolor: rgb(26, 25, 25);\r\n\tborder-radius: 15px;\r\n\tbox-shadow: inset -1px -1px 1px rgba(185, 185, 185, 0.1);\r\n}\r\n.modal-header{\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\tpadding: 15px 18px;\r\n\tborder-bottom: 1px solid #282c3a;\r\n}\r\n.modal-sub-header{\r\n\tborder-bottom: 0;\r\n\tcolor:rgb(7, 7, 7);\r\n}\r\n.modal-header div{\r\n\tdisplay: flex;\r\n\tgap:5px;\r\n}\r\n.modal-title{\r\n\tcolor: #9281FF;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tfont-size:1.5rem;\r\n}\r\n.modal-close{\r\n\tbackground-color: #c6bef775;\r\n\tborder: 0;\r\n\tborder-radius: 50%;\r\n\r\n\tpadding: 2px 12px;\r\n\tcolor:white;\r\n}\r\n.modal-close:hover{\r\n\tbackground-color: #9281ffd8;\r\n}\r\n.mt-8 {\r\n\tmargin-top: 2rem;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-3 {\r\n\tpadding-top: 0.75rem;\r\n\tpadding-bottom: 0.75rem;\r\n}\r\n\r\n.mb-4 {\r\n\tmargin-bottom: 1rem;\r\n}\r\n\r\n.mt-\\[20px\\] {\r\n\tmargin-top: 20px;\r\n}\r\n\r\n.box-border {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n}\r\n\r\n.h-\\[45px\\] {\r\n\theight: 45px;\r\n}\r\n\r\n.h-full {\r\n\theight: 100%;\r\n}\r\n\r\n.w-\\[45px\\] {\r\n\twidth: 45px;\r\n}\r\n\r\n.w-full {\r\n\twidth: 100%;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.grid-cols-2 {\r\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-sm {\r\n\tborder-radius: 0.125rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.border {\r\n\tborder-width: 1px;\r\n}\r\n\r\n.border-slate-800 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(30 41 59 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-slate-400 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(148 163 184 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-transparent {\r\n\tborder-color: transparent;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-green-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(34 197 94 / var(--tw-bg-opacity));\r\n}\r\n\r\n.p-1 {\r\n\tpadding: 0.25rem;\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-start {\r\n\ttext-align: start;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[20px\\] {\r\n\tfont-size: 20px;\r\n}\r\n\r\n.hover\\:border-red-300:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(252 165 165 / var(--tw-border-opacity));\r\n}\r\n\r\n.hover\\:border-blue-400:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(96 165 250 / var(--tw-border-opacity));\r\n}\r\n\r\n.absolute {\r\n\tposition: absolute;\r\n}\r\n\r\n.right-2 {\r\n\tright: 0.5rem;\r\n}\r\n\r\n.top-2 {\r\n\ttop: 0.5rem;\r\n}\r\n\r\n.mt-2 {\r\n\tmargin-top: 0.5rem;\r\n}\r\n\r\n.mr-4 {\r\n\tmargin-right: 1rem;\r\n}\r\n\r\n.mt-4 {\r\n\tmargin-top: 1rem;\r\n}\r\n\r\n.mr-2 {\r\n\tmargin-right: 0.5rem;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.h-\\[35px\\] {\r\n\theight: 35px;\r\n}\r\n\r\n.w-\\[35px\\] {\r\n\twidth: 35px;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.flex-col {\r\n\tflex-direction: column;\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.justify-end {\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.justify-center {\r\n\tjustify-content: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\r\n\t--tw-space-y-reverse: 0;\r\n\tmargin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\r\n\tmargin-bottom: calc(1rem * var(--tw-space-y-reverse));\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-1 {\r\n\tpadding-top: 0.25rem;\r\n\tpadding-bottom: 0.25rem;\r\n}\r\n\r\n.pb-2 {\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-end {\r\n\ttext-align: end;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[12px\\] {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.text-\\[25px\\] {\r\n\tfont-size: 25px;\r\n}\r\n\r\n.my-blur {\r\n\tfilter: blur(5px);\r\n\t-webkit-filter: blur(5px);\r\n}\r\n.my-blur-remove {\r\n\tfilter: blur(0px);\r\n\t-webkit-filter: blur(0px);\r\n}\r\n\r\n.blur-sm {\r\n\t--tw-blur: blur(4px);\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.filter {\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.bg-slate-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(100 116 139 / var(--tw-bg-opacity));\r\n}\r\n.h-screen {\r\n\theight: 200vh;\r\n}\r\n.text-center {\r\n\ttext-align: center;\r\n}\r\n.flex-center{\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n"; | ||
n(css$6,{}); | ||
var css$5 = ".available-wallets {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 12px 18px;\r\n\tmargin-top: 10px;\r\n}\r\n.single-wallet {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tgap:16px;\r\n\tpadding:8px;\r\n\tborder: 1px solid transparent;\r\n\tborder-radius: 10px;\r\n\tcursor:pointer;\r\n\tbox-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;\r\n}\r\n.single-wallet:hover {\r\n\t/* border: 1px solid #9281ff8e; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;\r\n}\r\n.selected-symbol {\r\n\tpadding-right: 10px;\r\n}\r\n.wallet-name {\r\n\tfont-weight: 400;\r\n}\r\n"; | ||
n(css$5,{}); | ||
var css$4 = "h1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n\tmargin: 0;\r\n}\r\n.macro-wallet-status,\r\n.macro-wallet-card {\r\n\tbackground-image: linear-gradient(\r\n\t\t90deg,\r\n\t\trgba(236, 235, 235, 0.76),\r\n\t\trgba(243, 242, 242, 0.384)\r\n\t);\r\n\tborder-radius: 8px;\r\n\tborder: 1px solid rgba(77, 154, 241, 0.096);\r\n\tmargin-top: 15px;\r\n\tpadding: 3px 6px;\r\n\tpadding-left: 15px;\r\n}\r\n.macro-wallet-status .section {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tbackground-color: #e6e6e6d2;\r\n\tmargin: 10px 2px;\r\n\tpadding: 5px 15px;\r\n\tborder-radius: 8px;\r\n\tborder-top-left-radius: 100px;\r\n\tborder-bottom-left-radius: 100px;\r\n}\r\n.user {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tmargin-left: -24px;\r\n\tborder-radius: 50%;\r\n\tmix-blend-mode: multiply;\r\n}\r\n.macro-wallet-status .section p {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmargin: 0;\r\n\tpadding-left: 5px;\r\n}\r\n.macro-wallet-status .section .wallet-connect {\r\n\ttext-decoration: underline;\r\n\tcolor: gray;\r\n\tcursor: pointer;\r\n}\r\n\r\n/*Macro Score*/\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 8px;\r\n\tborder-radius: 8px;\r\n}\r\n.macro-wallet-card {\r\n\tpadding: 10px 5px;\r\n}\r\n.macro-graph-container {\r\n\ttext-align: center;\r\n\tmargin-top: 10px;\r\n}\r\n.macro-graph {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n border-top-right-radius: 40px;\r\n}\r\n.graph-info{\r\n border-top-left-radius: 40px;\r\n}\r\n.go-back {\r\n\ttext-align: center;\r\n\tcolor: rgb(148, 148, 148);\r\n\tcursor: pointer;\r\n\tmargin-top: 10px;\r\n}\r\n.go-back-button:hover {\r\n\tcolor: rgb(37, 37, 37);\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.macro-score-check {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 15px;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n.graph-card {\r\n\tbackground-color: white;\r\n /* border-top-right-radius: 30px;\r\n border-bottom-left-radius: 30px; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;\r\n padding:5px;\r\n}\r\n.graph-card:hover {\r\n\tbox-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\r\n}\r\n\r\n.gray-header{\r\n\tcolor: rgb(92, 92, 92);\r\n}"; | ||
n(css$4,{}); | ||
var AvailableWallets = function AvailableWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
setAvailableWallets = _ref.setAvailableWallets; | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
className: "star-modal", | ||
style: { | ||
width: "55%", | ||
top: '25%', | ||
left: '20%', | ||
border: '1px solid gray' | ||
} | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "modal-header" | ||
}, /*#__PURE__*/React$1.createElement("h3", { | ||
className: "modal-title" | ||
}, "Available Wallets"), /*#__PURE__*/React$1.createElement("button", { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React$1.createElement("section", { | ||
className: "available-wallets" | ||
}, availableWallets.map(function (wallet, i) { | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
key: i, | ||
onClick: function onClick() { | ||
availableWallets[i].selected = true; | ||
setAvailableWallets(_toConsumableArray(availableWallets)); | ||
}, | ||
className: "single-wallet" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex items-center gap-4" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "h-[45px] w-[45px] p-1 rounded-md" | ||
}, /*#__PURE__*/React$1.createElement("img", { | ||
className: "h-full w-full rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React$1.createElement("h4", { | ||
className: "wallet-name" | ||
}, wallet.name)), wallet.selected === true ? /*#__PURE__*/React$1.createElement("p", { | ||
className: "selected-symbol" | ||
}, /*#__PURE__*/React$1.createElement(FaCheck, { | ||
className: "bg-green-500 rounded-full p-1 box-border text-[20px]" | ||
})) : ""); | ||
}))); | ||
}; | ||
var css$3 = ".blockpass {\r\n\tmin-height: 100vh;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n.blockpass-button {\r\n\ttext-align: center;\r\n\tmin-width: 120px;\r\n}\r\n"; | ||
n(css$3,{}); | ||
var css$2 = ".gradient-button{\r\n padding: 0.4rem 1rem;\r\n border-radius: 9999px;\r\n border:none;\r\n font-size: 16px;\r\n color: white;\r\n background-image: linear-gradient(90deg, #4B74FF, #9281FF);\r\n}\r\n.gradient-button:hover{\r\n background-image: linear-gradient(270deg, #4B74FF, #9281FF);\r\n}"; | ||
n(css$2,{}); | ||
var Button = function Button(_ref) { | ||
var onClick = _ref.onClick, | ||
className = _ref.className, | ||
children = _ref.children; | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
onClick: onClick, | ||
className: "".concat(className, " gradient-button cursor-pointer") | ||
}, children); | ||
}; | ||
var css$1 = "\r\n.connected-wallet {\r\n\tborder: 1px solid #9281ff6b;\r\n\tborder-radius: 40px;\r\n}\r\n.connected-wallet:hover {\r\n\tborder: 1px solid #9281ff;\r\n}\r\n.preview-nfc{\r\n text-align: center;\r\n width: 150px;\r\n}\r\n.preview-nfc span{\r\n letter-spacing:2px;\r\n}\r\n\r\n.is-primary{\r\n color:rgb(83, 83, 83);\r\n}\r\n.button-group{\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top:25px;\r\n}\r\n.empty-card{\r\n flex-direction: column;\r\n padding-bottom: 10px;\r\n border: 1px solid rgb(230, 229, 229);\r\n border-radius: 8px;\r\n}\r\n.empty-card img{\r\n width: 30%;\r\n}\r\n.empty-card h4{\r\n margin-top: -25px;\r\n color: rgb(153, 153, 153);\r\n}"; | ||
n(css$1,{}); | ||
function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } | ||
function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var ConnectedWallets = function ConnectedWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
handleNext = _ref.handleNext; | ||
var _useState = useState(false), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
isSelected = _useState2[0], | ||
setIsSelected = _useState2[1]; | ||
useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper$1(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setIsSelected(true); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React$1.createElement("div", null, isSelected ? /*#__PURE__*/React$1.createElement("section", null, /*#__PURE__*/React$1.createElement("div", { | ||
className: "connected-wallets-container space-y-4 mt-2" | ||
}, availableWallets.filter(function (wallet) { | ||
return wallet.selected === true; | ||
}).map(function (wallet, i) { | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
key: i, | ||
className: "connected-wallet flex gap-4 px-4 py-2" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex-center" | ||
}, /*#__PURE__*/React$1.createElement("img", { | ||
className: "h-[35px] w-[35px] rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex flex-col" | ||
}, /*#__PURE__*/React$1.createElement("h4", null, wallet.id), /*#__PURE__*/React$1.createElement("p", { | ||
className: "text-[12px] is-primary" | ||
}, wallet.primary ? "Primary wallet" : "Secondary wallet"))); | ||
}))) : /*#__PURE__*/React$1.createElement("section", { | ||
className: "empty-card flex-center" | ||
}, /*#__PURE__*/React$1.createElement("img", { | ||
src: emptyCart, | ||
alt: "" | ||
})), /*#__PURE__*/React.createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React.createElement("h4", null, id), /*#__PURE__*/React.createElement("p", { | ||
className: "p" | ||
}, "Primary Wallet"))), /*#__PURE__*/React.createElement("div", { | ||
className: "wallet" | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "card-img" | ||
}, /*#__PURE__*/React.createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
alt: "" | ||
})), /*#__PURE__*/React.createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React.createElement("h4", null, id), /*#__PURE__*/React.createElement("p", { | ||
className: "p" | ||
}, "Secondray Wallet")))), /*#__PURE__*/React.createElement("div", { | ||
className: "btn-box" | ||
}, /*#__PURE__*/React.createElement("button", { | ||
className: "btn", | ||
}), /*#__PURE__*/React$1.createElement("h4", null, "Empty Connected Wallets")), /*#__PURE__*/React$1.createElement("div", { | ||
className: "button-group" | ||
}, /*#__PURE__*/React$1.createElement(Button, { | ||
onClick: function onClick() { | ||
onHandler("button is clicked"); | ||
return setAvailableWalletModalOpen(true); | ||
}, | ||
className: "flex-center" | ||
}, "+ Add more wallets"), /*#__PURE__*/React$1.createElement(Button, { | ||
onClick: function onClick() { | ||
return handleNext(); | ||
}, | ||
className: "preview-nfc" | ||
}, "Preview NFC"))); | ||
}; | ||
var css = ".absolute {\r\n position: absolute;\r\n}\r\n\r\n.relative {\r\n position: relative;\r\n}\r\n\r\n.top-0 {\r\n top: 0px;\r\n}\r\n\r\n.mx-auto {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.mt-16 {\r\n margin-top: 4rem;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.h-12 {\r\n height: 3rem;\r\n}\r\n\r\n.w-full {\r\n width: 100%;\r\n}\r\n\r\n.w-12 {\r\n width: 3rem;\r\n}\r\n\r\n.w-20 {\r\n width: 5rem;\r\n}\r\n\r\n.flex-auto {\r\n flex: 1 1 auto;\r\n}\r\n\r\n.flex-col {\r\n flex-direction: column;\r\n}\r\n\r\n.items-center {\r\n align-items: center;\r\n}\r\n\r\n.justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.rounded-full {\r\n border-radius: 9999px;\r\n}\r\n\r\n.border-2 {\r\n border-width: 2px;\r\n}\r\n\r\n.border {\r\n border-width: 1px;\r\n}\r\n.text-\\[\\#6047FF\\] {\r\n --tw-text-opacity: 1;\r\n color: rgb(96 71 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.border-t-2 {\r\n border: 2px solid red;\r\n /* border-top-width: 2px solid red; */\r\n}\r\n\r\n.border-gray-300 {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-\\[\\#6047FF\\] {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(96 71 255 / var(--tw-border-opacity));\r\n}\r\n\r\n.bg-\\[\\#6047FF\\] {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(96 71 255 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-gray-500 {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(107 114 128 / var(--tw-bg-opacity));\r\n}\r\n\r\n.py-3 {\r\n padding-top: 0.75rem;\r\n padding-bottom: 0.75rem;\r\n}\r\n\r\n.px-3 {\r\n padding-left: 0.75rem;\r\n padding-right: 0.75rem;\r\n}\r\n\r\n.text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-\\[0\\.65rem\\] {\r\n font-size: 0.65rem;\r\n}\r\n\r\n.font-bold {\r\n font-weight: 700;\r\n}\r\n\r\n.font-medium {\r\n font-weight: 500;\r\n}\r\n\r\n.uppercase {\r\n text-transform: uppercase;\r\n}\r\n\r\n.text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-black {\r\n --tw-text-opacity: 1;\r\n color: rgb(0 0 0 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-400 {\r\n --tw-text-opacity: 1;\r\n color: rgb(156 163 175 / var(--tw-text-opacity));\r\n}\r\n\r\n.transition {\r\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n}\r\n\r\n.duration-500 {\r\n transition-duration: 500ms;\r\n}\r\n\r\n.ease-in-out {\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .dark\\:text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .md\\:w-20 {\r\n width: 5rem;\r\n }\r\n\r\n .md\\:w-1\\/2 {\r\n width: 50%;\r\n }\r\n\r\n .md\\:px-0 {\r\n padding-left: 0px;\r\n padding-right: 0px;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .lg\\:w-32 {\r\n width: 8rem;\r\n }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .xl\\:text-xs {\r\n font-size: 0.75rem;\r\n line-height: 1rem;\r\n }\r\n}\r\n"; | ||
n(css,{}); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
var Stepper = function Stepper(_ref) { | ||
var steps = _ref.steps, | ||
currentStep = _ref.currentStep; | ||
var _useState = useState([]), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
newStep = _useState2[0], | ||
setNewStep = _useState2[1]; | ||
var stepsRef = useRef(); | ||
var updateStep = function updateStep(stepNumber, steps) { | ||
var newSteps = _toConsumableArray(steps); | ||
var count = 0; | ||
while (count < newSteps.length) { | ||
//current step | ||
if (count === stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: true, | ||
selected: true, | ||
completed: false | ||
}); | ||
count++; | ||
} //step completed | ||
else if (count < stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: true, | ||
completed: true | ||
}); | ||
count++; | ||
} //step pending | ||
else { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: false, | ||
completed: false | ||
}); | ||
count++; | ||
} | ||
} | ||
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("svg", { | ||
width: "15", | ||
height: "15", | ||
viewBox: "0 0 20 21", | ||
fill: "none", | ||
xmlns: "http://www.w3.org/2000/svg" | ||
}, /*#__PURE__*/React.createElement("path", { | ||
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z", | ||
fill: "black" | ||
}), /*#__PURE__*/React.createElement("path", { | ||
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z", | ||
fill: "black" | ||
}))), "Add more wallet")), /*#__PURE__*/React.createElement("div", { | ||
className: "btn-preview-box" | ||
}, /*#__PURE__*/React.createElement("button", { | ||
className: "btnPreview" | ||
}, "Preview NFC"))))); | ||
return newSteps; | ||
}; | ||
useEffect(function () { | ||
var stepsState = steps.map(function (step, index) { | ||
return Object.assign({}, { | ||
description: step, | ||
completed: false, | ||
highlighted: index === 0 ? true : false, | ||
selected: index === 0 ? true : false | ||
}); | ||
}); | ||
stepsRef.current = stepsState; | ||
var current = updateStep(currentStep - 1, stepsRef.current); | ||
setNewStep(current); | ||
}, [steps, currentStep]); | ||
var stepsDisplay = newStep.map(function (step, index) { | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
key: index, | ||
className: index !== newStep.length - 1 ? "w-full items-center flex" : "items-center flex" // style={{ display: "flex" }} | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
// style={{ display: "flex" }} | ||
className: "relative flex-col items-center text-white flex" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex rounded-full transition duration-500 ease-in-out border-2 border-gray-300 h-12 w-12 items-center justify-center ".concat(step.selected ? "bg-[#6047FF] text-white font-bold border border-[#6047FF]" : "bg-gray-500 text-white font-bold border border-[#6047FF]") | ||
}, index + 1), /*#__PURE__*/React$1.createElement("div", { | ||
className: "absolute top-0 w-20 md:w-20 lg:w-32 text-center mt-16 text-[0.65rem] xl:text-xs font-medium uppercase ".concat(step.highlighted ? "text-[#6047FF]" : "text-gray-400") | ||
}, step.description)), /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex-auto border ".concat(newStep.length - 1 === index ? "" : "border-t-2", " transition duration-500 ease-in-out ").concat(step.completed ? "border-[#6047FF] " : "border-gray-300 ", " ") | ||
})); | ||
}); | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex mx-auto px-3 md:px-0 mp-14 justify-between items-center", | ||
style: { | ||
marginTop: '10px', | ||
width: '60%' | ||
} | ||
}, stepsDisplay); | ||
}; | ||
var Charts = function Charts(_ref) { | ||
var _state$otherChart, _state$otherChart2; | ||
var connectedWallet = _ref.connectedWallet; | ||
console.log(connectedWallet); | ||
var _useState = useState({ | ||
otherChart: { | ||
series: [0], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return "Empty"; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [""] | ||
} | ||
} | ||
}), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
state = _useState2[0], | ||
setState = _useState2[1]; | ||
useEffect(function () { | ||
if (connectedWallet.name !== "") { | ||
var score = connectedWallet.score, | ||
name = connectedWallet.name; | ||
setState({ | ||
otherChart: { | ||
series: [score / 10], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return name; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [" "] | ||
} | ||
} | ||
}); | ||
} | ||
}, [connectedWallet]); | ||
return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Chart, { | ||
options: state === null || state === void 0 ? void 0 : (_state$otherChart = state.otherChart) === null || _state$otherChart === void 0 ? void 0 : _state$otherChart.options, | ||
series: state === null || state === void 0 ? void 0 : (_state$otherChart2 = state.otherChart) === null || _state$otherChart2 === void 0 ? void 0 : _state$otherChart2.series, | ||
type: "radialBar", | ||
width: "280" | ||
})); | ||
}; | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var MacroScore = function MacroScore(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
handlePrev = _ref.handlePrev; | ||
var _useState = useState({ | ||
logo: emptyCart, | ||
name: "", | ||
id: "" | ||
}), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
connectedWallet = _useState2[0], | ||
setConnectedWallet = _useState2[1]; | ||
useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setConnectedWallet(_objectSpread({}, wallet)); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("section", { | ||
className: "macro-wallet-status" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "section" | ||
}, /*#__PURE__*/React$1.createElement("img", { | ||
src: connectedWallet.logo, | ||
alt: "", | ||
className: "user" | ||
}), connectedWallet.name === "" ? /*#__PURE__*/React$1.createElement("p", null, /*#__PURE__*/React$1.createElement("span", null, "Wallet not connected"), /*#__PURE__*/React$1.createElement("span", { | ||
className: "wallet-connect" | ||
}, "Connect wallet")) : /*#__PURE__*/React$1.createElement("p", null, /*#__PURE__*/React$1.createElement("span", null, connectedWallet.name), /*#__PURE__*/React$1.createElement("span", { | ||
className: "wallet-connect" | ||
}, connectedWallet.id)))), /*#__PURE__*/React$1.createElement("br", null), /*#__PURE__*/React$1.createElement("br", null), /*#__PURE__*/React$1.createElement("section", { | ||
className: "macro-wallet-card" | ||
}, /*#__PURE__*/React$1.createElement("h3", { | ||
className: "text-center gray-header" | ||
}, "MACRO Score"), /*#__PURE__*/React$1.createElement("div", { | ||
className: "grid macro-graph-container" | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "macro-graph graph-card" | ||
}, /*#__PURE__*/React$1.createElement(Charts, { | ||
connectedWallet: connectedWallet | ||
})), /*#__PURE__*/React$1.createElement("div", { | ||
className: "flex-center graph-info graph-card" | ||
}, /*#__PURE__*/React$1.createElement("p", null, "Your MACRO Score (Multi Asset Credit Risk Oracle) is your on-chain credit score.")))), /*#__PURE__*/React$1.createElement("br", null), /*#__PURE__*/React$1.createElement("section", { | ||
className: "macro-wallet-card macro-score-check" | ||
}, /*#__PURE__*/React$1.createElement("h3", { | ||
className: "gray-header" | ||
}, "Check your MACRO Score"), /*#__PURE__*/React$1.createElement(Button, { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(true); | ||
} | ||
}, "Connect Wallet")), /*#__PURE__*/React$1.createElement("br", null), /*#__PURE__*/React$1.createElement("p", { | ||
className: "go-back" | ||
}, /*#__PURE__*/React$1.createElement("span", { | ||
onClick: function onClick() { | ||
return handlePrev(); | ||
}, | ||
className: "go-back-button" | ||
}, "Go Back"))); | ||
}; | ||
var ModalController = function ModalController(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setModalController = _ref.setModalController, | ||
availableWalletModalOpen = _ref.availableWalletModalOpen, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen; | ||
var _useState = useState(1), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
currentStep = _useState2[0], | ||
setCurrentStep = _useState2[1]; | ||
var steps = ["wallets", "preview nfc"]; | ||
var displayStep = function displayStep(step) { | ||
switch (step) { | ||
case 1: | ||
return /*#__PURE__*/React$1.createElement(ConnectedWallets, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handleNext: handleNext | ||
}); | ||
case 2: | ||
return /*#__PURE__*/React$1.createElement(MacroScore, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handlePrev: handlePrev | ||
}); | ||
} | ||
}; | ||
var handleNext = function handleNext() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep + 1; | ||
}); | ||
}; | ||
var handlePrev = function handlePrev() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep - 1; | ||
}); | ||
}; | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
className: "".concat(availableWalletModalOpen ? "my-blur" : " ", " star-modal"), | ||
style: { | ||
width: "45%", | ||
minHeight: "50vh" | ||
} | ||
}, /*#__PURE__*/React$1.createElement("div", { | ||
className: "modal-header" | ||
}, /*#__PURE__*/React$1.createElement("h3", { | ||
className: "modal-title" | ||
}, "Account"), /*#__PURE__*/React$1.createElement("button", { | ||
onClick: function onClick() { | ||
return setModalController(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Stepper, { | ||
steps: steps, | ||
currentStep: currentStep | ||
}), /*#__PURE__*/React$1.createElement("div", { | ||
style: { | ||
marginTop: "60px" | ||
} | ||
}, displayStep(currentStep)))); | ||
}; | ||
var BlockPass = function BlockPass() { | ||
var _useState = useState(false), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
modalController = _useState2[0], | ||
setModalController = _useState2[1]; | ||
var _useState3 = useState(false), | ||
_useState4 = _slicedToArray(_useState3, 2), | ||
availableWalletModalOpen = _useState4[0], | ||
setAvailableWalletModalOpen = _useState4[1]; | ||
var _useState5 = useState([{ | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "MetaMask", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: true, | ||
score: 905, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "WalletConnect", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 700, | ||
grade: "A-" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 650, | ||
grade: "B" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Magic Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 805, | ||
grade: "A" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Portis", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 907, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 750, | ||
grade: "A-" | ||
}]), | ||
_useState6 = _slicedToArray(_useState5, 2), | ||
availableWallets = _useState6[0], | ||
setAvailableWallets = _useState6[1]; | ||
return /*#__PURE__*/React$1.createElement("div", { | ||
className: "blockpass" | ||
}, /*#__PURE__*/React$1.createElement(Button, { | ||
onClick: function onClick() { | ||
return setModalController(true); | ||
}, | ||
className: "".concat(modalController ? "my-blur" : " ", " blockpass-button") | ||
}, "My Account"), modalController && /*#__PURE__*/React$1.createElement(ModalController, { | ||
availableWallets: availableWallets, | ||
setModalController: setModalController, | ||
availableWalletModalOpen: availableWalletModalOpen, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen | ||
}), availableWalletModalOpen && /*#__PURE__*/React$1.createElement(AvailableWallets, { | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
availableWallets: availableWallets, | ||
setAvailableWallets: setAvailableWallets | ||
})); | ||
}; | ||
function App() { | ||
return /*#__PURE__*/React.createElement(BlockPass, null); | ||
} | ||
var DygnifyCard = function DygnifyCard() { | ||
return /*#__PURE__*/React$1.createElement(App, null); | ||
}; | ||
export default DygnifyCard; |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) : | ||
typeof define === 'function' && define.amd ? define(['react'], factory) : | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['react-rails-pagination'] = factory(global.React)); | ||
}(this, (function (React) { 'use strict'; | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/toConsumableArray'), require('react-icons/fa'), require('https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png'), require('@babel/runtime/helpers/defineProperty'), require('react-apexcharts')) : | ||
typeof define === 'function' && define.amd ? define(['react', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/toConsumableArray', 'react-icons/fa', 'https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png', '@babel/runtime/helpers/defineProperty', 'react-apexcharts'], factory) : | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['react-rails-pagination'] = factory(global.React$1, global._slicedToArray, global._toConsumableArray, global.fa, global.emptyCart, global._defineProperty, global.Chart)); | ||
}(this, (function (React$1, _slicedToArray, _toConsumableArray, fa, emptyCart, _defineProperty, Chart) { 'use strict'; | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1); | ||
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); | ||
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray); | ||
var emptyCart__default = /*#__PURE__*/_interopDefaultLegacy(emptyCart); | ||
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty); | ||
var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart); | ||
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}} | ||
var css = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css,{}); | ||
var css$7 = "* {\r\n padding: 0%;\r\n margin: 0%;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n}\r\n\r\nbody {\r\n background: rgb(0, 0, 0);\r\n\r\n}\r\n\r\nh4 {\r\n font-size: 0.8rem;\r\n}\r\n\r\n.p {\r\n font-size: 0.7rem;\r\n}\r\n\r\n.myCredit {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n}\r\n\r\n.main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dygnify-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 20;\r\n background-color: rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n.dygnify-modal {\r\n position: fixed;\r\n top: 15vh;\r\n width: 29%;\r\n background-color: white;\r\n padding: 1.1rem;\r\n border-radius: 14px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\r\n z-index: 30;\r\n animation: slide-down 300ms ease-out forwards;\r\n}\r\n\r\n.field-1-box {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 1rem 0;\r\n padding: 0.9rem 0.8rem;\r\n\r\n}\r\n\r\n.dygnify-wallet-box {\r\n margin: 1.5rem 0rem;\r\n}\r\n\r\n.wallet {\r\n background: #E7EAEE;\r\n border-radius: 5px;\r\n margin: 0.6rem 0;\r\n padding: 0.8rem;\r\n display: flex;\r\n gap: 1.1rem;\r\n overflow: hidden;\r\n align-items: center;\r\n}\r\n\r\n.wallet-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.1rem;\r\n}\r\n\r\n.card-img>img {\r\n width: 2rem;\r\n height: 2rem;\r\n border-radius: 100%;\r\n\r\n}\r\n\r\n.btn-box {\r\n display: flex;\r\n justify-content: end;\r\n}\r\n\r\n.btn-box>button {\r\n padding: 0.6rem 0.8rem;\r\n border: none;\r\n background: linear-gradient(81.75deg, #4B74FF 0%, #9281FF 100%);\r\n border-radius: 100px;\r\n}\r\n\r\n.btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n}\r\n\r\n.btn-preview-box {\r\n padding: 1rem 0rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.btnPreview {\r\n border: none;\r\n border: 2px solid #B8C0CC;\r\n border-radius: 2rem;\r\n padding: 0.7em 12.6em;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .modal {\r\n width: 40rem;\r\n left: calc(50% - 20rem);\r\n }\r\n}\r\n\r\n@keyframes slide-down {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-3rem);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}"; | ||
n(css$7,{}); | ||
var DygnifyCard = function DygnifyCard(_ref) { | ||
var firstModale = _ref.firstModale, | ||
onHandler = _ref.onHandler, | ||
firstModaleHandler = _ref.firstModaleHandler, | ||
_ref$id = _ref.id, | ||
id = _ref$id === void 0 ? "- - " : _ref$id; | ||
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, firstModale && /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "main" | ||
var css$6 = "body{\r\n\tbackground-color: #0C0E11;\r\n}\r\n.star-modal {\r\n\tposition: absolute;\r\n\ttop: 15%;\r\n\tpadding: 20px;\r\n\tbackground-color: #f8f9fa;\r\n\tcolor: rgb(26, 25, 25);\r\n\tborder-radius: 15px;\r\n\tbox-shadow: inset -1px -1px 1px rgba(185, 185, 185, 0.1);\r\n}\r\n.modal-header{\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\tpadding: 15px 18px;\r\n\tborder-bottom: 1px solid #282c3a;\r\n}\r\n.modal-sub-header{\r\n\tborder-bottom: 0;\r\n\tcolor:rgb(7, 7, 7);\r\n}\r\n.modal-header div{\r\n\tdisplay: flex;\r\n\tgap:5px;\r\n}\r\n.modal-title{\r\n\tcolor: #9281FF;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tfont-size:1.5rem;\r\n}\r\n.modal-close{\r\n\tbackground-color: #c6bef775;\r\n\tborder: 0;\r\n\tborder-radius: 50%;\r\n\r\n\tpadding: 2px 12px;\r\n\tcolor:white;\r\n}\r\n.modal-close:hover{\r\n\tbackground-color: #9281ffd8;\r\n}\r\n.mt-8 {\r\n\tmargin-top: 2rem;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-3 {\r\n\tpadding-top: 0.75rem;\r\n\tpadding-bottom: 0.75rem;\r\n}\r\n\r\n.mb-4 {\r\n\tmargin-bottom: 1rem;\r\n}\r\n\r\n.mt-\\[20px\\] {\r\n\tmargin-top: 20px;\r\n}\r\n\r\n.box-border {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n}\r\n\r\n.h-\\[45px\\] {\r\n\theight: 45px;\r\n}\r\n\r\n.h-full {\r\n\theight: 100%;\r\n}\r\n\r\n.w-\\[45px\\] {\r\n\twidth: 45px;\r\n}\r\n\r\n.w-full {\r\n\twidth: 100%;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.grid-cols-2 {\r\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-sm {\r\n\tborder-radius: 0.125rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.border {\r\n\tborder-width: 1px;\r\n}\r\n\r\n.border-slate-800 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(30 41 59 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-slate-400 {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(148 163 184 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-transparent {\r\n\tborder-color: transparent;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-green-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(34 197 94 / var(--tw-bg-opacity));\r\n}\r\n\r\n.p-1 {\r\n\tpadding: 0.25rem;\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-start {\r\n\ttext-align: start;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[20px\\] {\r\n\tfont-size: 20px;\r\n}\r\n\r\n.hover\\:border-red-300:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(252 165 165 / var(--tw-border-opacity));\r\n}\r\n\r\n.hover\\:border-blue-400:hover {\r\n\t--tw-border-opacity: 1;\r\n\tborder-color: rgb(96 165 250 / var(--tw-border-opacity));\r\n}\r\n\r\n.absolute {\r\n\tposition: absolute;\r\n}\r\n\r\n.right-2 {\r\n\tright: 0.5rem;\r\n}\r\n\r\n.top-2 {\r\n\ttop: 0.5rem;\r\n}\r\n\r\n.mt-2 {\r\n\tmargin-top: 0.5rem;\r\n}\r\n\r\n.mr-4 {\r\n\tmargin-right: 1rem;\r\n}\r\n\r\n.mt-4 {\r\n\tmargin-top: 1rem;\r\n}\r\n\r\n.mr-2 {\r\n\tmargin-right: 0.5rem;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n}\r\n\r\n.h-\\[35px\\] {\r\n\theight: 35px;\r\n}\r\n\r\n.w-\\[35px\\] {\r\n\twidth: 35px;\r\n}\r\n\r\n.cursor-pointer {\r\n\tcursor: pointer;\r\n}\r\n\r\n.flex-col {\r\n\tflex-direction: column;\r\n}\r\n\r\n.items-center {\r\n\talign-items: center;\r\n}\r\n\r\n.justify-end {\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.justify-center {\r\n\tjustify-content: center;\r\n}\r\n\r\n.gap-4 {\r\n\tgap: 1rem;\r\n}\r\n\r\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\r\n\t--tw-space-y-reverse: 0;\r\n\tmargin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\r\n\tmargin-bottom: calc(1rem * var(--tw-space-y-reverse));\r\n}\r\n\r\n.rounded-md {\r\n\tborder-radius: 0.375rem;\r\n}\r\n\r\n.rounded-full {\r\n\tborder-radius: 9999px;\r\n}\r\n\r\n.bg-slate-700 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(51 65 85 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-slate-600 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(71 85 105 / var(--tw-bg-opacity));\r\n}\r\n\r\n.px-2 {\r\n\tpadding-left: 0.5rem;\r\n\tpadding-right: 0.5rem;\r\n}\r\n\r\n.py-2 {\r\n\tpadding-top: 0.5rem;\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.px-4 {\r\n\tpadding-left: 1rem;\r\n\tpadding-right: 1rem;\r\n}\r\n\r\n.py-1 {\r\n\tpadding-top: 0.25rem;\r\n\tpadding-bottom: 0.25rem;\r\n}\r\n\r\n.pb-2 {\r\n\tpadding-bottom: 0.5rem;\r\n}\r\n\r\n.text-end {\r\n\ttext-align: end;\r\n}\r\n\r\n.text-\\[22px\\] {\r\n\tfont-size: 22px;\r\n}\r\n\r\n.text-\\[12px\\] {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.text-\\[25px\\] {\r\n\tfont-size: 25px;\r\n}\r\n\r\n.my-blur {\r\n\tfilter: blur(5px);\r\n\t-webkit-filter: blur(5px);\r\n}\r\n.my-blur-remove {\r\n\tfilter: blur(0px);\r\n\t-webkit-filter: blur(0px);\r\n}\r\n\r\n.blur-sm {\r\n\t--tw-blur: blur(4px);\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.filter {\r\n\tfilter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)\r\n\t\tvar(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)\r\n\t\tvar(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\r\n}\r\n\r\n.bg-slate-500 {\r\n\t--tw-bg-opacity: 1;\r\n\tbackground-color: rgb(100 116 139 / var(--tw-bg-opacity));\r\n}\r\n.h-screen {\r\n\theight: 200vh;\r\n}\r\n.text-center {\r\n\ttext-align: center;\r\n}\r\n.flex-center{\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n"; | ||
n(css$6,{}); | ||
var css$5 = ".available-wallets {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 12px 18px;\r\n\tmargin-top: 10px;\r\n}\r\n.single-wallet {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tgap:16px;\r\n\tpadding:8px;\r\n\tborder: 1px solid transparent;\r\n\tborder-radius: 10px;\r\n\tcursor:pointer;\r\n\tbox-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;\r\n}\r\n.single-wallet:hover {\r\n\t/* border: 1px solid #9281ff8e; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;\r\n}\r\n.selected-symbol {\r\n\tpadding-right: 10px;\r\n}\r\n.wallet-name {\r\n\tfont-weight: 400;\r\n}\r\n"; | ||
n(css$5,{}); | ||
var css$4 = "h1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n\tmargin: 0;\r\n}\r\n.macro-wallet-status,\r\n.macro-wallet-card {\r\n\tbackground-image: linear-gradient(\r\n\t\t90deg,\r\n\t\trgba(236, 235, 235, 0.76),\r\n\t\trgba(243, 242, 242, 0.384)\r\n\t);\r\n\tborder-radius: 8px;\r\n\tborder: 1px solid rgba(77, 154, 241, 0.096);\r\n\tmargin-top: 15px;\r\n\tpadding: 3px 6px;\r\n\tpadding-left: 15px;\r\n}\r\n.macro-wallet-status .section {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tbackground-color: #e6e6e6d2;\r\n\tmargin: 10px 2px;\r\n\tpadding: 5px 15px;\r\n\tborder-radius: 8px;\r\n\tborder-top-left-radius: 100px;\r\n\tborder-bottom-left-radius: 100px;\r\n}\r\n.user {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tmargin-left: -24px;\r\n\tborder-radius: 50%;\r\n\tmix-blend-mode: multiply;\r\n}\r\n.macro-wallet-status .section p {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmargin: 0;\r\n\tpadding-left: 5px;\r\n}\r\n.macro-wallet-status .section .wallet-connect {\r\n\ttext-decoration: underline;\r\n\tcolor: gray;\r\n\tcursor: pointer;\r\n}\r\n\r\n/*Macro Score*/\r\n\r\n.grid {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr 1fr;\r\n\tgap: 8px;\r\n\tborder-radius: 8px;\r\n}\r\n.macro-wallet-card {\r\n\tpadding: 10px 5px;\r\n}\r\n.macro-graph-container {\r\n\ttext-align: center;\r\n\tmargin-top: 10px;\r\n}\r\n.macro-graph {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n border-top-right-radius: 40px;\r\n}\r\n.graph-info{\r\n border-top-left-radius: 40px;\r\n}\r\n.go-back {\r\n\ttext-align: center;\r\n\tcolor: rgb(148, 148, 148);\r\n\tcursor: pointer;\r\n\tmargin-top: 10px;\r\n}\r\n.go-back-button:hover {\r\n\tcolor: rgb(37, 37, 37);\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.macro-score-check {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 15px;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n.graph-card {\r\n\tbackground-color: white;\r\n /* border-top-right-radius: 30px;\r\n border-bottom-left-radius: 30px; */\r\n\tbox-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;\r\n padding:5px;\r\n}\r\n.graph-card:hover {\r\n\tbox-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\r\n}\r\n\r\n.gray-header{\r\n\tcolor: rgb(92, 92, 92);\r\n}"; | ||
n(css$4,{}); | ||
var AvailableWallets = function AvailableWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
setAvailableWallets = _ref.setAvailableWallets; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "star-modal", | ||
style: { | ||
width: "55%", | ||
top: '25%', | ||
left: '20%', | ||
border: '1px solid gray' | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-backdrop", | ||
onClick: firstModaleHandler | ||
}), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-modal" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Boundle in Progress"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "field-1-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "myCredit" | ||
}, "My Credit Score")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "dygnify-wallet-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", null, "Wallets"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "card-img" | ||
className: "modal-header" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "modal-title" | ||
}, "Available Wallets"), /*#__PURE__*/React__default['default'].createElement("button", { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "available-wallets" | ||
}, availableWallets.map(function (wallet, i) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: i, | ||
onClick: function onClick() { | ||
availableWallets[i].selected = true; | ||
setAvailableWallets(_toConsumableArray__default['default'](availableWallets)); | ||
}, | ||
className: "single-wallet" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex items-center gap-4" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "h-[45px] w-[45px] p-1 rounded-md" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
className: "h-full w-full rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("h4", { | ||
className: "wallet-name" | ||
}, wallet.name)), wallet.selected === true ? /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "selected-symbol" | ||
}, /*#__PURE__*/React__default['default'].createElement(fa.FaCheck, { | ||
className: "bg-green-500 rounded-full p-1 box-border text-[20px]" | ||
})) : ""); | ||
}))); | ||
}; | ||
var css$3 = ".blockpass {\r\n\tmin-height: 100vh;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n.blockpass-button {\r\n\ttext-align: center;\r\n\tmin-width: 120px;\r\n}\r\n"; | ||
n(css$3,{}); | ||
var css$2 = ".gradient-button{\r\n padding: 0.4rem 1rem;\r\n border-radius: 9999px;\r\n border:none;\r\n font-size: 16px;\r\n color: white;\r\n background-image: linear-gradient(90deg, #4B74FF, #9281FF);\r\n}\r\n.gradient-button:hover{\r\n background-image: linear-gradient(270deg, #4B74FF, #9281FF);\r\n}"; | ||
n(css$2,{}); | ||
var Button = function Button(_ref) { | ||
var onClick = _ref.onClick, | ||
className = _ref.className, | ||
children = _ref.children; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
onClick: onClick, | ||
className: "".concat(className, " gradient-button cursor-pointer") | ||
}, children); | ||
}; | ||
var css$1 = "\r\n.connected-wallet {\r\n\tborder: 1px solid #9281ff6b;\r\n\tborder-radius: 40px;\r\n}\r\n.connected-wallet:hover {\r\n\tborder: 1px solid #9281ff;\r\n}\r\n.preview-nfc{\r\n text-align: center;\r\n width: 150px;\r\n}\r\n.preview-nfc span{\r\n letter-spacing:2px;\r\n}\r\n\r\n.is-primary{\r\n color:rgb(83, 83, 83);\r\n}\r\n.button-group{\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top:25px;\r\n}\r\n.empty-card{\r\n flex-direction: column;\r\n padding-bottom: 10px;\r\n border: 1px solid rgb(230, 229, 229);\r\n border-radius: 8px;\r\n}\r\n.empty-card img{\r\n width: 30%;\r\n}\r\n.empty-card h4{\r\n margin-top: -25px;\r\n color: rgb(153, 153, 153);\r\n}"; | ||
n(css$1,{}); | ||
function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } | ||
function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var ConnectedWallets = function ConnectedWallets(_ref) { | ||
var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
availableWallets = _ref.availableWallets, | ||
handleNext = _ref.handleNext; | ||
var _useState = React$1.useState(false), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
isSelected = _useState2[0], | ||
setIsSelected = _useState2[1]; | ||
React$1.useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper$1(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setIsSelected(true); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, isSelected ? /*#__PURE__*/React__default['default'].createElement("section", null, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "connected-wallets-container space-y-4 mt-2" | ||
}, availableWallets.filter(function (wallet) { | ||
return wallet.selected === true; | ||
}).map(function (wallet, i) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: i, | ||
className: "connected-wallet flex gap-4 px-4 py-2" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex-center" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
className: "h-[35px] w-[35px] rounded-full", | ||
src: wallet.logo, | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex flex-col" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, wallet.id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "text-[12px] is-primary" | ||
}, wallet.primary ? "Primary wallet" : "Secondary wallet"))); | ||
}))) : /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "empty-card flex-center" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
src: emptyCart__default['default'], | ||
alt: "" | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "p" | ||
}, "Primary Wallet"))), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet" | ||
}), /*#__PURE__*/React__default['default'].createElement("h4", null, "Empty Connected Wallets")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "button-group" | ||
}, /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return setAvailableWalletModalOpen(true); | ||
}, | ||
className: "flex-center" | ||
}, "+ Add more wallets"), /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return handleNext(); | ||
}, | ||
className: "preview-nfc" | ||
}, "Preview NFC"))); | ||
}; | ||
var css = ".absolute {\r\n position: absolute;\r\n}\r\n\r\n.relative {\r\n position: relative;\r\n}\r\n\r\n.top-0 {\r\n top: 0px;\r\n}\r\n\r\n.mx-auto {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.mt-16 {\r\n margin-top: 4rem;\r\n}\r\n\r\n.flex {\r\n display: flex;\r\n}\r\n\r\n.h-12 {\r\n height: 3rem;\r\n}\r\n\r\n.w-full {\r\n width: 100%;\r\n}\r\n\r\n.w-12 {\r\n width: 3rem;\r\n}\r\n\r\n.w-20 {\r\n width: 5rem;\r\n}\r\n\r\n.flex-auto {\r\n flex: 1 1 auto;\r\n}\r\n\r\n.flex-col {\r\n flex-direction: column;\r\n}\r\n\r\n.items-center {\r\n align-items: center;\r\n}\r\n\r\n.justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.rounded-full {\r\n border-radius: 9999px;\r\n}\r\n\r\n.border-2 {\r\n border-width: 2px;\r\n}\r\n\r\n.border {\r\n border-width: 1px;\r\n}\r\n.text-\\[\\#6047FF\\] {\r\n --tw-text-opacity: 1;\r\n color: rgb(96 71 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.border-t-2 {\r\n border: 2px solid red;\r\n /* border-top-width: 2px solid red; */\r\n}\r\n\r\n.border-gray-300 {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\r\n}\r\n\r\n.border-\\[\\#6047FF\\] {\r\n --tw-border-opacity: 1;\r\n border-color: rgb(96 71 255 / var(--tw-border-opacity));\r\n}\r\n\r\n.bg-\\[\\#6047FF\\] {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(96 71 255 / var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-gray-500 {\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(107 114 128 / var(--tw-bg-opacity));\r\n}\r\n\r\n.py-3 {\r\n padding-top: 0.75rem;\r\n padding-bottom: 0.75rem;\r\n}\r\n\r\n.px-3 {\r\n padding-left: 0.75rem;\r\n padding-right: 0.75rem;\r\n}\r\n\r\n.text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-\\[0\\.65rem\\] {\r\n font-size: 0.65rem;\r\n}\r\n\r\n.font-bold {\r\n font-weight: 700;\r\n}\r\n\r\n.font-medium {\r\n font-weight: 500;\r\n}\r\n\r\n.uppercase {\r\n text-transform: uppercase;\r\n}\r\n\r\n.text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-black {\r\n --tw-text-opacity: 1;\r\n color: rgb(0 0 0 / var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-400 {\r\n --tw-text-opacity: 1;\r\n color: rgb(156 163 175 / var(--tw-text-opacity));\r\n}\r\n\r\n.transition {\r\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\r\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n}\r\n\r\n.duration-500 {\r\n transition-duration: 500ms;\r\n}\r\n\r\n.ease-in-out {\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .dark\\:text-white {\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 / var(--tw-text-opacity));\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .md\\:w-20 {\r\n width: 5rem;\r\n }\r\n\r\n .md\\:w-1\\/2 {\r\n width: 50%;\r\n }\r\n\r\n .md\\:px-0 {\r\n padding-left: 0px;\r\n padding-right: 0px;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .lg\\:w-32 {\r\n width: 8rem;\r\n }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .xl\\:text-xs {\r\n font-size: 0.75rem;\r\n line-height: 1rem;\r\n }\r\n}\r\n"; | ||
n(css,{}); | ||
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
var Stepper = function Stepper(_ref) { | ||
var steps = _ref.steps, | ||
currentStep = _ref.currentStep; | ||
var _useState = React$1.useState([]), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
newStep = _useState2[0], | ||
setNewStep = _useState2[1]; | ||
var stepsRef = React$1.useRef(); | ||
var updateStep = function updateStep(stepNumber, steps) { | ||
var newSteps = _toConsumableArray__default['default'](steps); | ||
var count = 0; | ||
while (count < newSteps.length) { | ||
//current step | ||
if (count === stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: true, | ||
selected: true, | ||
completed: false | ||
}); | ||
count++; | ||
} //step completed | ||
else if (count < stepNumber) { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: true, | ||
completed: true | ||
}); | ||
count++; | ||
} //step pending | ||
else { | ||
newSteps[count] = _objectSpread$1(_objectSpread$1({}, newSteps[count]), {}, { | ||
highlighted: false, | ||
selected: false, | ||
completed: false | ||
}); | ||
count++; | ||
} | ||
} | ||
return newSteps; | ||
}; | ||
React$1.useEffect(function () { | ||
var stepsState = steps.map(function (step, index) { | ||
return Object.assign({}, { | ||
description: step, | ||
completed: false, | ||
highlighted: index === 0 ? true : false, | ||
selected: index === 0 ? true : false | ||
}); | ||
}); | ||
stepsRef.current = stepsState; | ||
var current = updateStep(currentStep - 1, stepsRef.current); | ||
setNewStep(current); | ||
}, [steps, currentStep]); | ||
var stepsDisplay = newStep.map(function (step, index) { | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
key: index, | ||
className: index !== newStep.length - 1 ? "w-full items-center flex" : "items-center flex" // style={{ display: "flex" }} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
// style={{ display: "flex" }} | ||
className: "relative flex-col items-center text-white flex" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex rounded-full transition duration-500 ease-in-out border-2 border-gray-300 h-12 w-12 items-center justify-center ".concat(step.selected ? "bg-[#6047FF] text-white font-bold border border-[#6047FF]" : "bg-gray-500 text-white font-bold border border-[#6047FF]") | ||
}, index + 1), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "absolute top-0 w-20 md:w-20 lg:w-32 text-center mt-16 text-[0.65rem] xl:text-xs font-medium uppercase ".concat(step.highlighted ? "text-[#6047FF]" : "text-gray-400") | ||
}, step.description)), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex-auto border ".concat(newStep.length - 1 === index ? "" : "border-t-2", " transition duration-500 ease-in-out ").concat(step.completed ? "border-[#6047FF] " : "border-gray-300 ", " ") | ||
})); | ||
}); | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "flex mx-auto px-3 md:px-0 mp-14 justify-between items-center", | ||
style: { | ||
marginTop: '10px', | ||
width: '60%' | ||
} | ||
}, stepsDisplay); | ||
}; | ||
var Charts = function Charts(_ref) { | ||
var _state$otherChart, _state$otherChart2; | ||
var connectedWallet = _ref.connectedWallet; | ||
console.log(connectedWallet); | ||
var _useState = React$1.useState({ | ||
otherChart: { | ||
series: [0], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return "Empty"; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [""] | ||
} | ||
} | ||
}), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
state = _useState2[0], | ||
setState = _useState2[1]; | ||
React$1.useEffect(function () { | ||
if (connectedWallet.name !== "") { | ||
var score = connectedWallet.score, | ||
name = connectedWallet.name; | ||
setState({ | ||
otherChart: { | ||
series: [score / 10], | ||
options: { | ||
chart: { | ||
height: 350, | ||
type: "radialBar" | ||
}, | ||
plotOptions: { | ||
radialBar: { | ||
startAngle: -135, | ||
endAngle: 135, | ||
hollow: { | ||
margin: 20, | ||
size: "70%", | ||
background: "#fff", | ||
image: undefined, | ||
imageOffsetX: 0, | ||
imageOffsetY: 0, | ||
position: "front", | ||
dropShadow: { | ||
enabled: true, | ||
top: 3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.24 | ||
} | ||
}, | ||
track: { | ||
background: "#fff", | ||
strokeWidth: "100%", | ||
margin: 0, | ||
// margin is in pixels | ||
dropShadow: { | ||
enabled: true, | ||
top: -3, | ||
left: 0, | ||
blur: 4, | ||
opacity: 0.35 | ||
} | ||
}, | ||
dataLabels: { | ||
showOn: "always", | ||
name: { | ||
offsetY: 20, | ||
show: true, | ||
color: "#888", | ||
fontSize: "13px" | ||
}, | ||
value: { | ||
formatter: function formatter(val) { | ||
return name; | ||
}, | ||
offsetY: -10, | ||
color: "#111", | ||
fontSize: "15px", | ||
show: true | ||
} | ||
} | ||
} | ||
}, | ||
fill: { | ||
type: "image", | ||
image: { | ||
src: ["https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png"] | ||
} | ||
}, | ||
stroke: { | ||
lineCap: "round" | ||
}, | ||
labels: [" "] | ||
} | ||
} | ||
}); | ||
} | ||
}, [connectedWallet]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Chart__default['default'], { | ||
options: state === null || state === void 0 ? void 0 : (_state$otherChart = state.otherChart) === null || _state$otherChart === void 0 ? void 0 : _state$otherChart.options, | ||
series: state === null || state === void 0 ? void 0 : (_state$otherChart2 = state.otherChart) === null || _state$otherChart2 === void 0 ? void 0 : _state$otherChart2.series, | ||
type: "radialBar", | ||
width: "280" | ||
})); | ||
}; | ||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } | ||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
var MacroScore = function MacroScore(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen, | ||
handlePrev = _ref.handlePrev; | ||
var _useState = React$1.useState({ | ||
logo: emptyCart__default['default'], | ||
name: "", | ||
id: "" | ||
}), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
connectedWallet = _useState2[0], | ||
setConnectedWallet = _useState2[1]; | ||
React$1.useEffect(function () { | ||
var _iterator = _createForOfIteratorHelper(availableWallets), | ||
_step; | ||
try { | ||
for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
var wallet = _step.value; | ||
if (wallet.selected === true) { | ||
setConnectedWallet(_objectSpread({}, wallet)); | ||
break; | ||
} | ||
} | ||
} catch (err) { | ||
_iterator.e(err); | ||
} finally { | ||
_iterator.f(); | ||
} | ||
}, [availableWallets]); | ||
return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-status" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "card-img" | ||
className: "section" | ||
}, /*#__PURE__*/React__default['default'].createElement("img", { | ||
src: "https://picsum.photos/200/300", | ||
alt: "" | ||
src: connectedWallet.logo, | ||
alt: "", | ||
className: "user" | ||
}), connectedWallet.name === "" ? /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement("span", null, "Wallet not connected"), /*#__PURE__*/React__default['default'].createElement("span", { | ||
className: "wallet-connect" | ||
}, "Connect wallet")) : /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement("span", null, connectedWallet.name), /*#__PURE__*/React__default['default'].createElement("span", { | ||
className: "wallet-connect" | ||
}, connectedWallet.id)))), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-card" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "text-center gray-header" | ||
}, "MACRO Score"), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "grid macro-graph-container" | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "macro-graph graph-card" | ||
}, /*#__PURE__*/React__default['default'].createElement(Charts, { | ||
connectedWallet: connectedWallet | ||
})), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "wallet-text" | ||
}, /*#__PURE__*/React__default['default'].createElement("h4", null, id), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "p" | ||
}, "Secondray Wallet")))), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "btn-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("button", { | ||
className: "btn", | ||
className: "flex-center graph-info graph-card" | ||
}, /*#__PURE__*/React__default['default'].createElement("p", null, "Your MACRO Score (Multi Asset Credit Risk Oracle) is your on-chain credit score.")))), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("section", { | ||
className: "macro-wallet-card macro-score-check" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "gray-header" | ||
}, "Check your MACRO Score"), /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
onHandler("button is clicked"); | ||
return setAvailableWalletModalOpen(true); | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("svg", { | ||
width: "15", | ||
height: "15", | ||
viewBox: "0 0 20 21", | ||
fill: "none", | ||
xmlns: "http://www.w3.org/2000/svg" | ||
}, /*#__PURE__*/React__default['default'].createElement("path", { | ||
d: "M9.41406 3.46875L10.5859 3.46875C10.6901 3.46875 10.7422 3.52083 10.7422 3.625L10.7422 17.375C10.7422 17.4792 10.6901 17.5312 10.5859 17.5312H9.41406C9.3099 17.5312 9.25781 17.4792 9.25781 17.375L9.25781 3.625C9.25781 3.52083 9.3099 3.46875 9.41406 3.46875Z", | ||
fill: "black" | ||
}), /*#__PURE__*/React__default['default'].createElement("path", { | ||
d: "M3.4375 9.75781L16.5625 9.75781C16.6667 9.75781 16.7188 9.8099 16.7188 9.91406V11.0859C16.7188 11.1901 16.6667 11.2422 16.5625 11.2422L3.4375 11.2422C3.33333 11.2422 3.28125 11.1901 3.28125 11.0859L3.28125 9.91406C3.28125 9.8099 3.33333 9.75781 3.4375 9.75781Z", | ||
fill: "black" | ||
}))), "Add more wallet")), /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "btn-preview-box" | ||
}, /*#__PURE__*/React__default['default'].createElement("button", { | ||
className: "btnPreview" | ||
}, "Preview NFC"))))); | ||
}, "Connect Wallet")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("p", { | ||
className: "go-back" | ||
}, /*#__PURE__*/React__default['default'].createElement("span", { | ||
onClick: function onClick() { | ||
return handlePrev(); | ||
}, | ||
className: "go-back-button" | ||
}, "Go Back"))); | ||
}; | ||
var ModalController = function ModalController(_ref) { | ||
var availableWallets = _ref.availableWallets, | ||
setModalController = _ref.setModalController, | ||
availableWalletModalOpen = _ref.availableWalletModalOpen, | ||
setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen; | ||
var _useState = React$1.useState(1), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
currentStep = _useState2[0], | ||
setCurrentStep = _useState2[1]; | ||
var steps = ["wallets", "preview nfc"]; | ||
var displayStep = function displayStep(step) { | ||
switch (step) { | ||
case 1: | ||
return /*#__PURE__*/React__default['default'].createElement(ConnectedWallets, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handleNext: handleNext | ||
}); | ||
case 2: | ||
return /*#__PURE__*/React__default['default'].createElement(MacroScore, { | ||
availableWallets: availableWallets, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
handlePrev: handlePrev | ||
}); | ||
} | ||
}; | ||
var handleNext = function handleNext() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep + 1; | ||
}); | ||
}; | ||
var handlePrev = function handlePrev() { | ||
setCurrentStep(function (prevCurrentStep) { | ||
return prevCurrentStep - 1; | ||
}); | ||
}; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "".concat(availableWalletModalOpen ? "my-blur" : " ", " star-modal"), | ||
style: { | ||
width: "45%", | ||
minHeight: "50vh" | ||
} | ||
}, /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "modal-header" | ||
}, /*#__PURE__*/React__default['default'].createElement("h3", { | ||
className: "modal-title" | ||
}, "Account"), /*#__PURE__*/React__default['default'].createElement("button", { | ||
onClick: function onClick() { | ||
return setModalController(false); | ||
}, | ||
className: "modal-close" | ||
}, "X")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Stepper, { | ||
steps: steps, | ||
currentStep: currentStep | ||
}), /*#__PURE__*/React__default['default'].createElement("div", { | ||
style: { | ||
marginTop: "60px" | ||
} | ||
}, displayStep(currentStep)))); | ||
}; | ||
var BlockPass = function BlockPass() { | ||
var _useState = React$1.useState(false), | ||
_useState2 = _slicedToArray__default['default'](_useState, 2), | ||
modalController = _useState2[0], | ||
setModalController = _useState2[1]; | ||
var _useState3 = React$1.useState(false), | ||
_useState4 = _slicedToArray__default['default'](_useState3, 2), | ||
availableWalletModalOpen = _useState4[0], | ||
setAvailableWalletModalOpen = _useState4[1]; | ||
var _useState5 = React$1.useState([{ | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "MetaMask", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: true, | ||
score: 905, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "WalletConnect", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 700, | ||
grade: "A-" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 650, | ||
grade: "B" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Magic Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 805, | ||
grade: "A" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Portis", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 907, | ||
grade: "A+" | ||
}, { | ||
logo: "https://res.cloudinary.com/dltzp2gwx/image/upload/v1675954961/Screenshot_20230209_203229_scvyen.png", | ||
name: "Coinbase Wallet", | ||
id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f", | ||
selected: false, | ||
primary: false, | ||
score: 750, | ||
grade: "A-" | ||
}]), | ||
_useState6 = _slicedToArray__default['default'](_useState5, 2), | ||
availableWallets = _useState6[0], | ||
setAvailableWallets = _useState6[1]; | ||
return /*#__PURE__*/React__default['default'].createElement("div", { | ||
className: "blockpass" | ||
}, /*#__PURE__*/React__default['default'].createElement(Button, { | ||
onClick: function onClick() { | ||
return setModalController(true); | ||
}, | ||
className: "".concat(modalController ? "my-blur" : " ", " blockpass-button") | ||
}, "My Account"), modalController && /*#__PURE__*/React__default['default'].createElement(ModalController, { | ||
availableWallets: availableWallets, | ||
setModalController: setModalController, | ||
availableWalletModalOpen: availableWalletModalOpen, | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen | ||
}), availableWalletModalOpen && /*#__PURE__*/React__default['default'].createElement(AvailableWallets, { | ||
setAvailableWalletModalOpen: setAvailableWalletModalOpen, | ||
availableWallets: availableWallets, | ||
setAvailableWallets: setAvailableWallets | ||
})); | ||
}; | ||
function App() { | ||
return /*#__PURE__*/React.createElement(BlockPass, null); | ||
} | ||
var DygnifyCard = function DygnifyCard() { | ||
return /*#__PURE__*/React__default['default'].createElement(App, null); | ||
}; | ||
return DygnifyCard; | ||
}))); |
{ | ||
"name": "krishan21-react-demo5", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"description": "React Component for adding DygnifyCard support to Rails or any other MVC Framework", | ||
@@ -29,5 +29,8 @@ "main": "src/index.js", | ||
"dependencies": { | ||
"apexcharts": "^3.37.0", | ||
"prop-types": "^15.7.2", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2" | ||
"react-apexcharts": "^1.4.0", | ||
"react-dom": "^17.0.2", | ||
"react-icons": "^4.7.1" | ||
}, | ||
@@ -34,0 +37,0 @@ "scripts": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
149514
2072
6
12
4
+ Addedapexcharts@^3.37.0
+ Addedreact-apexcharts@^1.4.0
+ Addedreact-icons@^4.7.1
+ Added@yr/monotone-cubic-spline@1.0.3(transitive)
+ Addedapexcharts@3.53.0(transitive)
+ Addedreact-apexcharts@1.4.1(transitive)
+ Addedreact-icons@4.12.0(transitive)
+ Addedsvg.draggable.js@2.2.2(transitive)
+ Addedsvg.easing.js@2.0.0(transitive)
+ Addedsvg.filter.js@2.0.2(transitive)
+ Addedsvg.js@2.7.1(transitive)
+ Addedsvg.pathmorphing.js@0.1.3(transitive)
+ Addedsvg.resize.js@1.4.3(transitive)
+ Addedsvg.select.js@2.1.23.0.1(transitive)