@stokr/components-library 0.5.6 → 0.5.8

package/dist/components/InvestCalculator/InvestCalculator.js

@@ -0,0 +1,367 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InvestCalculatorCurrencies = exports.InvestCalculator = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var yup = _interopRequireWildcard(require("yup"));
+var _Input = _interopRequireDefault(require("components/Input/Input"));
+var _Select = _interopRequireDefault(require("components/Input/Select"));
+var _InvestCalculator = require("./InvestCalculator.styles");
+var _fixDecimals = _interopRequireDefault(require("../../utils/fix-decimals"));
+var _templateObject, _PropTypes$shape, _PropTypes$shape2;
+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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+//import { tokenDecimals } from 'constants/decimals'
+
+var InvestCalculatorCurrencies = {
+  ETH: 'eth',
+  EUR: 'eur',
+  GUSD: 'gusd',
+  USDT: 'usdt',
+  CRYPTO: 'crypto'
+};
+exports.InvestCalculatorCurrencies = InvestCalculatorCurrencies;
+var BN = require('bignumber.js');
+var getNumericPart = function getNumericPart(input) {
+  // Normalize decimal separator and
+  // find numeric part (w/o leading zeros)
+  var match = input.replace(/,/, '.').match(/[1-9]\d*(\.\d*)?|\.\d*/);
+  // Prepend leading zero if necessary
+  return match ? match[0].replace(/^\./, '0.') : '0';
+};
+var InvestCalculator = /*#__PURE__*/function (_PureComponent) {
+  _inherits(InvestCalculator, _PureComponent);
+  var _super = _createSuper(InvestCalculator);
+  function InvestCalculator() {
+    var _this;
+    _classCallCheck(this, InvestCalculator);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      tokens: 0,
+      currencyValue: 0,
+      selectedCurrencyValue: 0,
+      selectedCurrency: _this.props.userSelectedCurrency === 'ether' ? InvestCalculatorCurrencies.ETH : _this.props.userSelectedCurrency === 'gemini' ? InvestCalculatorCurrencies.GUSD : InvestCalculatorCurrencies.USDT,
+      // selectedCurrency: InvestCalculatorCurrencies.ETH,
+      errors: {}
+    });
+    _defineProperty(_assertThisInitialized(_this), "normalizeCurrencySelected", function (currencySelected) {
+      if (currencySelected === 'euro') return 'eur';
+      if (currencySelected === 'ether') return 'eth';
+      if (currencySelected === 'gemini') return 'gusd';
+      if (currencySelected === 'tether') return 'usdt';
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e, field) {
+      var onFocus = _this.props.onFocus;
+      onFocus && onFocus(e, field);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e, field) {
+      var onBlur = _this.props.onBlur;
+      onBlur && onBlur(e, field);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (e, field) {
+      var onChange = _this.props.onChange;
+      onChange && onChange(e, field);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onErrors", function (e, field) {
+      var onErrors = _this.props.onErrors;
+      onErrors && onErrors(e, field);
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeTokens", function (e, field) {
+      var _this$props = _this.props,
+        exchangeRate = _this$props.exchangeRate,
+        available = _this$props.available,
+        name = _this$props.name,
+        userSelectedCurrency = _this$props.userSelectedCurrency;
+      var selectedCurrency = _this.state.selectedCurrency;
+      var tokensInput = getNumericPart(e.target.value);
+      var tokens = BN(tokensInput);
+      if (tokens.gt(available)) {
+        tokens = BN(available);
+        tokensInput = tokens.toFixed(4);
+      }
+      var currencyValue = tokens.times(exchangeRate[selectedCurrency]);
+      var selectedCurrencyValue = tokens * exchangeRate[_this.normalizeCurrencySelected(userSelectedCurrency)];
+      _this.validate({
+        tokens: tokens.toNumber(),
+        currencyValue: currencyValue.toNumber(),
+        selectedCurrency: selectedCurrency
+      });
+      _this.setState({
+        tokens: tokensInput,
+        currencyValue: currencyValue.toFixed(4),
+        selectedCurrencyValue: selectedCurrencyValue
+      }, function () {
+        _this.onChange({
+          target: {
+            name: name,
+            value: tokens,
+            currencyValue: currencyValue,
+            currencyName: selectedCurrency,
+            selectedCurrencyValue: selectedCurrencyValue
+          }
+        }, field);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeCurrency", function (e) {
+      var _this$props2 = _this.props,
+        exchangeRate = _this$props2.exchangeRate,
+        name = _this$props2.name,
+        userSelectedCurrency = _this$props2.userSelectedCurrency;
+      var tokens = _this.state.tokens;
+      var selectedCurrency = e.value;
+      var currencyValue = tokens * exchangeRate[selectedCurrency];
+      var selectedCurrencyValue = tokens * exchangeRate[_this.normalizeCurrencySelected(userSelectedCurrency)];
+      _this.validate({
+        tokens: tokens,
+        currencyValue: currencyValue,
+        selectedCurrency: selectedCurrency
+      });
+      _this.setState({
+        currencyValue: currencyValue,
+        selectedCurrency: selectedCurrency,
+        selectedCurrencyValue: selectedCurrencyValue
+      }, function () {
+        _this.onChange({
+          target: {
+            name: name,
+            value: tokens,
+            currencyValue: currencyValue,
+            currencyName: selectedCurrency,
+            selectedCurrencyValue: selectedCurrencyValue
+          }
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeCurrencyValue", function (e, field) {
+      var _this$props3 = _this.props,
+        exchangeRate = _this$props3.exchangeRate,
+        name = _this$props3.name,
+        available = _this$props3.available,
+        userSelectedCurrency = _this$props3.userSelectedCurrency;
+      var selectedCurrency = _this.state.selectedCurrency;
+      var currencyValueInput = getNumericPart(e.target.value);
+      var currencyValue = BN(currencyValueInput);
+      var tokens = currencyValue.div(exchangeRate[selectedCurrency]);
+      var selectedCurrencyValue = tokens * exchangeRate[_this.normalizeCurrencySelected(userSelectedCurrency)];
+      if (tokens.gt(available)) {
+        tokens = BN(available);
+        currencyValue = tokens.times(exchangeRate[selectedCurrency]);
+        currencyValueInput = currencyValue.toFixed(4);
+      }
+      _this.validate({
+        tokens: tokens.toNumber(),
+        currencyValue: currencyValue.toNumber(),
+        selectedCurrency: selectedCurrency
+      });
+      _this.setState({
+        tokens: tokens.toFixed(4),
+        currencyValue: currencyValueInput,
+        selectedCurrencyValue: selectedCurrencyValue
+      }, function () {
+        _this.onChange({
+          target: {
+            name: name,
+            value: tokens,
+            currencyValue: currencyValue,
+            currencyName: selectedCurrency,
+            selectedCurrencyValue: selectedCurrencyValue
+          }
+        }, field);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "validate", function (values) {
+      var _this$props4 = _this.props,
+        minTokensCount = _this$props4.minTokensCount,
+        available = _this$props4.available,
+        maxFunds = _this$props4.maxFunds,
+        name = _this$props4.name,
+        tokenName = _this$props4.tokenName,
+        userSelectedCurrency = _this$props4.userSelectedCurrency;
+      var validationSchema = yup.object().shape({
+        tokens: yup.number().min(minTokensCount, "Minimum investment: ".concat(minTokensCount)).max(available, "Unfortunately there are less ".concat(tokenName, " TOKENS available as you wish to buy. Please choose a smaller amount.")),
+        currencyValue: yup.number().when('selectedCurrency', {
+          is: InvestCalculatorCurrencies.EUR,
+          then: yup.number().max(2 // `Credit card limit of €${Config.euroLimit} reached`, // Config.euroLimit,
+          (_templateObject || (_templateObject = _taggedTemplateLiteral([""])))),
+          otherwise: yup.number().max(maxFunds[InvestCalculatorCurrencies.CRYPTO], "Unfortunately there are not sufficient ".concat(userSelectedCurrency, " available on your chosen Ethereum address."))
+        })
+      });
+      var callback = function callback() {
+        var errors = _this.state.errors;
+        _this.onErrors({
+          target: {
+            name: name,
+            errors: errors
+          }
+        });
+      };
+      try {
+        validationSchema.validateSync(values);
+        _this.setState({
+          errors: {}
+        }, callback);
+      } catch (e) {
+        _this.setState({
+          errors: (0, _formik.yupToFormErrors)(e)
+        }, callback);
+      }
+    });
+    return _this;
+  }
+  _createClass(InvestCalculator, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var isIban = this.props.isIban;
+      if (isIban) {
+        this.setState({
+          selectedCurrency: InvestCalculatorCurrencies.EUR
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+        available = _this$props5.available,
+        tokenName = _this$props5.tokenName,
+        id = _this$props5.id,
+        name = _this$props5.name,
+        isIban = _this$props5.isIban,
+        userSelectedCurrency = _this$props5.userSelectedCurrency;
+      var _this$state = this.state,
+        errors = _this$state.errors,
+        tokens = _this$state.tokens,
+        currencyValue = _this$state.currencyValue,
+        selectedCurrency = _this$state.selectedCurrency;
+      return /*#__PURE__*/_react.default.createElement(_InvestCalculator.Wrapper, null, /*#__PURE__*/_react.default.createElement(_InvestCalculator.Container, null, /*#__PURE__*/_react.default.createElement(_InvestCalculator.Title, {
+        error: !!errors.tokens
+      }, "".concat(tokenName, " tokens")), /*#__PURE__*/_react.default.createElement(_InvestCalculator.InputWrap, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        id: id,
+        name: name,
+        value: tokens.toString(),
+        onChange: this.changeTokens,
+        onBlur: this.handleBlur
+      })), /*#__PURE__*/_react.default.createElement(_InvestCalculator.Caption, null, "Still available: ".concat((0, _fixDecimals.default)(available,
+      //tokenDecimals,
+      2), " ").concat(tokenName)), /*#__PURE__*/_react.default.createElement(_InvestCalculator.StyledFormError, {
+        show: !!errors.tokens
+      }, errors.tokens)), /*#__PURE__*/_react.default.createElement(_InvestCalculator.EqualSign, null, "="), /*#__PURE__*/_react.default.createElement(_InvestCalculator.Container, null, isIban ? /*#__PURE__*/_react.default.createElement(_InvestCalculator.Title, {
+        error: !!errors.tokens
+      }, "\u20AC value") : /*#__PURE__*/_react.default.createElement(_InvestCalculator.Title, {
+        error: selectedCurrency === InvestCalculatorCurrencies.ETH && !!errors.currencyValue || selectedCurrency === InvestCalculatorCurrencies.GUSD && !!errors.currencyValue || selectedCurrency === InvestCalculatorCurrencies.USDT && !!errors.currencyValue
+      }, userSelectedCurrency === 'ether' ? 'ETH VALUE' : userSelectedCurrency === 'gemini' ? 'GUSD VALUE' : 'USDT VALUE')
+      // <SelectWrapper>
+      //   <Select
+      //     id={`${id}-currencySelect`}
+      //     name={`${id}-currencySelect`}
+      //     value={selectedCurrency}
+      //     options={[
+      //       {
+      //         key: '1',
+      //         value: InvestCalculatorCurrencies.EUR,
+      //         label: (
+      //           <Label
+      //             error={
+      //               selectedCurrency === InvestCalculatorCurrencies.EUR &&
+      //               !!errors.currencyValue
+      //             }
+      //           >
+      //             € VALUE
+      //           </Label>
+      //         ),
+      //       },
+      //       {
+      //         key: '2',
+      //         value:
+      //           userSelectedCurrency === 'ether'
+      //             ? InvestCalculatorCurrencies.ETH
+      //             : userSelectedCurrency === 'gemini'
+      //             ? InvestCalculatorCurrencies.GUSD
+      //             : InvestCalculatorCurrencies.USDT,
+      //         label: (
+      //           <Label
+      //             error={
+      //               (selectedCurrency ===
+      //                 InvestCalculatorCurrencies.ETH &&
+      //                 !!errors.currencyValue) ||
+      //               (selectedCurrency ===
+      //                 InvestCalculatorCurrencies.GUSD &&
+      //                 !!errors.currencyValue) ||
+      //               (selectedCurrency ===
+      //                 InvestCalculatorCurrencies.USDT &&
+      //                 !!errors.currencyValue)
+      //             }
+      //           >
+      //             {userSelectedCurrency === 'ether'
+      //               ? 'ETH VALUE'
+      //               : userSelectedCurrency === 'gemini'
+      //               ? 'GUSD VALUE'
+      //               : 'USDT VALUE'}
+      //           </Label>
+      //         ),
+      //       },
+      //     ]}
+      //     onChange={this.changeCurrency}
+      //     onBlur={() => {}}
+      //   />
+      // </SelectWrapper>
+      , /*#__PURE__*/_react.default.createElement(_InvestCalculator.InputWrap, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        id: "".concat(id, "-valueInput"),
+        name: "".concat(id, "-valueInput"),
+        value: currencyValue.toString(),
+        onChange: this.changeCurrencyValue,
+        onBlur: function onBlur() {}
+      })), /*#__PURE__*/_react.default.createElement(_InvestCalculator.StyledFormError, {
+        paddingTop: true,
+        show: !!errors.currencyValue
+      }, errors.currencyValue)));
+    }
+  }]);
+  return InvestCalculator;
+}(_react.PureComponent);
+exports.InvestCalculator = InvestCalculator;
+InvestCalculator.propTypes = {
+  exchangeRate: _propTypes.default.shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, InvestCalculatorCurrencies.ETH, _propTypes.default.number.isRequired), _defineProperty(_PropTypes$shape, InvestCalculatorCurrencies.EUR, _propTypes.default.number.isRequired), _PropTypes$shape)).isRequired,
+  maxFunds: _propTypes.default.shape((_PropTypes$shape2 = {}, _defineProperty(_PropTypes$shape2, InvestCalculatorCurrencies.CRYPTO, _propTypes.default.number), _defineProperty(_PropTypes$shape2, InvestCalculatorCurrencies.EUR, _propTypes.default.number), _PropTypes$shape2)).isRequired,
+  minTokensCount: _propTypes.default.number,
+  available: _propTypes.default.number.isRequired,
+  tokenName: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onErrors: _propTypes.default.func
+};
+InvestCalculator.defaultProps = {
+  onChange: function onChange() {},
+  onBlur: function onBlur() {},
+  onFocus: function onFocus() {},
+  onErrors: function onErrors() {},
+  minTokensCount: 0
+};
+var _default = InvestCalculator;
+exports.default = _default;

package/dist/components/InvestCalculator/InvestCalculator.stories.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InvestCalculatorOverview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InvestCalculator = require("./InvestCalculator");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _exchangeRate, _maxFunds;
+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 _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); }
+////  U N F I N I S H E D  ////
+var _default = {
+  title: 'Components Library/InvestCalculator',
+  component: _InvestCalculator.InvestCalculator,
+  argTypes: {
+    minTokensCount: {
+      type: 'number',
+      required: true,
+      defaultValue: 0
+    },
+    available: {
+      type: 'number',
+      required: true
+    },
+    tokenName: {
+      type: 'string',
+      required: true
+    },
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    onChange: {
+      type: 'function',
+      action: 'onChange',
+      defaultValue: function defaultValue() {}
+    },
+    onBlur: {
+      type: 'function',
+      action: 'onBlur',
+      defaultValue: function defaultValue() {}
+    },
+    onFocus: {
+      type: 'function',
+      action: 'onFocus',
+      defaultValue: function defaultValue() {}
+    },
+    onErrors: {
+      type: 'function',
+      action: 'onErrors',
+      defaultValue: function defaultValue() {}
+    },
+    exchangeRate: {
+      type: 'shape',
+      defaultValue: {},
+      required: true
+    },
+    maxFunds: {
+      type: 'shape',
+      defaultValue: {},
+      required: true
+    },
+    //not props
+    changeCurrencyValue: {
+      type: 'function',
+      action: 'changeCurrencyValue',
+      defaultValue: function defaultValue() {}
+    },
+    changeTokens: {
+      type: 'function',
+      action: 'changeTokens',
+      defaultValue: function defaultValue() {}
+    },
+    tokens: {
+      type: 'number'
+    },
+    tokensInput: {
+      type: 'number'
+    },
+    currencyValueInput: {
+      type: 'number'
+    },
+    currencyValue: {
+      type: 'number'
+    },
+    state: {
+      type: 'shape',
+      defaultValue: {
+        tokens: 0,
+        currencyValue: 0,
+        selectedCurrencyValue: 0,
+        userSelectedCurrency: 'ether'
+      }
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_InvestCalculator.InvestCalculator, args));
+};
+var InvestCalculatorOverview = Template.bind({});
+exports.InvestCalculatorOverview = InvestCalculatorOverview;
+InvestCalculatorOverview.args = {
+  minTokensCount: 3,
+  available: 345,
+  tokenName: 'STOKR TEST',
+  id: 'I-D',
+  name: 'John Doe',
+  exchangeRate: (_exchangeRate = {}, _defineProperty(_exchangeRate, _InvestCalculator.InvestCalculatorCurrencies.ETH, 222), _defineProperty(_exchangeRate, _InvestCalculator.InvestCalculatorCurrencies.EUR, 111), _exchangeRate),
+  maxFunds: (_maxFunds = {}, _defineProperty(_maxFunds, _InvestCalculator.InvestCalculatorCurrencies.CRYPTO, 333), _defineProperty(_maxFunds, _InvestCalculator.InvestCalculatorCurrencies.EUR, 222), _maxFunds),
+  tokens: 444,
+  tokensInput: 666,
+  currencyValueInput: 400
+};
+
+//doublecheck:
+//UNFINISHED
+// square brackets waitng for evaluation (string) - so imported
+// [InvestCalculatorCurrencies.CRYPTO]
+//
+// NOT PROPs propped in..
+// state prop made up... not changing anything
+//changeTokens
+//tokensInput
+//tokens
+//
+// ?(onChange - target - currencyName -)/ state - selectedCurrency

package/dist/components/InvestCalculator/InvestCalculator.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Title = exports.StyledFormError = exports.SelectWrapper = exports.Label = exports.InputWrap = exports.EqualSign = exports.Container = exports.Caption = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Select = require("components/Input/Select.styles");
+var _Form = require("components/Form/Form");
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__Wrapper",
+  componentId: "sc-hce2mi-0"
+})(["display:flex;justify-content:space-between;"]);
+exports.Wrapper = Wrapper;
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__Container",
+  componentId: "sc-hce2mi-1"
+})([""]);
+exports.Container = Container;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__Title",
+  componentId: "sc-hce2mi-2"
+})(["font-size:12px;font-weight:700;line-height:24px;letter-spacing:2px;color:", ";text-transform:uppercase;", ""], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return props.error && "color: ".concat(_theme.default.cWarning, ";");
+});
+exports.Title = Title;
+var InputWrap = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__InputWrap",
+  componentId: "sc-hce2mi-3"
+})(["padding-top:9px;input{font-size:22px;font-weight:300;line-height:28px;padding-bottom:11px;padding-top:0;}"]);
+exports.InputWrap = InputWrap;
+var StyledFormError = (0, _styledComponents.default)(_Form.FormError).withConfig({
+  displayName: "InvestCalculatorstyles__StyledFormError",
+  componentId: "sc-hce2mi-4"
+})(["font-size:13px;font-weight:300;line-height:16px;letter-spacing:0.4px;font-style:italic;top:0;width:min-content;min-width:100%;", ""], function (props) {
+  return props.paddingTop && 'padding-top: 12px;';
+});
+exports.StyledFormError = StyledFormError;
+var Caption = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__Caption",
+  componentId: "sc-hce2mi-5"
+})(["font-size:13px;font-weight:300;line-height:16px;padding-top:12px;letter-spacing:0.4px;font-style:italic;"]);
+exports.Caption = Caption;
+var EqualSign = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__EqualSign",
+  componentId: "sc-hce2mi-6"
+})(["margin:auto;font-size:34px;font-weight:300;color:", ";opacity:0.5;padding:0px 30px;"], function (props) {
+  return _theme.default.cBlack;
+});
+exports.EqualSign = EqualSign;
+var SelectWrapper = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__SelectWrapper",
+  componentId: "sc-hce2mi-7"
+})(["padding-bottom:2px;", "", "", "{padding:0;border:0;height:24px;min-height:24px;font-size:12px;font-weight:700;line-height:24px;letter-spacing:2px;margin-top:-2px;}"], _Select.SelectControl, _Select.SelectControl, _Select.SelectControl);
+exports.SelectWrapper = SelectWrapper;
+var Label = _styledComponents.default.div.withConfig({
+  displayName: "InvestCalculatorstyles__Label",
+  componentId: "sc-hce2mi-8"
+})(["", ""], function (props) {
+  return props.error && "color: ".concat(_theme.default.cWarning, ";");
+});
+exports.Label = Label;

package/dist/components/InvestmentStat/InvestmentStat.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InvestmentStat = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InvestmentStat = require("./InvestmentStat.styles");
+var _InfoIcon = _interopRequireDefault(require("components/InfoIcon/InfoIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var InvestmentStat = function InvestmentStat(props) {
+  var title = props.title,
+    content = props.content,
+    state = props.state,
+    primaryBg = props.primaryBg,
+    tooltip = props.tooltip;
+  return /*#__PURE__*/_react.default.createElement(_InvestmentStat.Container, _extends({
+    primaryBg: primaryBg
+  }, props), /*#__PURE__*/_react.default.createElement(_InvestmentStat.Title, null, title), /*#__PURE__*/_react.default.createElement(_InvestmentStat.DataContainer, null, /*#__PURE__*/_react.default.createElement(_InvestmentStat.Content, {
+    state: state
+  }, content), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
+    position: "left",
+    title: tooltip
+  })));
+};
+exports.InvestmentStat = InvestmentStat;
+InvestmentStat.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  content: _propTypes.default.string.isRequired,
+  state: _propTypes.default.string,
+  primaryBg: _propTypes.default.bool
+};
+InvestmentStat.defaultProps = {
+  state: '',
+  primaryBg: false
+};
+var _default = InvestmentStat;
+exports.default = _default;

package/dist/components/InvestmentStat/InvestmentStat.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InvestmentStatOverview = exports.InvestmentStatBlueTooltip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InvestmentStat = _interopRequireDefault(require("./InvestmentStat"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/InvestmentStat',
+  component: _InvestmentStat.default,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    content: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    state: {
+      type: 'string',
+      defaultValue: ''
+    },
+    tooltip: {
+      type: 'string',
+      defaultValue: ''
+    },
+    primaryBg: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_InvestmentStat.default, args));
+};
+var InvestmentStatOverview = Template.bind({});
+exports.InvestmentStatOverview = InvestmentStatOverview;
+InvestmentStatOverview.args = {
+  title: 'Investment Stat Title',
+  content: 'some Content'
+};
+var InvestmentStatBlueTooltip = Template.bind({});
+exports.InvestmentStatBlueTooltip = InvestmentStatBlueTooltip;
+InvestmentStatBlueTooltip.args = {
+  title: 'Investment Stat Title',
+  content: 'some Content',
+  primaryBg: true,
+  tooltip: 'information'
+};