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

package/src/common/fiatCurrenciesService.js

@@ -1,15 +1,11 @@
 export class FiatCurrenciesService {
     static getFullCurrencyNameByCode(code = "") {
-        const data = fiatCurrenciesList.find(
-            (currencyData) => currencyData[0] === code.toUpperCase()
-        );
+        const data = fiatCurrenciesList.find(currencyData => currencyData[0] === code.toUpperCase());
         return (data && data[2]) || null;
     }
 
     static isCodeValid(code) {
-        return !!fiatCurrenciesList.find(
-            (currenciesData) => currenciesData[0] === code
-        );
+        return !!fiatCurrenciesList.find(currenciesData => currenciesData[0] === code);
     }
 
     /**
@@ -19,9 +15,7 @@ export class FiatCurrenciesService {
      * @return {string|null} code or null if there is no symbol for the currency
      */
     static getCurrencySymbolByCode(code = "") {
-        const data = fiatCurrenciesList.find(
-            (currencyData) => currencyData[0] === code.toUpperCase()
-        );
+        const data = fiatCurrenciesList.find(currencyData => currencyData[0] === code.toUpperCase());
         return data?.[1] ?? null;
     }
 
@@ -30,9 +24,7 @@ export class FiatCurrenciesService {
      * @return {number|null}
      */
     static getCurrencyDecimalCountByCode(code = "") {
-        const data = fiatCurrenciesList.find(
-            (currencyData) => currencyData[0] === code.toUpperCase()
-        );
+        const data = fiatCurrenciesList.find(currencyData => currencyData[0] === code.toUpperCase());
         return data?.[3] ?? null;
     }
 }

package/src/common/models/coin.js

@@ -130,9 +130,7 @@ export class Coin {
      * @param coinAtomsString {string} coin atoms positive integer amount
      * @return {string} string of coin amount and fee rate units
      */
-    coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString(
-        coinAtomsString
-    ) {
+    coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString(coinAtomsString) {
         throw new Error("Not implemented in base Coin");
     }
 
@@ -147,9 +145,7 @@ export class Coin {
 
     tickerAndProtocol() {
         try {
-            return `${this.tickerPrintable}${
-                this.protocol ? " " + this.protocol.protocol ?? "" : ""
-            }`;
+            return `${this.tickerPrintable}${this.protocol ? " " + this.protocol.protocol ?? "" : ""}`;
         } catch (e) {
             improveAndRethrow(e, "tickerAndProtocol");
         }

package/src/common/tests/amountUtils/composeRateText.test.js

@@ -9,9 +9,7 @@ describe("AmountUtils", function () {
     let toIntegerStringStub;
 
     beforeEach(function () {
-        toIntegerStringStub = sinon
-            .stub(AmountUtils, "toIntegerString")
-            .callsFake((number) => number.toFixed(0));
+        toIntegerStringStub = sinon.stub(AmountUtils, "toIntegerString").callsFake(number => number.toFixed(0));
     });
 
     afterEach(function () {
@@ -26,46 +24,25 @@ describe("AmountUtils", function () {
         });
 
         it("Should handle rate with strictRate set to true", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.1",
-                8,
-                true
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.1", 8, true);
 
             result.should.equal("1 BTC = 0.10000000 ETH");
         });
 
         it("Should handle rate with high precision", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.12345678903422",
-                8
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.12345678903422", 8);
 
             result.should.equal("1 BTC ~ 0.12345678 ETH");
         });
 
         it("Should handle very small rates by scaling up", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.000000000000001",
-                8
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.000000000000001", 8);
 
             result.should.equal("100000000 BTC ~ 0.00000010 ETH");
         });
 
         it("Should handle large rates", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "1000000000000000",
-                8
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "1000000000000000", 8);
 
             result.should.equal("1 BTC ~ 1000000000000000.00000000 ETH");
         });
@@ -89,45 +66,25 @@ describe("AmountUtils", function () {
         });
 
         it("Should handle rate with different rightCurrencyDigitsAfterDots", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                5
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", 5);
 
             result.should.equal("1 BTC ~ 0.12345 ETH");
         });
 
         it("Should handle rate with max rightCurrencyDigitsAfterDots", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                10
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", 10);
 
             result.should.equal("1 BTC ~ 0.1234567890 ETH");
         });
 
         it("Should ensure proper rounding of right amount", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                4
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", 4);
 
             result.should.equal("1 BTC ~ 0.1234 ETH");
         });
 
         it("Should handle great rightCurrencyDigitsAfterDots", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                20
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", 20);
 
             result.should.equal("1 BTC ~ 0.12345678900000000000 ETH");
         });
@@ -163,33 +120,19 @@ describe("AmountUtils", function () {
         });
 
         it("Should return correct format when rate has a lot of trailing zeros", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.1000000000000000000000"
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.1000000000000000000000");
 
             result.should.equal("1 BTC ~ 0.10000000 ETH");
         });
 
         it("Should handle zero rightCurrencyDigitsAfterDots", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                0
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", 0);
 
             result.should.equal("100 BTC ~ 12 ETH");
         });
 
         it("Should handle negative rightCurrencyDigitsAfterDots", function () {
-            const result = AmountUtils.composeRateText(
-                "BTC",
-                "ETH",
-                "0.123456789",
-                -1
-            );
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.123456789", -1);
 
             result.should.equal("1 BTC ~ 0.12345678 ETH");
         });

package/src/common/tests/integration/external-apis/ipAddressProviders/getClientIpAddress.test.js

@@ -6,9 +6,7 @@ import { IpAddressProvider } from "../../../../external-apis/ipAddressProviders.
 describe("ipAddressProviders", function () {
     describe("#getClientIpAddress", function () {
         it("Should successfully retrieve IP address", async function () {
-            (
-                await IpAddressProvider.getClientIpAddress()
-            ).should.not.be.empty();
+            (await IpAddressProvider.getClientIpAddress()).should.not.be.empty();
         });
     });
 });

package/src/common/utils/cache.js

@@ -24,11 +24,7 @@ export class Cache {
             try {
                 for (const key of this._cache.keys()) {
                     const item = this._cache.get(key);
-                    if (
-                        item &&
-                        item.ttlMs &&
-                        item.addedMsTimestamp + item.ttlMs < Date.now()
-                    ) {
+                    if (item && item.ttlMs && item.addedMsTimestamp + item.ttlMs < Date.now()) {
                         this._cache.delete(key);
                     }
                 }
@@ -53,9 +49,7 @@ export class Cache {
     put(key, data, ttlMs = null) {
         try {
             if (typeof key !== "string" || data == null) {
-                throw new Error(
-                    `Trying to cache corrupted data: ${key}, ${data}`
-                );
+                throw new Error(`Trying to cache corrupted data: ${key}, ${data}`);
             }
             this._cache.set(key, {
                 data: data,
@@ -87,9 +81,7 @@ export class Cache {
     _putEventDependentData(key, data, events, ttlMs = null) {
         try {
             if (typeof key !== "string" || data == null) {
-                throw new Error(
-                    `Trying to cache corrupted data: ${key}, ${data}`
-                );
+                throw new Error(`Trying to cache corrupted data: ${key}, ${data}`);
             }
             this._cache.set(key, {
                 data: data,
@@ -97,27 +89,17 @@ export class Cache {
                 ttlMs: ttlMs,
             });
             for (let event of events) {
-                const eventAndKeys = this._eventDependentDataKeys.find(
-                    (item) => item[0] === event
-                );
+                const eventAndKeys = this._eventDependentDataKeys.find(item => item[0] === event);
                 if (eventAndKeys) {
                     eventAndKeys.push(key);
                 } else if (this._eventBus) {
                     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));
+                            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}`
-                            );
+                            Logger.logError(e, "cache.removing-for-event", `Event: ${event}`);
                         }
                     });
                 }
@@ -132,11 +114,7 @@ export class Cache {
         try {
             const item = this._cache.get(key);
             if (item) {
-                if (
-                    item.addedMsTimestamp &&
-                    item.ttlMs !== null &&
-                    item.addedMsTimestamp + item.ttlMs < Date.now()
-                ) {
+                if (item.addedMsTimestamp && item.ttlMs !== null && item.addedMsTimestamp + item.ttlMs < Date.now()) {
                     this._cache.delete(key);
                     return null;
                 } else {
@@ -185,16 +163,12 @@ export class Cache {
 
     invalidateContaining(keyPart) {
         if (typeof keyPart !== "string" || keyPart === "") {
-            throw new Error(
-                "Trying to invalidate containing wrong key or empty key: " +
-                    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)
+                key => typeof key === "string" && new RegExp(keyPart).test(key)
             );
             for (let i = 0; i < matchedKeys.length; ++i) {
                 this._cache.delete(matchedKeys[i]);

package/src/common/utils/emailAPI.js

@@ -7,9 +7,7 @@ export class EmailsApi {
 
     static async sendEmail(subject, body) {
         try {
-            const url = `${
-                window.location.protocol + "//" + window.location.host
-            }/api/v1/${this.serverEndpointEntity}`;
+            const url = `${window.location.protocol + "//" + window.location.host}/api/v1/${this.serverEndpointEntity}`;
             await axios.post(url, { subject, body });
         } catch (e) {
             improveAndRethrow(e, "sendEmail", subject + body);

package/src/common/utils/logging/logger.js

@@ -15,20 +15,13 @@ export class Logger {
         LogsStorage.saveLog(`${timestamp}|${source}:${logString}`);
     }
 
-    static logError(
-        e,
-        settingFunction,
-        additionalMessage = "",
-        onlyToConsole = false
-    ) {
-        let message = `\nFunction call ${
-            settingFunction ?? ""
-        } failed. Error message: ${e?.message}. ${additionalMessage} `;
+    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. "
-                : "");
+            (e?.httpStatus === 403 ? "Authentication has expired or was lost. " : "");
 
         if (e?.response) {
             try {

package/src/components/atoms/AssetIcon/AssetIcon.jsx

@@ -12,13 +12,8 @@ import s from "./asset-icon.module.scss";
  * @param {string} [fallbackSrc=null] - The fallback source URL in case the main source fails to load.
  * @param {boolean} [small=false] - Whether to display a smaller version of the icon.
  */
-export const AssetIcon = ({
-    assetIconSrc,
-    assetIconProtocolSrc = null,
-    fallbackSrc = null,
-    small = false,
-}) => {
-    const handleFailedLoad = (e) => {
+export const AssetIcon = ({ assetIconSrc, assetIconProtocolSrc = null, fallbackSrc = null, small = false }) => {
+    const handleFailedLoad = e => {
         e.target.onerror = null;
         e.target.src = fallbackSrc;
     };
@@ -27,19 +22,14 @@ export const AssetIcon = ({
         <div className={s["asset-icon"] + (small ? " " + s["small"] : "")}>
             <img
                 src={assetIconSrc}
-                className={
-                    s["asset-icon-primary"] + (small ? " " + s["small"] : "")
-                }
+                className={s["asset-icon-primary"] + (small ? " " + s["small"] : "")}
                 alt={" "}
                 onError={handleFailedLoad}
             />
             {assetIconProtocolSrc ? (
                 <img
                     src={assetIconProtocolSrc}
-                    className={
-                        s["asset-icon-secondary"] +
-                        (small ? " " + s["small"] : "")
-                    }
+                    className={s["asset-icon-secondary"] + (small ? " " + s["small"] : "")}
                     alt={" "}
                     onError={handleFailedLoad}
                 />

package/src/components/atoms/AssetSelection/AssetSelection.jsx

@@ -31,10 +31,8 @@ export const AssetSelection = ({
 
     return (
         <div
-            className={
-                s["asset-selection"] + " " + (disabled ? s["disabled"] : "")
-            }
-            onClick={disabled ? () => {} : (e) => handleError(handleClick, e)}
+            className={s["asset-selection"] + " " + (disabled ? s["disabled"] : "")}
+            onClick={disabled ? () => {} : e => handleError(handleClick, e)}
         >
             <div className={s["asset-selection-icon-wrapper"]}>
                 <AssetIcon
@@ -44,13 +42,7 @@ export const AssetSelection = ({
                     fallbackSrc={fallbackSrc}
                 />
             </div>
-            {protocolName ? (
-                <div className={s["asset-selection-protocol-wrapper"]}>
-                    {protocolName}
-                </div>
-            ) : (
-                ""
-            )}
+            {protocolName ? <div className={s["asset-selection-protocol-wrapper"]}>{protocolName}</div> : ""}
             <div className={s["arrow"]}>
                 <ArrowIcon />
             </div>

package/src/components/atoms/BackgroundTitle/BackgroundTitle.jsx

@@ -15,18 +15,8 @@ import s from "./background-title.module.scss";
 export const BackgroundTitle = ({ text, smallMargins = false }) => {
     return (
         <div className={s["background-title"]}>
-            <div
-                className={
-                    s["background-title-wrapper"] +
-                    (smallMargins ? " " + s["small-margins"] : "")
-                }
-            >
-                <div
-                    className={
-                        s["background-title-wrapper-text"] +
-                        (smallMargins ? " " + s["small-margins"] : "")
-                    }
-                >
+            <div className={s["background-title-wrapper"] + (smallMargins ? " " + s["small-margins"] : "")}>
+                <div className={s["background-title-wrapper-text"] + (smallMargins ? " " + s["small-margins"] : "")}>
                     {text}
                 </div>
             </div>

package/src/components/atoms/InformationMessage/InformationMessage.jsx

@@ -23,19 +23,9 @@ export const InformationMessage = ({
     children = null,
 }) => {
     return (
-        <div
-            className={
-                s["information-message"] +
-                (bigImage ? " " + s["big-image"] : "")
-            }
-        >
+        <div className={s["information-message"] + (bigImage ? " " + s["big-image"] : "")}>
             {icon ? <img src={icon} alt="info icon" /> : <InfoIcon />}
-            <p
-                className={
-                    s["information-message-text"] +
-                    (whiteText ? " " + s["white-text"] : "")
-                }
-            >
+            <p className={s["information-message-text"] + (whiteText ? " " + s["white-text"] : "")}>
                 {text}
                 {children}
             </p>

package/src/components/atoms/InformationMessage/information-message.module.scss

@@ -13,13 +13,15 @@
         align-items: flex-start;
     }
 
-    img, svg {
+    img,
+    svg {
         min-width: 24px;
         height: 24px;
     }
 
     &.big-image {
-        img, svg {
+        img,
+        svg {
             min-width: 29px;
             height: 29px;
         }

package/src/components/atoms/Input/Input.jsx

@@ -51,7 +51,7 @@ export const Input = forwardRef(
             value = "",
             successAlertText = "",
             disabled = false,
-            onKeyUp = (event) => {},
+            onKeyUp = event => {},
             autoFocus = false,
             fillWidth = false,
             clearButton = false,
@@ -92,10 +92,7 @@ export const Input = forwardRef(
 
                 {clearButton ? (
                     <div className={s["input-clear-button"]}>
-                        <Close
-                            onClick={handleClearButtonClick}
-                            color={"dark-invert"}
-                        />
+                        <Close onClick={handleClearButtonClick} color={"dark-invert"} />
                     </div>
                 ) : (
                     ""
@@ -106,17 +103,12 @@ export const Input = forwardRef(
                         id={id}
                         type={type}
                         name={name}
-                        onChange={(e) => handleError(onChange, e)}
+                        onChange={e => handleError(onChange, e)}
                         placeholder={placeholder}
-                        className={
-                            className +
-                            (errorEncountered
-                                ? " " + s["error-encountered"]
-                                : "")
-                        }
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
                         defaultValue={defaultValue}
                         disabled={disabled}
-                        onKeyUp={(event) => onKeyUp(event)}
+                        onKeyUp={event => onKeyUp(event)}
                         autoFocus={autoFocus}
                         ref={ref}
                     />
@@ -125,27 +117,19 @@ export const Input = forwardRef(
                         id={id}
                         type={type}
                         name={name}
-                        onChange={(e) => handleError(onChange, e)}
+                        onChange={e => handleError(onChange, e)}
                         placeholder={placeholder}
-                        className={
-                            className +
-                            (errorEncountered
-                                ? " " + s["error-encountered"]
-                                : "")
-                        }
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
                         value={value}
                         disabled={disabled}
-                        onKeyUp={(event) => onKeyUp(event)}
+                        onKeyUp={event => onKeyUp(event)}
                         autoFocus={autoFocus}
                         ref={ref}
                     />
                 )}
 
                 {alertText || successAlertText ? (
-                    <Validation
-                        text={alertText || successAlertText}
-                        isSuccessAlert={!alertText}
-                    />
+                    <Validation text={alertText || successAlertText} isSuccessAlert={!alertText} />
                 ) : null}
             </div>
         );

package/src/components/atoms/LoadingDots/LoadingDots.jsx

@@ -15,33 +15,16 @@ import styles from "./LoadingDots.module.scss";
  * @param {(boolean|'left'|'right')} [props.align=false] - Aligns the loading dots to the left or right if specified, otherwise centered.
  * @returns {React.ReactElement} A React component that renders the loading dots animation.
  */
-export const LoadingDots = ({
-    size = "small",
-    isColored = false,
-    noMargins = false,
-    align = false,
-}) => {
+export const LoadingDots = ({ size = "small", isColored = false, noMargins = false, align = false }) => {
     return (
         <div
-            className={`${styles["loading-dots"]} ${styles[size]} ${
-                noMargins ? ` ${styles["no-margins"]}` : ""
-            } ${align ? styles["align-" + align] : ""}`}
+            className={`${styles["loading-dots"]} ${styles[size]} ${noMargins ? ` ${styles["no-margins"]}` : ""} ${
+                align ? styles["align-" + align] : ""
+            }`}
         >
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
         </div>
     );
 };
@@ -50,8 +33,5 @@ LoadingDots.propTypes = {
     size: PropTypes.oneOf(["big", "small", "extra-small"]),
     isColored: PropTypes.bool,
     noMargins: PropTypes.bool,
-    align: PropTypes.oneOfType([
-        PropTypes.oneOf(["left", "right"]),
-        PropTypes.bool,
-    ]),
+    align: PropTypes.oneOfType([PropTypes.oneOf(["left", "right"]), PropTypes.bool]),
 };

package/src/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -17,19 +17,12 @@ import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx"
  * @param {string} [titleNoticeIcon] - The source URL for the icon displayed on the notice.
  * @param {string} tooltipPosition - Position for the tooltip relative to the icon.
  */
-export const NoticeIcon = ({
-    noticeText,
-    titleNoticeIcon = "",
-    tooltipPosition = TOOLTIP_POSITIONS.TOP,
-}) => {
+export const NoticeIcon = ({ noticeText, titleNoticeIcon = "", tooltipPosition = TOOLTIP_POSITIONS.TOP }) => {
     const [showTooltip, setShowTooltip] = useState(false);
 
     const noticeRef = useRef();
 
-    useEffect(
-        () => handleClickOutside([noticeRef], () => setShowTooltip(false)),
-        []
-    );
+    useEffect(() => handleClickOutside([noticeRef], () => setShowTooltip(false)), []);
 
     return (
         <div ref={noticeRef} className={s["notice-icon"]}>
@@ -37,14 +30,11 @@ export const NoticeIcon = ({
                 <img
                     src={titleNoticeIcon}
                     alt="title icon"
-                    onClick={() => setShowTooltip((prev) => !prev)}
+                    onClick={() => setShowTooltip(prev => !prev)}
                     className={s["notice-icon-image"]}
                 />
             ) : (
-                <div
-                    className={s["notice-icon-image"]}
-                    onClick={() => setShowTooltip((prev) => !prev)}
-                >
+                <div className={s["notice-icon-image"]} onClick={() => setShowTooltip(prev => !prev)}>
                     <NoticeQuestionIcon />
                 </div>
             )}