@rabbitio/ui-kit 1.0.0-beta.2 → 1.0.0-beta.21

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/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,40 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+
+export const SupportChat = ({ url, websiteToken, welcomeMessage = "" }) => {
+    useEffect(() => {
+        window.chatwootSettings = {
+            position: "right",
+            type: "standard",
+            launcherTitle: welcomeMessage,
+        };
+        (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,
+};
+
+SupportChat.defaultProps = {
+    welcomeMessage: "",
+};

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
@@ -108,11 +107,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 +128,7 @@ export const Button = ({
                     ) : (
                         content
                     )}
-                </Link>
+                </a>
             ) : (
                 <div
                     className={classNames}
@@ -188,6 +187,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/index.js

@@ -0,0 +1,33 @@
+// 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";
+
+// Common code lib (to be extracted later to dedicated lib)
+export { improveAndRethrow } 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 { EmailsApi } from "./common/utils/emailAPI.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";

package/src/swaps-lib/external-apis/swapProvider.js

@@ -0,0 +1,169 @@
+export class SwapProvider {
+    static COMMON_ERRORS = {
+        REQUESTS_LIMIT_EXCEEDED: "requestsLimitExceeded",
+    };
+
+    static NO_SWAPS_REASONS = {
+        TOO_LOW: "tooLow",
+        TOO_HIGH: "tooHigh",
+        NOT_SUPPORTED: "notSupported",
+    };
+
+    static CREATION_FAIL_REASONS = {
+        RETRIABLE_FAIL: "retriableFail",
+    };
+
+    static SWAP_STATUSES = {
+        WAITING_FOR_PAYMENT: "waiting_for_payment", // public +
+        CONFIRMING: "confirming",
+        PAYMENT_RECEIVED: "payment_received", // public +
+        EXCHANGING: "exchanging", // session full // public +
+        COMPLETED: "completed", // session full  // public +
+        REFUNDED: "refunded", // session full  // public +
+        EXPIRED: "expired", // public +
+        FAILED: "failed", // public +
+    };
+
+    /**
+     * @return {Promise<void>}
+     */
+    async initialize() {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * @return {number} milliseconds TTL
+     */
+    getSwapCreationInfoTtlMs() {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves all deposit currencies supported by this swap provider.
+     * Returns one of SwapProvider.COMMON_ERRORS in case of processable fail.
+     *
+     * @return {Promise<({ result: true, coins: Coin[] }|{ result: false, reason: string })>}
+     */
+    async getDepositCurrencies() {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves all withdrawable currencies supported by this swap provider.
+     * Returns one of SwapProvider.COMMON_ERRORS in case of processable fail.
+     *
+     * @param [exceptCurrency=null] {Coin|null}
+     * @return {Promise<({ result: true, coins: Coin[] }|{ result: false, reason: string })>}
+     */
+    async getWithdrawalCurrencies(exceptCurrency = null) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves URL for coin icon or fallback if not found.
+     *
+     * @param coin {Coin|string} coin or rabbit-format of coin ticker
+     * @return {string}
+     */
+    getIconUrl(coin) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves coin to USDT rate.
+     *
+     * @param coin {Coin}
+     * @return {{result: true, rate: string}|{result: false}}
+     */
+    async getCoinToUSDTRate(coin) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves estimation for swapping giving coins amount.
+     * null min or max signals there is no corresponding limitation. undefined means that the limits were not retrieved.
+     * For fail result on of SwapProvider.NO_SWAPS_REASONS or SwapProvider.COMMON_ERRORS reasons will be returned.
+     *
+     * @param fromCoin {Coin}
+     * @param toCoin {Coin}
+     * @param amountCoins {string}
+     * @param [fromCoinToUsdRate=null] pass if you want to increase the min amount returned
+     *        by provider with some fixed "insurance" amount to cover min amount fluctuations.
+     * @return {Promise<({
+     *            result: false,
+     *            reason: string,
+     *            smallestMin: (string|null|undefined),
+     *            greatestMax: (string|null|undefined),
+     *         }|{
+     *            result: true,
+     *            min: (string|null),
+     *            max: (string|null),
+     *            smallestMin: (string|null),
+     *            greatestMax: (string|null),
+     *            rate: (string|null),
+     *            durationMinutesRange: string,
+     *            [rawSwapData]: Object
+     *         })>}
+     */
+    async getSwapInfo(fromCoin, toCoin, amountCoins, fromCoinToUsdRate = null) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * For fail result we return one of SwapProvider.CREATION_FAIL_REASONS or SwapProvider.COMMON_ERRORS.
+     *
+     * @param fromCoin {Coin}
+     * @param toCoin {Coin}
+     * @param amount {string}
+     * @param toAddress {string}
+     * @param refundAddress {string}
+     * @param rawSwapData {Object|null}
+     * @param clientIpAddress {string}
+     * @return {Promise<({
+     *                     result: true,
+     *                     swapId: string,
+     *                     fromCoin: Coin,
+     *                     fromAmount: string,
+     *                     fromAddress: string,
+     *                     toCoin: Coin,
+     *                     toAmount: string,
+     *                     toAddress: string,
+     *                     rate: string
+     *                 }|{
+     *                     result: false,
+     *                     reason: string,
+     *                     partner: string
+     *                 })>}
+     */
+    async createSwap(fromCoin, toCoin, amount, toAddress, refundAddress, rawSwapData = null, clientIpAddress) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * Retrieves details and status for swaps by given ids.
+     * If some swap is not found by id then there is no item in return list.
+     *
+     * @param swapIds {string[]}
+     * @return {Promise<{result: false, reason: string}|{result:true, swaps: ExistingSwap[]}>}
+     */
+    async getExistingSwapsDetailsAndStatus(swapIds) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * @param ticker {string}
+     * @return {Coin|null}
+     */
+    getCoinByTickerIfPresent(ticker) {
+        throw new Error("Not implemented in base");
+    }
+
+    /**
+     * @param asset {Coin}
+     * @param address {string}
+     * @return {boolean}
+     */
+    isAddressValidForAsset(asset, address) {
+        throw new Error("Not implemented in base");
+    }
+}