@rabbitio/ui-kit 1.0.0-beta.10 → 1.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.10",
+    "version": "1.0.0-beta.12",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",

package/src/common/models/blockchain.js

@@ -0,0 +1,10 @@
+export class Blockchain {
+    /**
+     * @param name {string} latin printable name of blockchain
+     * @param supportedProtocols {Protocol[]}
+     */
+    constructor(name, supportedProtocols = []) {
+        this.name = name;
+        this.supportedProtocols = supportedProtocols;
+    }
+}

package/src/common/models/coin.js

@@ -0,0 +1,157 @@
+import { improveAndRethrow } from "./../errorUtils.js";
+
+/**
+ * The model for cryptocurrency coins.
+ *
+ * WARNING: this class should not be instantiated directly. Use only predefined singleton Coin (or descendants) instances.
+ */
+export class Coin {
+    /**
+     * Creates new coin
+     *
+     * @param latinName {string} the coin name in latin symbols like "Bitcoin"
+     * @param ticker {string} the coin symbol/ticker/code like 'BTC'. Always upper case. A unique coin identifier
+     * @param tickerPrintable {string} ticker but in printable format. Useful for tokens based on external blockchains
+     *        like ERC20 or TRC20. It is not friendly to display USDTERC20 or BUSDTRC20 - more neat options are just
+     *        USDT and BUSD. Note that you should always care about user's understanding of what coin he/she is working
+     *        with as printable ticker for USDTERC20 and USDTTRC20 are the same.
+     * @param digitsCountAfterComma {number} count of digits after the comma. E.g. 8 for bitcoin
+     * @param maxValue {number|null} max possible value for cryptocurrency. Null means that the currency has no max possible value
+     * @param atomName {string} name of the coin's atomic value. Like 'satoshi' for bitcoin
+     * @param mainnet {Network} main network for this coin
+     * @param testnet {Network} test network for this coin
+     * @param minConfirmations {number} min confirmations count to treat the coin's transaction confirmed
+     * @param payableEntityStringForFeeRate {string|null} the payable fee entity like byte for bitcoin or gas for ether if present
+     * @param feeOptionsTimeStringsSortedDesc {string[]} array of 4 strings for fee options when sending coins. Should be sorted from the highest time to the smallest
+     * @param feeRatesExpirationTimeMs {number} number of milliseconds to treat the fee rates as expired
+     * @param blockchain {Blockchain} blockchain object
+     * @param [protocol] {Protocol|null} token/coin protocol if relevant
+     * @param [tokenAddress] {string|null} address of contract of this token (if the coin is token)
+     * @param [doesUseLowerCaseAddresses] {boolean} flag to clarify whether we can use lower case addresses to ensure more robust comparisons
+     * @param [doesUseOutputs=false] {boolean} true if this coin uses inputs/outputs concept and false if it uses just balances
+     */
+    constructor(
+        latinName,
+        ticker,
+        tickerPrintable,
+        digitsCountAfterComma,
+        maxValue,
+        atomName,
+        mainnet,
+        testnet,
+        minConfirmations,
+        payableEntityStringForFeeRate,
+        feeOptionsTimeStringsSortedDesc,
+        feeRatesExpirationTimeMs,
+        blockchain,
+        protocol = null,
+        tokenAddress = null,
+        doesUseLowerCaseAddresses = true,
+        doesUseOutputs = false
+    ) {
+        this.latinName = latinName;
+        this.ticker = ticker;
+        this.tickerPrintable = tickerPrintable;
+        this.digits = digitsCountAfterComma;
+        this.maxValue = maxValue;
+        this.atomName = atomName;
+        this.mainnet = mainnet;
+        this.testnet = testnet;
+        this.minConfirmations = minConfirmations;
+        this.payableEntityStringForFeeRate = payableEntityStringForFeeRate;
+        this.feeOptionsTimeStringsSortedDesc = feeOptionsTimeStringsSortedDesc;
+        this.feeRatesExpirationTimeMs = feeRatesExpirationTimeMs;
+        this.protocol = protocol;
+        this.blockchain = blockchain;
+        // TODO: [bug, critical] use testnet property for testnet contract address as it blocks the app work in testnets
+        this.tokenAddress = tokenAddress;
+        this.feeCoin = this;
+        this._significantDigits = 8;
+        this.doesUseLowerCaseAddresses = doesUseLowerCaseAddresses;
+        this.doesUseOutputs = doesUseOutputs;
+    }
+
+    /**
+     * Sets fee coin
+     *
+     * @param feeCoin {Coin} some tokens use another coin to charge transaction fee as they work on top of some external
+     *        blockchain. So pass here the coin the token uses for fee charging. Like for ERC20 token the fee coin is ETH.
+     *        By default, the creating coin will be set as a value for this field.
+     */
+    setFeeCoin(feeCoin) {
+        this.feeCoin = feeCoin;
+    }
+
+    /**
+     * Checks whether this coin uses another coin (blockchain) to charge fee for transactions (means works on base of
+     * some external blockchain).
+     *
+     * @return {boolean} true if this coin uses external blockchain to perform transactions and charge fee
+     */
+    doesUseDifferentCoinFee() {
+        return this.feeCoin !== this;
+    }
+
+    /**
+     * Converts the given atoms string/number to string representing the same amount in coin itself - floating point number
+     *
+     * @param atoms {string} atoms positive integer amount
+     * @return {string} coin amount floating point number as a string
+     */
+    atomsToCoinAmount(atoms) {
+        throw new Error("Not implemented in base Coin");
+    }
+
+    /**
+     * Converts the given coins amount string/number to string representing the same amount in coin atoms - integer number
+     *
+     * @param coinsAmount {string} coins positive floating point amount
+     * @return {string} coin atoms amount integer number as a string
+     */
+    coinAmountToAtoms(coinsAmount) {
+        throw new Error("Not implemented in base Coin");
+    }
+
+    /**
+     * Composes URL to view the tx with given id in the external blockchain explorer
+     *
+     * @param txId {string} id of transaction
+     * @return {string} URL string
+     */
+    composeUrlToTransactionExplorer(txId) {
+        throw new Error("Not implemented in base Coin");
+    }
+
+    /**
+     * Most of the cryptocurrencies has specific fee rate or fee price metric. This value usually has specific measure
+     * like satoshi/byte or gWei/gas. This function adds the described denomination string to the given amount
+     * as a suffix and returns the result string ready to be show to a user.
+     *
+     * @param coinAtomsString {string} coin atoms positive integer amount
+     * @return {string} string of coin amount and fee rate units
+     */
+    coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString(
+        coinAtomsString
+    ) {
+        throw new Error("Not implemented in base Coin");
+    }
+
+    /**
+     * Check whether this coin support transaction prioritisation during the sending process.
+     *
+     * @return {boolean} true if support transaction prioritisation and false otherwise
+     */
+    doesSupportTransactionPrioritisation() {
+        return Array.isArray(this.feeOptionsTimeStringsSortedDesc);
+    }
+
+    tickerAndProtocol() {
+        try {
+            return `${this.tickerPrintable}${
+                this.protocol ? " " + this.protocol.protocol ?? "" : ""
+            }`;
+        } catch (e) {
+            improveAndRethrow(e, "tickerAndProtocol");
+        }
+    }
+}

package/src/common/models/protocol.js

@@ -0,0 +1,5 @@
+export class Protocol {
+    constructor(protocolName) {
+        this.protocol = protocolName;
+    }
+}

package/src/common/utils/cache.js

@@ -0,0 +1,268 @@
+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 {EventBus} EventBus.js lib instance
+     * @param [noSessionEvents=[]] {string[]} array of events that will be treated as "no session"
+     */
+    constructor(eventBus, 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 {
+                    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/logging/logger.js

@@ -0,0 +1,48 @@
+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);
+
+        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/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

@@ -5,7 +5,7 @@ import s from "./asset-icon.module.scss";
 
 export const AssetIcon = ({
     assetIconSrc,
-    assetIconProtocolScr = null,
+    assetIconProtocolSrc = null,
     fallbackSrc = null,
     small = false,
 }) => {
@@ -24,9 +24,9 @@ export const AssetIcon = ({
                 alt={" "}
                 onError={handleFailedLoad}
             />
-            {assetIconProtocolScr ? (
+            {assetIconProtocolSrc ? (
                 <img
-                    src={assetIconProtocolScr}
+                    src={assetIconProtocolSrc}
                     className={
                         s["asset-icon-secondary"] +
                         (small ? " " + s["small"] : "")
@@ -43,13 +43,13 @@ export const AssetIcon = ({
 
 AssetIcon.propTypes = {
     assetIconSrc: PropTypes.string.isRequired,
-    assetIconProtocolScr: PropTypes.string,
+    assetIconProtocolSrc: PropTypes.string,
     fallbackSrc: PropTypes.string,
     small: PropTypes.bool,
 };
 
 AssetIcon.defaultProps = {
-    assetIconProtocolScr: null,
+    assetIconProtocolSrc: null,
     fallbackSrc: null,
     small: false,
 };

package/src/index.js

@@ -4,7 +4,21 @@ export { LoadingDots } from "./components/atoms/LoadingDots/LoadingDots.jsx";
 export { SupportChat } from "./components/atoms/SupportChat/SupportChat.jsx";
 export { AssetIcon } from "./components/atoms/AssetIcon/AssetIcon.jsx";
 
-// Common code
+// 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";
+
+// Swaps lib (to be extracted later to dedicated lib)
+export { ExistingSwap } from "./swaps-lib/models/existingSwap.js";
+export { SwapProvider } from "./swaps-lib/external-apis/swapProvider.js";
+export { SwapspaceSwapProvider } from "./swaps-lib/external-apis/swapspaceSwapProvider.js";