@rabbitio/ui-kit 1.0.0-beta.7 → 1.0.0-beta.70

package/src/common/utils/cache.js

@@ -0,0 +1,242 @@
+import { improveAndRethrow } from "../errorUtils.js";
+import { Logger } from "./logging/logger.js";
+
+/**
+ * TODO: [tests, critical] Ued by payments logic
+ *
+ * Simple cache based on Map.
+ * Provides ability to store event-dependent data.
+ */
+export class Cache {
+    /**
+     * @param [eventBus=null] {EventBus} EventBus.js lib instance if you plan to use Cache with events handling
+     * @param [noSessionEvents=[]] {string[]} array of events that will be treated as "no session", you should pass EventBus to make it work
+     */
+    constructor(eventBus = null, noSessionEvents = []) {
+        this._cache = new Map();
+        this._eventDependentDataKeys = [];
+        this._noSessionEvents = noSessionEvents;
+        this._eventBus = eventBus;
+    }
+
+    _setupIntervalClearingExpired() {
+        let cleaner = function () {
+            try {
+                for (const key of this._cache.keys()) {
+                    const item = this._cache.get(key);
+                    if (item && item.ttlMs && item.addedMsTimestamp + item.ttlMs < Date.now()) {
+                        this._cache.delete(key);
+                    }
+                }
+            } catch (e) {
+                improveAndRethrow(e, "_intervalClearingExpiredCache");
+            }
+        };
+
+        cleaner = cleaner.bind(this);
+
+        setInterval(cleaner, 1000);
+    }
+
+    /**
+     * Puts data to cache
+     *
+     * @param key {string} string key for this data
+     * @param data {any} any data
+     * @param ttlMs {number|null} optional milliseconds number for cache lifetime
+     * @throws {Error} when the data is null/undefined because these values for data are reserved for internal logic
+     */
+    put(key, data, ttlMs = null) {
+        try {
+            if (typeof key !== "string" || data == null) {
+                throw new Error(`Trying to cache corrupted data: ${key}, ${data}`);
+            }
+            this._cache.set(key, {
+                data: data,
+                addedMsTimestamp: Date.now(),
+                ttlMs: ttlMs,
+            });
+        } catch (e) {
+            improveAndRethrow(e, "cache.put");
+        }
+    }
+
+    putSessionDependentData(key, data, ttlMs = null) {
+        this._putEventDependentData(key, data, this._noSessionEvents, ttlMs);
+    }
+
+    /**
+     * Puts data to cache and adds its key to list of keys that should be related by each of given events.
+     *
+     * @param key {string} key for cache
+     * @param data {any} any caching data
+     * @param events {string[]} list of events forcing putting data to be removed when triggered
+     * @param ttlMs {|null} optional time to live for this cache item
+     * @throws {Error} when the data is null/undefined because these values for data are reserved for internal logic
+     */
+    putEventDependentData(key, data, events, ttlMs = null) {
+        this._putEventDependentData(key, data, events, ttlMs);
+    }
+
+    _putEventDependentData(key, data, events, ttlMs = null) {
+        try {
+            if (typeof key !== "string" || data == null) {
+                throw new Error(`Trying to cache corrupted data: ${key}, ${data}`);
+            }
+            this._cache.set(key, {
+                data: data,
+                addedMsTimestamp: Date.now(),
+                ttlMs: ttlMs,
+            });
+            for (let event of events) {
+                const eventAndKeys = this._eventDependentDataKeys.find(item => item[0] === event);
+                if (eventAndKeys) {
+                    eventAndKeys.push(key);
+                } else if (this._eventBus) {
+                    this._eventDependentDataKeys.push([event, key]);
+                    this._eventBus.addEventListener(event, () => {
+                        try {
+                            const keys = this._eventDependentDataKeys.find(item => item[0] === event);
+                            (keys ?? [event]).slice(1).forEach(key => this._cache.delete(key));
+                        } catch (e) {
+                            Logger.logError(e, "cache.removing-for-event", `Event: ${event}`);
+                        }
+                    });
+                }
+            }
+        } catch (e) {
+            improveAndRethrow(e, "cache.putEventDependentData");
+        }
+    }
+
+    // TODO: [feature, low] add clearing of expired data by schedule
+    get(key) {
+        try {
+            const item = this._cache.get(key);
+            if (item) {
+                if (item.addedMsTimestamp && item.ttlMs !== null && item.addedMsTimestamp + item.ttlMs < Date.now()) {
+                    this._cache.delete(key);
+                    return null;
+                } else {
+                    return item.data;
+                }
+            }
+
+            return null;
+        } catch (e) {
+            improveAndRethrow(e, "cache.get");
+        }
+    }
+
+    getLastUpdateTimestamp(key) {
+        return this._cache.get(key)?.addedMsTimestamp ?? null;
+    }
+
+    /**
+     * Updates the timestamp of the last update for specified key to the provided value.
+     * Can be useful when TTL is controlled outside this class.
+     *
+     * @param key {string}
+     * @param timestamp {number}
+     * @return {boolean}
+     */
+    setLastUpdateTimestamp(key, timestamp) {
+        try {
+            const item = this._cache.get(key);
+            if (item != null && typeof timestamp === "number") {
+                this._cache.set(key, { ...item, addedTimestampMs: timestamp });
+                return true;
+            }
+            return false;
+        } catch (e) {
+            improveAndRethrow("cache.setLastUpdateTimestamp");
+        }
+    }
+
+    invalidate(key) {
+        try {
+            this._cache.delete(key);
+        } catch (e) {
+            improveAndRethrow(e, "cache.invalidate");
+        }
+    }
+
+    invalidateContaining(keyPart) {
+        if (typeof keyPart !== "string" || keyPart === "") {
+            throw new Error("Trying to invalidate containing wrong key or empty key: " + keyPart);
+        }
+
+        try {
+            const matchedKeys = Array.from(this._cache.keys()).filter(
+                key => typeof key === "string" && new RegExp(keyPart).test(key)
+            );
+            for (let i = 0; i < matchedKeys.length; ++i) {
+                this._cache.delete(matchedKeys[i]);
+            }
+        } catch (e) {
+            improveAndRethrow(e, "invalidateContaining");
+        }
+    }
+
+    clear() {
+        this._cache.clear();
+        this._sessionDependentDataKeys = [];
+    }
+
+    /**
+     * Saves given data string to persistent cache.
+     * NOTE: we have no TTL here, implement if needed.
+     *
+     * WARNING: use only when really needed and don't store big data as we use localStorage
+     * under the hood and its capacity is restricted.
+     *
+     * @param uniqueKey {string} the key should be unique
+     * @param data {string} only string data allowed
+     */
+    putClientPersistentData(uniqueKey, data) {
+        try {
+            if (typeof window !== "undefined") {
+                localStorage.setItem(uniqueKey, data);
+            }
+        } catch (e) {
+            improveAndRethrow(e, "cache.putClientPersistentData");
+        }
+    }
+
+    /**
+     * @param uniqueKey {string}
+     * @return {string|null}
+     */
+    getClientPersistentData(uniqueKey) {
+        try {
+            if (typeof window !== "undefined") {
+                return localStorage.getItem(uniqueKey);
+            }
+            return null;
+        } catch (e) {
+            improveAndRethrow(e, "cache.getClientPersistentData");
+        }
+    }
+
+    /**
+     * Only makes effect if the TTL is not null.
+     *
+     * @param key {string}
+     * @param ttlMs {number|null}
+     */
+    markCacheItemAsExpiredButDontRemove(key, ttlMs = null) {
+        try {
+            const item = this._cache.get(key);
+            const ttlFinalMs = ttlMs ?? item?.ttlMs;
+            if (item != null && ttlFinalMs) {
+                this._cache.set(key, {
+                    data: item.data,
+                    addedMsTimestamp: Date.now() - ttlFinalMs - 1,
+                    ttlMs: ttlFinalMs,
+                });
+            }
+        } catch (e) {
+            improveAndRethrow(e, "cache.markCacheItemAsExpiredButDontRemove");
+        }
+    }
+}

package/src/common/utils/emailAPI.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+import { improveAndRethrow } from "../errorUtils.js";
+
+export class EmailsApi {
+    static serverEndpointEntity = "emails";
+
+    static async sendEmail(subject, body) {
+        try {
+            const url = `${window.location.protocol + "//" + window.location.host}/api/v1/${this.serverEndpointEntity}`;
+            await axios.post(url, { subject, body });
+        } catch (e) {
+            improveAndRethrow(e, "sendEmail", subject + body);
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+import { LogsStorage } from "./logsStorage.js";
+import { safeStringify } from "../safeStringify.js";
+
+export class Logger {
+    /**
+     * Logs to client logs storage.
+     *
+     * WARNING! this method should ce used carefully for critical logging as we have the restriction for storing logs
+     *          on client side as we store them inside the local storage. Please see details inside storage.js
+     * @param logString {string} log string
+     * @param source {string} source of the log entry
+     */
+    static log(logString, source) {
+        const timestamp = new Date().toISOString();
+        LogsStorage.saveLog(`${timestamp}|${source}:${logString}`);
+    }
+
+    static logError(e, settingFunction, additionalMessage = "", onlyToConsole = false) {
+        let message = `\nFunction call ${settingFunction ?? ""} failed. Error message: ${
+            e?.message
+        }. ${additionalMessage} `;
+        message +=
+            `${e?.errorDescription ?? ""}${e?.howToFix ?? ""}` +
+            (e?.httpStatus === 403 ? "Authentication has expired or was lost. " : "");
+
+        if (e?.response) {
+            try {
+                const responseData = safeStringify({ response: e.response });
+                responseData && (message += `\n${responseData}. `);
+            } catch (e) {}
+        }
+
+        const finalErrorText = message + ". " + safeStringify(e);
+        // eslint-disable-next-line no-console
+        console.error(finalErrorText, e);
+
+        if (!onlyToConsole) {
+            this.log(finalErrorText, "logError");
+        }
+    }
+}

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,54 @@
+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/{stories → src/components}/atoms/AssetIcon/asset-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/index";
+@import "../../../../styles/index";
 
 .asset-icon {
     width: 34px;

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

@@ -0,0 +1,67 @@
+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,56 @@
+@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;
+        text-wrap: nowrap;
+    }
+
+    &-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,34 @@
+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,
+};