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

package/src/common/amountUtils.js

@@ -0,0 +1,436 @@
+import { BigNumber } from "bignumber.js";
+
+import { FiatCurrenciesService } from "./fiatCurrenciesService.js";
+import { improveAndRethrow } from "./errorUtils.js";
+
+// TODO: [dev] return addCommasToAmountString internal method to encapsulate commas adding
+
+export class AmountUtils {
+    static significantDecimalCount = 8;
+    static collapsedDecimalCount = 2;
+    static maxTotalLength = 12;
+    static extraSmallMaxTotalLength = 9; // >=10 breaks transactions list (mobile) and it is hard to avoid this
+    static periods = "..";
+
+    static defaultFiatParams = {
+        ticker: true, // If true, currency code will be shown
+        enableCurrencySymbols: true, // Enables currency symbols where available. Requires "ticker: true"
+        collapsible: true, // Enables minimization of amounts over 1 million (example: 1.52M)
+        limitTotalLength: true, // Limits the total amount length to maxTotalLength
+        extraSmallLength: false, // Limits the total amount length to extraSmallMaxTotalLength
+    };
+
+    static fiatXs(amount, code) {
+        return this.fiat(amount, code, { extraSmallLength: true });
+    }
+
+    /**
+     * Universal method for rendering of fiat amounts, taking into account the rules of
+     * the passed fiat currency code.
+     *
+     * TODO: [feature, high] remove 'number' from accepted types list task_id=1e692bcfabbe487a9d1638fc8ff17448
+     * @param amount {BigNumber|number|string|null|undefined} The number value to be trimmed
+     * @param currencyCode {string|null} The currency code. Can be omitted if { ticker: false } in the config
+     * @param [passedParams={}] {object} Formatting parameters
+     * @return {string} Formatted fiat amount string
+     */
+    static fiat(amount, currencyCode, passedParams = {}) {
+        try {
+            const params = { ...this.defaultFiatParams, ...passedParams };
+
+            if (
+                this._checkIfAmountInvalid(amount, true) ||
+                typeof currencyCode !== "string"
+            )
+                return "NULL";
+
+            const currencySymbol =
+                FiatCurrenciesService.getCurrencySymbolByCode(currencyCode);
+            const currencyDecimalCount =
+                FiatCurrenciesService.getCurrencyDecimalCountByCode(
+                    currencyCode
+                );
+
+            const trimmedByMaxDigits = BigNumber(amount).toFixed(
+                currencyDecimalCount,
+                BigNumber.ROUND_FLOOR
+            );
+
+            let processedAmount = BigNumber(trimmedByMaxDigits);
+            if (
+                params.collapsible &&
+                processedAmount.gte(BigNumber("1000000"))
+            ) {
+                processedAmount = this._collapseToMillionsAndFormat(
+                    processedAmount,
+                    this.collapsedDecimalCount,
+                    params
+                );
+            } else {
+                const limitResult = this._limitTotalAmountLengthIfNeeded(
+                    trimmedByMaxDigits,
+                    params
+                );
+                processedAmount = BigNumber(
+                    limitResult.processedAmount
+                ).toFormat(); // Adds commas to integer part
+            }
+
+            // Add the currency code or currency symbol, if symbol is enabled and available
+            if (params.ticker) {
+                if (
+                    typeof currencySymbol === "string" &&
+                    params.enableCurrencySymbols
+                ) {
+                    processedAmount =
+                        currencySymbol +
+                        (currencySymbol.length > 1 ? " " : "") +
+                        processedAmount;
+                } else {
+                    processedAmount = processedAmount + " " + currencyCode;
+                }
+            }
+
+            return processedAmount;
+        } catch (e) {
+            improveAndRethrow(e, "fiat", `Passed: ${amount}`);
+        }
+    }
+
+    static defaultCryptoParams = {
+        ticker: true, // If true, asset ticker will be shown
+        collapsible: true, // Enables minimization of amounts over 1 million (example: 1.52M)
+        trim: true, // Cuts the right part of the amount if necessary, and adds ".." in the end
+        limitTotalLength: true, // Limits the total amount length to maxTotalLength
+        extraSmallLength: false, // Limits the total amount length to extraSmallMaxTotalLength
+        periods: true, // Whether we add periods ("..") as suffix for trimmed numbers
+        numberPartsSeparator: true, // Whether we add separators e.g. for 1000000 -> 1,000,000
+    };
+
+    static cryptoWoTicker(amount, digits) {
+        return this.crypto(amount, null, digits, { ticker: false });
+    }
+
+    static cryptoWoTickerXs(amount, digits) {
+        return this.crypto(amount, null, digits, {
+            ticker: false,
+            extraSmallLength: true,
+        });
+    }
+
+    static cryptoXs(amount, ticker, digits) {
+        return this.crypto(amount, ticker, digits, {
+            extraSmallLength: true,
+            periods: false,
+        });
+    }
+
+    static cryptoFull(amount, ticker, digits) {
+        return this.crypto(amount, ticker, digits, {
+            collapsible: false,
+            trim: false,
+            limitTotalLength: false,
+        });
+    }
+
+    static cryptoFullPureNumber(amount, digits) {
+        return this.crypto(amount, null, digits, {
+            ticker: false,
+            collapsible: false,
+            trim: false,
+            limitTotalLength: false,
+            numberPartsSeparator: false,
+        });
+    }
+
+    /**
+     * Universal method for rendering of crypto amounts, taking into account the rules of
+     * the passed ticker. Requires the number of digits after period to be less of equal to
+     * the number of digits, supported by the passed ticker.
+     *
+     * @param amount {BigNumber|string|null|undefined} The number value to be formatted
+     * @param ticker {string|null} Coin ticker
+     * @param [digits=8] {number} max digits after the dot
+     * @param passedParams {object} Formatting parameters
+     * @return {string} Formatted crypto amount string
+     */
+    static crypto(
+        amount,
+        ticker,
+        digits = this.significantDecimalCount,
+        passedParams
+    ) {
+        try {
+            const params = { ...this.defaultCryptoParams, ...passedParams };
+
+            if (
+                this._checkIfAmountInvalid(amount) ||
+                (typeof ticker !== "string" && params.ticker)
+            )
+                return "NULL";
+
+            let addPeriods = false;
+
+            const amountBigNumber = BigNumber(amount);
+
+            let processedAmount = amountBigNumber.toFixed(
+                digits,
+                BigNumber.ROUND_FLOOR
+            );
+            processedAmount =
+                this.removeRedundantRightZerosFromNumberString(processedAmount);
+            const originalAmountDecimalPlaces =
+                BigNumber(processedAmount).decimalPlaces();
+            // Check decimal count and throw an error, if the amount has more decimal digits than supported by the asset
+            if (originalAmountDecimalPlaces > digits) {
+                const errorMessage = `An attempt to render a crypto value with too many digits after period was made: ${amount}, allowed digits: ${digits}. This is a no-op, since the logical and visually rendered values would differ, which is not acceptable for crypto amounts. Please trim the amount before rendering, using the trimCryptoAmountByCoin(amount, coin) method.`;
+                // throw new Error(errorMessage);
+                // eslint-disable-next-line no-console
+                console.log(errorMessage, "crypto");
+            }
+
+            // Shortening the value to general significant number of digits after period
+            if (params.trim) {
+                processedAmount =
+                    this.removeRedundantRightZerosFromNumberString(
+                        amountBigNumber.toFixed(
+                            this.significantDecimalCount,
+                            BigNumber.ROUND_FLOOR
+                        )
+                    );
+                addPeriods =
+                    originalAmountDecimalPlaces > this.significantDecimalCount;
+            }
+
+            const limitResult = this._limitTotalAmountLengthIfNeeded(
+                processedAmount,
+                params
+            );
+            processedAmount = limitResult.processedAmount;
+            addPeriods ||= limitResult.addPeriods;
+
+            let wereMillionsCollapsed = false;
+            if (params.collapsible && amountBigNumber.gte("1000000")) {
+                // Collapse the 1M+ amounts if applicable
+                processedAmount = this._collapseToMillionsAndFormat(
+                    BigNumber(processedAmount),
+                    this.collapsedDecimalCount,
+                    params
+                );
+                wereMillionsCollapsed = true;
+            } else if (params.numberPartsSeparator) {
+                // Add separators to integer part of the amount
+                processedAmount = BigNumber(processedAmount).toFormat();
+            }
+
+            // Adding periods, if the amount was shortened
+            if (params.periods && addPeriods && !wereMillionsCollapsed) {
+                processedAmount = processedAmount + this.periods;
+            }
+
+            // Adding an adaptive (printable/full) ticker
+            if (params.ticker && ticker) {
+                processedAmount = processedAmount + " " + ticker;
+            }
+
+            return processedAmount;
+        } catch (e) {
+            improveAndRethrow(
+                e,
+                "crypto",
+                `Passed: ${amount}, ${ticker}, ${digits}`
+            );
+        }
+    }
+
+    static _checkIfAmountInvalid(amount, allowNumbers = false) {
+        return (
+            amount == null ||
+            amount === "" ||
+            (!BigNumber.isBigNumber(amount) &&
+                typeof amount !== "string" &&
+                (!allowNumbers || typeof amount !== "number"))
+        );
+    }
+
+    /**
+     * Trims all digits after period that exceed the number of digits provided.
+     * Use this everywhere when calculating some amount value to ensure the result is correct in terms
+     * of max digits allowed by specific currency.
+     *
+     * @param amount {BigNumber|number|string|null|undefined} The number value to be trimmed.
+     *                                                        HEX strings also allowed "0x..." and JS hex numbers
+     * @param digits {number} allowed digits
+     * @return {string|null} String with trimmed number or null for invalid amount
+     */
+    static trim(amount, digits) {
+        try {
+            if (this._checkIfAmountInvalid(amount, true)) return null;
+            return BigNumber(amount).toFixed(digits, BigNumber.ROUND_FLOOR);
+        } catch (e) {
+            improveAndRethrow(e, "trim", `Passed: ${amount}, ${digits}`);
+        }
+    }
+
+    /**
+     * Returns integer part of number as a string.
+     *
+     * @param amount {BigNumber|number|string|null|undefined} The number value to be trimmed.
+     *                                                        HEX strings also allowed "0x..." and JS hex numbers
+     * @return {string|null}
+     */
+    static toIntegerString(amount) {
+        return this.trim(amount, 0);
+    }
+
+    /**
+     * Shortens the line length by using a "1.52M" representation of big amounts.
+     *
+     * @param amountBigNumber {BigNumber} The number value to be trimmed
+     * @param decimalCount {number} The number of digits after period to keep in millions representation
+     * @param params {object} params object
+     * @return {string} A shortened string, converted into "millions" format, if the amount exceeds 1 million
+     */
+    static _collapseToMillionsAndFormat(
+        amountBigNumber,
+        decimalCount,
+        params = {}
+    ) {
+        try {
+            // TODO: [feature, moderate] use local format here - take from JS locales (comma/dot etc.)
+            const millionBigNumber = BigNumber("1000000");
+            const millions = amountBigNumber
+                .div(millionBigNumber)
+                .toFixed(decimalCount, BigNumber.ROUND_FLOOR);
+            const limitedResult = this._limitTotalAmountLengthIfNeeded(
+                millions,
+                params
+            );
+            const formatted = BigNumber(
+                limitedResult.processedAmount
+            ).toFormat();
+
+            return formatted + "M";
+        } catch (e) {
+            improveAndRethrow(
+                e,
+                "_collapseAmountAndFormat",
+                `Passed: ${amountBigNumber.toFixed()}, ${decimalCount}`
+            );
+        }
+    }
+
+    /**
+     * @param amountString {string} The amount to be restricted by length
+     * @param params {object} Params object used for formatting
+     * @return {{processedAmount:string, addPeriods: boolean}} A shortened string
+     */
+    static _limitTotalAmountLengthIfNeeded(amountString, params) {
+        try {
+            let addPeriods = false;
+            if (params.limitTotalLength || params.extraSmallLength) {
+                const maxLength = params.extraSmallLength
+                    ? this.extraSmallMaxTotalLength
+                    : this.maxTotalLength;
+                if (amountString.length > maxLength) {
+                    const delta = amountString.length - maxLength;
+                    const currentDecimalsCount =
+                        BigNumber(amountString).decimalPlaces();
+                    const newDecimalCount = currentDecimalsCount - delta;
+                    amountString = BigNumber(amountString).toFixed(
+                        newDecimalCount > 2 ? newDecimalCount : 2,
+                        BigNumber.ROUND_FLOOR
+                    );
+                    addPeriods = currentDecimalsCount > newDecimalCount;
+                }
+            }
+
+            return { addPeriods: addPeriods, processedAmount: amountString };
+        } catch (e) {
+            improveAndRethrow(
+                e,
+                "_limitTotalAmountLengthIfNeeded",
+                `Passed: ${amountString}, ${params}`
+            );
+        }
+    }
+
+    /**
+     * Safely composes rate string (handles small/big rates)
+     *
+     * @param leftTicker {string}
+     * @param rightTicker {string}
+     * @param rate {number|string|BigNumber}
+     * @param [rightCurrencyDigitsAfterDots=8] {number}
+     * @return {string}
+     */
+    static composeRateText(
+        leftTicker,
+        rightTicker,
+        rate,
+        rightCurrencyDigitsAfterDots = this.significantDecimalCount
+    ) {
+        try {
+            /* Here we try to calculate a clear rate for the user. The difficulty is that the rate value can be pretty
+             * small as some coins have significantly higher price than the other. For such cases we calculate
+             * not the "1 <coin_A> is X <coin B>" but "Y <coin_A> is X <coin B>" where Y is one of the powers of 100.
+             */
+            let leftNumber = BigNumber("1");
+            const multiplier = BigNumber("100");
+            const maxAttemptsToGetRate = 10;
+            let right = null;
+            const rateBigNumber = BigNumber(rate);
+            for (let i = 0; i < maxAttemptsToGetRate; ++i) {
+                const rightNumberAttempt = rateBigNumber
+                    .times(leftNumber)
+                    .toFixed(
+                        rightCurrencyDigitsAfterDots,
+                        BigNumber.ROUND_FLOOR
+                    );
+                if (!BigNumber(rightNumberAttempt).eq(BigNumber("0"))) {
+                    right = BigNumber(rightNumberAttempt);
+                    break;
+                } else {
+                    leftNumber = leftNumber.times(multiplier);
+                }
+            }
+            const leftAmountString = AmountUtils.toIntegerString(leftNumber);
+            const rightAmountString =
+                right != null
+                    ? right.toFixed(
+                          rightCurrencyDigitsAfterDots,
+                          BigNumber.ROUND_FLOOR
+                      )
+                    : null;
+            return `${leftAmountString} ${leftTicker} ~ ${
+                rightAmountString ?? "?"
+            } ${rightTicker}`;
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.log("composeRateText", e);
+        }
+        return "-";
+    }
+
+    /**
+     * @param numberAsAString {string}
+     * @return {string}
+     */
+    static removeRedundantRightZerosFromNumberString(numberAsAString) {
+        try {
+            const parts = ("" + numberAsAString).split(".");
+            let right = parts[1];
+            while (right?.length && right[right.length - 1] === "0") {
+                right = right.slice(0, right.length - 1);
+            }
+
+            return `${parts[0]}${right?.length ? `.${right}` : ""}`;
+        } catch (e) {
+            improveAndRethrow(
+                e,
+                "removeRedundantRightZerosFromNumberString",
+                `Passed: ${numberAsAString}`
+            );
+        }
+    }
+}

package/src/common/errorUtils.js

@@ -0,0 +1,42 @@
+import { Logger } from "./utils/logging/logger.js";
+import { safeStringify } from "./utils/safeStringify.js";
+
+/**
+ * This function improves the passed error object (its message) by adding the passed function name
+ * and additional message to it.
+ * This is useful as Javascript doesn't guarantee the stack-traces, so we should manually add these details to errors
+ * to be able to troubleshoot.
+ *
+ * @param e {Error}
+ * @param settingFunction {string}
+ * @param [additionalMessage=""] {string|undefined}
+ * @throws {Error} always rethrows the original passed error but with an improved message
+ */
+export function improveAndRethrow(e, settingFunction, additionalMessage = "") {
+    const message = improvedErrorMessage(e, settingFunction, additionalMessage);
+    if (e) {
+        e.message = message;
+        throw e; // to preserve existing stacktrace if present
+    }
+    throw new Error(message);
+}
+
+function improvedErrorMessage(e, settingFunction, additionalMessage) {
+    let message = `\nFunction call ${settingFunction ?? ""} failed. `;
+    e && e.message && (message += `Error message: ${e.message}. `);
+    additionalMessage && (message += `${additionalMessage} `);
+
+    return message;
+}
+
+export function logErrorOrOutputToConsole(e) {
+    try {
+        // TODO: [dev] remove this after few weeks of testing output in real life
+        // eslint-disable-next-line no-console
+        console.log("BEFORE SAFE", e);
+        Logger.log("logErrorOrOutputToConsole", safeStringify(e));
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log("logErrorOrOutputToConsole", e);
+    }
+}

package/src/common/external-apis/apiGroups.js

@@ -0,0 +1,55 @@
+/**
+ * Models a group of APIs provided by the same owner and used for different services in our app.
+ * It means we need to mention RPS several times for each usage and also have some holder of last call timestamp per
+ * api group. So this concept allows to use it for exact ExternalApiProvider and make sure that you use the same
+ * RPS value and make decisions on base of the same timestamp of last call to the API group owner.
+ */
+export class ApiGroup {
+    constructor(id, rps, backendProxyIdGenerator = null) {
+        this.id = id;
+        this.rps = rps;
+        this.lastCalledTimestamp = null;
+        this.backendProxyIdGenerator = backendProxyIdGenerator;
+    }
+
+    isRpsExceeded() {
+        return (this.lastCalledTimestamp ?? 0) + Math.floor(1000 / this.rps) > Date.now();
+    }
+
+    actualizeLastCalledTimestamp() {
+        this.lastCalledTimestamp = Date.now();
+    }
+}
+
+export const ApiGroups = {
+    /**
+     * Currently we use free version of etherscan provider with 0.2 RPS. But we have API key with 100k requests free
+     * per month. So we can add it if not enough current RPS.
+     */
+    ETHERSCAN: new ApiGroup("etherscan", 0.17), // Actually 0.2 but fails sometime, so we use smaller
+    ALCHEMY: new ApiGroup("alchemy", 0.3, networkKey => `alchemy-${networkKey}`),
+    BLOCKSTREAM: new ApiGroup("blockstream", 0.2),
+    BLOCKCHAIN_INFO: new ApiGroup("blockchain.info", 1),
+    BLOCKNATIVE: new ApiGroup("blocknative", 0.5),
+    ETHGASSTATION: new ApiGroup("ethgasstation", 0.5),
+    TRONGRID: new ApiGroup("trongrid", 0.3, networkKey => `trongrid-${networkKey}`),
+    TRONSCAN: new ApiGroup("tronscan", 0.3),
+    GETBLOCK: new ApiGroup("getblock", 0.3),
+    COINCAP: new ApiGroup("coincap", 0.5), // 200 per minute without API key
+    COINGECKO: new ApiGroup("coingecko", 0.9), // actually 0.13-0.5 according to the docs but we use smaller due to expirienced frequent abuses
+    MESSARI: new ApiGroup("messari", 0.2),
+    BTCCOM: new ApiGroup("btccom", 0.2),
+    BITAPS: new ApiGroup("bitaps", 0.25), // Docs say that RPS is 3 but using it causes frequent 429 HTTP errors
+    CEX: new ApiGroup("cex", 0.5), // Just assumption for RPS
+    BIGDATACLOUD: new ApiGroup("bigdatacloud", 1), // Just assumption for RPS
+    TRACKIP: new ApiGroup("trackip", 1), // Just assumption for RPS
+    IPIFY: new ApiGroup("ipify", 1), // Just assumption for RPS
+    WHATISMYIPADDRESS: new ApiGroup("whatismyipaddress", 1), // Just assumption for RPS
+    EXCHANGERATE: new ApiGroup("exchangerate", 1), // Just assumption for RPS
+    FRANKFURTER: new ApiGroup("frankfurter", 1), // Just assumption for RPS
+    BITGO: new ApiGroup("bitgo", 1), // Just assumption for RPS
+    BITCOINER: new ApiGroup("bitcoiner", 1), // Just assumption for RPS
+    BITCORE: new ApiGroup("bitcore", 1), // Just assumption for RPS
+    // BLOCKCHAIR: new ApiGroup("blockchair", 0.04), // this provider require API key for commercial use (10usd 10000 reqs), we will add it later
+    MEMPOOL: new ApiGroup("mempool", 0.2), // Just assumption for RPS
+};

package/src/common/external-apis/ipAddressProviders.js

@@ -0,0 +1,138 @@
+import EventBusInstance from "eventbusjs";
+import { ExternalApiProvider } from "../../robustExteranlApiCallerService/externalApiProvider.js";
+import { ApiGroups } from "./apiGroups.js";
+import { CachedRobustExternalApiCallerService } from "../../robustExteranlApiCallerService/cachedRobustExternalApiCallerService.js";
+import { Cache } from "../utils/cache.js";
+import { improveAndRethrow } from "../errorUtils.js";
+
+class BigdatacloudIpAddressProvider extends ExternalApiProvider {
+    constructor() {
+        super(
+            "https://api.bigdatacloud.net/data/client-ip",
+            "get",
+            15000,
+            ApiGroups.BIGDATACLOUD
+        );
+    }
+
+    getDataByResponse(
+        response,
+        params = [],
+        subRequestIndex = 0,
+        iterationsData = []
+    ) {
+        return response?.data && response.data?.ipString;
+    }
+}
+
+class TrackipIpAddressProvider extends ExternalApiProvider {
+    constructor() {
+        super("https://www.trackip.net/ip", "get", 15000, ApiGroups.TRACKIP);
+    }
+
+    getDataByResponse(
+        response,
+        params = [],
+        subRequestIndex = 0,
+        iterationsData = []
+    ) {
+        return response?.data;
+    }
+}
+
+class IpifyV6IpAddressProvider extends ExternalApiProvider {
+    constructor() {
+        super(
+            "https://api6.ipify.org/?format=json",
+            "get",
+            15000,
+            ApiGroups.IPIFY
+        );
+    }
+
+    getDataByResponse(
+        response,
+        params = [],
+        subRequestIndex = 0,
+        iterationsData = []
+    ) {
+        return response?.data && response.data?.ip;
+    }
+}
+
+class IpifyIpAddressProvider extends ExternalApiProvider {
+    constructor() {
+        super(
+            "https://api.ipify.org/?format=json",
+            "get",
+            15000,
+            ApiGroups.IPIFY
+        );
+    }
+
+    getDataByResponse(
+        response,
+        params = [],
+        subRequestIndex = 0,
+        iterationsData = []
+    ) {
+        return response?.data && response.data?.ip;
+    }
+}
+
+class WhatismyipaddressIpAddressProvider extends ExternalApiProvider {
+    constructor() {
+        super(
+            "http://bot.whatismyipaddress.com/",
+            "get",
+            15000,
+            ApiGroups.WHATISMYIPADDRESS
+        );
+    }
+
+    getDataByResponse(
+        response,
+        params = [],
+        subRequestIndex = 0,
+        iterationsData = []
+    ) {
+        return response?.data;
+    }
+}
+
+export class IpAddressProvider {
+    static externalIPAddressAPICaller =
+        new CachedRobustExternalApiCallerService(
+            "externalIPAddressAPICaller",
+            new Cache(EventBusInstance),
+            [
+                new BigdatacloudIpAddressProvider(),
+                new TrackipIpAddressProvider(),
+                new IpifyV6IpAddressProvider(),
+                new IpifyIpAddressProvider(),
+                new WhatismyipaddressIpAddressProvider(),
+            ],
+            300_000
+        );
+
+    /**
+     * Returns current public IP address identified by one of external services.
+     *
+     * It is easier than manual identification and also (as ip needed for server side to check it) it saves us from
+     * issues related to changes of infrastructure configurations (like adding proxies etc.) so we should not configure
+     * anything on server side to get correct client's IP.
+     *
+     * @returns {Promise<String>} IP address
+     * @throws {Error} if fails to retrieve IP address from all the services
+     */
+    static async getClientIpAddress() {
+        try {
+            return await this.externalIPAddressAPICaller.callExternalAPICached(
+                [],
+                7000
+            );
+        } catch (e) {
+            improveAndRethrow(e, "getClientIpAddress");
+        }
+    }
+}