@stokr/components-library 3.0.23 → 3.0.25

package/dist/components/InvestCalculator/InvestCalculator.js

@@ -1,283 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { PureComponent } from "react";
-import PropTypes from "prop-types";
-import { yupToFormErrors } from "formik";
-import * as Yup from "yup";
-import { Input } from "../Input/Input.js";
-import { Wrapper, Container, Title, InputWrap, Caption, StyledFormError, EqualSign } from "./InvestCalculator.styles.js";
-import fixDecimals from "../../utils/fix-decimals.js";
-import { BigNumber } from "bignumber.js";
-const InvestCalculatorCurrencies = {
-  EUR: "eur",
-  GUSD: "gusd",
-  USDT: "usdt",
-  CRYPTO: "crypto"
-};
-const getNumericPart = (input) => {
-  let match = input.replace(/,/, ".").match(/[1-9]\d*(\.\d*)?|\.\d*/);
-  return match ? match[0].replace(/^\./, "0.") : "0";
-};
-class InvestCalculator extends PureComponent {
-  state = {
-    tokens: 0,
-    currencyValue: 0,
-    selectedCurrencyValue: 0,
-    selectedCurrency: this.props.userSelectedCurrency === "gemini" ? InvestCalculatorCurrencies.GUSD : InvestCalculatorCurrencies.USDT,
-    // selectedCurrency: InvestCalculatorCurrencies.ETH,
-    errors: {}
-  };
-  componentDidMount() {
-    const { isIban } = this.props;
-    if (isIban) {
-      this.setState({
-        selectedCurrency: InvestCalculatorCurrencies.EUR
-      });
-    }
-  }
-  normalizeCurrencySelected = (currencySelected) => {
-    if (currencySelected === "euro") return "eur";
-    if (currencySelected === "gemini") return "gusd";
-    if (currencySelected === "tether") return "usdt";
-  };
-  // onFocus = (e, field) => {
-  //   const { onFocus: onFocusProp = () => {} } = this.props
-  //   onFocusProp(e, field)
-  // }
-  // onBlur = (e, field) => {
-  //   const { onBlur: onBlurProp = () => {} } = this.props
-  //   onBlurProp(e, field)
-  // }
-  onChange = (e, field) => {
-    const { onChange: onChangeProp = () => {
-    } } = this.props;
-    onChangeProp(e, field);
-  };
-  onErrors = (e, field) => {
-    const { onErrors: onErrorsProp = () => {
-    } } = this.props;
-    onErrorsProp(e, field);
-  };
-  changeTokens = (e, field) => {
-    const { exchangeRate, available, name, userSelectedCurrency } = this.props;
-    const { selectedCurrency } = this.state;
-    let tokensInput = getNumericPart(e.target.value);
-    let tokens = BigNumber(tokensInput);
-    if (tokens.gt(available)) {
-      tokens = BigNumber(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
-        );
-      }
-    );
-  };
-  // 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,
-  //         },
-  //       })
-  //     },
-  //   )
-  // }
-  changeCurrencyValue = (e, field) => {
-    const { exchangeRate, name, available, userSelectedCurrency } = this.props;
-    const { selectedCurrency } = this.state;
-    let currencyValueInput = getNumericPart(e.target.value);
-    let currencyValue = BigNumber(currencyValueInput);
-    let tokens = currencyValue.div(exchangeRate[selectedCurrency]);
-    const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
-    if (tokens.gt(available)) {
-      tokens = BigNumber(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
-        );
-      }
-    );
-  };
-  validate = (values) => {
-    const { minTokensCount = 0, available, maxFunds, name, tokenName, userSelectedCurrency } = this.props;
-    const validationSchema = Yup.object().shape({
-      tokens: Yup.number().min(minTokensCount, `Minimum investment: ${minTokensCount}`).max(
-        available,
-        `Unfortunately there are less ${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,
-          ""
-        ),
-        otherwise: Yup.number().max(
-          maxFunds[InvestCalculatorCurrencies.CRYPTO],
-          `Unfortunately there are not sufficient ${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: yupToFormErrors(e)
-        },
-        callback
-      );
-    }
-  };
-  render() {
-    const { available, tokenName, id, name, isIban, userSelectedCurrency } = this.props;
-    const { errors, tokens, currencyValue, selectedCurrency } = this.state;
-    return /* @__PURE__ */ jsxs(Wrapper, { children: [
-      /* @__PURE__ */ jsxs(Container, { children: [
-        /* @__PURE__ */ jsx(Title, { error: !!errors.tokens, children: `${tokenName} tokens` }),
-        /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id,
-            name,
-            value: tokens.toString(),
-            onChange: this.changeTokens,
-            onBlur: this.handleBlur
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Caption, { children: `Still available: ${fixDecimals(
-          available,
-          //tokenDecimals,
-          2
-        )} ${tokenName}` }),
-        /* @__PURE__ */ jsx(StyledFormError, { show: !!errors.tokens, children: errors.tokens })
-      ] }),
-      /* @__PURE__ */ jsx(EqualSign, { children: "=" }),
-      /* @__PURE__ */ jsxs(Container, { children: [
-        isIban ? /* @__PURE__ */ jsx(Title, { error: !!errors.tokens, children: "€ value" }) : /* @__PURE__ */ jsx(
-          Title,
-          {
-            error: selectedCurrency === InvestCalculatorCurrencies.GUSD && !!errors.currencyValue || selectedCurrency === InvestCalculatorCurrencies.USDT && !!errors.currencyValue,
-            children: userSelectedCurrency === "ether" ? "ETH VALUE" : userSelectedCurrency === "gemini" ? "GUSD VALUE" : "USDT VALUE"
-          }
-        ),
-        /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: `${id}-valueInput`,
-            name: `${id}-valueInput`,
-            value: currencyValue.toString(),
-            onChange: this.changeCurrencyValue,
-            onBlur: () => {
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(StyledFormError, { paddingTop: true, show: !!errors.currencyValue, children: errors.currencyValue })
-      ] })
-    ] });
-  }
-}
-InvestCalculator.propTypes = {
-  exchangeRate: PropTypes.shape({
-    [InvestCalculatorCurrencies.ETH]: PropTypes.number.isRequired,
-    [InvestCalculatorCurrencies.EUR]: PropTypes.number.isRequired
-  }).isRequired,
-  maxFunds: PropTypes.shape({
-    [InvestCalculatorCurrencies.CRYPTO]: PropTypes.number,
-    [InvestCalculatorCurrencies.EUR]: PropTypes.number
-  }).isRequired,
-  minTokensCount: PropTypes.number,
-  available: PropTypes.number.isRequired,
-  tokenName: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onErrors: PropTypes.func
-};
-export {
-  InvestCalculator,
-  InvestCalculatorCurrencies
-};

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

@@ -1,94 +0,0 @@
-import styled from "styled-components";
-import { SelectControl } from "../Input/Select.styles.js";
-import "../Form/Form.js";
-import theme from "../../styles/theme.js";
-import { FormError } from "../Form/Form.styles.js";
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-const Container = styled.div``;
-const Title = styled.div.withConfig({
-  shouldForwardProp: (props) => !["error"].includes(props)
-})`
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 24px;
-  letter-spacing: 2px;
-  color: ${() => theme.cBlack};
-  text-transform: uppercase;
-
-  ${(props) => props.error && `color: ${theme.cWarning};`}
-`;
-const InputWrap = styled.div`
-  padding-top: 9px;
-
-  input {
-    font-size: 22px;
-    font-weight: 300;
-    line-height: 28px;
-    padding-bottom: 11px;
-    padding-top: 0;
-  }
-`;
-const StyledFormError = styled(FormError).withConfig({
-  shouldForwardProp: (props) => !["paddingTop"].includes(props)
-})`
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-  font-style: italic;
-  top: 0;
-
-  width: min-content;
-  min-width: 100%;
-
-  ${(props) => props.paddingTop && "padding-top: 12px;"}
-`;
-const Caption = styled.div`
-  // font-size: 9px;
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 16px;
-  padding-top: 12px;
-  letter-spacing: 0.4px;
-  font-style: italic;
-`;
-const EqualSign = styled.div`
-  margin: auto;
-  font-size: 34px;
-  font-weight: 300;
-  color: ${() => theme.cBlack};
-  opacity: 0.5;
-  padding: 0px 30px;
-`;
-styled.div`
-  padding-bottom: 2px;
-
-  ${SelectControl}${SelectControl}${SelectControl} {
-    padding: 0;
-    border: 0;
-    height: 24px;
-    min-height: 24px;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 24px;
-    letter-spacing: 2px;
-    margin-top: -2px;
-  }
-`;
-styled.div.withConfig({
-  shouldForwardProp: (props) => !["error"].includes(props)
-})`
-  ${(props) => props.error && `color: ${theme.cWarning};`}
-`;
-export {
-  Caption,
-  Container,
-  EqualSign,
-  InputWrap,
-  StyledFormError,
-  Title,
-  Wrapper
-};