@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/ConfirmModal/ConfirmModal.styles.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import rwd from "../../styles/rwd.js";
+import { Text } from "../Text/Text.styles.js";
+const ContainerWithLine = styled(Text).withConfig({
+  shouldForwardProp: (props) => !["height", "lineColor"].includes(props)
+})`
+  position: relative;
+  padding-left: 48px;
+
+  &::before {
+    content: '';
+    width: 11px;
+    height: ${({ height }) => height ? height - 15 : 50}px;
+    background: ${(props) => props.lineColor || colors.blue};
+    position: absolute;
+    left: 0;
+    top: 6px;
+  }
+`;
+const RedBar = styled.div.withConfig({
+  shouldForwardProp: (props) => !["barColor"].includes(props)
+})`
+  background: ${(props) => props.barColor || colors.orangishRed};
+  bottom: 0;
+  height: 20%;
+  position: absolute;
+  right: 0;
+  width: 50%;
+  max-height: 85px;
+  max-width: 400px;
+
+  ${rwd.Medium`
+    display: block;
+  `}
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+export {
+  ContainerWithLine,
+  RedBar
+};

package/dist/components/CryptoAddress/ComponentWrap.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+const ComponentWrap = ({ children, wrapped = false, borderTop = false, borderBottom = false }) => wrapped ? /* @__PURE__ */ jsx(ComponentWrapper, { borderTop, borderBottom, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+ComponentWrap.propTypes = {
+  children: PropTypes.node.isRequired,
+  wrapped: PropTypes.bool,
+  borderTop: PropTypes.bool,
+  borderBottom: PropTypes.bool
+};
+var stdin_default = ComponentWrap;
+export {
+  ComponentWrap,
+  stdin_default as default
+};

package/dist/components/CryptoAddress/CryptoAddress.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useState } from "react";
+import PropTypes from "prop-types";
+import { Tooltip } from "react-tippy";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Container, DataWrapper, CheckMark, Head, Title, Status, TitleSide, AddressWrap, Address, Body, DataBox, Value, Equal, InfoBox, OptionsWrapper, CopyToClipboardButton } from "./CryptoAddress.styles.js";
+import stdin_default$1 from "./RadioWrap.js";
+import stdin_default$2 from "./ComponentWrap.js";
+import getShortAddress from "../../utils/get-short-address.js";
+const copyToClipBoard = (value, isCopied, setCopy) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    position: "top",
+    title: isCopied ? "Copied to clipboard!" : "Click to copy to clipboard.",
+    theme: "light",
+    arrow: true,
+    hideOnClick: false,
+    onHidden: () => setCopy(false),
+    duration: 200,
+    children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: () => setCopy(true), children: /* @__PURE__ */ jsx(CopyToClipboardButton, {}) })
+  }
+);
+const defaultData = {
+  value: "",
+  unit: "",
+  eqValue: "",
+  eqUnit: "",
+  tooltip: false
+};
+const defaultInfo = { value: "", unit: "", eqValue: "", eqUnit: "" };
+const CryptoAddress = ({
+  title,
+  status = "",
+  address = "",
+  data = defaultData,
+  info = defaultInfo,
+  wrapped = false,
+  borderTop = false,
+  borderBottom = false,
+  radio = null,
+  sideOptions = null,
+  src,
+  noHead = false,
+  noBody,
+  noBorderBottom,
+  flexHead,
+  fontSize = 22,
+  eqValueFontSize = 9,
+  eqValueStyle,
+  titleColor,
+  dataBoxStyle = {},
+  headStyle = {},
+  infoBoxStyle = {},
+  wrapperStyle,
+  bodyStyle,
+  containerStyle,
+  dataValueStyle,
+  valueChildMarginLeft
+}) => {
+  const [copiedAddressToClipboard, setCopiedAddressToClipboard] = useState(false);
+  return /* @__PURE__ */ jsx(Container, { style: containerStyle, children: /* @__PURE__ */ jsx(stdin_default$1, { radio, hide: radio && radio.hide, children: /* @__PURE__ */ jsx(stdin_default$2, { wrapped, borderTop, borderBottom: !noBorderBottom && borderBottom, children: /* @__PURE__ */ jsxs(DataWrapper, { withOptions: !!sideOptions, style: wrapperStyle, children: [
+    radio && !radio.hide && /* @__PURE__ */ jsx(CheckMark, {}),
+    /* @__PURE__ */ jsxs(Head, { noBody, noHead, flexHead, style: headStyle, children: [
+      /* @__PURE__ */ jsxs(Title, { color: titleColor, children: [
+        title,
+        status && /* @__PURE__ */ jsx(Status, { children: status })
+      ] }),
+      /* @__PURE__ */ jsxs(TitleSide, { children: [
+        address && /* @__PURE__ */ jsxs(AddressWrap, { children: [
+          /* @__PURE__ */ jsx(Tooltip, { position: "top", title: address, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(Address, { children: getShortAddress(address) }) }),
+          /* @__PURE__ */ jsx("div", { onClick: (e) => e.preventDefault(), children: copyToClipBoard(address, copiedAddressToClipboard, setCopiedAddressToClipboard) })
+        ] }),
+        src && /* @__PURE__ */ jsx("img", { src, alt: "project logo", height: "50", width: 100, style: { objectFit: "contain" } })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Body, { noBody, style: bodyStyle, children: [
+      /* @__PURE__ */ jsxs(DataBox, { style: dataBoxStyle, children: [
+        data.value && /* @__PURE__ */ jsxs(Value, { fontSize, style: dataValueStyle, childMarginLeft: valueChildMarginLeft, children: [
+          data.unit && `${data.unit} `,
+          data.shortAddress ? /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              position: "top",
+              title: data.value,
+              theme: "light",
+              arrow: true,
+              duration: 200,
+              style: { margin: 0 },
+              children: getShortAddress(data.value)
+            }
+          ) : data.value,
+          data.tooltip && /* @__PURE__ */ jsx("div", { children: copyToClipBoard(data.value, copiedAddressToClipboard, setCopiedAddressToClipboard) })
+        ] }),
+        data.eqValue && /* @__PURE__ */ jsxs(Equal, { fontSize: eqValueFontSize, style: { eqValueStyle }, children: [
+          "= ",
+          data.eqUnit && `${data.eqUnit} `,
+          data.eqValue
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(InfoBox, { style: infoBoxStyle, children: [
+        /* @__PURE__ */ jsxs(Value, { childMarginLeft: valueChildMarginLeft, children: [
+          info.unit && /* @__PURE__ */ jsx("strong", { children: info.unit }),
+          info.value
+        ] }),
+        info.eqValue && /* @__PURE__ */ jsxs(Equal, { fontSize: eqValueFontSize, style: eqValueStyle, children: [
+          info.noEqualsToSign ? " " : "= ",
+          info.eqUnit && /* @__PURE__ */ jsx("strong", { children: info.eqUnit }),
+          ` ${info.eqValue}`
+        ] })
+      ] })
+    ] }),
+    sideOptions && /* @__PURE__ */ jsx(OptionsWrapper, { children: sideOptions })
+  ] }) }) }) });
+};
+const dataShape = PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  tooltip: PropTypes.bool,
+  unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eqValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eqUnit: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+});
+CryptoAddress.propTypes = {
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string,
+  address: PropTypes.string.isRequired,
+  wrapped: PropTypes.bool,
+  borderTop: PropTypes.bool,
+  borderBottom: PropTypes.bool,
+  radio: stdin_default$1.propTypes.radio,
+  data: dataShape,
+  info: dataShape,
+  sideOptions: PropTypes.node,
+  // fontSize from IIS
+  fontSize: PropTypes.number,
+  eqValueFontSize: PropTypes.number,
+  noHead: PropTypes.bool,
+  dataBoxStyle: PropTypes.object,
+  headStyle: PropTypes.object,
+  infoBoxStyle: PropTypes.object,
+  wrapperStyle: PropTypes.object,
+  dataValueStyle: PropTypes.object,
+  /** Margin-left for child divs inside Value (default: '30px') */
+  valueChildMarginLeft: PropTypes.string
+};
+const MemoCryptoAddress = React__default.memo(CryptoAddress);
+var stdin_default = CryptoAddress;
+export {
+  CryptoAddress,
+  MemoCryptoAddress,
+  stdin_default as default
+};

package/dist/components/CryptoAddress/CryptoAddress.styles.js

@@ -0,0 +1,443 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import theme from "../../styles/theme.js";
+import SvgCopyIcon from "../../static/images/copy_icon.svg.js";
+const Container = styled.div`
+  position: relative;
+`;
+const Head = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noBody", "flexHead", "noHead"].includes(props)
+})`
+  position: relative;
+  margin-bottom: 5px;
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    clear: both;
+  }
+
+  ${({ noBody }) => noBody && `margin-bottom: 0`}
+  ${({ flexHead }) => flexHead && `
+         display:flex;
+         justify-content:space-between;
+         align-items:center;
+         flex-wrap:wrap;
+         `}
+
+  ${({ noHead }) => noHead && `display: none`}
+`;
+const Body = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noBody"].includes(props)
+})`
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    clear: both;
+  }
+
+  ${({ noBody }) => noBody && `display: none`}
+`;
+const Title = styled.div.withConfig({
+  shouldForwardProp: (props) => !["color"].includes(props)
+})`
+  float: left;
+  font-weight: bold;
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding-right: 20px;
+  color: ${(props) => props.color};
+`;
+const Status = styled.span`
+  display: inline-block;
+  vertical-align: top;
+  padding: 0px 16px;
+  background-color: ${() => theme.cBlack};
+  color: ${() => theme.cWhite};
+  font-weight: 600;
+  font-size: 8px;
+  letter-spacing: 1.78px;
+  line-height: 16px;
+  border-radius: 8px;
+  margin-left: 12px;
+  margin-top: 4px;
+`;
+const TitleSide = styled.div`
+  display: block;
+  float: right;
+  margin: 4px 0;
+  width: 40%;
+`;
+const AddressWrap = styled.div`
+  /* display: inline-block;   was this in VD */
+  display: flex;
+  align-items: center;
+`;
+const Address = styled.span`
+  display: block;
+  font-weight: 600;
+  font-size: 11px;
+  line-height: 16px;
+  margin-right: 6px;
+  color: ${() => theme.cBlack};
+  transition: color 0.2s;
+  cursor: pointer;
+
+  &:before {
+    content: '\\f3d1';
+    font-family: 'Ionicons';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 12px;
+    line-height: 8px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 6px;
+  }
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+styled.span`
+  line-height: 16px;
+  cursor: pointer;
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+const CopyToClipboardButton = styled(SvgCopyIcon)`
+  color: ${() => theme.black};
+  cursor: pointer;
+  height: 1em;
+  width: 1em;
+`;
+const DataBox = styled.div`
+  float: left;
+`;
+const InfoBox = styled.div`
+  float: right;
+  width: 40%;
+
+  @media (max-width: 430px) {
+    width: 100%;
+    padding-top: 14px;
+    text-align: start;
+  }
+`;
+const Value = styled.div.withConfig({
+  shouldForwardProp: (props) => !["fontSize", "childMarginLeft"].includes(props)
+})`
+  position: relative;
+  font-weight: 300;
+  font-size: 22px;
+  font-size: ${(props) => props.fontSize}px;
+  line-height: 28px;
+  letter-spacing: 0.4px;
+
+  strong {
+    font-weight: normal;
+
+    &:after {
+      content: ' ';
+    }
+  }
+
+  & > div {
+    display: inline-block;
+    margin-left: ${(props) => props.childMarginLeft !== void 0 ? props.childMarginLeft : "30px"};
+
+    & svg {
+      max-width: 16px;
+      max-height: 16px;
+    }
+  }
+`;
+const Equal = styled.div.withConfig({
+  shouldForwardProp: (props) => !["fontSize"].includes(props)
+})`
+  position: relative;
+  font-size: 9px;
+  font-size: ${(props) => props.fontSize}px;
+  font-style: italic;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  margin-top: 8px;
+`;
+const DataWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withOptions"].includes(props)
+})`
+  position: relative;
+  padding-right: 24px;
+
+  ${rwd.Medium`
+    ${(props) => props.withOptions && `
+      padding-right: 100px;
+
+      ${TitleSide} {
+        width: 50%;
+      }
+
+      ${InfoBox} {
+        width: 50%;
+      }
+    `}
+  
+  `}
+`;
+const CheckMark = styled.div`
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  top: 50%;
+  right: 0;
+  margin-top: -7px;
+  border: 1px solid #9b9b9b;
+  border-radius: 7px;
+  background-color: transparent;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    transform: scale(0);
+    transition:
+      opacity 0.2s,
+      transform 0.4s cubic-bezier(0.8, -0.5, 0.6, 0.6);
+  }
+
+  &:after {
+    width: 4px;
+    height: 4px;
+    margin-top: -2px;
+    margin-left: -2px;
+    border-radius: 2px;
+    background-color: ${() => theme.cPrimary};
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  }
+`;
+const Radio = styled.div.withConfig({
+  shouldForwardProp: (props) => !["hide", "disabled", "hideLinde"].includes(props)
+})`
+  & > input {
+    ${(props) => props.hide && "visibility: hidden"};
+
+    z-index: -1;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    display: block;
+    width: 1px;
+    height: 0;
+    opacity: 0;
+    border: 0;
+
+    & + label {
+      display: block;
+      position: relative;
+      ${(props) => !props.disabled && "cursor: pointer"};
+
+      ${(props) => !props.hideLine && `
+      &:before {
+        content: '';
+        width: 6px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background-color: transparent;
+        transition: background-color 0.2s;
+      }
+      `}
+    }
+
+    &:disabled + label {
+      &:before {
+        background-color: transparent !important;
+      }
+
+      ${CheckMark} {
+        border-color: ${() => theme.cLightGrey}!important;
+        background-color: ${() => theme.cGrey}!important;
+      }
+    }
+
+    &:checked + label {
+      &:before {
+        background-color: ${() => theme.cWarning}!important;
+      }
+
+      ${CheckMark} {
+        &:before,
+        &:after {
+          opacity: 1;
+          transform: scale(1);
+          transition:
+            opacity 0.2s,
+            transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+      }
+    }
+
+    &:focus + label,
+    &:hover + label,
+    & + label:hover {
+      &:before {
+        background-color: ${() => theme.cLightGrey};
+      }
+
+      ${CheckMark} {
+        border-color: ${() => theme.cPrimary};
+      }
+    }
+  }
+`;
+const OptionsWrapper = styled.div`
+  text-align: center;
+  margin-right: -24px;
+
+  ${rwd.Medium`
+    margin-right: 0;
+    position: absolute;
+    display: block;
+    width: 100px;
+    top: 50%;
+    right: 0;
+    text-align:center;
+    transform: translate(0, -50%);  
+  `}
+`;
+styled.button`
+  display: inline-block;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  outline: none;
+  margin-left: 10px;
+  border: 1px solid ${() => theme.cLightGrey};
+  border-radius: 20px;
+  color: ${() => theme.cWarning};
+  transition: color 0.2s;
+
+  &:focus,
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+styled(Icon).withConfig({
+  shouldForwardProp: (props) => !["large"].includes(props)
+})`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  line-height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+  text-align: center;
+
+  ${(props) => props.large && `
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    line-height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+  `}
+`;
+styled.button.withConfig({
+  shouldForwardProp: (props) => !["isActive"].includes(props)
+})`
+  display: inline-block;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  outline: none;
+  margin-left: 10px;
+  border-radius: 20px;
+  color: ${() => theme.cBlack};
+  transition: color 0.2s;
+  transform: translateZ(0);
+
+  &:focus,
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+
+  &:before {
+    content: '${iconsMap.arrowDown}';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    margin-top: -8px;
+    margin-left: -8px;
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    transition: transform 0.2s;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ${(props) => props.isActive && `
+    &:before {
+      transform: rotate(180deg);
+    }
+  `}
+`;
+export {
+  Address,
+  AddressWrap,
+  Body,
+  CheckMark,
+  Container,
+  CopyToClipboardButton,
+  DataBox,
+  DataWrapper,
+  Equal,
+  Head,
+  InfoBox,
+  OptionsWrapper,
+  Radio,
+  Status,
+  Title,
+  TitleSide,
+  Value
+};

package/dist/components/CryptoAddress/RadioWrap.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { Radio } from "./CryptoAddress.styles.js";
+const RadioWrap = ({ children, radio = null }) => {
+  const handleOnClick = (e) => {
+    if (radio) {
+      radio.handleCheckedAddressRadio?.(e.target.id);
+      radio.handleSelectedCryptoAddress?.(radio.address);
+    }
+  };
+  return radio ? /* @__PURE__ */ jsxs(Radio, { hide: radio.hide, hideLine: radio.hideLine, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        id: radio.id,
+        name: radio.name || radio.id,
+        value: radio.value,
+        checked: radio.checked,
+        disabled: radio.disabled,
+        onChange: radio.onChange,
+        onBlur: radio.onBlur,
+        onClick: handleOnClick
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: radio.id, children })
+  ] }) : /* @__PURE__ */ jsx(Fragment, { children });
+};
+RadioWrap.propTypes = {
+  children: PropTypes.node.isRequired,
+  radio: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    value: PropTypes.string,
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    hide: PropTypes.bool,
+    hideLine: PropTypes.bool
+  })
+};
+var stdin_default = RadioWrap;
+export {
+  RadioWrap,
+  stdin_default as default
+};