@stokr/components-library
Version:
STOKR - Components Library
367 lines (365 loc) • 14.2 kB
JavaScript
"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("../Input/Input"));
var _Select = _interopRequireDefault(require("../Input/Select"));
var _InvestCalculator2 = require("./InvestCalculator.styles");
var _fixDecimals = _interopRequireDefault(require("../../utils/fix-decimals"));
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } //import Config from '../../api/StokrConfig'
//import { tokenDecimals } from '../../constants/decimals'
const InvestCalculatorCurrencies = exports.InvestCalculatorCurrencies = {
EUR: 'eur',
GUSD: 'gusd',
USDT: 'usdt',
CRYPTO: 'crypto'
};
const BN = require('bignumber.js');
const getNumericPart = input => {
// Normalize decimal separator and
// find numeric part (w/o leading zeros)
let match = input.replace(/,/, '.').match(/[1-9]\d*(\.\d*)?|\.\d*/);
// Prepend leading zero if necessary
return match ? match[0].replace(/^\./, '0.') : '0';
};
class InvestCalculator extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
tokens: 0,
currencyValue: 0,
selectedCurrencyValue: 0,
selectedCurrency: this.props.userSelectedCurrency === 'gemini' ? InvestCalculatorCurrencies.GUSD : InvestCalculatorCurrencies.USDT,
// selectedCurrency: InvestCalculatorCurrencies.ETH,
errors: {}
});
_defineProperty(this, "normalizeCurrencySelected", currencySelected => {
if (currencySelected === 'euro') return 'eur';
if (currencySelected === 'gemini') return 'gusd';
if (currencySelected === 'tether') return 'usdt';
});
_defineProperty(this, "onFocus", (e, field) => {
const {
onFocus
} = this.props;
onFocus && onFocus(e, field);
});
_defineProperty(this, "onBlur", (e, field) => {
const {
onBlur
} = this.props;
onBlur && onBlur(e, field);
});
_defineProperty(this, "onChange", (e, field) => {
const {
onChange
} = this.props;
onChange && onChange(e, field);
});
_defineProperty(this, "onErrors", (e, field) => {
const {
onErrors
} = this.props;
onErrors && onErrors(e, field);
});
_defineProperty(this, "changeTokens", (e, field) => {
const {
exchangeRate,
available,
name,
userSelectedCurrency
} = this.props;
const {
selectedCurrency
} = this.state;
let tokensInput = getNumericPart(e.target.value);
let tokens = BN(tokensInput);
if (tokens.gt(available)) {
tokens = BN(available);
tokensInput = tokens.toFixed(4);
}
const currencyValue = tokens.times(exchangeRate[selectedCurrency]);
const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
this.validate({
tokens: tokens.toNumber(),
currencyValue: currencyValue.toNumber(),
selectedCurrency
});
this.setState({
tokens: tokensInput,
currencyValue: currencyValue.toFixed(4),
selectedCurrencyValue
}, () => {
this.onChange({
target: {
name,
value: tokens,
currencyValue,
currencyName: selectedCurrency,
selectedCurrencyValue
}
}, field);
});
});
_defineProperty(this, "changeCurrency", e => {
const {
exchangeRate,
name,
userSelectedCurrency
} = this.props;
const {
tokens
} = this.state;
const selectedCurrency = e.value;
const currencyValue = tokens * exchangeRate[selectedCurrency];
const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
this.validate({
tokens,
currencyValue,
selectedCurrency
});
this.setState({
currencyValue,
selectedCurrency,
selectedCurrencyValue
}, () => {
this.onChange({
target: {
name,
value: tokens,
currencyValue,
currencyName: selectedCurrency,
selectedCurrencyValue
}
});
});
});
_defineProperty(this, "changeCurrencyValue", (e, field) => {
const {
exchangeRate,
name,
available,
userSelectedCurrency
} = this.props;
const {
selectedCurrency
} = this.state;
let currencyValueInput = getNumericPart(e.target.value);
let currencyValue = BN(currencyValueInput);
let tokens = currencyValue.div(exchangeRate[selectedCurrency]);
const 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
});
this.setState({
tokens: tokens.toFixed(4),
currencyValue: currencyValueInput,
selectedCurrencyValue
}, () => {
this.onChange({
target: {
name,
value: tokens,
currencyValue,
currencyName: selectedCurrency,
selectedCurrencyValue
}
}, field);
});
});
_defineProperty(this, "validate", values => {
const {
minTokensCount,
available,
maxFunds,
name,
tokenName,
userSelectedCurrency
} = this.props;
const 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."))
})
});
const callback = () => {
const {
errors
} = this.state;
this.onErrors({
target: {
name,
errors
}
});
};
try {
validationSchema.validateSync(values);
this.setState({
errors: {}
}, callback);
} catch (e) {
this.setState({
errors: (0, _formik.yupToFormErrors)(e)
}, callback);
}
});
}
componentDidMount() {
const {
isIban
} = this.props;
if (isIban) {
this.setState({
selectedCurrency: InvestCalculatorCurrencies.EUR
});
}
}
render() {
const {
available,
tokenName,
id,
name,
isIban,
userSelectedCurrency
} = this.props;
const {
errors,
tokens,
currencyValue,
selectedCurrency
} = this.state;
return /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Wrapper, null, /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Container, null, /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Title, {
error: !!errors.tokens
}, "".concat(tokenName, " tokens")), /*#__PURE__*/_react.default.createElement(_InvestCalculator2.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(_InvestCalculator2.Caption, null, "Still available: ".concat((0, _fixDecimals.default)(available,
//tokenDecimals,
2), " ").concat(tokenName)), /*#__PURE__*/_react.default.createElement(_InvestCalculator2.StyledFormError, {
show: !!errors.tokens
}, errors.tokens)), /*#__PURE__*/_react.default.createElement(_InvestCalculator2.EqualSign, null, "="), /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Container, null, isIban ? /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Title, {
error: !!errors.tokens
}, "\u20AC value") : /*#__PURE__*/_react.default.createElement(_InvestCalculator2.Title, {
error: 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(_InvestCalculator2.InputWrap, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
id: "".concat(id, "-valueInput"),
name: "".concat(id, "-valueInput"),
value: currencyValue.toString(),
onChange: this.changeCurrencyValue,
onBlur: () => {}
})), /*#__PURE__*/_react.default.createElement(_InvestCalculator2.StyledFormError, {
paddingTop: true,
show: !!errors.currencyValue
}, errors.currencyValue)));
}
}
exports.InvestCalculator = InvestCalculator;
InvestCalculator.propTypes = {
exchangeRate: _propTypes.default.shape({
[InvestCalculatorCurrencies.ETH]: _propTypes.default.number.isRequired,
[InvestCalculatorCurrencies.EUR]: _propTypes.default.number.isRequired
}).isRequired,
maxFunds: _propTypes.default.shape({
[InvestCalculatorCurrencies.CRYPTO]: _propTypes.default.number,
[InvestCalculatorCurrencies.EUR]: _propTypes.default.number
}).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: () => {},
onBlur: () => {},
onFocus: () => {},
onErrors: () => {},
minTokensCount: 0
};
var _default = exports.default = InvestCalculator;