@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Input/Textarea.styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from "styled-components";
+import theme from "../../styles/theme.js";
+const TextareaWrapper = styled.div`
+  position: relative;
+  display: block;
+`;
+const StyledTextarea = styled.textarea.withConfig({
+  shouldForwardProp: (props) => !["minHeight", "disabled", "error"].includes(props)
+})`
+  font-family: 'Open sans';
+  display: block;
+  width: 100%;
+  min-height: ${(props) => props.minHeight || "100px"};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  padding: 12px 16px;
+  box-shadow: none;
+  outline: 0;
+  border: 1px solid ${theme.cLightGrey};
+  border-radius: 4px;
+  color: ${theme.cBlack};
+  background-color: transparent;
+  transition: border-color 0.2s;
+  resize: vertical;
+
+  &:focus,
+  &:hover {
+    border-color: ${theme.cGrey2};
+  }
+
+  &::placeholder {
+    color: ${theme.cGrey2};
+    opacity: 1;
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 11px;
+    letter-spacing: 2px;
+  }
+
+  ${(props) => props.disabled && css`
+      color: ${theme.cGrey2};
+      cursor: not-allowed;
+      &:focus,
+      &:hover {
+        border-color: ${theme.cLightGrey};
+      }
+    `}
+
+  ${(props) => props.error && css`
+      border-color: ${theme.cWarning};
+      &:focus,
+      &:hover {
+        border-color: ${theme.cWarning};
+      }
+    `}
+`;
+export {
+  StyledTextarea,
+  TextareaWrapper
+};

package/dist/components/InvestCalculator/InvestCalculator.js

@@ -0,0 +1,283 @@
+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

@@ -0,0 +1,94 @@
+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
+};

package/dist/components/InvestmentStat/InvestmentStat.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, Title, DataContainer, Content } from "./InvestmentStat.styles.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+const InvestmentStat = (props) => {
+  const { title, content, state = "", primaryBg = false, tooltip } = props;
+  return /* @__PURE__ */ jsxs(Container, { primaryBg, ...props, children: [
+    /* @__PURE__ */ jsx(Title, { children: title }),
+    /* @__PURE__ */ jsxs(DataContainer, { children: [
+      /* @__PURE__ */ jsx(Content, { state, children: content }),
+      tooltip && /* @__PURE__ */ jsx(InfoIcon, { position: "left", title: tooltip })
+    ] })
+  ] });
+};
+InvestmentStat.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  state: PropTypes.string,
+  primaryBg: PropTypes.bool
+};
+export {
+  InvestmentStat
+};

package/dist/components/InvestmentStat/InvestmentStat.styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Title = styled.div`
+  font-size: 11px;
+  line-height: 12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${() => theme.cBlack};
+  white-space: nowrap;
+`;
+const Content = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  margin-top: 8px;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.6px;
+  font-weight: 300;
+
+  ${(props) => props.state === "warning" && `
+    color: ${theme.cWarning};
+  `}
+`;
+const Container = styled(ComponentWrapper).withConfig({
+  shouldForwardProp: (props) => !["primaryBg"].includes(props)
+})`
+  padding: 40px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  ${rwd.Medium`
+    padding: 40px 20px;
+  `}
+
+  ${(props) => props.primaryBg && css`
+      background: ${theme.cPrimaryDark};
+
+      ${Title} {
+        color: ${theme.cWhite};
+      }
+
+      ${Content} {
+        color: ${theme.cWhite};
+      }
+    `}
+`;
+const DataContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+export {
+  Container,
+  Content,
+  DataContainer,
+  Title
+};

package/dist/components/LatestUpdate/LatestUpdate.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, ItemLink, ImageWrap, Image, Tag, Title, Text, ReadMore } from "./LatestUpdate.styles.js";
+import { LatestUpdateWrapper } from "./LatestUpdate.styles.js";
+const LatestUpdate = ({ image = "", tag = "", title, text, url, horizontalPadding = false }) => /* @__PURE__ */ jsx(Container, { to: url, horizontalPadding, children: /* @__PURE__ */ jsxs(ItemLink, { to: url, children: [
+  image && /* @__PURE__ */ jsx(ImageWrap, { children: /* @__PURE__ */ jsx(Image, { src: image }) }),
+  tag && /* @__PURE__ */ jsx(Tag, { children: tag }),
+  /* @__PURE__ */ jsx(Title, { children: title }),
+  /* @__PURE__ */ jsx(Text, { children: text }),
+  /* @__PURE__ */ jsx(ReadMore, { as: "span", children: "read more" })
+] }) });
+LatestUpdate.propTypes = {
+  image: PropTypes.string,
+  tag: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  horizontalPadding: PropTypes.bool
+};
+export {
+  LatestUpdate,
+  LatestUpdateWrapper
+};

package/dist/components/LatestUpdate/LatestUpdate.styles.js

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import rwd from "../../styles/rwd.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { TextLink } from "../TextLink/TextLink.styles.js";
+styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  margin-bottom: 9px;
+`;
+styled.div`
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: 0.8px;
+  line-height: 28px;
+  text-transform: uppercase;
+`;
+const LatestUpdateWrapper = styled(ComponentWrapper)`
+  padding: 80px 32px;
+  ${rwd.Medium`
+    padding: 128px 64px;
+  `}
+`;
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["horizontalPadding"].includes(props)
+})`
+  display: block;
+  padding: 20px 0;
+
+  ${rwd.Medium`
+    ${(props) => props.horizontalPadding && `
+      padding: 20px 5%;
+    `}
+  `}
+`;
+const ItemLink = styled(Link)`
+  display: block;
+`;
+const ImageWrap = styled.div`
+  display: block;
+  height: 42px;
+  margin-bottom: 12px;
+`;
+const Image = styled.img`
+  display: inline-block;
+  max-width: 100%;
+  max-height: 100%;
+  margin-bottom: 12px;
+  object-fit: contain;
+  object-position: 0 100%;
+`;
+const Tag = styled.span`
+  display: block;
+  font-size: 11px;
+  line-height: 24px;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+`;
+const Title = styled.h3`
+  display: block;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  margin-bottom: 20px;
+`;
+const Text = styled.span`
+  display: block;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+  margin-bottom: 20px;
+`;
+const ReadMore = styled(TextLink)`
+  letter-spacing: 2px;
+`;
+export {
+  Container,
+  Image,
+  ImageWrap,
+  ItemLink,
+  LatestUpdateWrapper,
+  ReadMore,
+  Tag,
+  Text,
+  Title
+};