@rabbitio/ui-kit 1.0.0-beta.4 → 1.0.0-beta.40

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,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-icon.module.scss";
+
+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/{stories → src/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/index";
+@import "../../../../styles/index";
 
 .loading-dots {
     display: flex;

package/src/components/atoms/SupportChat/SupportChat.jsx

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+
+export const SupportChat = ({
+    url,
+    websiteToken,
+    welcomeMessage = "",
+    locale = "en",
+}) => {
+    useEffect(() => {
+        window.chatwootSettings = {
+            position: "right",
+            type: "standard",
+            launcherTitle: welcomeMessage,
+            locale: locale,
+        };
+        (function (d, t) {
+            var BASE_URL = url;
+            var g = d.createElement(t),
+                s = d.getElementsByTagName(t)[0];
+            g.src = BASE_URL + "/packs/js/sdk.js";
+            g.defer = true;
+            g.async = true;
+            s.parentNode.insertBefore(g, s);
+            g.onload = function () {
+                window.chatwootSDK.run({
+                    websiteToken: websiteToken,
+                    baseUrl: BASE_URL,
+                });
+            };
+        })(document, "script");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+};
+
+SupportChat.propTypes = {
+    url: PropTypes.string.isRequired,
+    websiteToken: PropTypes.string.isRequired,
+    welcomeMessage: PropTypes.string,
+    locale: PropTypes.string,
+};
+
+SupportChat.defaultProps = {
+    welcomeMessage: "",
+    locale: "en",
+};

package/{stories → src/components}/atoms/buttons/Button/Button.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import styles from "./Button.module.scss";
@@ -9,7 +8,7 @@ import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
 /**
  * Button component - A versatile and customizable button for React applications.
  * It supports various sizes, styles, and functionalities, including loaders, icons, and handling of click events.
- * This component can also be used as a link when integrated with `react-router-dom`.
+ * This component can also be used as a link if "to" is provided.
  *
  * @component
  * @param {Object} props
@@ -85,7 +84,11 @@ export const Button = ({
             }, 2000);
         }
 
-        e.persist(); // Persisting React's SyntheticEvent to be able to use it in any async context
+        if (e?.persist) {
+            // Persisting React's SyntheticEvent to be able to use it in any async context
+            e.persist();
+        }
+
         !propagatePrimaryButtonClick && e.stopPropagation();
         if (loader) {
             setIsLoading(true);
@@ -108,11 +111,11 @@ export const Button = ({
         <>
             {isFormSubmittingButton ? <input type="submit" hidden /> : null}
             {to ? (
-                <Link
+                <a
                     className={classNames}
                     onClick={(e) => handleError(buttonClick, e)}
-                    to={to}
-                    innerRef={buttonRef}
+                    href={to}
+                    ref={buttonRef}
                 >
                     {icon ? (
                         <div
@@ -129,7 +132,7 @@ export const Button = ({
                     ) : (
                         content
                     )}
-                </Link>
+                </a>
             ) : (
                 <div
                     className={classNames}
@@ -188,6 +191,7 @@ Button.propTypes = {
     mode: PropTypes.oneOf([
         "transparent",
         "white",
+        "white-flat",
         "primary",
         "primary-bordered",
         "primary-transparent",

package/{stories → src/components}/atoms/buttons/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../../../styles/index";
 
 .button {
     @extend %text-very-bold;
@@ -122,6 +122,11 @@
         box-shadow: 0 20px 20px rgba(15, 24, 75, 0.2);
     }
 
+    &.white-flat {
+        background: $white;
+        color: SolidColor("dark");
+    }
+
     &-primary-dots-wrapper {
         position: absolute;
         top: 50%;

package/src/components/hooks/useCallHandlingErrors.js

@@ -0,0 +1,26 @@
+import { useCallback, useState } from "react";
+
+import { Logger } from "../../common/utils/logging/logger.js";
+
+export function useCallHandlingErrors() {
+    const [, setState] = useState();
+    return useCallback(
+        async (functionToBeCalled, event) => {
+            try {
+                await functionToBeCalled(event);
+            } catch (error) {
+                Logger.logError(
+                    error,
+                    functionToBeCalled?.name || "errorBoundaryTrigger",
+                    "Caught by ErrorBoundary"
+                );
+                // Triggering ErrorBoundary
+                setState(() => {
+                    throw error;
+                });
+            }
+        },
+
+        []
+    );
+}

package/src/components/hooks/useReferredState.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+/**
+ * Adds reference to standard state variable. It is helpful to be able to use state variable value inside
+ * event handlers and other callbacks without the need to call setState(prev => { value = prev; return prev; }).
+ *
+ * @param initialValue {any} to be passed to useState
+ * @return {[React.Ref, function]} reference to state variable and its setter
+ */
+export function useReferredState(initialValue) {
+    const [state, setState] = React.useState(initialValue);
+    const reference = React.useRef(state);
+
+    const setReferredState = (value) => {
+        if (value && {}.toString.call(value) === "[object Function]") {
+            value = value(reference.current);
+        }
+
+        reference.current = value;
+        setState(value);
+    };
+
+    return [reference, setReferredState];
+}

package/src/components/utils/uiUtils.js

@@ -0,0 +1,14 @@
+export const handleClickOutside = (exceptionsRefs, callback) => {
+    function handleClick(event) {
+        const isExceptionClicked = exceptionsRefs.find(
+            (ref) => ref?.current && ref.current.contains(event.target)
+        );
+        if (!isExceptionClicked) {
+            callback();
+        }
+    }
+
+    document.addEventListener("click", handleClick);
+
+    return () => document.removeEventListener("click", handleClick);
+};

package/src/components/utils/urlQueryUtils.js

@@ -0,0 +1,87 @@
+const PARAMETER_VALUES_SEPARATOR = "|*|"; // Sting that with high probability will not be in the user's data
+
+/**
+ * Adds specified parameter with values to the URL query string
+ *
+ * @param parameterName - String - name of the parameter
+ * @param values - Array of String values
+ * @param updateURLCallback - callback that will be called with the updated query string. Can be used to save it to URL
+ */
+export function saveQueryParameterAndValues(
+    parameterName,
+    values,
+    updateURLCallback = (newQueryString) => {}
+) {
+    let parametersAndValues = parseSearchString();
+    parametersAndValues = parametersAndValues.filter(
+        (parameterAndValues) => parameterAndValues[0] !== parameterName
+    );
+    const parameterValuesForURL = encodeURIComponent(
+        values.join(PARAMETER_VALUES_SEPARATOR)
+    );
+    parametersAndValues.push([parameterName, parameterValuesForURL]);
+    const newQueryString = `?${parametersAndValues
+        .map((parameterAndValues) => parameterAndValues.join("="))
+        .join("&")}`;
+    updateURLCallback(newQueryString);
+
+    return newQueryString;
+}
+
+/**
+ * Removes specified parameter with values from the URL query string
+ *
+ * @param parameterName - String - name of the parameter
+ * @param updateURLCallback - callback that will be called with the updated query string. Can be used to save it to URL
+ */
+// TODO: [tests, moderate] units required the same as or other functions in this module
+export function removeQueryParameterAndValues(
+    parameterName,
+    updateURLCallback = (newQueryString) => {}
+) {
+    let parametersAndValues = parseSearchString();
+    parametersAndValues = parametersAndValues.filter(
+        (parameterAndValues) => parameterAndValues[0] !== parameterName
+    );
+    const newQueryString = `?${parametersAndValues
+        .map((parameterAndValues) => parameterAndValues.join("="))
+        .join("&")}`;
+    updateURLCallback(newQueryString);
+
+    return newQueryString;
+}
+
+/**
+ * Retrieves parameter values from the URL query string.
+ *
+ * If there are several parameters with the same name in the URL then all their values are returned
+ *
+ * @param name {string} - parameter name
+ * @return {string[]} [] - if the parameter is not present in URL. [""] - if parameter present but has empty value
+ */
+export function getQueryParameterValues(name) {
+    return parseSearchString()
+        .filter((parameterAndValue) => parameterAndValue[0] === name)
+        .reduce((allValues, parameterAndValue) => {
+            const values = decodeURIComponent(parameterAndValue[1] || "").split(
+                PARAMETER_VALUES_SEPARATOR
+            );
+            return [...allValues, ...values];
+        }, []);
+}
+
+function parseSearchString() {
+    const trimmed = (window.location.search?.slice(1) || "").trim();
+
+    return (
+        (trimmed &&
+            trimmed
+                .split("&")
+                .map((parameterAndValue) => parameterAndValue.split("="))) ||
+        []
+    );
+}
+
+export function getQueryParameterSingleValue(name) {
+    return (getQueryParameterValues(name) || [])[0];
+}

package/src/index.js

@@ -0,0 +1,52 @@
+// UI-KIT components
+export { Button } from "./components/atoms/buttons/Button/Button.jsx";
+export { LoadingDots } from "./components/atoms/LoadingDots/LoadingDots.jsx";
+export { SupportChat } from "./components/atoms/SupportChat/SupportChat.jsx";
+export { AssetIcon } from "./components/atoms/AssetIcon/AssetIcon.jsx";
+
+export { useCallHandlingErrors } from "./components/hooks/useCallHandlingErrors.js";
+export { useReferredState } from "./components/hooks/useReferredState.js";
+export { handleClickOutside } from "./components/utils/uiUtils.js";
+
+export { saveQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
+export { removeQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
+export { getQueryParameterSingleValue } from "./components/utils/urlQueryUtils.js";
+export { getQueryParameterValues } from "./components/utils/urlQueryUtils.js";
+
+// Common code lib (to be extracted later to dedicated lib)
+export { improveAndRethrow } from "./common/errorUtils.js";
+export { logErrorOrOutputToConsole } from "./common/errorUtils.js";
+export { FiatCurrenciesService } from "./common/fiatCurrenciesService.js";
+export { AmountUtils } from "./common/amountUtils.js";
+
+export { Blockchain } from "./common/models/blockchain.js";
+export { Protocol } from "./common/models/protocol.js";
+export { Coin } from "./common/models/coin.js";
+
+export { Cache } from "./common/utils/cache.js";
+export { safeStringify } from "./common/utils/safeStringify.js";
+export { LogsStorage } from "./common/utils/logging/logsStorage.js";
+export { Logger } from "./common/utils/logging/logger.js";
+export { postponeExecution } from "./common/utils/postponeExecution.js";
+export { AxiosAdapter } from "./common/adapters/axiosAdapter.js";
+
+export { EmailsApi } from "./common/utils/emailAPI.js";
+
+// Robust data retriever service and related APIs
+export { CacheAndConcurrentRequestsResolver } from "./robustExteranlApiCallerService/cacheAndConcurrentRequestsResolver.js";
+export { CachedRobustExternalApiCallerService } from "./robustExteranlApiCallerService/cachedRobustExternalApiCallerService.js";
+export { CancelProcessing } from "./robustExteranlApiCallerService/cancelProcessing.js";
+export { ExternalApiProvider } from "./robustExteranlApiCallerService/externalApiProvider.js";
+export { RobustExternalAPICallerService } from "./robustExteranlApiCallerService/robustExternalAPICallerService.js";
+
+export { ApiGroups } from "./common/external-apis/apiGroups.js";
+export { ApiGroup } from "./common/external-apis/apiGroups.js";
+
+// Swaps lib (to be extracted later to dedicated lib)
+export { ExistingSwap } from "./swaps-lib/models/existingSwap.js";
+export { ExistingSwapWithFiatData } from "./swaps-lib/models/existingSwapWithFiatData.js";
+export { BaseSwapCreationInfo } from "./swaps-lib/models/baseSwapCreationInfo.js";
+export { SwapProvider } from "./swaps-lib/external-apis/swapProvider.js";
+export { SwapspaceSwapProvider } from "./swaps-lib/external-apis/swapspaceSwapProvider.js";
+export { SwapUtils } from "./swaps-lib/utils/swapUtils.js";
+export { PublicSwapService } from "./swaps-lib/services/publicSwapService.js";