@rabbitio/ui-kit 1.0.0-beta.6 → 1.0.0-beta.61

package/src/common/utils/logging/logsStorage.js

@@ -0,0 +1,61 @@
+export class LogsStorage {
+    static _inMemoryStorage = [];
+    static _logsStorageId = "clietnLogs_j203fj2D0n-d1";
+
+    static saveLog(log) {
+        this._inMemoryStorage.push(log);
+    }
+
+    static getInMemoryLogs() {
+        return this._inMemoryStorage;
+    }
+
+    static getAllLogs() {
+        let storedLogs = "";
+        if (typeof window !== "undefined") {
+            storedLogs = localStorage.getItem(this._logsStorageId);
+        }
+        return `${storedLogs}\n${this._inMemoryStorage.join("\n")}`;
+    }
+
+    /**
+     * @param logger {Logger}
+     */
+    static saveToTheDisk(logger) {
+        try {
+            const MAX_LOCAL_STORAGE_VOLUME_BYTES = 5 * 1024 * 1024;
+            const MAX_LOGS_STORAGE_BYTES = MAX_LOCAL_STORAGE_VOLUME_BYTES * 0.65;
+            if (typeof window !== "undefined") {
+                const existingLogs = localStorage.getItem(this._logsStorageId);
+                const logsString = `${existingLogs}\n${this._inMemoryStorage.join("\n")}`;
+                const lettersCountToRemove = logsString.length - Math.round(MAX_LOGS_STORAGE_BYTES / 2);
+                if (lettersCountToRemove > 0) {
+                    localStorage.setItem(
+                        this._logsStorageId,
+                        logsString.slice(lettersCountToRemove, logsString.length)
+                    );
+                } else {
+                    localStorage.setItem(this._logsStorageId, logsString);
+                }
+                this._inMemoryStorage = [];
+            }
+        } catch (e) {
+            logger?.logError(e, "saveToTheDisk", "Failed to save logs to disk");
+        }
+    }
+
+    static removeAllClientLogs() {
+        if (typeof window !== "undefined") {
+            if (localStorage.getItem("doNotRemoveClientLogsWhenSignedOut") !== "true") {
+                localStorage.removeItem(this._logsStorageId);
+            }
+        }
+        this._inMemoryStorage = [];
+    }
+
+    static setDoNotRemoveClientLogsWhenSignedOut(value) {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("doNotRemoveClientLogsWhenSignedOut", value);
+        }
+    }
+}

package/src/common/utils/postponeExecution.js

@@ -0,0 +1,11 @@
+export function postponeExecution(execution, timeoutMS = 1000) {
+    return new Promise((resolve, reject) => {
+        setTimeout(async () => {
+            try {
+                resolve(await execution());
+            } catch (e) {
+                reject(e);
+            }
+        }, timeoutMS);
+    });
+}

package/src/common/utils/safeStringify.js

@@ -0,0 +1,50 @@
+/**
+ * Stringify given object by use of JSON.stringify but handles circular structures and "response", "request" properties
+ * to avoid stringing redundant data when printing errors containing request/response objects.
+ *
+ * @param object - object to be stringed
+ * @param indent - custom indentation
+ * @return {string} - stringed object
+ */
+export function safeStringify(object, indent = 2) {
+    let cache = [];
+    if (
+        typeof object === "string" ||
+        typeof object === "function" ||
+        typeof object === "number" ||
+        typeof object === "undefined" ||
+        typeof object === "boolean"
+    ) {
+        return String(object);
+    }
+    const retVal = JSON.stringify(
+        object,
+        (key, value) => {
+            if (key.toLowerCase().includes("request")) {
+                return JSON.stringify({
+                    body: value?.body,
+                    query: value?.query,
+                    headers: value?.headers,
+                });
+            }
+
+            if (key.toLowerCase().includes("response")) {
+                return JSON.stringify({
+                    statusText: value?.statusText,
+                    status: value?.status,
+                    data: value?.data,
+                    headers: value?.headers,
+                });
+            }
+
+            return typeof value === "object" && value !== null
+                ? cache.includes(value)
+                    ? "duplicated reference" // Duplicated references were found, discarding this key
+                    : cache.push(value) && value // Store value in our collection
+                : value;
+        },
+        indent
+    );
+    cache = null;
+    return retVal;
+}

package/src/components/atoms/AssetIcon/AssetIcon.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-icon.module.scss";
+
+/**
+ * AssetIcon component to display an icon for an asset.
+ *
+ * @component
+ * @param {string} assetIconSrc - The source URL for the asset icon.
+ * @param {string} [assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
+ * @param {string} [fallbackSrc=null] - The fallback source URL in case the main source fails to load.
+ * @param {boolean} [small=false] - Whether to display a smaller version of the icon.
+ */
+export const AssetIcon = ({
+    assetIconSrc,
+    assetIconProtocolSrc = null,
+    fallbackSrc = null,
+    small = false,
+}) => {
+    const handleFailedLoad = (e) => {
+        e.target.onerror = null;
+        e.target.src = fallbackSrc;
+    };
+
+    return (
+        <div className={s["asset-icon"] + (small ? " " + s["small"] : "")}>
+            <img
+                src={assetIconSrc}
+                className={
+                    s["asset-icon-primary"] + (small ? " " + s["small"] : "")
+                }
+                alt={" "}
+                onError={handleFailedLoad}
+            />
+            {assetIconProtocolSrc ? (
+                <img
+                    src={assetIconProtocolSrc}
+                    className={
+                        s["asset-icon-secondary"] +
+                        (small ? " " + s["small"] : "")
+                    }
+                    alt={" "}
+                    onError={handleFailedLoad}
+                />
+            ) : (
+                ""
+            )}
+        </div>
+    );
+};
+
+AssetIcon.propTypes = {
+    assetIconSrc: PropTypes.string.isRequired,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackSrc: PropTypes.string,
+    small: PropTypes.bool,
+};
+
+AssetIcon.defaultProps = {
+    assetIconProtocolSrc: null,
+    fallbackSrc: null,
+    small: false,
+};

package/src/components/atoms/AssetIcon/asset-icon.module.scss

@@ -0,0 +1,42 @@
+@import "../../../../styles/index";
+
+.asset-icon {
+    width: 34px;
+    height: 34px;
+    position: relative;
+
+    &.small {
+        width: 24px;
+        height: 24px;
+    }
+
+    &-primary {
+        height: 34px;
+        width: 34px;
+
+        &.small {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    &-secondary {
+        width: 17px;
+        height: 17px;
+
+        position: absolute;
+        right: -3px;
+        bottom: -3px;
+        box-shadow: -2px -2px 4px 1px rgba(SolidColor("dark"), 0.3);
+        border-radius: 100%;
+
+        &.small {
+            width: 12px;
+            height: 12px;
+
+            right: -2px;
+            bottom: -2px;
+            box-shadow: -1px -1px 8px 1px rgba(SolidColor("dark"), 0.3);
+        }
+    }
+}

package/src/components/atoms/AssetSelection/AssetSelection.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-selection.module.scss";
+import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
+
+import { AssetIcon } from "../AssetIcon/AssetIcon.jsx";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+
+/**
+ * Component-button for triggering selecting an asset.
+ *
+ * @component
+ * @param {Function} handleClick - The function to call when the component is clicked
+ * @param {boolean} disabled - If true, disables click functionality
+ * @param {string} assetIconSrc - The source URL for the asset icon
+ * @param {string} [protocolName] - The name of the protocol, if any
+ * @param {string} [assetIconProtocolSrc] - The source URL for the asset protocol icon
+ * @param {string} [fallbackSrc] - The fallback source URL if the main asset icon fails to load
+ */
+export const AssetSelection = ({
+    handleClick = () => {},
+    disabled = false,
+    assetIconSrc,
+    protocolName,
+    assetIconProtocolSrc = null,
+    fallbackSrc,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    return (
+        <div
+            className={
+                s["asset-selection"] + " " + (disabled ? s["disabled"] : "")
+            }
+            onClick={disabled ? () => {} : (e) => handleError(handleClick, e)}
+        >
+            <div className={s["asset-selection-icon-wrapper"]}>
+                <AssetIcon
+                    small
+                    assetIconSrc={assetIconSrc}
+                    assetIconProtocolSrc={assetIconProtocolSrc}
+                    fallbackSrc={fallbackSrc}
+                />
+            </div>
+            {protocolName ? (
+                <div className={s["asset-selection-protocol-wrapper"]}>
+                    {protocolName}
+                </div>
+            ) : (
+                ""
+            )}
+            <div className={s["arrow"]}>
+                <ArrowIcon />
+            </div>
+            {/*<img src={arrowIcon} className="arrow" alt=""></img>*/}
+        </div>
+    );
+};
+
+AssetSelection.propTypes = {
+    handleClick: PropTypes.func,
+    disabled: PropTypes.bool,
+    assetIconSrc: PropTypes.string.isRequired,
+    protocolName: PropTypes.string,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackSrc: PropTypes.string,
+};
+
+AssetSelection.defaultProps = {
+    handleClick: () => {},
+    disabled: false,
+    assetIconProtocolSrc: null,
+};

package/src/components/atoms/AssetSelection/asset-selection.module.scss

@@ -0,0 +1,55 @@
+@import "../../../../styles/index";
+
+.asset-selection {
+    display: flex;
+    align-items: center;
+    background-color: $white;
+    border-radius: 100px;
+    user-select: none;
+    box-shadow: $shadowOutlineStatic;
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    @media (hover: hover) {
+        &:hover:not(.disabled) {
+            box-shadow: $shadowOutlineHover;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        box-shadow: $shadowOutlineActive;
+        transition: all 0.03s ease;
+    }
+
+    &-protocol-wrapper {
+        background-color: LightColor("tosca-20");
+        color: SolidColor("tosca");
+        padding: 2px 5px;
+        font-size: 8px;
+        border-radius: 50px;
+        font-weight: $bold;
+        margin-right: 3px;
+    }
+
+    &-icon-wrapper {
+        padding: 10px 5px 10px 10px;
+    }
+
+    h6 {
+        color: SolidColor("dark");
+        font-weight: $semi-bold;
+
+        margin: 1px 7px 0 2px;
+    }
+
+    .arrow {
+        margin: 10px 10px 10px 0;
+        transform: rotate(-90deg);
+        height: 14px;
+    }
+}

package/src/components/atoms/BackgroundTitle/BackgroundTitle.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./background-title.module.scss";
+
+/**
+ * Component for displaying a title with a fancy background text, which
+ * is semi-visible. This component is designed to work with forms that
+ * have a white background, and it allows for a configuration of margins.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.text - Text to be displayed as the title
+ * @param {boolean} [props.smallMargins=false] - Whether to use smaller margins around the title
+ */
+export const BackgroundTitle = ({ text, smallMargins = false }) => {
+    return (
+        <div className={s["background-title"]}>
+            <div
+                className={
+                    s["background-title-wrapper"] +
+                    (smallMargins ? " " + s["small-margins"] : "")
+                }
+            >
+                <div
+                    className={
+                        s["background-title-wrapper-text"] +
+                        (smallMargins ? " " + s["small-margins"] : "")
+                    }
+                >
+                    {text}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+BackgroundTitle.propTypes = {
+    text: PropTypes.string.isRequired,
+    smallMargins: PropTypes.bool,
+};
+
+BackgroundTitle.defaultProps = {
+    smallMargins: false,
+};

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

@@ -0,0 +1,52 @@
+@import "../../../../styles/index";
+
+.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/components/atoms/InformationMessage/InformationMessage.jsx

@@ -0,0 +1,60 @@
+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 {string} [text=""] - The text content of the message.
+ * @param {string|boolean} [icon=false] - The URL or boolean indicating whether to display an icon.
+ * @param {boolean} [bigImage=false] - Whether to use a larger image for the icon.
+ * @param {boolean} [whiteText=false] - Whether the text should be displayed in white color.
+ * @param {ReactNode} [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" /> : <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/components/atoms/InformationMessage/information-message.module.scss

@@ -0,0 +1,36 @@
+@import "../../../../styles/index";
+
+.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;
+        }
+    }
+}