@stokr/components-library 0.6.7 → 0.6.8

package/dist/components/Checklist/UserChecklist.js

@@ -0,0 +1,284 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserChecklist = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ToDoList = _interopRequireWildcard(require("../ToDoList/ToDoList"));
+var _globalVariables = require("../../constants/globalVariables");
+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 _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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var UserChecklist = function UserChecklist(props) {
+  var _user$countryObj;
+  var _props$user = props.user,
+    user = _props$user === void 0 ? {} : _props$user,
+    additionalTasks = props.additionalTasks,
+    redirectCookie = props.redirectCookie,
+    getTasksCount = props.getTasksCount,
+    useRelativePath = props.useRelativePath;
+  var isFromAllowedCountry = (_user$countryObj = user.countryObj) === null || _user$countryObj === void 0 ? void 0 : _user$countryObj.isAllowed;
+  //const isFromAllowedCountry = isFromAllowedCountryFunction(user.country)
+
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    mandatoryTasks = _useState2[0],
+    setmandatoryTasks = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mandatoryTasksCount = _useState4[0],
+    setmandatoryTasksCount = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    walletTasks = _useState6[0],
+    setwalletTasks = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    walletTasksCount = _useState8[0],
+    setwalletTasksCount = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    optionalTasks = _useState10[0],
+    setoptionalTasks = _useState10[1];
+  (0, _react.useEffect)(function () {
+    generateTodos(user);
+  }, []);
+  (0, _react.useEffect)(function () {
+    //calculate mandatory count from tasks
+    if (mandatoryTasks.length > 0) {
+      if (isFromAllowedCountry) {
+        var _mandatoryTasksCount = mandatoryTasks.reduce(function (count, task) {
+          if (task.state === _ToDoList.ToDoTaskState.APPROVED || task.state === _ToDoList.ToDoTaskState.IN_PROGRESS) {
+            return count;
+          }
+          return count + 1;
+        }, 0);
+        setmandatoryTasksCount(_mandatoryTasksCount);
+      }
+    }
+  }, [mandatoryTasks, isFromAllowedCountry]);
+  (0, _react.useEffect)(function () {
+    //calculate wallet count from tasks
+    if (walletTasks.length > 0) {
+      if (isFromAllowedCountry) {
+        var _walletTasksCount = walletTasks.reduce(function (count, task) {
+          if (task.title === 'Liquid Address') {
+            if (task.state === _ToDoList.ToDoTaskState.APPROVED || task.state === _ToDoList.ToDoTaskState.IN_PROGRESS) {
+              return count;
+            }
+            return count + 1;
+          }
+          return count;
+        }, 0);
+        setwalletTasksCount(_walletTasksCount);
+      }
+    }
+  }, [walletTasks, isFromAllowedCountry]);
+  (0, _react.useEffect)(function () {
+    //if you provide function to get tasks count, pass the counter into the function
+    if (getTasksCount) {
+      getTasksCount({
+        mandatoryTasksCount: mandatoryTasksCount,
+        walletTasksCount: walletTasksCount
+      });
+    }
+  }, [mandatoryTasksCount, walletTasksCount, getTasksCount]);
+  var generateTodos = function generateTodos(userData) {
+    var country = user.country,
+      entity_name = user.entity_name,
+      investor_eth_addresses = user.investor_eth_addresses,
+      investor_algo_addresses = user.investor_algo_addresses,
+      countryObj = user.countryObj,
+      _user$liquid_network = user.liquid_network,
+      liquid_network = _user$liquid_network === void 0 ? {} : _user$liquid_network,
+      is_risk_questionnaire_finished = user.is_risk_questionnaire_finished,
+      kyc_status = user.kyc_status,
+      KYCDocuments = user.KYCDocuments,
+      lemonwayWallet = user.lemonwayWallet;
+    var platformURL = useRelativePath === true ? '' : "https://signup.".concat(_globalVariables.platformDomain);
+    if (entity_name) {
+      setmandatoryTasks([{
+        title: 'Verify Identity',
+        message: 'You will be contacted by our compliance team dedicated to legal entities.',
+        state: _ToDoList.ToDoTaskState.APPROVED
+        // link: '',
+      }, {
+        title: 'Risk Questionnaire',
+        message: is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
+        state: is_risk_questionnaire_finished ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: "".concat(platformURL, "/risk-questionnaire")
+      }]);
+      setwalletTasks([{
+        title: 'Liquid Address',
+        message: liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
+        state: liquid_network && liquid_network.GAID ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: "".concat(platformURL, "/register-liquid-securities")
+      }, {
+        title: 'Ethereum Address',
+        message: investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
+        state: investor_eth_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        //link: '', //`${platformURL}/register-ethereum`,
+        disabled: true,
+        tooltip: 'Connecting your ethereum wallet is currently disabled until we have a new offer using the ethereum network.'
+      }, {
+        title: 'Algorand Address',
+        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
+        state: investor_algo_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        //: '',
+        openModal: _ToDoList.ToDoModal.ALGO
+      }]);
+      setoptionalTasks([{
+        title: 'Tax ID',
+        message: !userData.taxId ? 'To invest in certain offerings, you need to provide your tax ID' : userData.taxId && 'You tax ID is submitted',
+        state: !userData.taxId ? _ToDoList.ToDoTaskState.SKIPPED : userData.taxId && _ToDoList.ToDoTaskState.APPROVED,
+        openModal: _ToDoList.ToDoModal.TAX_ID,
+        tooltip: "Some offers require you to provide your Tax ID before being able to invest.\n\nYour tax information will be disclosed to the Luxembourg tax authorities annually for tax compliance purposes required by the Common Reporting Standard implementation."
+      }]);
+    } else {
+      setmandatoryTasks([{
+        title: 'Country of Residence',
+        message: !country ? 'Please select your country of residence' : !isFromAllowedCountry ? 'STOKR is not yet available where you live' : 'Your country of residence has been registered',
+        state: !country ? _ToDoList.ToDoTaskState.SKIPPED : !isFromAllowedCountry ? _ToDoList.ToDoTaskState.DENIED : _ToDoList.ToDoTaskState.APPROVED,
+        link: "".concat(platformURL, "/country-of-residence")
+      }, {
+        title: 'Verify Identity',
+        message: getVerifyIdentityChecklist(isFromAllowedCountry, user).message,
+        state: getVerifyIdentityChecklist(isFromAllowedCountry, user).state,
+        link: getVerifyIdentityChecklist(isFromAllowedCountry, user).hasLink && "".concat(platformURL, "/verify-identity")
+      }, {
+        title: 'Risk Questionnaire',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : is_risk_questionnaire_finished ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: isFromAllowedCountry && "".concat(platformURL, "/risk-questionnaire")
+      }]);
+      setwalletTasks([{
+        title: 'Liquid Address',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : liquid_network && liquid_network.GAID ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: isFromAllowedCountry && "".concat(platformURL, "/register-liquid-securities")
+      }, {
+        title: 'Ethereum Address',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : investor_eth_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        disabled: true,
+        tooltip: 'Connecting your ethereum wallet is currently disabled until we have a new offer using the ethereum network.'
+      }, {
+        title: 'Algorand Address',
+        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
+        state: investor_algo_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        openModal: _ToDoList.ToDoModal.ALGO
+        //link: '',
+      }]);
+
+      setoptionalTasks([(countryObj === null || countryObj === void 0 ? void 0 : countryObj.SEPA) && {
+        title: 'Invest in Euro',
+        message: getInvestInEuroChecklist(isFromAllowedCountry, user).message,
+        state: getInvestInEuroChecklist(isFromAllowedCountry, user).state,
+        link: isFromAllowedCountry && kyc_status && kyc_status !== 'Draft' && "".concat(platformURL, "/verify-identity")
+      }, {
+        title: 'Tax ID',
+        message: !userData.taxId ? 'To invest in certain offerings, you need to provide your tax ID' : userData.taxId && 'You tax ID is submitted',
+        state: !userData.taxId ? _ToDoList.ToDoTaskState.SKIPPED : userData.taxId && _ToDoList.ToDoTaskState.APPROVED,
+        openModal: _ToDoList.ToDoModal.TAX_ID,
+        tooltip: "Some offers require you to provide your Tax ID before being able to invest.\n\nYour tax information will be disclosed to the Luxembourg tax authorities annually for tax compliance purposes required by the Common Reporting Standard implementation."
+      }]);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ToDoList.default
+  // successText="Almost done!"
+  , {
+    mandatoryTasks: mandatoryTasks,
+    walletsTasks: walletTasks,
+    optionalTasks: optionalTasks,
+    additionalTasks: additionalTasks,
+    redirectCookie: redirectCookie,
+    mandatoryTasksCount: mandatoryTasksCount,
+    walletsTasksCount: walletTasksCount,
+    pendingTasksCount: mandatoryTasksCount + walletTasksCount
+  });
+};
+exports.UserChecklist = UserChecklist;
+var getVerifyIdentityChecklist = function getVerifyIdentityChecklist(isFromAllowedCountry, user) {
+  var kyc_status = user.kyc_status;
+  var message;
+  var state;
+  var hasLink = false;
+  if (!isFromAllowedCountry) {
+    message = 'Sorry, you are living in a country where this is not available';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
+    message = 'Scan your ID to get the green light from the anti-fraud squad';
+    state = _ToDoList.ToDoTaskState.SKIPPED;
+    hasLink = true;
+  } else if (kyc_status.toUpperCase() === 'REJECTED' || kyc_status.toUpperCase() === 'ESCALATED' || kyc_status.toUpperCase() === 'IN PROGRESS' || kyc_status.toUpperCase() === 'INCONCLUSIVE' || kyc_status.toUpperCase() === 'APPROVED' || kyc_status.toUpperCase() === 'PENDING') {
+    message = 'Our anti-fraud squad is still working';
+    state = _ToDoList.ToDoTaskState.IN_PROGRESS;
+  } else if (kyc_status.toUpperCase() === 'ACCEPTED') {
+    message = 'Your ID is verified';
+    state = _ToDoList.ToDoTaskState.APPROVED;
+  } else if (kyc_status.toUpperCase() === 'REAPPLY') {
+    message = 'Document unreadable. Reapply with new ID';
+    state = _ToDoList.ToDoTaskState.DENIED;
+    hasLink = true;
+  } else if (kyc_status.toUpperCase() === 'DENIED') {
+    message = 'There seems to be a problem. The compliance team will contact you.';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  }
+  return {
+    message: message,
+    state: state,
+    hasLink: hasLink
+  };
+};
+var getInvestInEuroChecklist = function getInvestInEuroChecklist(isFromAllowedCountry, user) {
+  var _KYCDocuments$status, _KYCDocuments$status2, _KYCDocuments$status3;
+  var kyc_status = user.kyc_status,
+    KYCDocuments = user.KYCDocuments,
+    lemonwayWallet = user.lemonwayWallet;
+  var message;
+  var state;
+  if (!isFromAllowedCountry) {
+    message = 'Sorry, you are living in a country where this is not available';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if ((lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '6') {
+    message = 'Your document is verified';
+    state = _ToDoList.ToDoTaskState.APPROVED;
+  } else if ((lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '3') {
+    message = 'There seems to be a problem. The compliance team will contact you';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
+    message = 'In order to pay in EURO you need to verify your identity and provide a second identity document';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if (!KYCDocuments || (kyc_status === null || kyc_status === void 0 ? void 0 : kyc_status.toUpperCase()) === 'ACCEPTED') {
+    message = 'In order to pay in EURO you need to provide a second identity document';
+    state = _ToDoList.ToDoTaskState.SKIPPED;
+  } else if (((_KYCDocuments$status = KYCDocuments.status) === null || _KYCDocuments$status === void 0 ? void 0 : _KYCDocuments$status.toUpperCase()) === 'PENDING' || ((_KYCDocuments$status2 = KYCDocuments.status) === null || _KYCDocuments$status2 === void 0 ? void 0 : _KYCDocuments$status2.toUpperCase()) === 'APPROVED' && !lemonwayWallet || (lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '5') {
+    message = 'The Lemonway team is having a look. This usually takes up to 24 hours';
+    state = _ToDoList.ToDoTaskState.IN_PROGRESS;
+  } else if (((_KYCDocuments$status3 = KYCDocuments.status) === null || _KYCDocuments$status3 === void 0 ? void 0 : _KYCDocuments$status3.toUpperCase()) === 'REJECTED') {
+    message = 'It seems there was a problem with your second identity document. Please try again or contact the compliance team at compliance@stokr.io';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  }
+  return {
+    message: message,
+    state: state
+  };
+};
+UserChecklist.propTypes = {
+  user: _propTypes.default.object.isRequired,
+  additionalTasks: _propTypes.default.any,
+  redirectCookie: _propTypes.default.bool,
+  getTasksCount: _propTypes.default.func,
+  useRelativePath: _propTypes.default.bool
+};
+var _default = UserChecklist;
+exports.default = _default;

package/dist/components/Checklist/UserChecklist.stories.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserChecklist_user_dev_entity = exports.UserChecklist_user_dev = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _UserChecklist = _interopRequireDefault(require("./UserChecklist"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components Library/Checklist',
+  component: _UserChecklist.default,
+  argTypes: {
+    user: {
+      type: 'object',
+      defaultValue: {},
+      required: true
+    },
+    additionalTasks: {
+      type: 'node',
+      defaultValue: null
+    },
+    redirectCookie: {
+      type: 'bool',
+      defaultValue: false
+    },
+    useRelativePath: {
+      type: 'bool',
+      defaultValue: false
+    },
+    getTasksCount: {
+      type: 'function',
+      action: 'getTasksCount'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_UserChecklist.default, args));
+};
+var userDev = {
+  _id: '61851acd5b9a890013297b12',
+  email: 'user-dev@email.com',
+  user_type: 'investor',
+  name: 'bilal',
+  lastname: 'dev',
+  username: 'user-dev',
+  entity_name: '',
+  active: true,
+  country: 'Germany',
+  //is_risk_questionnaire_finished: true,
+  kyc_status: 'Accepted',
+  investor_algo_addresses: [{
+    name: 'another test',
+    address: 'TVNC3QHY5LXKBMX7RGJG3B25EJPW73V5WMMEMUB33V2HEPEA2H77UPOYTQ',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'my algo test',
+    address: 'YFQD2RZIIZQSO67F6MG3DJVXLMF2QU4EKGBPVXVIF3XTLKGWUZ36WMG56A',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test algosigner',
+    address: 'Y4UGMCSV3B43Y7QAM2VUVPETDDO5JVHDRB3ZC5MBF2VTUTCP4X437A65JU',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test new address',
+    address: 'B36KBEDYKBUSEMNRITZFFE7VINEPMP5MJTNUCRM5S5AP6GNWMWW4B5PEQI',
+    whitelistedAssets: ['20918100', '92363258']
+  }, {
+    address: 'E3Q6B5Q7JHFCEWBGGXJGEMXVAL6MSJBUHCGURZRMASRTJFDD6RQTJHPF4A',
+    whitelistedAssets: ['20918100', '20013569']
+  }, {
+    name: 'test 30/05',
+    address: 'RTQWXHRWZCBT5FF474T4DTL3VRVHERY3Q6LWLMPP24IXNOYIXBDQXJ2Z6M',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'test info 01/06',
+    address: 'U4EIZEMPRGC77P6HJSFCLWYE4NUMNILU5DBZCKV44QMJ3TQOADRETVVAZU',
+    whitelistedAssets: ['20918100', '92363258']
+  }],
+  liquid_network: {
+    GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    dt: '2021-11-19T16:19:33.390Z',
+    '2812e39a-ad94-4368-9db4-9d98c1c00f38': {
+      id: 6020,
+      GAID: 'GA2wpGUWe8uDz9VEdNXJ5v17UwD25f',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [3],
+      creator: 22,
+      whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f']
+    },
+    whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr'],
+    '35c3c8ed-59a3-4a87-9612-b48236aeab3b': {
+      id: 273,
+      GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [24],
+      creator: 62,
+      whitelisted_gaids: ['GA2skwb5v5nKaaAKNd61knuRJC47Jr']
+    }
+  },
+  pass_reset: '',
+  taxId: '4355',
+  countryObj: {
+    _id: '630e0361b8d1fb0007929bc4',
+    name: 'Germany',
+    ISO2: 'DE',
+    ISO3: 'DEU',
+    isAllowed: true,
+    SEPA: true,
+    'infinite-fleet': true,
+    'la-boulangerie': true
+  }
+};
+var UserChecklist_user_dev = Template.bind({});
+exports.UserChecklist_user_dev = UserChecklist_user_dev;
+UserChecklist_user_dev.args = {
+  user: userDev,
+  useRelativePath: true,
+  getTasksCount: function getTasksCount(data) {
+    console.log(data);
+  }
+};
+var UserChecklist_user_dev_entity = Template.bind({});
+exports.UserChecklist_user_dev_entity = UserChecklist_user_dev_entity;
+UserChecklist_user_dev_entity.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    entity_name: 'test'
+  }),
+  useRelativePath: true,
+  getTasksCount: function getTasksCount(data) {
+    console.log(data);
+  }
+};

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -0,0 +1,100 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ComponentScroll = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCustomScrollbars = require("react-custom-scrollbars-2");
+var _ComponentScroll = require("./ComponentScroll.styles");
+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; }
+var ComponentScroll = function ComponentScroll(props) {
+  var children = props.children,
+    noMobileScroll = props.noMobileScroll,
+    autoHeight = props.autoHeight,
+    autoHeightMax = props.autoHeightMax,
+    autoHeightMin = props.autoHeightMin,
+    offset = props.offset,
+    barPadding = props.barPadding,
+    topPadding = props.topPadding,
+    className = props.className,
+    handleScroll = props.handleScroll;
+  var scrollRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (scrollRef.current) {
+      //set scroll ref on initial render
+      handleScroll && handleScroll({}, scrollRef.current);
+    }
+  }, []);
+  var onMouseMove = function onMouseMove() {};
+  var handleScrollFrame = function handleScrollFrame(values) {
+    if (values) {
+      //if we need scroll ref and scroll values, you can use handleScroll function to handle it
+      handleScroll && handleScroll(values, scrollRef.current);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.Container, {
+    className: className,
+    noMobileScroll: noMobileScroll
+  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Outer, {
+    offset: offset,
+    barPadding: barPadding,
+    topPadding: topPadding
+  }, /*#__PURE__*/_react.default.createElement(_reactCustomScrollbars.Scrollbars, {
+    ref: scrollRef,
+    style: {
+      height: '100%'
+    },
+    renderTrackHorizontal: function renderTrackHorizontal(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackH, props);
+    },
+    renderThumbHorizontal: function renderThumbHorizontal(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbH, props);
+    },
+    renderTrackVertical: function renderTrackVertical(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackV, props);
+    },
+    renderThumbVertical: function renderThumbVertical(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbV, props);
+    },
+    hideTracksWhenNotNeeded: true,
+    onMouseMove: onMouseMove,
+    onScrollFrame: handleScrollFrame,
+    autoHeight: autoHeight,
+    autoHeightMax: autoHeightMax,
+    autoHeightMin: autoHeightMin,
+    universal: true
+  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Inner, {
+    offset: offset
+  }, children))));
+};
+exports.ComponentScroll = ComponentScroll;
+ComponentScroll.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
+  noMobileScroll: _propTypes.default.bool,
+  autoHeight: _propTypes.default.bool,
+  autoHeightMax: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  autoHeightMin: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  barPadding: _propTypes.default.number,
+  topPadding: _propTypes.default.number,
+  offset: _propTypes.default.number,
+  handleScroll: _propTypes.default.func
+};
+ComponentScroll.defaultProps = {
+  className: '',
+  noMobileScroll: false,
+  autoHeight: false,
+  autoHeightMax: 0,
+  autoHeightMin: 0,
+  barPadding: 32,
+  topPadding: 0,
+  offset: 0,
+  handleScroll: null
+};
+var _default = ComponentScroll;
+exports.default = _default;

package/dist/components/ComponentScroll/ComponentScroll.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScrollAutoHeight2000 = exports.ScrollAutoHeight1000 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentScroll = require("./ComponentScroll");
+var _SvgIcons = require("../SvgIcons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/ComponentScroll',
+  component: _ComponentScroll.ComponentScroll,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    className: {
+      type: 'string',
+      defaultValue: ''
+    },
+    noMobileScroll: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    autoHeight: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    autoHeightMax: {
+      type: 'number or string',
+      defaultValue: 0
+    },
+    autoHeightMin: {
+      type: 'number or string',
+      defaultValue: 0
+    },
+    barPadding: {
+      type: 'number',
+      defaultValue: 32
+    },
+    topPadding: {
+      type: 'number',
+      defaultValue: 0
+    },
+    offset: {
+      type: 'number',
+      defaultValue: 0
+    },
+    handleScroll: {
+      type: 'function',
+      defaultValue: null
+    },
+    setRef: {
+      type: 'function',
+      action: 'setRef'
+    },
+    onMouseMove: {
+      type: 'function',
+      action: 'mouseMove'
+    },
+    onDebounce: {
+      type: 'function',
+      action: 'debounceRefresh'
+    },
+    refreshScrollBar: {
+      type: 'function',
+      action: 'refreshScrollbar'
+    },
+    onScroll: {
+      type: 'function',
+      action: 'handleScroll'
+    }
+  },
+  parameters: {
+    backgrounds: {
+      default: 'grey'
+    }
+  }
+}; //making default background grey in story as this reveals height /offset properties ..
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args);
+};
+var ScrollAutoHeight1000 = Template.bind({});
+exports.ScrollAutoHeight1000 = ScrollAutoHeight1000;
+ScrollAutoHeight1000.args = {
+  children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  autoHeight: true,
+  autoHeightMax: 1000,
+  autoHeightMin: 1000
+};
+var ScrollAutoHeight2000 = Template.bind({});
+exports.ScrollAutoHeight2000 = ScrollAutoHeight2000;
+ScrollAutoHeight2000.args = {
+  children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  autoHeight: true,
+  autoHeightMax: 2000,
+  autoHeightMin: 2000
+};