@stokr/components-library 3.0.24 → 3.0.26

package/dist/static/images/social/youtube_social_circle_red.png.js

@@ -1,6 +1,4 @@
-const __assetPath = "./youtube_social_circle_red.png";
-const __assetBase = import.meta.url;
-const YtLogo = new URL(__assetPath, __assetBase).href;
+const YtLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMDIwOEJENzY2MjA2ODExODIyQUFDREE1RTBCNzY0RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5ODI3RkMwQzg4MzMxMUU3QjhBRTgxOEQxMzBEQzA2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5ODI3RkMwQjg4MzMxMUU3QjhBRTgxOEQxMzBEQzA2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDplNDQ1NzdlMC1mZGNkLThjNGEtYmZhYy1lMWFlOWYwNjE0MzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjAyMDhCRDc2NjIwNjgxMTgyMkFBQ0RBNUUwQjc2NEUiLz4gPC9yZGY6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";
 export {
   YtLogo as default
 };

package/dist/utils/customHooks.js

@@ -4,9 +4,9 @@ import { sizes } from "../styles/rwd.js";
 const useMobileView = (breakpoint = sizes.Medium) => {
   var breakpointNumber = breakpoint.match(/\d/g);
   breakpointNumber = breakpointNumber.join("");
-  const [isMobile, setisMobile] = React__default.useState(window.innerWidth <= breakpointNumber);
+  const [isMobile, setisMobile] = React__default.useState(false);
   const timeout = React__default.useRef();
-  const checkIsMobile = () => window.innerWidth <= breakpointNumber;
+  const checkIsMobile = () => typeof window !== "undefined" ? window.innerWidth <= breakpointNumber : false;
   const onResizeTimeout = () => {
     setisMobile(checkIsMobile());
   };
@@ -15,10 +15,10 @@ const useMobileView = (breakpoint = sizes.Medium) => {
     timeout.current = setTimeout(onResizeTimeout, 100);
   };
   React__default.useEffect(() => {
+    setisMobile(window.innerWidth <= breakpointNumber);
     window.addEventListener("resize", onResize);
-    const initialId = setTimeout(onResizeTimeout, 0);
     return () => {
-      clearTimeout(initialId);
+      clearTimeout(timeout.current);
       window.removeEventListener("resize", onResize);
     };
   }, []);

package/dist/utils/fix-decimals.js

@@ -1,5 +1,4 @@
 const fixDecimals = (value, decimals, roundingFn = Math.round) => (roundingFn(Number(value) * 10 ** decimals) / 10 ** decimals).toFixed(decimals);
 export {
-  fixDecimals as default,
   fixDecimals
 };

package/dist/utils/formatCurrencyValue.js

@@ -1,8 +1,9 @@
-import USDCICon from "../static/images/usdc-logo.svg.js";
-import USDQIcon from "../static/images/usdq-logo.png.js";
-import BitcoinLogo from "../static/images/bitcoin-logo.svg.js";
-import BMN2Logo from "../static/images/bmn2-logo.svg.js";
-import ETHLogo from "../static/images/eth_logo.svg.js";
+import USDCICon from "../static/images/currency/usdc-logo.svg.js";
+import USDQIcon from "../static/images/currency/usdq-logo.png.js";
+import BitcoinLogo from "../static/images/currency/bitcoin-logo.png.js";
+import BMN2Logo from "../static/images/currency/bmn2-logo.png.js";
+import ETHLogo from "../static/images/currency/eth_logo.svg.js";
+import USDTLogo from "../static/images/currency/usdt-logo.png.js";
 const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) => {
   const { valueFirst = false } = options;
   const [symbol, decimals] = {
@@ -69,6 +70,8 @@ const getCurrencyIcon = (currency, customIcon) => {
     case "usdq":
     case "usdq-fb":
       return USDQIcon;
+    case "usdt":
+      return USDTLogo;
     case "bmn2":
       return BMN2Logo;
     case "eth":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.24",
+  "version": "3.0.26",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",
@@ -51,7 +51,6 @@
     "ajv": "^8.18.0",
     "axios": "^1.13.5",
     "bignumber.js": "^9.1.1",
-    "d3": "^7.8.3",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "dompurify": "^3.2.4",
@@ -96,8 +95,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
-    "cross-env": "^10.1.0",
-    "depcheck": "^1.4.7",
     "@eslint-react/eslint-plugin": "^1.53.1",
     "@eslint/js": "^9.39.2",
     "@storybook/addon-docs": "^10.2.0",
@@ -110,6 +107,8 @@
     "@typescript-eslint/eslint-plugin": "^8.53.1",
     "@typescript-eslint/parser": "^8.53.1",
     "@vitejs/plugin-react": "^5.1.2",
+    "cross-env": "^10.1.0",
+    "depcheck": "^1.4.7",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",

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
-};