@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

package/src/ui-kit/components/atoms/BackgroundTitle/background-title.module.scss

@@ -0,0 +1,52 @@
+@use "../../../assets/styles/index" as *;
+
+.background-title {
+    pointer-events: none;
+    user-select: none;
+    position: relative;
+    width: 200%;
+    // font-family: NunitoSans;
+
+    &-wrapper {
+        position: absolute;
+        overflow-x: hidden;
+        width: 200%;
+        height: 90px;
+        top: 0;
+        left: 0;
+
+        @media (max-width: $phone-width) {
+            font-size: 30px;
+            line-height: 50px;
+            letter-spacing: 0.76875px;
+        }
+
+        &.small-margins {
+            top: 15px;
+            left: 19px;
+        }
+
+        &-text {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 50px;
+            line-height: 50px;
+            font-weight: $extra-bold;
+            letter-spacing: 1.23px;
+            color: rgba(#12316b, 0.05);
+
+            &.small-margins {
+                font-size: 30px;
+                line-height: 50px;
+                letter-spacing: 0.76875px;
+            }
+
+            @media (max-width: $phone-width) {
+                font-size: 30px;
+                line-height: 40px;
+                letter-spacing: 0.76875px;
+            }
+        }
+    }
+}

package/src/ui-kit/components/atoms/InformationMessage/InformationMessage.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./information-message.module.scss";
+
+import InfoIcon from "../../../assets/wrappedImages/infoIcon.jsx";
+
+/**
+ * InformationMessage component to display an informational message with an optional icon.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.text=""] - The text content of the message.
+ * @param {string|boolean} [props.icon=false] - The URL or boolean indicating whether to display an icon.
+ * @param {boolean} [props.bigImage=false] - Whether to use a larger image for the icon.
+ * @param {boolean} [props.whiteText=false] - Whether the text should be displayed in white color.
+ * @param {ReactNode} [props.children=null] - Additional child components.
+ */
+export const InformationMessage = ({
+    text = "",
+    icon = false,
+    bigImage = false,
+    whiteText = false,
+    children = null,
+}) => {
+    return (
+        <div className={s["information-message"] + (bigImage ? " " + s["big-image"] : "")}>
+            {icon ? <img src={icon} alt="info icon" loading="lazy" /> : <InfoIcon />}
+            <p className={s["information-message-text"] + (whiteText ? " " + s["white-text"] : "")}>
+                {text}
+                {children}
+            </p>
+        </div>
+    );
+};
+
+InformationMessage.propTypes = {
+    text: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    bigImage: PropTypes.bool,
+    whiteText: PropTypes.bool,
+    children: PropTypes.node,
+};
+
+InformationMessage.defaultProps = {
+    text: "",
+    icon: false,
+    bigImage: false,
+    whiteText: false,
+    children: null,
+};

package/src/ui-kit/components/atoms/InformationMessage/information-message.module.scss

@@ -0,0 +1,38 @@
+@use "../../../assets/styles/index" as *;
+
+.information-message {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+
+    &.data-loaded {
+        align-items: flex-start;
+    }
+
+    @media (max-width: $phone-width) {
+        align-items: flex-start;
+    }
+
+    img,
+    svg {
+        min-width: 24px;
+        height: 24px;
+    }
+
+    &.big-image {
+        img,
+        svg {
+            min-width: 29px;
+            height: 29px;
+        }
+    }
+
+    .information-message-text {
+        margin-left: Margin("3");
+        color: SolidColor("grey");
+
+        &.white-text {
+            color: $white;
+        }
+    }
+}

package/src/ui-kit/components/atoms/Input/Input.jsx

@@ -0,0 +1,183 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+import s from "./input.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/utils/errorUtils.js";
+
+import { Close } from "../buttons/Close/Close.jsx";
+import { Validation } from "../Validation/Validation.jsx";
+
+/**
+ * Input component for forms.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.type="text"] - The type of input (e.g., "text", "number", "email").
+ * @param {string} [props.name=""] - The name of the input field.
+ * @param {function} [props.onChange=() => {}] - Function called when the input value changes.
+ * @param {string} [props.alertText=""] - Text for alert messages.
+ * @param {string} [props.placeholder=""] - Placeholder text for the input.
+ * @param {string} [props.className=""] - Additional CSS classes for styling.
+ * @param {string} [props.defaultValue=""] - Default value for the input.
+ * @param {boolean} [props.isBigHeight=false] - Whether the input has a larger height.
+ * @param {boolean} [props.isSmallHeight=false] - Whether the input has a smaller height.
+ * @param {string} [props.label=""] - Label text for the input.
+ * @param {string} [props.id=null] - Unique ID for the input.
+ * @param {string} [props.value=""] - Value of the input.
+ * @param {string} [props.successAlertText=""] - Text for success alert messages.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled.
+ * @param {function} [props.onKeyUp=() => {}] - Function called on key up event.
+ * @param {boolean} [props.autoFocus=false] - Whether the input should be autofocused.
+ * @param {boolean} [props.fillWidth=false] - Whether the input should fill the width of its container.
+ * @param {boolean} [props.clearButton=false] - Whether to show a clear button for the input.
+ * @param {boolean} [props.imageBackground=false] - Whether the input has an image background.
+ * @param {boolean} [props.errorEncountered=false] - Whether an error has been encountered for the input.
+ */
+export const Input = forwardRef(
+    (
+        {
+            type = "text",
+            name = "",
+            onChange = () => {},
+            alertText = "",
+            placeholder = "",
+            className = "",
+            defaultValue = "",
+            isBigHeight = false,
+            isSmallHeight = false,
+            label = "",
+            id = null,
+            value = "",
+            successAlertText = "",
+            disabled = false,
+            onKeyUp = event => {},
+            autoFocus = false,
+            fillWidth = false,
+            clearButton = false,
+            imageBackground = false,
+            errorEncountered = false,
+        },
+        ref
+    ) => {
+        const handleError = useCallHandlingErrors();
+
+        const handleClearButtonClick = () => {
+            onChange({ target: { value: "" } });
+            try {
+                ref.current.focus();
+            } catch (e) {
+                logErrorOrOutputToConsole(
+                    "Input clear button will not work unless you provide a ref to the Input. Please pass a 'ref' parameter to the Input or disable the clear button."
+                );
+            }
+        };
+
+        return (
+            <div
+                className={[
+                    s["input"],
+                    isBigHeight ? s["big-height"] : "",
+                    isSmallHeight ? s["small-height"] : "",
+                    disabled ? s["disabled"] : "",
+                    fillWidth ? s["fill-width"] : "",
+                    imageBackground ? s["image-background"] : "",
+                ].join(" ")}
+            >
+                {label ? (
+                    <label htmlFor={id} className={s["input-label"]}>
+                        {label}
+                    </label>
+                ) : null}
+
+                {clearButton ? (
+                    <div className={s["input-clear-button"]}>
+                        <Close onClick={handleClearButtonClick} color={"dark-invert"} />
+                    </div>
+                ) : (
+                    ""
+                )}
+
+                {defaultValue ? (
+                    <input
+                        id={id}
+                        type={type}
+                        name={name}
+                        onChange={e => handleError(onChange, e)}
+                        placeholder={placeholder}
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
+                        defaultValue={defaultValue}
+                        disabled={disabled}
+                        onKeyUp={event => onKeyUp(event)}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                    />
+                ) : (
+                    <input
+                        id={id}
+                        type={type}
+                        name={name}
+                        onChange={e => handleError(onChange, e)}
+                        placeholder={placeholder}
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
+                        value={value}
+                        disabled={disabled}
+                        onKeyUp={event => onKeyUp(event)}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                    />
+                )}
+
+                {alertText || successAlertText ? (
+                    <Validation text={alertText || successAlertText} isSuccessAlert={!alertText} />
+                ) : null}
+            </div>
+        );
+    }
+);
+
+Input.propTypes = {
+    type: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    alertText: PropTypes.string,
+    placeholder: PropTypes.string,
+    className: PropTypes.string,
+    defaultValue: PropTypes.string,
+    isBigHeight: PropTypes.bool,
+    isSmallHeight: PropTypes.bool,
+    label: PropTypes.string,
+    id: PropTypes.string,
+    value: PropTypes.string,
+    successAlertText: PropTypes.string,
+    disabled: PropTypes.bool,
+    onKeyUp: PropTypes.func,
+    autoFocus: PropTypes.bool,
+    fillWidth: PropTypes.bool,
+    clearButton: PropTypes.bool,
+    imageBackground: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+};
+
+Input.defaultProps = {
+    type: "text",
+    onChange: () => {},
+    alertText: "",
+    placeholder: "",
+    className: "",
+    defaultValue: "",
+    isBigHeight: false,
+    isSmallHeight: false,
+    label: "",
+    id: null,
+    value: "",
+    successAlertText: "",
+    disabled: false,
+    onKeyUp: () => {},
+    autoFocus: false,
+    fillWidth: false,
+    clearButton: false,
+    imageBackground: false,
+    errorEncountered: false,
+};

package/src/ui-kit/components/atoms/Input/input.module.scss

@@ -0,0 +1,107 @@
+@use "../../../assets/styles/index" as *;
+
+.input {
+    position: relative;
+
+    &.big-height {
+        input {
+            min-height: 117px;
+        }
+    }
+
+    &.small-height {
+        input {
+            min-height: 48px;
+            padding: Padding("2") Padding("5");
+        }
+    }
+
+    &.disabled > input {
+        opacity: 0.5;
+    }
+
+    &.fill-width {
+        width: 100%;
+    }
+
+    input {
+        @extend %text-medium;
+        padding: Padding("5");
+        border-radius: 7px;
+        background: SolidColor(lightsmoke);
+        border: 0;
+        color: SolidColor("grey");
+        width: 100%;
+        min-height: 66px;
+        font-size: 16px;
+        vertical-align: center;
+        appearance: none;
+        transition: 0.2s all ease;
+        box-shadow: $shadowOutlineStatic;
+
+        &.error-encountered {
+            box-shadow: $shadowOutlineError !important;
+        }
+
+        &::placeholder {
+            color: SolidColor("grey");
+            font-size: 16px;
+            vertical-align: center;
+            @extend %text-medium;
+        }
+    }
+
+    @media (hover: hover) {
+        &-clear-button:hover:not(:active) + input,
+        input:hover {
+            &:not(:focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s all ease;
+            }
+        }
+    }
+
+    &-clear-button:active + input,
+    input:focus {
+        box-shadow: $shadowOutlineActive;
+    }
+
+    &.image-background {
+        input {
+            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0);
+        }
+
+        @media (hover: hover) {
+            &-clear-button:hover:not(:active) + input,
+            input:hover {
+                &:not(:focus) {
+                    background-color: $white;
+                    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0);
+                    transition: 0.02s all ease;
+                }
+            }
+        }
+
+        input:focus {
+            background-color: $white;
+            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    &-clear-button {
+        position: absolute;
+        right: 20px;
+        top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &-label {
+        @include typograpy(h6);
+        font-weight: $semi-bold;
+        color: SolidColor("grey");
+        margin-bottom: Margin("2");
+        display: block;
+    }
+}

package/src/{components → ui-kit/components}/atoms/LoadingDots/LoadingDots.jsx

@@ -15,33 +15,16 @@ import styles from "./LoadingDots.module.scss";
  * @param {(boolean|'left'|'right')} [props.align=false] - Aligns the loading dots to the left or right if specified, otherwise centered.
  * @returns {React.ReactElement} A React component that renders the loading dots animation.
  */
-export const LoadingDots = ({
-    size = "small",
-    isColored = false,
-    noMargins = false,
-    align = false,
-}) => {
+export const LoadingDots = ({ size = "small", isColored = false, noMargins = false, align = false }) => {
     return (
         <div
-            className={`${styles["loading-dots"]} ${styles[size]} ${
-                noMargins ? ` ${styles["no-margins"]}` : ""
-            } ${align ? styles["align-" + align] : ""}`}
+            className={`${styles["loading-dots"]} ${styles[size]} ${noMargins ? ` ${styles["no-margins"]}` : ""} ${
+                align ? styles["align-" + align] : ""
+            }`}
         >
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
         </div>
     );
 };
@@ -50,8 +33,5 @@ LoadingDots.propTypes = {
     size: PropTypes.oneOf(["big", "small", "extra-small"]),
     isColored: PropTypes.bool,
     noMargins: PropTypes.bool,
-    align: PropTypes.oneOfType([
-        PropTypes.oneOf(["left", "right"]),
-        PropTypes.bool,
-    ]),
+    align: PropTypes.oneOfType([PropTypes.oneOf(["left", "right"]), PropTypes.bool]),
 };

package/src/{components → ui-kit/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@use "../../../assets/styles/index" as *;
 
 .loading-dots {
     display: flex;
@@ -40,7 +40,8 @@
             }
 
             &:nth-child(2) {
-                @extend .mx-3;
+                margin-right: Margin("3");
+                margin-left: Margin("3");
             }
         }
     }

package/src/ui-kit/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./notice-icon.module.scss";
+
+import { handleClickOutside } from "../../../utils/uiUtils.js";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
+import NoticeQuestionIcon from "../../../assets/wrappedImages/noticeQuestionIcon.jsx";
+
+/**
+ * A component that displays a notice icon with optional tooltip.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.noticeText - The text to display inside the tooltip.
+ * @param {string} [props.titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} props.tooltipPosition - Position for the tooltip relative to the icon.
+ */
+export const NoticeIcon = ({ noticeText, titleNoticeIcon = "", tooltipPosition = TOOLTIP_POSITIONS.TOP }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const noticeRef = useRef();
+
+    useEffect(() => handleClickOutside([noticeRef], () => setShowTooltip(false)), []);
+
+    return (
+        <div ref={noticeRef} className={s["notice-icon"]}>
+            {titleNoticeIcon ? (
+                <img
+                    src={titleNoticeIcon}
+                    alt="title icon"
+                    onClick={() => setShowTooltip(prev => !prev)}
+                    className={s["notice-icon-image"]}
+                    loading="lazy"
+                />
+            ) : (
+                <div className={s["notice-icon-image"]} onClick={() => setShowTooltip(prev => !prev)}>
+                    <NoticeQuestionIcon />
+                </div>
+            )}
+            <div className={s["notice-icon-tooltip"]}>
+                <Tooltip
+                    showTooltip={showTooltip}
+                    handleClick={() => setShowTooltip(false)}
+                    wide={true}
+                    position={tooltipPosition}
+                >
+                    {noticeText}
+                </Tooltip>
+            </div>
+        </div>
+    );
+};
+
+NoticeIcon.propTypes = {
+    noticeText: PropTypes.string.isRequired,
+    titleNoticeIcon: PropTypes.string,
+    tooltipPosition: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+};
+
+NoticeIcon.defaultProps = {
+    titleNoticeIcon: "",
+    tooltipPosition: TOOLTIP_POSITIONS.TOP,
+};

package/src/ui-kit/components/atoms/NoticeIcon/notice-icon.module.scss

@@ -0,0 +1,14 @@
+@use "../../../assets/styles/index" as *;
+
+.notice-icon {
+    position: relative;
+    display: flex;
+
+    &-image {
+        @extend %hover-state;
+    }
+
+    &-tooltip {
+        left: 50%;
+    }
+}

package/src/ui-kit/components/atoms/QrCode/QrCode.jsx

@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../../common-apis/utils/errorUtils.js";
+import { generateQrAndShowInCanvas } from "../../../../common-apis/adapters/qrUtils.js";
+
+import s from "./qr-code.module.scss";
+
+/**
+ * QrCode component renders a QR code for a provided crypto address.
+ *
+ * @component
+ * @param {Object} props - The props for the component.
+ * @param {string} props.address - The crypto address to generate the QR code for.
+ * @param {boolean} [props.fill=false] - If true, applies additional CSS class to fill the container.
+ *
+ * @returns {JSX.Element} A div containing the generated QR code.
+ */
+export const QrCode = ({ address, fill = false }) => {
+    const canvasRef = useRef();
+
+    useEffect(() => {
+        (async () => {
+            try {
+                if (address) {
+                    canvasRef.current.innerHTML = await generateQrAndShowInCanvas(address);
+                }
+            } catch (e) {
+                logErrorOrOutputToConsole(e);
+            }
+        })();
+    }, [address]);
+
+    return <div className={s["qr-code"] + (fill ? " " + s["fill"] : "")} ref={canvasRef} />;
+};
+
+QrCode.propTypes = {
+    address: PropTypes.string.isRequired,
+    fill: PropTypes.bool,
+};
+
+QrCode.defaultProps = {
+    fill: false,
+};

package/src/ui-kit/components/atoms/QrCode/qr-code.module.scss

@@ -0,0 +1,15 @@
+@use "../../../assets/styles/index" as *;
+
+.qr-code {
+    width: 180px !important;
+    height: 180px !important;
+    @media (max-width: $tablet-width) {
+        margin: 0 auto;
+    }
+
+    &.fill {
+        position: absolute;
+        width: 100% !important;
+        height: 100% !important;
+    }
+}

package/src/ui-kit/components/atoms/RateSelector/RateSelector.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import s from "./rate-selector.module.scss";
+
+// TODO: [dev] add JSDoc
+export const RateSelector = ({
+    isFixed = false,
+    setIsFixed = () => {},
+    translations = {
+        floatingRate: "Floating rate",
+        fixedRate: "Fixed rate",
+    },
+}) => {
+    return (
+        <div className={s["rate-selector"]}>
+            <div
+                className={`${s["rate-selector-item"]} ${!isFixed ? s["selected"] : ""}`}
+                onClick={() => (isFixed ? setIsFixed(false) : null)}
+            >
+                <div className={s["rate-selector-item-text"]}>{translations.floatingRate}</div>
+            </div>
+            <div
+                className={`${s["rate-selector-item"]} ${isFixed ? s["selected"] : ""}`}
+                onClick={() => (!isFixed ? setIsFixed(true) : null)}
+            >
+                <div className={s["rate-selector-item-text"]}>{translations.fixedRate}</div>
+            </div>
+        </div>
+    );
+};