@stokr/components-library 3.0.16 → 3.0.17

package/dist/utils/copyToClipboard.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { CopyToClipboard as CopyToClipboard2 } from "react-copy-to-clipboard";
+import { Tooltip } from "react-tippy";
+import { CopyToClipboardButton } from "../components/CryptoAddress/CryptoAddress.styles.js";
+const copyTextToClipboard = async (text, onCopy, onError) => {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      if (onCopy) onCopy(text, true);
+      return true;
+    } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      const successful = document.execCommand("copy");
+      document.body.removeChild(textArea);
+      if (successful) {
+        if (onCopy) onCopy(text, true);
+        return true;
+      } else {
+        if (onError) onError(new Error("Failed to copy text"));
+        return false;
+      }
+    }
+  } catch (error) {
+    if (onError) onError(error);
+    return false;
+  }
+};
+const withCopyToClipboard = (WrappedComponent, options = {}) => {
+  const { textProp = "text", onCopyProp = "onCopy", onErrorProp = "onError" } = options;
+  return function CopyToClipboardWrapper(props) {
+    const text = props[textProp];
+    const onCopy = props[onCopyProp];
+    const onError = props[onErrorProp];
+    const handleCopy = () => {
+      if (text) {
+        copyTextToClipboard(text, onCopy, onError);
+      }
+    };
+    return /* @__PURE__ */ jsx(CopyToClipboard, { text, onCopy: handleCopy, children: /* @__PURE__ */ jsx(WrappedComponent, { ...props }) });
+  };
+};
+const useCopyToClipboard = (text) => {
+  const [copied, setCopied] = React__default.useState(false);
+  const copy = React__default.useCallback(
+    async (customText) => {
+      const textToCopy = customText || text;
+      const success = await copyTextToClipboard(
+        textToCopy,
+        () => setCopied(true),
+        () => setCopied(false)
+      );
+      if (success) {
+        setTimeout(() => setCopied(false), 2e3);
+      }
+      return success;
+    },
+    [text]
+  );
+  return { copy, copied };
+};
+const CopyToClipBoardTooltip = ({ value, buttonStyle }) => {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      position: "top",
+      title: copied ? "Copied to clipboard!" : "Click to copy to clipboard.",
+      theme: "light",
+      arrow: true,
+      hideOnClick: false,
+      onHidden: () => setCopied(false),
+      duration: 200,
+      children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle }) })
+    }
+  );
+};
+export {
+  CopyToClipBoardTooltip,
+  CopyToClipboard2 as CopyToClipboard,
+  copyTextToClipboard,
+  useCopyToClipboard,
+  withCopyToClipboard
+};

package/dist/utils/customHooks.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect, useCallback } from "react";
+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 timeout = React__default.useRef();
+  const checkIsMobile = () => window.innerWidth <= breakpointNumber;
+  const onResizeTimeout = () => {
+    setisMobile(checkIsMobile());
+  };
+  const onResize = () => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(onResizeTimeout, 100);
+  };
+  React__default.useEffect(() => {
+    window.addEventListener("resize", onResize);
+    const initialId = setTimeout(onResizeTimeout, 0);
+    return () => {
+      clearTimeout(initialId);
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return isMobile;
+};
+const useContainerSize = (ref, breakpoint = 500) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const checkSize = () => {
+    const width = ref.current.offsetWidth;
+    setIsMobile(width < breakpoint);
+  };
+  useEffect(() => {
+    if (!ref.current) return;
+    const initialId = setTimeout(checkSize, 0);
+    const resizeObserver = new ResizeObserver(() => {
+      checkSize();
+    });
+    resizeObserver.observe(ref.current);
+    return () => {
+      clearTimeout(initialId);
+      resizeObserver.disconnect();
+    };
+  }, [breakpoint]);
+  return isMobile;
+};
+function usePrevious(value) {
+  const ref = useRef();
+  const [previous, setPrevious] = useState();
+  useEffect(() => {
+    const previousValue = ref.current;
+    ref.current = value;
+    const id = setTimeout(() => setPrevious(previousValue), 0);
+    return () => clearTimeout(id);
+  }, [value]);
+  return previous;
+}
+const useCooldown = (cooldownInSeconds) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [hasTimerFinished, sethasTimerFinished] = useState(false);
+  const [secondsRemaining, setSecondsRemaining] = useState(0);
+  const lastCalled = useRef(null);
+  const startCooldown = (actionCallback) => {
+    if (!isDisabled) {
+      setIsDisabled(true);
+      sethasTimerFinished(false);
+      setSecondsRemaining(cooldownInSeconds);
+      lastCalled.current = Date.now();
+      if (actionCallback) {
+        actionCallback();
+      }
+    }
+  };
+  const updateCooldown = useCallback(() => {
+    const secondsPassed = Math.ceil((Date.now() - lastCalled.current) / 1e3);
+    setSecondsRemaining(cooldownInSeconds - secondsPassed);
+    if (secondsPassed >= cooldownInSeconds) {
+      setIsDisabled(false);
+      sethasTimerFinished(true);
+    }
+  }, [cooldownInSeconds]);
+  useEffect(() => {
+    let timerId;
+    let initialId;
+    if (isDisabled) {
+      initialId = setTimeout(updateCooldown, 0);
+      timerId = setInterval(updateCooldown, 1e3);
+    }
+    return () => {
+      clearTimeout(initialId);
+      clearInterval(timerId);
+    };
+  }, [cooldownInSeconds, isDisabled, updateCooldown]);
+  return { isDisabled, secondsRemaining, startCooldown, hasTimerFinished };
+};
+const cooldownHOC = (Component, seconds = 60) => {
+  const Wrapper = (props) => {
+    const cooldownProps = useCooldown(seconds);
+    return /* @__PURE__ */ jsx(Component, { cooldown: cooldownProps, ...props });
+  };
+  return Wrapper;
+};
+function useComponentVisible(initialIsVisible) {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+  const ref = useRef(null);
+  const handleClickOutside = (event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false);
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, []);
+  return { ref, isComponentVisible, setIsComponentVisible };
+}
+export {
+  cooldownHOC,
+  useComponentVisible,
+  useContainerSize,
+  useCooldown,
+  useMobileView,
+  usePrevious
+};

package/dist/utils/delete-redirect-cookie-and-navigate.js

@@ -0,0 +1,12 @@
+import Cookies from "js-cookie";
+import getCookieDomain from "./get-cookie-domain.js";
+import redirectUrl from "./redirect-url.js";
+const deleteRedirectCookieAndNavigate = () => {
+  const cookieDomain = getCookieDomain();
+  Cookies.remove("STOKR_INVESTOR_DASHBOARD_REDIRECT", cookieDomain);
+  Cookies.remove("STOKR_INVEST_IN_STO_REDIRECT", cookieDomain);
+  window.location.href = redirectUrl;
+};
+export {
+  deleteRedirectCookieAndNavigate as default
+};

package/dist/utils/fix-decimals.js

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

@@ -0,0 +1,95 @@
+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";
+const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) => {
+  const { valueFirst = false } = options;
+  const [symbol, decimals] = {
+    tether: ["USDT", 2],
+    gemini: ["GUSD", 2],
+    ether: ["ETH", 4],
+    artid: ["ARTID", 2],
+    bitcoin: ["BTC", 8],
+    lbtc: ["LBTC", 8],
+    "lusdt-bfx": ["USDT", 2],
+    "lbtc-bfx": ["LBTC", 8],
+    "btc-bfx": ["BTC", 8],
+    euro: ["EUR", 2],
+    usd: ["USD", 2],
+    chf: ["CHF", 2],
+    lusdt: ["USDT", 2],
+    "bitcoin-private": ["EUR", 2],
+    "lbtc-private": ["BTC", 8],
+    bmn1: ["BMN1", 2],
+    bmn2: ["BMN2", 4],
+    "btc-fb": ["BTC", 8],
+    "usdc-fb": ["USDC", 2],
+    "usdq-fb": ["USDQ", 2],
+    xaut: ["XAUt", 6]
+  }[currency] || [currency, tokenDecimals];
+  const formattedValue = parseFloat(Math.abs(value)).toFixed(decimals);
+  return valueFirst ? `${formattedValue} ${symbol}` : `${symbol} ${formattedValue}`;
+};
+const getCurrencySymbol = (currencySelected) => ({
+  euro: "€",
+  usd: "$",
+  ether: "ETH",
+  chf: "CHF",
+  tether: "USDT",
+  bitcoin: "BTC",
+  lbtc: "LBTC",
+  lusdt: "USDT",
+  "lusdt-bfx": "USDT",
+  "lbtc-bfx": "LBTC",
+  "btc-bfx": "BTC",
+  bmn1: "BMN1",
+  bmn2: "BMN2",
+  "btc-fb": "BTC",
+  "usdc-fb": "USDC",
+  "usdq-fb": "USDQ",
+  xaut: "XAUt",
+  "eth-fb": "ETH"
+})[currencySelected] || currencySelected;
+const getProjectCurrencySign = (tokenCurrency) => {
+  return tokenCurrency === "EUR" ? "€" : tokenCurrency === "USD" ? "$" : tokenCurrency === "BTC" ? "₿" : "";
+};
+const getCurrencyIcon = (currency, customIcon) => {
+  if (customIcon) return customIcon;
+  if (!currency) return null;
+  switch (currency.toLowerCase()) {
+    case "btc":
+    case "bitcoin":
+    case "btc-fb":
+      return BitcoinLogo;
+    case "usdc":
+    case "usdc-fb":
+      return USDCICon;
+    case "usdq":
+    case "usdq-fb":
+      return USDQIcon;
+    case "bmn2":
+      return BMN2Logo;
+    case "eth":
+    case "eth-fb":
+      return ETHLogo;
+    default:
+      return null;
+  }
+};
+const getLiquidAssetIcon = async (assetId) => {
+  const url = `https://liquid.network/api/v1/asset/${assetId}/icon`;
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(url);
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+};
+export {
+  formatCurrencyValue,
+  getCurrencyIcon,
+  getCurrencySymbol,
+  getLiquidAssetIcon,
+  getProjectCurrencySign
+};

package/dist/utils/get-cookie-domain.js

@@ -0,0 +1,10 @@
+import { getConfig } from "../config.js";
+const getCookieDomain = () => {
+  const domain = getConfig("cookieDomain");
+  const useDomain = domain && domain !== "localhost";
+  return useDomain ? { domain } : {};
+};
+export {
+  getCookieDomain as default,
+  getCookieDomain
+};

package/dist/utils/get-short-address.js

@@ -0,0 +1,4 @@
+const getShortAddress = (address) => `${address.slice(0, 6)}[...]${address.slice(-4)}`;
+export {
+  getShortAddress as default
+};

package/dist/utils/isUSInvestor.js

@@ -0,0 +1,6 @@
+const usCountries = ["United States", "Puerto Rico"];
+const isUSInvestor = (user) => usCountries.includes(user.country);
+export {
+  isUSInvestor,
+  usCountries
+};

package/dist/utils/km_ify.js

@@ -0,0 +1,33 @@
+const truncateDecimals = (number, digits) => {
+  var re = new RegExp("(\\d+\\.\\d{" + digits + "})(\\d)"), m = number.toString().match(re);
+  return m ? parseFloat(m[1]) : number.valueOf();
+};
+const km_ify = (input, decimals, convertBillion = true) => {
+  if (input >= 1e9 && convertBillion) {
+    input /= 1e9;
+    if (input % 10 !== 0) {
+      input = truncateDecimals(input, 1);
+    }
+    return input += "B";
+  }
+  if (input >= 1e6) {
+    input /= 1e6;
+    if (input % 10 !== 0) {
+      input = truncateDecimals(input, 1);
+    }
+    return input += "M";
+  }
+  if (input >= 1e3) {
+    input /= 1e3;
+    if (input % 10 !== 0) {
+      input = truncateDecimals(input, 1);
+    }
+    return input += "K";
+  }
+  if (decimals) {
+    return input.toFixed(decimals);
+  } else return input;
+};
+export {
+  km_ify
+};

package/dist/utils/moment.js

@@ -0,0 +1,26 @@
+import { format } from "date-fns";
+import { format as format2 } from "date-fns";
+const momentUtils = {
+  /**
+   * Format a date to a readable string
+   * @param {Date|string|number} date - The date to format
+   * @param {string} formatStr - The format string (default: 'dd MMM yyyy')
+   * @returns {string} - Formatted date string
+   */
+  formatDate: (date, formatStr = "dd MMM yyyy") => {
+    return format(new Date(date), formatStr);
+  },
+  /**
+   * Format a date to a readable string with time
+   * @param {Date|string|number} date - The date to format
+   * @param {string} formatStr - The format string (default: 'dd MMM yyyy - hh:mm')
+   * @returns {string} - Formatted date string
+   */
+  formatDateTime: (date, formatStr = "dd MMM yyyy - hh:mm") => {
+    return format(new Date(date), formatStr);
+  }
+};
+export {
+  format2 as format,
+  momentUtils
+};

package/dist/utils/redirect-url.js

@@ -0,0 +1,5 @@
+import Cookies from "js-cookie";
+const redirectUrl = Cookies.get("STOKR_INVESTOR_DASHBOARD_REDIRECT") || Cookies.get("STOKR_INVEST_IN_STO_REDIRECT");
+export {
+  redirectUrl as default
+};

package/dist/utils/saveAs.js

@@ -0,0 +1,17 @@
+const saveAs = (file, fileName = "fileName") => {
+  const url = window.URL.createObjectURL(file);
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  link.parentNode.removeChild(link);
+};
+const openFile = (file) => {
+  var url = window.URL.createObjectURL(file);
+  window.open(url);
+};
+export {
+  openFile,
+  saveAs
+};

package/dist/utils/scrollUtils.js

@@ -0,0 +1,63 @@
+import { useEffect, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+const scrollToElement = (elementRef, options = {}) => {
+  const { behavior = "smooth", block = "start", delay = 0 } = options;
+  const performScroll = () => {
+    if (!elementRef?.current) return;
+    const isAppleDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+    requestAnimationFrame(() => {
+      if (isAppleDevice) {
+        const rect = elementRef.current.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const targetY = rect.top + scrollTop;
+        window.scrollTo({
+          top: targetY,
+          behavior: behavior === "smooth" ? "auto" : behavior
+          // Use 'auto' for Apple devices
+        });
+      } else {
+        elementRef.current.scrollIntoView({
+          behavior,
+          block
+        });
+      }
+    });
+  };
+  if (delay > 0) {
+    setTimeout(performScroll, delay);
+  } else {
+    performScroll();
+  }
+};
+const useScrollActions = () => {
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }, []);
+  const scrollToElementWithOffset = useCallback((elementRef, desiredOffsetFromBottom = 0) => {
+    if (elementRef && elementRef.current) {
+      const targetElement = elementRef.current;
+      const scrollNeeded = targetElement.getBoundingClientRect().bottom - (window.innerHeight - desiredOffsetFromBottom);
+      window.scrollBy({
+        top: scrollNeeded,
+        behavior: "smooth"
+      });
+    }
+  }, []);
+  return {
+    scrollToTop,
+    scrollToElement,
+    scrollToElementWithOffset
+  };
+};
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }, [pathname]);
+  return null;
+};
+export {
+  ScrollToTop,
+  scrollToElement,
+  useScrollActions
+};

package/dist/utils/set-redirect-cookie.js

@@ -0,0 +1,16 @@
+import Cookies from "js-cookie";
+import { getConfig } from "../config.js";
+const setRedirectCookie = (path = "") => {
+  const inOneHour = 1 / 24;
+  const cookieOptions = {
+    expires: inOneHour
+  };
+  const domain = getConfig("cookieDomain");
+  if (domain) {
+    cookieOptions.domain = domain;
+  }
+  Cookies.set("STOKR_INVESTOR_DASHBOARD_REDIRECT", `${window.location.href}${path}`, cookieOptions);
+};
+export {
+  setRedirectCookie as default
+};

package/dist/utils/transition.js

@@ -0,0 +1,101 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+const getTimeout = (timeout, phase) => {
+  if (typeof timeout === "number") return timeout;
+  return timeout?.[phase] ?? 0;
+};
+function Transition({
+  in: inProp = true,
+  timeout = 300,
+  children,
+  nodeRef: nodeRefProp,
+  unmountOnExit = false,
+  onEntered,
+  onExited,
+  ...rest
+}) {
+  const [status, setStatus] = useState(() => {
+    if (inProp) return "entering";
+    return unmountOnExit ? "unmounted" : "exited";
+  });
+  const internalRef = useRef(null);
+  const nodeRef = nodeRefProp ?? internalRef;
+  const timeoutRef = useRef(null);
+  const clearTimer = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  useEffect(() => {
+    if (inProp) {
+      setStatus("entering");
+      const enterMs = getTimeout(timeout, "enter");
+      const id = setTimeout(() => {
+        timeoutRef.current = null;
+        setStatus("entered");
+        onEntered?.(nodeRef.current);
+      }, enterMs);
+      timeoutRef.current = id;
+      return () => {
+        clearTimeout(id);
+        timeoutRef.current = null;
+      };
+    } else {
+      setStatus("exiting");
+      const exitMs = getTimeout(timeout, "exit");
+      const id = setTimeout(() => {
+        timeoutRef.current = null;
+        setStatus("exited");
+        onExited?.(nodeRef.current);
+        if (unmountOnExit) setStatus("unmounted");
+      }, exitMs);
+      timeoutRef.current = id;
+      return () => {
+        clearTimeout(id);
+        timeoutRef.current = null;
+      };
+    }
+  }, [inProp, timeout, unmountOnExit, onEntered, onExited, nodeRef]);
+  useEffect(() => () => clearTimer(), []);
+  if (status === "unmounted") return null;
+  const child = typeof children === "function" ? children(status) : children;
+  if (nodeRefProp) return child;
+  const content = React__default.isValidElement(child) && child.type !== React__default.Fragment ? React__default.createElement(child.type, child.props) : child;
+  return /* @__PURE__ */ jsx("div", { ref: nodeRef, ...rest, children: content });
+}
+Transition.propTypes = {
+  in: PropTypes.bool,
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })
+  ]),
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  nodeRef: PropTypes.object,
+  unmountOnExit: PropTypes.bool,
+  onEntered: PropTypes.func,
+  onExited: PropTypes.func
+};
+function TransitionGroup({ component: Component = "div", children, ...rest }) {
+  return /* @__PURE__ */ jsx(Component, { ...rest, children });
+}
+TransitionGroup.propTypes = {
+  component: PropTypes.elementType,
+  children: PropTypes.node
+};
+({
+  in: PropTypes.bool.isRequired,
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })
+  ]),
+  classNames: PropTypes.string,
+  children: PropTypes.element.isRequired,
+  unmountOnExit: PropTypes.bool,
+  nodeRef: PropTypes.object
+});
+export {
+  Transition,
+  TransitionGroup
+};

package/dist/utils/withRouter.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useInRouterContext, useNavigate, useLocation } from "react-router-dom";
+const noopNavigate = () => {
+};
+const fallbackLocation = { pathname: "/", search: "", hash: "", state: null, key: "default" };
+const withRouter = (Component) => {
+  const InnerWithRouter = (props) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    return /* @__PURE__ */ jsx(Component, { navigate, location, ...props });
+  };
+  const Wrapper = (props) => {
+    const inRouter = useInRouterContext();
+    if (inRouter) {
+      return /* @__PURE__ */ jsx(InnerWithRouter, { ...props });
+    }
+    return /* @__PURE__ */ jsx(Component, { navigate: noopNavigate, location: fallbackLocation, ...props });
+  };
+  return Wrapper;
+};
+export {
+  withRouter
+};