@rabbitio/ui-kit 1.0.0-beta.65 → 1.0.0-beta.66

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.65",
+    "version": "1.0.0-beta.66",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -21,7 +21,8 @@
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "test-watching": "vitest",
-        "test": "vitest run --coverage"
+        "test": "vitest run --coverage",
+        "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass,txt,md}'"
     },
     "keywords": [
         "rabbit.io",
@@ -88,6 +89,7 @@
         "trailingComma": "es5",
         "tabWidth": 4,
         "singleQuote": false,
-        "printWidth": 80
+        "printWidth": 120,
+        "arrowParens": "avoid"
     }
 }

package/src/assets/wrappedImages/arrowIcon.jsx

@@ -1,13 +1,7 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M12.2431 6L8.00045 10.2426L3.75781 6"
             stroke="#232d42"

package/src/assets/wrappedImages/arrowTosca.jsx

@@ -2,13 +2,7 @@ import React from "react";
 
 // Originally: arrow-tosca.svg
 export default () => (
-    <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M12.2431 6L8.00045 10.2426L3.75781 6"
             stroke="#16CDD6"

package/src/assets/wrappedImages/arrowWhite.jsx

@@ -2,13 +2,7 @@ import React from "react";
 
 // Originally: arrow-tosca.svg
 export default () => (
-    <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M12.2431 6L8.00045 10.2426L3.75781 6"
             stroke="#fff"

package/src/assets/wrappedImages/darkRectangle.jsx

@@ -1,18 +1,7 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="25"
-        height="13"
-        viewBox="0 0 25 13"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12.5 13L25 0H0L12.5 13Z"
-            fill="#232D42"
-        />
+    <svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 13L25 0H0L12.5 13Z" fill="#232D42" />
     </svg>
 );

package/src/assets/wrappedImages/determinedError.jsx

@@ -16,20 +16,9 @@ export default () => (
             </clipPath>
         </defs>
         <g id="Group_2" data-name="Group 2">
-            <circle
-                id="Oval-2"
-                data-name="Oval"
-                cx="86.5"
-                cy="86.5"
-                r="86.5"
-                fill="#ffa799"
-            />
+            <circle id="Oval-2" data-name="Oval" cx="86.5" cy="86.5" r="86.5" fill="#ffa799" />
             <g id="Group_2-2" data-name="Group 2" clip-path="url(#clip-path)">
-                <g
-                    id="Group_232"
-                    data-name="Group 232"
-                    transform="translate(-5 -4)"
-                >
+                <g id="Group_232" data-name="Group 232" transform="translate(-5 -4)">
                     <rect
                         id="Rectangle"
                         width="30"

package/src/assets/wrappedImages/failedValidationIcon.jsx

@@ -1,22 +1,8 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="27"
-        height="27"
-        viewBox="0 0 27 27"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <rect
-            opacity="0.8"
-            x="1.5"
-            y="1.5"
-            width="24"
-            height="24"
-            rx="12"
-            fill="#DAF1FE"
-        />
+    <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE" />
         <path
             d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z"
             fill="url(#paint0_linear)"

package/src/assets/wrappedImages/infoIcon.jsx

@@ -1,13 +1,7 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             fill-rule="evenodd"
             clip-rule="evenodd"

package/src/assets/wrappedImages/noticeQuestionIcon.jsx

@@ -1,13 +1,7 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="17"
-        height="17"
-        viewBox="0 0 17 17"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.25" width="16" height="16" rx="8" fill="#DAF1FE" />
         <path
             fill-rule="evenodd"

package/src/assets/wrappedImages/successfulValidationIcon.jsx

@@ -1,22 +1,8 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="27"
-        height="27"
-        viewBox="0 0 27 27"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <rect
-            opacity="0.8"
-            x="1.5"
-            y="1.5"
-            width="24"
-            height="24"
-            rx="12"
-            fill="#DAF1FE"
-        />
+    <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE" />
         <path
             fill-rule="evenodd"
             clip-rule="evenodd"

package/src/assets/wrappedImages/walletIcon.jsx

@@ -1,13 +1,7 @@
 import React from "react";
 
 export default () => (
-    <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M12.6265 10.4119V12.2379C12.6265 12.7338 12.193 13.1356 11.6583 13.1356H3.26825C2.73352 13.1356 2.29999 12.7338 2.29999 12.2379V3.79771C2.29999 3.30178 2.73352 2.89999 3.26825 2.89999H11.6583C12.193 2.89999 12.6265 3.30178 12.6265 3.79771V5.84996"
             stroke="#8F95A2"
@@ -22,17 +16,7 @@ export default () => (
             stroke-linecap="round"
             stroke-linejoin="round"
         />
-        <path
-            d="M2.29999 4.73721H4.99884"
-            stroke="#8F95A2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            d="M2.29999 11.3122H4.99884"
-            stroke="#8F95A2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
+        <path d="M2.29999 4.73721H4.99884" stroke="#8F95A2" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2.29999 11.3122H4.99884" stroke="#8F95A2" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 );

package/src/common/amountUtils.js

@@ -38,54 +38,29 @@ export class AmountUtils {
         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
-                );
+            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
-            );
+            const trimmedByMaxDigits = BigNumber(amount).toFixed(currencyDecimalCount, BigNumber.ROUND_FLOOR);
 
             let processedAmount = BigNumber(trimmedByMaxDigits);
-            if (
-                params.collapsible &&
-                processedAmount.gte(BigNumber("1000000"))
-            ) {
+            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
+                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;
+                if (typeof currencySymbol === "string" && params.enableCurrencySymbols) {
+                    processedAmount = currencySymbol + (currencySymbol.length > 1 ? " " : "") + processedAmount;
                 } else {
                     processedAmount = processedAmount + " " + currencyCode;
                 }
@@ -154,33 +129,19 @@ export class AmountUtils {
      * @param passedParams {object} Formatting parameters
      * @return {string} Formatted crypto amount string
      */
-    static crypto(
-        amount,
-        ticker,
-        digits = this.significantDecimalCount,
-        passedParams
-    ) {
+    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";
+            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();
+            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.`;
@@ -191,21 +152,13 @@ export class AmountUtils {
 
             // 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;
+                processedAmount = this.removeRedundantRightZerosFromNumberString(
+                    amountBigNumber.toFixed(this.significantDecimalCount, BigNumber.ROUND_FLOOR)
+                );
+                addPeriods = originalAmountDecimalPlaces > this.significantDecimalCount;
             }
 
-            const limitResult = this._limitTotalAmountLengthIfNeeded(
-                processedAmount,
-                params
-            );
+            const limitResult = this._limitTotalAmountLengthIfNeeded(processedAmount, params);
             processedAmount = limitResult.processedAmount;
             addPeriods ||= limitResult.addPeriods;
 
@@ -235,11 +188,7 @@ export class AmountUtils {
 
             return processedAmount;
         } catch (e) {
-            improveAndRethrow(
-                e,
-                "crypto",
-                `Passed: ${amount}, ${ticker}, ${digits}`
-            );
+            improveAndRethrow(e, "crypto", `Passed: ${amount}, ${ticker}, ${digits}`);
         }
     }
 
@@ -291,32 +240,17 @@ export class AmountUtils {
      * @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 = {}
-    ) {
+    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();
+            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}`
-            );
+            improveAndRethrow(e, "_collapseAmountAndFormat", `Passed: ${amountBigNumber.toFixed()}, ${decimalCount}`);
         }
     }
 
@@ -329,13 +263,10 @@ export class AmountUtils {
         try {
             let addPeriods = false;
             if (params.limitTotalLength || params.extraSmallLength) {
-                const maxLength = params.extraSmallLength
-                    ? this.extraSmallMaxTotalLength
-                    : this.maxTotalLength;
+                const maxLength = params.extraSmallLength ? this.extraSmallMaxTotalLength : this.maxTotalLength;
                 if (amountString.length > maxLength) {
                     const delta = amountString.length - maxLength;
-                    const currentDecimalsCount =
-                        BigNumber(amountString).decimalPlaces();
+                    const currentDecimalsCount = BigNumber(amountString).decimalPlaces();
                     const newDecimalCount = currentDecimalsCount - delta;
                     amountString = BigNumber(amountString).toFixed(
                         newDecimalCount > 2 ? newDecimalCount : 2,
@@ -347,11 +278,7 @@ export class AmountUtils {
 
             return { addPeriods: addPeriods, processedAmount: amountString };
         } catch (e) {
-            improveAndRethrow(
-                e,
-                "_limitTotalAmountLengthIfNeeded",
-                `Passed: ${amountString}, ${params}`
-            );
+            improveAndRethrow(e, "_limitTotalAmountLengthIfNeeded", `Passed: ${amountString}, ${params}`);
         }
     }
 
@@ -386,17 +313,11 @@ export class AmountUtils {
             const rateBigNumber = BigNumber(rate);
             if (BigNumber(rate).eq("0")) {
                 right = BigNumber("0");
-            } else if (
-                rate &&
-                (BigNumber.isBigNumber(rate) || !Number.isNaN(+rate))
-            ) {
+            } else if (rate && (BigNumber.isBigNumber(rate) || !Number.isNaN(+rate))) {
                 for (let i = 0; i < maxAttemptsToGetRate; ++i) {
                     const rightNumberAttempt = rateBigNumber
                         .times(leftNumber)
-                        .toFixed(
-                            rightCurrencyDigitsAfterDots,
-                            BigNumber.ROUND_FLOOR
-                        );
+                        .toFixed(rightCurrencyDigitsAfterDots, BigNumber.ROUND_FLOOR);
                     if (!BigNumber(rightNumberAttempt).eq(BigNumber("0"))) {
                         right = BigNumber(rightNumberAttempt);
                         break;
@@ -407,15 +328,10 @@ export class AmountUtils {
             }
             const leftAmountString = AmountUtils.toIntegerString(leftNumber);
             const rightAmountString =
-                right != null
-                    ? right.toFixed(
-                          rightCurrencyDigitsAfterDots,
-                          BigNumber.ROUND_FLOOR
-                      )
-                    : null;
-            return `${leftAmountString} ${leftTicker} ${
-                strictRate ? "=" : "~"
-            } ${rightAmountString ?? "?"} ${rightTicker}`;
+                right != null ? right.toFixed(rightCurrencyDigitsAfterDots, BigNumber.ROUND_FLOOR) : null;
+            return `${leftAmountString} ${leftTicker} ${strictRate ? "=" : "~"} ${
+                rightAmountString ?? "?"
+            } ${rightTicker}`;
         } catch (e) {
             // eslint-disable-next-line no-console
             console.log("composeRateText", e);
@@ -437,11 +353,7 @@ export class AmountUtils {
 
             return `${parts[0]}${right?.length ? `.${right}` : ""}`;
         } catch (e) {
-            improveAndRethrow(
-                e,
-                "removeRedundantRightZerosFromNumberString",
-                `Passed: ${numberAsAString}`
-            );
+            improveAndRethrow(e, "removeRedundantRightZerosFromNumberString", `Passed: ${numberAsAString}`);
         }
     }
 }

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

@@ -7,20 +7,10 @@ import { improveAndRethrow } from "../errorUtils.js";
 
 class BigdatacloudIpAddressProvider extends ExternalApiProvider {
     constructor() {
-        super(
-            "https://api.bigdatacloud.net/data/client-ip",
-            "get",
-            15000,
-            ApiGroups.BIGDATACLOUD
-        );
+        super("https://api.bigdatacloud.net/data/client-ip", "get", 15000, ApiGroups.BIGDATACLOUD);
     }
 
-    getDataByResponse(
-        response,
-        params = [],
-        subRequestIndex = 0,
-        iterationsData = []
-    ) {
+    getDataByResponse(response, params = [], subRequestIndex = 0, iterationsData = []) {
         return response?.data && response.data?.ipString;
     }
 }
@@ -30,90 +20,54 @@ class TrackipIpAddressProvider extends ExternalApiProvider {
         super("https://www.trackip.net/ip", "get", 15000, ApiGroups.TRACKIP);
     }
 
-    getDataByResponse(
-        response,
-        params = [],
-        subRequestIndex = 0,
-        iterationsData = []
-    ) {
+    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
-        );
+        super("https://api6.ipify.org/?format=json", "get", 15000, ApiGroups.IPIFY);
     }
 
-    getDataByResponse(
-        response,
-        params = [],
-        subRequestIndex = 0,
-        iterationsData = []
-    ) {
+    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
-        );
+        super("https://api.ipify.org/?format=json", "get", 15000, ApiGroups.IPIFY);
     }
 
-    getDataByResponse(
-        response,
-        params = [],
-        subRequestIndex = 0,
-        iterationsData = []
-    ) {
+    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
-        );
+        super("http://bot.whatismyipaddress.com/", "get", 15000, ApiGroups.WHATISMYIPADDRESS);
     }
 
-    getDataByResponse(
-        response,
-        params = [],
-        subRequestIndex = 0,
-        iterationsData = []
-    ) {
+    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
-        );
+    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.
@@ -127,10 +81,7 @@ export class IpAddressProvider {
      */
     static async getClientIpAddress() {
         try {
-            return await this.externalIPAddressAPICaller.callExternalAPICached(
-                [],
-                7000
-            );
+            return await this.externalIPAddressAPICaller.callExternalAPICached([], 7000);
         } catch (e) {
             improveAndRethrow(e, "getClientIpAddress");
         }