krishan21-react-demo5 - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

dist/index.cjs.js

 'use strict';
 
+var React = require('react');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var fa = require('react-icons/fa');
+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 _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
 
-var DygnifyCard = function DygnifyCard() {
+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$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: "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 emptyCart = "https://picsum.photos/200/300";
+
+var ConnectedWallets = function ConnectedWallets(_ref) {
+  var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+      availableWallets = _ref.availableWallets,
+      handleNext = _ref.handleNext;
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
-      first = _useState2[0],
-      setfirst = _useState2[1];
+      isSelected = _useState2[0],
+      setIsSelected = _useState2[1];
 
-  var onHandler = function onHandler() {
-    setfirst(true);
+  React.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: emptyCart,
+    alt: ""
+  }), /*#__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.useState([]),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      newStep = _useState2[0],
+      setNewStep = _useState2[1];
+
+  var stepsRef = React.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;
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
-    onClick: onHandler
-  }, first ? "clicked" : "click"));
+  React.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.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.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 user = "https://picsum.photos/200/300";
+
+var MacroScore = function MacroScore(_ref) {
+  var availableWallets = _ref.availableWallets,
+      setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+      handlePrev = _ref.handlePrev;
+
+  var _useState = React.useState({
+    logo: user,
+    name: "",
+    id: ""
+  }),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      connectedWallet = _useState2[0],
+      setConnectedWallet = _useState2[1];
+
+  React.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: "section"
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
+    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: "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() {
+      return setAvailableWalletModalOpen(true);
+    }
+  }, "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.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.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      modalController = _useState2[0],
+      setModalController = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      availableWalletModalOpen = _useState4[0],
+      setAvailableWalletModalOpen = _useState4[1];
+
+  var _useState5 = React.useState([{
+    logo: "https://picsum.photos/200/300",
+    name: "MetaMask",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: true,
+    score: 905,
+    grade: "A+"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "WalletConnect",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 700,
+    grade: "A-"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Coinbase",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 650,
+    grade: "B"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Magic Wallet",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 805,
+    grade: "A"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Portis",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 907,
+    grade: "A+"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Coinbase Wallet",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 750,
+    grade: "A-"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Torus",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 700,
+    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
+  }));
+};
+
+var DygnifyCard = function DygnifyCard() {
+  return /*#__PURE__*/React__default['default'].createElement(BlockPass, null);
+};
+
 module.exports = DygnifyCard;

dist/index.esm.js

@@ -0,19 +1,675 @@
+import React, { useState, useEffect, useRef } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState } from 'react';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { FaCheck } from 'react-icons/fa';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import Chart from 'react-apexcharts';
 
-var DygnifyCard = function DygnifyCard() {
+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$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.createElement("div", {
+    className: "star-modal",
+    style: {
+      width: "55%",
+      top: '25%',
+      left: '20%',
+      border: '1px solid gray'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "modal-title"
+  }, "Available Wallets"), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setAvailableWalletModalOpen(false);
+    },
+    className: "modal-close"
+  }, "X")), /*#__PURE__*/React.createElement("section", {
+    className: "available-wallets"
+  }, availableWallets.map(function (wallet, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      onClick: function onClick() {
+        availableWallets[i].selected = true;
+        setAvailableWallets(_toConsumableArray(availableWallets));
+      },
+      className: "single-wallet"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "h-[45px] w-[45px] p-1 rounded-md"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "h-full w-full rounded-full",
+      src: wallet.logo,
+      alt: ""
+    })), /*#__PURE__*/React.createElement("h4", {
+      className: "wallet-name"
+    }, wallet.name)), wallet.selected === true ? /*#__PURE__*/React.createElement("p", {
+      className: "selected-symbol"
+    }, /*#__PURE__*/React.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.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 emptyCart = "https://picsum.photos/200/300";
+
+var ConnectedWallets = function ConnectedWallets(_ref) {
+  var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+      availableWallets = _ref.availableWallets,
+      handleNext = _ref.handleNext;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      first = _useState2[0],
-      setfirst = _useState2[1];
+      isSelected = _useState2[0],
+      setIsSelected = _useState2[1];
 
-  var onHandler = function onHandler() {
-    setfirst(true);
+  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.createElement("div", null, isSelected ? /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.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.createElement("div", {
+      key: i,
+      className: "connected-wallet flex gap-4 px-4 py-2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex-center"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "h-[35px] w-[35px] rounded-full",
+      src: wallet.logo,
+      alt: ""
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col"
+    }, /*#__PURE__*/React.createElement("h4", null, wallet.id), /*#__PURE__*/React.createElement("p", {
+      className: "text-[12px] is-primary"
+    }, wallet.primary ? "Primary wallet" : "Secondary wallet")));
+  }))) : /*#__PURE__*/React.createElement("section", {
+    className: "empty-card flex-center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: emptyCart,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("h4", null, "Empty Connected Wallets")), /*#__PURE__*/React.createElement("div", {
+    className: "button-group"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setAvailableWalletModalOpen(true);
+    },
+    className: "flex-center"
+  }, "+ Add more wallets"), /*#__PURE__*/React.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++;
+          }
+    }
+
+    return newSteps;
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-    onClick: onHandler
-  }, first ? "clicked" : "click"));
+  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.createElement("div", {
+      key: index,
+      className: index !== newStep.length - 1 ? "w-full items-center flex" : "items-center flex" // style={{ display: "flex" }}
+
+    }, /*#__PURE__*/React.createElement("div", {
+      // style={{ display: "flex" }}
+      className: "relative flex-col items-center text-white flex"
+    }, /*#__PURE__*/React.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.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.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.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.createElement("div", null, /*#__PURE__*/React.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 user = "https://picsum.photos/200/300";
+
+var MacroScore = function MacroScore(_ref) {
+  var availableWallets = _ref.availableWallets,
+      setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+      handlePrev = _ref.handlePrev;
+
+  var _useState = useState({
+    logo: user,
+    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.createElement("div", null, /*#__PURE__*/React.createElement("section", {
+    className: "macro-wallet-status"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: connectedWallet.logo,
+    alt: "",
+    className: "user"
+  }), connectedWallet.name === "" ? /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", null, "Wallet not connected"), /*#__PURE__*/React.createElement("span", {
+    className: "wallet-connect"
+  }, "Connect wallet")) : /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", null, connectedWallet.name), /*#__PURE__*/React.createElement("span", {
+    className: "wallet-connect"
+  }, connectedWallet.id)))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("section", {
+    className: "macro-wallet-card"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-center gray-header"
+  }, "MACRO Score"), /*#__PURE__*/React.createElement("div", {
+    className: "grid macro-graph-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "macro-graph graph-card"
+  }, /*#__PURE__*/React.createElement(Charts, {
+    connectedWallet: connectedWallet
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-center graph-info graph-card"
+  }, /*#__PURE__*/React.createElement("p", null, "Your MACRO Score (Multi Asset Credit Risk Oracle) is your on-chain credit score.")))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("section", {
+    className: "macro-wallet-card macro-score-check"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "gray-header"
+  }, "Check your MACRO Score"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setAvailableWalletModalOpen(true);
+    }
+  }, "Connect Wallet")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", {
+    className: "go-back"
+  }, /*#__PURE__*/React.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.createElement(ConnectedWallets, {
+          availableWallets: availableWallets,
+          setAvailableWalletModalOpen: setAvailableWalletModalOpen,
+          handleNext: handleNext
+        });
+
+      case 2:
+        return /*#__PURE__*/React.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.createElement("div", {
+    className: "".concat(availableWalletModalOpen ? "my-blur" : " ", " star-modal"),
+    style: {
+      width: "45%",
+      minHeight: "50vh"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "modal-title"
+  }, "Account"), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setModalController(false);
+    },
+    className: "modal-close"
+  }, "X")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Stepper, {
+    steps: steps,
+    currentStep: currentStep
+  }), /*#__PURE__*/React.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://picsum.photos/200/300",
+    name: "MetaMask",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: true,
+    score: 905,
+    grade: "A+"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "WalletConnect",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 700,
+    grade: "A-"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Coinbase",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 650,
+    grade: "B"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Magic Wallet",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 805,
+    grade: "A"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Portis",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 907,
+    grade: "A+"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Coinbase Wallet",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 750,
+    grade: "A-"
+  }, {
+    logo: "https://picsum.photos/200/300",
+    name: "Torus",
+    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+    selected: false,
+    primary: false,
+    score: 700,
+    grade: "A-"
+  }]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      availableWallets = _useState6[0],
+      setAvailableWallets = _useState6[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "blockpass"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setModalController(true);
+    },
+    className: "".concat(modalController ? "my-blur" : " ", " blockpass-button")
+  }, "My Account"), modalController && /*#__PURE__*/React.createElement(ModalController, {
+    availableWallets: availableWallets,
+    setModalController: setModalController,
+    availableWalletModalOpen: availableWalletModalOpen,
+    setAvailableWalletModalOpen: setAvailableWalletModalOpen
+  }), availableWalletModalOpen && /*#__PURE__*/React.createElement(AvailableWallets, {
+    setAvailableWalletModalOpen: setAvailableWalletModalOpen,
+    availableWallets: availableWallets,
+    setAvailableWallets: setAvailableWallets
+  }));
+};
+
+var DygnifyCard = function DygnifyCard() {
+  return /*#__PURE__*/React.createElement(BlockPass, null);
+};
+
 export default DygnifyCard;

dist/index.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@babel/runtime/helpers/slicedToArray'), require('react')) :
-	typeof define === 'function' && define.amd ? define(['@babel/runtime/helpers/slicedToArray', 'react'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['react-rails-pagination'] = factory(global._slicedToArray, global.React));
-}(this, (function (_slicedToArray, 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('@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', '@babel/runtime/helpers/defineProperty', 'react-apexcharts'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['react-rails-pagination'] = factory(global.React, global._slicedToArray, global._toConsumableArray, global.fa, global._defineProperty, global.Chart));
+}(this, (function (React, _slicedToArray, _toConsumableArray, fa, _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 _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+	var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+	var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+	var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
 
-	var DygnifyCard = function DygnifyCard() {
+	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$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: "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 emptyCart = "https://picsum.photos/200/300";
+
+	var ConnectedWallets = function ConnectedWallets(_ref) {
+	  var setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+	      availableWallets = _ref.availableWallets,
+	      handleNext = _ref.handleNext;
+
 	  var _useState = React.useState(false),
 	      _useState2 = _slicedToArray__default['default'](_useState, 2),
-	      first = _useState2[0],
-	      setfirst = _useState2[1];
+	      isSelected = _useState2[0],
+	      setIsSelected = _useState2[1];
 
-	  var onHandler = function onHandler() {
-	    setfirst(true);
+	  React.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: emptyCart,
+	    alt: ""
+	  }), /*#__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.useState([]),
+	      _useState2 = _slicedToArray__default['default'](_useState, 2),
+	      newStep = _useState2[0],
+	      setNewStep = _useState2[1];
+
+	  var stepsRef = React.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;
 	  };
 
-	  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("button", {
-	    onClick: onHandler
-	  }, first ? "clicked" : "click"));
+	  React.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.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.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 user = "https://picsum.photos/200/300";
+
+	var MacroScore = function MacroScore(_ref) {
+	  var availableWallets = _ref.availableWallets,
+	      setAvailableWalletModalOpen = _ref.setAvailableWalletModalOpen,
+	      handlePrev = _ref.handlePrev;
+
+	  var _useState = React.useState({
+	    logo: user,
+	    name: "",
+	    id: ""
+	  }),
+	      _useState2 = _slicedToArray__default['default'](_useState, 2),
+	      connectedWallet = _useState2[0],
+	      setConnectedWallet = _useState2[1];
+
+	  React.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: "section"
+	  }, /*#__PURE__*/React__default['default'].createElement("img", {
+	    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: "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() {
+	      return setAvailableWalletModalOpen(true);
+	    }
+	  }, "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.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.useState(false),
+	      _useState2 = _slicedToArray__default['default'](_useState, 2),
+	      modalController = _useState2[0],
+	      setModalController = _useState2[1];
+
+	  var _useState3 = React.useState(false),
+	      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+	      availableWalletModalOpen = _useState4[0],
+	      setAvailableWalletModalOpen = _useState4[1];
+
+	  var _useState5 = React.useState([{
+	    logo: "https://picsum.photos/200/300",
+	    name: "MetaMask",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: true,
+	    score: 905,
+	    grade: "A+"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "WalletConnect",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 700,
+	    grade: "A-"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "Coinbase",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 650,
+	    grade: "B"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "Magic Wallet",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 805,
+	    grade: "A"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "Portis",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 907,
+	    grade: "A+"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "Coinbase Wallet",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 750,
+	    grade: "A-"
+	  }, {
+	    logo: "https://picsum.photos/200/300",
+	    name: "Torus",
+	    id: "0xc5e5be3602995a7f0bd737e0931d776a0bcc336f",
+	    selected: false,
+	    primary: false,
+	    score: 700,
+	    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
+	  }));
+	};
+
+	var DygnifyCard = function DygnifyCard() {
+	  return /*#__PURE__*/React__default['default'].createElement(BlockPass, null);
+	};
+
 	return DygnifyCard;
 
 })));

package.json

 {
   "name": "krishan21-react-demo5",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "React Component for adding DygnifyCard support to Rails or any other MVC Framework",
@@ -5,0 +5,0 @@ "main": "src/index.js",

New alerts

Major refactor

Supply chain risk

Package 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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138472

increased by1136.69%

Lines of code

2058

increased by3448.28%

Worsened metrics

Number of low supply chain risk alerts

9

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes