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

package/index.js

@@ -1 +1 @@
-export * from "./stories/index.js";
+export * from "./src/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.2",
+    "version": "1.0.0-beta.21",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -11,13 +11,12 @@
             "require": "./dist/index.cjs",
             "default": "./dist/index.modern.js"
         },
-        "./next": "./index.js"
+        "./next": "./index.js",
+        "./index.css": "./dist/index.css"
     },
     "scripts": {
-        "build": "rm -rf dist && microbundle",
-        "build-dev": "rm -rf dist && NODE_ENV=production webpack --mode development",
-        "build-prod": "rm -rf dist && NODE_ENV=production webpack --mode production",
-        "prepublish": "npm run build-prod",
+        "build": "rm -rf dist && microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx --visualize",
+        "prepublish": "npm run build",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build"
     },
@@ -35,19 +34,17 @@
     "author": "admin@rabbit.io",
     "license": "MIT",
     "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0",
-        "react-router-dom": ">=6.21.1"
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
     },
     "dependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0",
-        "react-router-dom": ">=6.21.1"
+        "axios": "1.6.7",
+        "bignumber.js": "9.1.2",
+        "eventbusjs": "0.2.0",
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.7",
-        "@babel/preset-react": "^7.23.3",
         "@storybook/addon-actions": "^7.6.6",
         "@storybook/addon-backgrounds": "^7.6.6",
         "@storybook/addon-essentials": "^7.6.6",
@@ -60,23 +57,19 @@
         "@storybook/react": "^7.6.6",
         "@storybook/react-webpack5": "^7.6.6",
         "@storybook/test": "^7.6.6",
-        "babel-loader": "^9.1.3",
-        "css-loader": "^6.8.1",
         "microbundle": "^0.15.1",
-        "node-sass": "^7.0.3",
         "prettier": "^3.1.1",
         "prop-types": "^15.8.1",
         "resolve-url-loader": "^5.0.0",
-        "sass": "^1.69.5",
-        "sass-loader": "^13.3.3",
+        "sass": "^1.70.0",
+        "sass-loader": "^14.1.0",
         "storybook": "^7.6.6",
-        "style-loader": "^3.3.3",
-        "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "style-loader": "^3.3.3"
     },
     "prettier": {
         "trailingComma": "es5",
         "tabWidth": 4,
-        "singleQuote": false
+        "singleQuote": false,
+        "printWidth": 80
     }
 }

package/src/common/amountUtils.js

@@ -0,0 +1,423 @@
+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
+    };
+
+    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,
+        });
+    }
+
+    /**
+     * 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 {
+                // 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}`);
+        }
+    }
+
+    /**
+     * @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 intStr(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.intStr(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,27 @@
+/**
+ * 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;
+}