@stokr/components-library 2.2.2 → 2.2.3

package/dist/components/Modal/PaymentModal.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaymentModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _Modal = require("./Modal");
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Grid = require("../Grid/Grid.styles");
+var _CryptoAddress = _interopRequireDefault(require("../CryptoAddress/CryptoAddress"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _formatCurrencyValue = require("../../utils/formatCurrencyValue");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _Icon = _interopRequireWildcard(require("../Icon/Icon.style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["data", "user", "isModalOpen", "onModalClose", "isRedemption", "noCTA", "CTAText", "additionalInfoRight", "withTimer", "error", "secondsRemaining"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var WarningBox = _styledComponents.default.div.withConfig({
+  displayName: "PaymentModal__WarningBox",
+  componentId: "sc-17n3hz3-0"
+})(["background:", ";border-radius:4px;padding:10px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:9;"], _theme.default.cWarning);
+var BlurBox = _styledComponents.default.div.withConfig({
+  displayName: "PaymentModal__BlurBox",
+  componentId: "sc-17n3hz3-1"
+})(["filter:blur(4px);position:absolute;top:0px;left:50%;transform:translate(-50%,0px);"]);
+var PaymentModal = function PaymentModal(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? {} : _ref$data,
+    user = _ref.user,
+    isModalOpen = _ref.isModalOpen,
+    _ref$onModalClose = _ref.onModalClose,
+    onModalClose = _ref$onModalClose === void 0 ? function () {} : _ref$onModalClose,
+    isRedemption = _ref.isRedemption,
+    _ref$noCTA = _ref.noCTA,
+    noCTA = _ref$noCTA === void 0 ? false : _ref$noCTA,
+    _ref$CTAText = _ref.CTAText,
+    CTAText = _ref$CTAText === void 0 ? 'Done' : _ref$CTAText,
+    additionalInfoRight = _ref.additionalInfoRight,
+    _ref$withTimer = _ref.withTimer,
+    withTimer = _ref$withTimer === void 0 ? false : _ref$withTimer,
+    error = _ref.error,
+    secondsRemaining = _ref.secondsRemaining,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var projectData = data.projectData,
+    currencyAmount = data.currencyAmount,
+    tokenAmount = data.tokenAmount,
+    tokenPrice = data.tokenPrice,
+    tokenSymbolToSend = data.tokenSymbolToSend,
+    tokenSymbol = data.tokenSymbol,
+    createdAt = data.createdAt,
+    GAID = data.GAID,
+    currencyType = data.currencyType;
+  var paymentlink = "liquidnetwork:".concat(projectData === null || projectData === void 0 ? void 0 : projectData.companyWallet, "?amount=").concat(tokenAmount, "&assetid=").concat(projectData === null || projectData === void 0 ? void 0 : projectData.secondaryAssetId);
+  var isKYCVerified = (user === null || user === void 0 ? void 0 : user.kyc_status) === 'Accepted';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    isOpen: isModalOpen,
+    onClose: onModalClose
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "SEND YOUR ", tokenSymbolToSend)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Request date:", ' ', /*#__PURE__*/_react.default.createElement("strong", null, (0, _moment.default)(createdAt).format('DD MMM YYYY - hh:mm'))), /*#__PURE__*/_react.default.createElement("p", null, "Your securities: ", /*#__PURE__*/_react.default.createElement("strong", null, " ", tokenSymbol)), /*#__PURE__*/_react.default.createElement("p", null, "Your liquid address:", /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+    noHead: true,
+    data: {
+      value: GAID,
+      tooltip: true,
+      shortAddress: true
+    },
+    fontSize: 16
+  })), /*#__PURE__*/_react.default.createElement("p", null, "Your number of securities: ", /*#__PURE__*/_react.default.createElement("strong", null, tokenAmount)), /*#__PURE__*/_react.default.createElement("p", null, isRedemption ? 'Redemption currency' : 'Currency', ":", /*#__PURE__*/_react.default.createElement("strong", null, " ", (0, _formatCurrencyValue.getCurrencySymbol)(currencyType)))), !noCTA && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onModalClose
+  }, CTAText)), withTimer && secondsRemaining > 0 && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _theme.default.cWarning
+    }
+  }, _moment.default.utc(secondsRemaining * 1000).format('mm:ss'), ' ', "Waiting for payment...")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, error ? error : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Send your ", tokenSymbolToSend, " to the treasury liquid address below."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _theme.default.cWarning
+    }
+  }, "Make sure your liquid address has enough LBTC to cover the transaction fees."), isKYCVerified ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CryptoAddress.default
+  //noHead
+  , {
+    title: 'Treasury liquid address:',
+    data: {
+      value: projectData === null || projectData === void 0 ? void 0 : projectData.companyWallet,
+      tooltip: true,
+      shortAddress: true
+    },
+    fontSize: 16
+  }), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
+    value: paymentlink,
+    size: 150
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(WarningBox, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Icon.iconsMap.warning,
+    size: 32,
+    color: 'white'
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _theme.default.cWhite
+    }
+  }, "Your KYC needs an update, please contact", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: "mailto:compliance@stokr.io",
+    style: {
+      color: 'inherit'
+    }
+  }, "compliance@stokr.io"))), /*#__PURE__*/_react.default.createElement(BlurBox, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
+    value: paymentlink,
+    size: 150
+  })))), additionalInfoRight && additionalInfoRight)))))));
+};
+exports.PaymentModal = PaymentModal;
+var _default = PaymentModal;
+exports.default = _default;

package/dist/components/Modal/PaymentModal.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaymentModalOpen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PaymentModal = require("./PaymentModal");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Modal',
+  component: _PaymentModal.PaymentModal,
+  argTypes: {
+    data: {
+      type: 'object',
+      defaultValue: false
+    },
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onClose: {
+      type: 'function',
+      action: 'onClose'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_PaymentModal.PaymentModal, args)));
+};
+var PaymentModalOpen = Template.bind({});
+exports.PaymentModalOpen = PaymentModalOpen;
+PaymentModalOpen.args = {
+  //children: 'I am the Child Element',
+  isModalOpen: true,
+  data: {
+    projectData: {
+      companyWallet: 'something'
+    },
+    currencyAmount: 32,
+    tokenAmount: '34',
+    tokenPrice: '345',
+    tokenSymbol: '$',
+    createdAt: '20.6.2024',
+    GAID: 'some gaid',
+    currencyType: 'lbtc'
+  }
+};
+
+// export const PaymentModalFullscreen = Template.bind({})
+// ModalFullscreen.args = {
+//   //children: 'I am the Child Element and I am Fullscreen',
+//   isOpen: true,
+//   //fullscreen: true,
+
+// }

package/dist/index.js

@@ -1169,6 +1169,17 @@ Object.keys(_analytics).forEach(function (key) {
     }
   });
 });
+var _formatCurrencyValue = require("./utils/formatCurrencyValue");
+Object.keys(_formatCurrencyValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formatCurrencyValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _formatCurrencyValue[key];
+    }
+  });
+});
 var _FA = require("./components/2FA");
 Object.keys(_FA).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/utils/customHooks.js

@@ -60,10 +60,14 @@ var useCooldown = function useCooldown(cooldownInSeconds) {
     _useState2 = _slicedToArray(_useState, 2),
     isDisabled = _useState2[0],
     setIsDisabled = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    secondsRemaining = _useState4[0],
-    setSecondsRemaining = _useState4[1];
+    hasTimerFinished = _useState4[0],
+    sethasTimerFinished = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    secondsRemaining = _useState6[0],
+    setSecondsRemaining = _useState6[1];
   var lastCalled = (0, _react.useRef)(null);
   var startCooldown = function startCooldown(actionCallback) {
     if (!isDisabled) {
@@ -80,6 +84,7 @@ var useCooldown = function useCooldown(cooldownInSeconds) {
     setSecondsRemaining(cooldownInSeconds - secondsPassed);
     if (secondsPassed >= cooldownInSeconds) {
       setIsDisabled(false);
+      sethasTimerFinished(true);
     }
   }, [cooldownInSeconds]);
   (0, _react.useEffect)(function () {
@@ -95,7 +100,8 @@ var useCooldown = function useCooldown(cooldownInSeconds) {
   return {
     isDisabled: isDisabled,
     secondsRemaining: secondsRemaining,
-    startCooldown: startCooldown
+    startCooldown: startCooldown,
+    hasTimerFinished: hasTimerFinished
   };
 };
 exports.useCooldown = useCooldown;

package/dist/utils/formatCurrencyValue.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrencySymbol = exports.formatCurrencyValue = void 0;
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var formatCurrencyValue = function formatCurrencyValue(currency, value) {
+  var tokenDecimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  var _ref = {
+      tether: ['USDT', 2],
+      gemini: ['GUSD', 2],
+      ether: ['ETH', 4],
+      artid: ['ARTID', 2],
+      bitcoin: ['BTC', 6],
+      lbtc: ['LBTC', 6],
+      'lusdt-bfx': ['USDT', 2],
+      'lbtc-bfx': ['BTC', 6],
+      'btc-bfx': ['BTC', 6],
+      euro: ['EUR', 2],
+      lusdt: ['USDT', 2],
+      'bitcoin-private': ['EUR', 2],
+      'lbtc-private': ['BTC', 6]
+    }[currency] || [currency, tokenDecimals],
+    _ref2 = _slicedToArray(_ref, 2),
+    symbol = _ref2[0],
+    decimals = _ref2[1];
+  return "".concat(symbol, " ").concat(parseFloat(Math.abs(value)).toFixed(decimals));
+};
+exports.formatCurrencyValue = formatCurrencyValue;
+var getCurrencySymbol = function getCurrencySymbol(currencySelected) {
+  return {
+    euro: '€',
+    ether: 'ETH',
+    tether: 'USDT',
+    bitcoin: 'BTC',
+    lbtc: 'LBTC',
+    lusdt: 'USDT',
+    'lusdt-bfx': 'USDT',
+    'lbtc-bfx': 'LBTC',
+    'btc-bfx': 'BTC'
+  }[currencySelected] || currencySelected;
+};
+exports.getCurrencySymbol = getCurrencySymbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -47,7 +47,9 @@
     "http-server": "^14.1.1",
     "js-cookie": "^3.0.5",
     "mobile-detect": "^1.4.5",
+    "moment": "^2.30.1",
     "prop-types": "^15.8.1",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-collapse": "^5.1.1",