@rabbitio/ui-kit 1.0.0-beta.71 → 1.0.0-beta.73

package/src/swaps-lib/test/external-apis/swapspaceSwapProvider/getSwapInfo.test.js

@@ -6,10 +6,10 @@ import { beforeEach, afterEach, describe, it } from "vitest";
 
 import { SwapProvider } from "../../../external-apis/swapProvider.js";
 import { SwapspaceSwapProvider } from "../../../external-apis/swapspaceSwapProvider.js";
-import { Cache } from "../../../../common/utils/cache.js";
-import { AmountUtils } from "../../../../common/amountUtils.js";
-import { Coin } from "../../../../common/models/coin.js";
-import { Blockchain } from "../../../../common/models/blockchain.js";
+import { Cache } from "../../../../common-apis/utils/cache.js";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
+import { Coin } from "../../../../common-apis/models/coin.js";
+import { Blockchain } from "../../../../common-apis/models/blockchain.js";
 
 describe("swapspaceSwapProvider", function () {
     describe("getSwapInfo", function () {
@@ -92,6 +92,7 @@ describe("swapspaceSwapProvider", function () {
         let swapspaceSwapProvider;
         let axiosGetStub;
         let trimCryptoAmountByCoinStub;
+        let _fetchPartnersListIfNeededStub;
 
         beforeEach(() => {
             swapspaceSwapProvider = new SwapspaceSwapProvider("", new Cache());
@@ -100,6 +101,9 @@ describe("swapspaceSwapProvider", function () {
 
             trimCryptoAmountByCoinStub = sinon.stub(AmountUtils, "trim");
             trimCryptoAmountByCoinStub.callsFake(amount => amount?.toString());
+
+            _fetchPartnersListIfNeededStub = sinon.stub(swapspaceSwapProvider, "_fetchPartnersListIfNeeded");
+            _fetchPartnersListIfNeededStub.resolves();
         });
 
         afterEach(() => {
@@ -1576,5 +1580,121 @@ describe("swapspaceSwapProvider", function () {
             result.result.should.be.false();
             result.reason.should.be.equal(SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED);
         });
+
+        [
+            {
+                description: "should return a result with isRefundAddressRequired true when partner is not found",
+                supportedCoins: [
+                    { coin: BTC, code: "btc", network: "btc", deposit: true },
+                    { coin: ETH, code: "eth", network: "eth", withdrawal: true },
+                ],
+                mockData: [
+                    {
+                        exists: true,
+                        fixed: false,
+                        toAmount: 2,
+                        fromAmount: 1,
+                        duration: "10-20",
+                        max: 5,
+                        min: 0.1,
+                        partner: "partner1",
+                    },
+                ],
+                partners: [],
+                expected: {
+                    result: true,
+                    isRefundAddressRequired: true,
+                },
+            },
+            {
+                description:
+                    "should return a result with isRefundAddressRequired false for a fixed option with reqFixedRefund as false",
+                isFixed: true,
+                supportedCoins: [
+                    { coin: BTC, code: "btc", network: "btc", deposit: true },
+                    { coin: ETH, code: "eth", network: "eth", withdrawal: true },
+                ],
+                mockData: [
+                    {
+                        exists: true,
+                        fixed: true,
+                        toAmount: 2,
+                        fromAmount: 1,
+                        duration: "10-20",
+                        max: 5,
+                        min: 0.1,
+                        partner: "partner1",
+                    },
+                ],
+                partners: [{ path: "partner1", reqFixedRefund: false, reqFloatRefund: true }],
+                expected: {
+                    result: true,
+                    isRefundAddressRequired: false,
+                },
+            },
+            {
+                description:
+                    "should return a result with isRefundAddressRequired true for a floating option with reqFloatRefund as true",
+                supportedCoins: [
+                    { coin: BTC, code: "btc", network: "btc", deposit: true },
+                    { coin: ETH, code: "eth", network: "eth", withdrawal: true },
+                ],
+                mockData: [
+                    {
+                        exists: true,
+                        fixed: false,
+                        toAmount: 2,
+                        fromAmount: 1,
+                        duration: "10-20",
+                        max: 5,
+                        min: 0.1,
+                        partner: "partner1",
+                    },
+                ],
+                partners: [{ path: "partner1", reqFixedRefund: false, reqFloatRefund: true }],
+                expected: {
+                    result: true,
+                    isRefundAddressRequired: true,
+                },
+            },
+        ].forEach(({ description, isFixed, supportedCoins, mockData, partners, expected }) => {
+            it(description, async () => {
+                swapspaceSwapProvider._supportedCoins = supportedCoins;
+                axiosGetStub.returns(Promise.resolve({ data: mockData }));
+
+                _fetchPartnersListIfNeededStub.resolves();
+                swapspaceSwapProvider._partners = partners;
+
+                const result = await swapspaceSwapProvider.getSwapInfo(BTC, ETH, "1", !!isFixed);
+
+                result.result.should.be.equal(expected.result);
+                result.isRefundAddressRequired.should.be.equal(expected.isRefundAddressRequired);
+            });
+        });
+        it("should call _fetchPartnersListIfNeeded ones", async () => {
+            swapspaceSwapProvider._supportedCoins = [
+                { coin: BTC, code: "btc", network: "btc", deposit: true },
+                { coin: ETH, code: "eth", network: "eth", withdrawal: true },
+            ];
+            const mockData = [
+                {
+                    exists: true,
+                    fixed: false,
+                    toAmount: 2,
+                    fromAmount: 1,
+                    duration: "10-20",
+                    max: 5,
+                    min: 0.1,
+                    partner: "partner1",
+                },
+            ];
+            axiosGetStub.returns(Promise.resolve({ data: mockData }));
+
+            swapspaceSwapProvider._partners = [{ path: "partner1", reqFixedRefund: false, reqFloatRefund: true }];
+
+            await swapspaceSwapProvider.getSwapInfo(BTC, ETH, "1");
+
+            _fetchPartnersListIfNeededStub.callCount.should.be.equal(1);
+        });
     });
 });

package/src/swaps-lib/test/external-apis/swapspaceSwapProvider/getWithdrawalCurrencies.test.js

@@ -6,7 +6,7 @@ import { beforeEach, afterEach, describe, it } from "vitest";
 
 import { SwapProvider } from "../../../external-apis/swapProvider.js";
 import { SwapspaceSwapProvider } from "../../../external-apis/swapspaceSwapProvider.js";
-import { Cache } from "../../../../common/utils/cache.js";
+import { Cache } from "../../../../common-apis/utils/cache.js";
 
 describe("swapspaceSwapProvider", function () {
     describe("getWithdrawalCurrencies", function () {

package/src/swaps-lib/test/utils/swapUtils/safeHandleRequestsLimitExceeding.test.js

@@ -2,8 +2,8 @@ import sinon from "sinon";
 import should from "should";
 
 import { beforeEach, afterEach, describe, it } from "vitest";
-import { Logger } from "../../../../common/utils/logging/logger.js";
-import { EmailsApi } from "../../../../common/utils/emailAPI.js";
+import { Logger } from "../../../../common-apis/utils/logging/logger.js";
+import { EmailsApi } from "../../../../common-apis/utils/emailAPI.js";
 import { SwapUtils } from "../../../utils/swapUtils.js";
 
 describe("SwapUtils", function () {

package/src/swaps-lib/utils/swapUtils.js

@@ -1,13 +1,13 @@
 import { BigNumber } from "bignumber.js";
 
-import { AmountUtils } from "../../common/amountUtils.js";
-import { FiatCurrenciesService } from "../../common/fiatCurrenciesService.js";
-import { improveAndRethrow } from "../../common/errorUtils.js";
+import { AmountUtils } from "../../common-apis/amountUtils.js";
+import { FiatCurrenciesService } from "../../common-apis/fiatCurrenciesService.js";
+import { improveAndRethrow } from "../../common-apis/errorUtils.js";
 import { ExistingSwapWithFiatData } from "../models/existingSwapWithFiatData.js";
-import { EmailsApi } from "../../common/utils/emailAPI.js";
+import { EmailsApi } from "../../common-apis/utils/emailAPI.js";
 import { SwapProvider } from "../external-apis/swapProvider.js";
-import { Logger } from "../../common/utils/logging/logger.js";
-import { safeStringify } from "../../common/utils/safeStringify.js";
+import { Logger } from "../../common-apis/utils/logging/logger.js";
+import { safeStringify } from "../../common-apis/utils/safeStringify.js";
 
 export class SwapUtils {
     /**
@@ -112,8 +112,8 @@ export class SwapUtils {
     /**
      * If some swap is not found by id then there is no item in return list.
      *
-     * @param swapProvider {SwapProvider}
-     * @param swapIds {string[]}
+     * @param swapProviders {SwapProvider[]} - Array of swap providers
+     * @param swapIds {string[]} - Array of swap IDs
      * @return {Promise<{
      *             result: true,
      *             swaps: ExistingSwapWithFiatData[]
@@ -122,47 +122,72 @@ export class SwapUtils {
      *             reason: string
      *         }>}
      */
-    static async getExistingSwapsDetailsWithFiatAmounts(swapProvider, swapIds) {
+    static async getExistingSwapsDetailsWithFiatAmounts(swapProviders, swapIds) {
         try {
-            const result = await swapProvider.getExistingSwapsDetailsAndStatus(swapIds);
-            if (result.result) {
-                const extendedSwaps = [];
-                for (let swap of result.swaps) {
-                    if (swap.status === SwapProvider.SWAP_STATUSES.REFUNDED) {
-                        const rate = await swapProvider.getCoinToUSDTRate(swap.fromCoin);
-                        extendedSwaps.push(
-                            ExistingSwapWithFiatData.fromExistingSwap(
-                                swap,
-                                rate?.rate != null ? BigNumber(swap.fromAmount).times(rate.rate).toNumber() : null,
-                                rate?.rate != null ? BigNumber(swap.toAmount).times(rate.rate).toNumber() : null,
-                                "USD",
-                                FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
-                            )
-                        );
-                    } else {
-                        const [fromCoinFiatRate, toConFiatRate] = await Promise.all([
-                            swapProvider.getCoinToUSDTRate(swap.fromCoin),
-                            swapProvider.getCoinToUSDTRate(swap.toCoin),
-                        ]);
-                        extendedSwaps.push(
-                            ExistingSwapWithFiatData.fromExistingSwap(
-                                swap,
-                                fromCoinFiatRate?.rate != null
-                                    ? BigNumber(swap.fromAmount).times(fromCoinFiatRate.rate).toNumber()
-                                    : null,
-                                toConFiatRate?.rate != null
-                                    ? BigNumber(swap.toAmount).times(toConFiatRate.rate).toNumber()
-                                    : null,
-                                "USD",
-                                FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
-                            )
-                        );
+            let allSwaps = [];
+            let remainingSwapIds = new Set(swapIds);
+            const failResults = [];
+            for (let provider of swapProviders) {
+                const result = await provider.getExistingSwapsDetailsAndStatus([...remainingSwapIds]);
+                if (result.result) {
+                    const extendedSwaps = [];
+                    for (let swap of result.swaps) {
+                        if (swap.status === SwapProvider.SWAP_STATUSES.REFUNDED) {
+                            const rate = await provider.getCoinToUSDTRate(swap.fromCoin);
+                            extendedSwaps.push(
+                                ExistingSwapWithFiatData.fromExistingSwap(
+                                    swap,
+                                    rate?.rate != null ? BigNumber(swap.fromAmount).times(rate.rate).toNumber() : null,
+                                    rate?.rate != null ? BigNumber(swap.toAmount).times(rate.rate).toNumber() : null,
+                                    "USD",
+                                    FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
+                                )
+                            );
+                        } else {
+                            const [fromCoinFiatRate, toCoinFiatRate] = await Promise.all([
+                                provider.getCoinToUSDTRate(swap.fromCoin),
+                                provider.getCoinToUSDTRate(swap.toCoin),
+                            ]);
+                            extendedSwaps.push(
+                                ExistingSwapWithFiatData.fromExistingSwap(
+                                    swap,
+                                    fromCoinFiatRate?.rate != null
+                                        ? BigNumber(swap.fromAmount).times(fromCoinFiatRate.rate).toNumber()
+                                        : null,
+                                    toCoinFiatRate?.rate != null
+                                        ? BigNumber(swap.toAmount).times(toCoinFiatRate.rate).toNumber()
+                                        : null,
+                                    "USD",
+                                    FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
+                                )
+                            );
+                        }
+                        remainingSwapIds.delete(swap.id);
+                    }
+                    allSwaps = allSwaps.concat(extendedSwaps);
+
+                    // Stop if we have retrieved all swaps
+                    if (allSwaps.length >= swapIds.length) {
+                        break;
                     }
+                } else {
+                    failResults.push(result);
                 }
-                result.swaps = extendedSwaps;
             }
 
-            return result;
+            if (swapIds.length > 0 && allSwaps.length === 0 && failResults.length > 0) {
+                const failReasons = failResults.map(r => r.reason);
+                return {
+                    result: false,
+                    reason: failReasons.find(r => r !== SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED)
+                        ? failReasons.join("\n")
+                        : SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED,
+                };
+            }
+            return {
+                result: true,
+                swaps: allSwaps,
+            };
         } catch (e) {
             improveAndRethrow(e, "getExistingSwapsDetailsWithFiatAmounts");
         }

package/{styles → src/ui-kit/assets/styles}/index.scss

@@ -1,7 +1,7 @@
 @import "variables";
 @import "global-classes";
 @import "placeholder";
-@import "_mixins";
+@import "mixins";
 
 // TODO: [feature, high] Uncomment fonts after adding a new packaging tool. task_id=7375fa84ccab4d66b9e3a177a41f7e26
 @font-face {

package/src/{assets → ui-kit/assets}/wrappedImages/arrowWhite.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-// Originally: arrow-tosca.svg
+// Originally: arrow-white.svg
 export default () => (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path

package/src/{components → ui-kit/components}/atoms/AssetIcon/AssetIcon.jsx

@@ -7,10 +7,11 @@ import s from "./asset-icon.module.scss";
  * AssetIcon component to display an icon for an asset.
  *
  * @component
- * @param {string} assetIconSrc - The source URL for the asset icon.
- * @param {string} [assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
- * @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.
+ * @param {Object} props - The props object.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
+ * @param {string} [props.fallbackSrc=null] - The fallback source URL in case the main source fails to load.
+ * @param {boolean} [props.small=false] - Whether to display a smaller version of the icon.
  */
 export const AssetIcon = ({ assetIconSrc, assetIconProtocolSrc = null, fallbackSrc = null, small = false }) => {
     const handleFailedLoad = e => {

package/src/{components → ui-kit/components}/atoms/AssetIcon/asset-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .asset-icon {
     width: 34px;

package/src/{components → ui-kit/components}/atoms/AssetSelection/AssetSelection.jsx

@@ -6,18 +6,19 @@ import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
 
 import { AssetIcon } from "../AssetIcon/AssetIcon.jsx";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
 
 /**
  * Component-button for triggering selecting an asset.
  *
  * @component
- * @param {Function} handleClick - The function to call when the component is clicked
- * @param {boolean} disabled - If true, disables click functionality
- * @param {string} assetIconSrc - The source URL for the asset icon
- * @param {string} [protocolName] - The name of the protocol, if any
- * @param {string} [assetIconProtocolSrc] - The source URL for the asset protocol icon
- * @param {string} [fallbackSrc] - The fallback source URL if the main asset icon fails to load
+ * @param {Object} props - The props object.
+ * @param {Function} props.handleClick - The function to call when the component is clicked.
+ * @param {boolean} props.disabled - If true, disables click functionality.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.protocolName] - The name of the protocol, if any.
+ * @param {string} [props.assetIconProtocolSrc] - The source URL for the asset protocol icon.
+ * @param {string} [props.fallbackSrc] - The fallback source URL if the main asset icon fails to load.
  */
 export const AssetSelection = ({
     handleClick = () => {},

package/src/{components → ui-kit/components}/atoms/AssetSelection/asset-selection.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .asset-selection {
     display: flex;

package/src/{components → ui-kit/components}/atoms/BackgroundTitle/background-title.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .background-title {
     pointer-events: none;

package/src/{components → ui-kit/components}/atoms/InformationMessage/InformationMessage.jsx

@@ -9,11 +9,12 @@ import InfoIcon from "../../../assets/wrappedImages/infoIcon.jsx";
  * InformationMessage component to display an informational message with an optional icon.
  *
  * @component
- * @param {string} [text=""] - The text content of the message.
- * @param {string|boolean} [icon=false] - The URL or boolean indicating whether to display an icon.
- * @param {boolean} [bigImage=false] - Whether to use a larger image for the icon.
- * @param {boolean} [whiteText=false] - Whether the text should be displayed in white color.
- * @param {ReactNode} [children=null] - Additional child components.
+ * @param {Object} props - The props object.
+ * @param {string} [props.text=""] - The text content of the message.
+ * @param {string|boolean} [props.icon=false] - The URL or boolean indicating whether to display an icon.
+ * @param {boolean} [props.bigImage=false] - Whether to use a larger image for the icon.
+ * @param {boolean} [props.whiteText=false] - Whether the text should be displayed in white color.
+ * @param {ReactNode} [props.children=null] - Additional child components.
  */
 export const InformationMessage = ({
     text = "",

package/src/{components → ui-kit/components}/atoms/InformationMessage/information-message.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .information-message {
     display: flex;

package/src/{components → ui-kit/components}/atoms/Input/Input.jsx

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 
 import s from "./input.module.scss";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { Close } from "../buttons/Close/Close.jsx";
 import { Validation } from "../Validation/Validation.jsx";
@@ -13,26 +13,27 @@ import { Validation } from "../Validation/Validation.jsx";
  * Input component for forms.
  *
  * @component
- * @param {string} [type="text"] - The type of input (e.g., "text", "number", "email").
- * @param {string} [name=""] - The name of the input field.
- * @param {function} [onChange=() => {}] - Function called when the input value changes.
- * @param {string} [alertText=""] - Text for alert messages.
- * @param {string} [placeholder=""] - Placeholder text for the input.
- * @param {string} [className=""] - Additional CSS classes for styling.
- * @param {string} [defaultValue=""] - Default value for the input.
- * @param {boolean} [isBigHeight=false] - Whether the input has a larger height.
- * @param {boolean} [isSmallHeight=false] - Whether the input has a smaller height.
- * @param {string} [label=""] - Label text for the input.
- * @param {string} [id=null] - Unique ID for the input.
- * @param {string} [value=""] - Value of the input.
- * @param {string} [successAlertText=""] - Text for success alert messages.
- * @param {boolean} [disabled=false] - Whether the input is disabled.
- * @param {function} [onKeyUp=() => {}] - Function called on key up event.
- * @param {boolean} [autoFocus=false] - Whether the input should be autofocused.
- * @param {boolean} [fillWidth=false] - Whether the input should fill the width of its container.
- * @param {boolean} [clearButton=false] - Whether to show a clear button for the input.
- * @param {boolean} [imageBackground=false] - Whether the input has an image background.
- * @param {boolean} [errorEncountered=false] - Whether an error has been encountered for the input.
+ * @param {Object} props - The props object.
+ * @param {string} [props.type="text"] - The type of input (e.g., "text", "number", "email").
+ * @param {string} [props.name=""] - The name of the input field.
+ * @param {function} [props.onChange=() => {}] - Function called when the input value changes.
+ * @param {string} [props.alertText=""] - Text for alert messages.
+ * @param {string} [props.placeholder=""] - Placeholder text for the input.
+ * @param {string} [props.className=""] - Additional CSS classes for styling.
+ * @param {string} [props.defaultValue=""] - Default value for the input.
+ * @param {boolean} [props.isBigHeight=false] - Whether the input has a larger height.
+ * @param {boolean} [props.isSmallHeight=false] - Whether the input has a smaller height.
+ * @param {string} [props.label=""] - Label text for the input.
+ * @param {string} [props.id=null] - Unique ID for the input.
+ * @param {string} [props.value=""] - Value of the input.
+ * @param {string} [props.successAlertText=""] - Text for success alert messages.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled.
+ * @param {function} [props.onKeyUp=() => {}] - Function called on key up event.
+ * @param {boolean} [props.autoFocus=false] - Whether the input should be autofocused.
+ * @param {boolean} [props.fillWidth=false] - Whether the input should fill the width of its container.
+ * @param {boolean} [props.clearButton=false] - Whether to show a clear button for the input.
+ * @param {boolean} [props.imageBackground=false] - Whether the input has an image background.
+ * @param {boolean} [props.errorEncountered=false] - Whether an error has been encountered for the input.
  */
 export const Input = forwardRef(
     (

package/src/{components → ui-kit/components}/atoms/Input/input.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .input {
     position: relative;

package/src/{components → ui-kit/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .loading-dots {
     display: flex;

package/src/{components → ui-kit/components}/atoms/NoticeIcon/NoticeIcon.jsx

@@ -3,19 +3,18 @@ import PropTypes from "prop-types";
 
 import s from "./notice-icon.module.scss";
 
-import { handleClickOutside } from "../../utils/uiUtils.js";
-import { Tooltip } from "../Tooltip/Tooltip.jsx";
+import { handleClickOutside } from "../../../utils/uiUtils.js";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
 import NoticeQuestionIcon from "../../../assets/wrappedImages/noticeQuestionIcon.jsx";
 
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
-
 /**
  * A component that displays a notice icon with optional tooltip.
  *
  * @component
- * @param {string} noticeText - The text to display inside the tooltip.
- * @param {string} [titleNoticeIcon] - The source URL for the icon displayed on the notice.
- * @param {string} tooltipPosition - Position for the tooltip relative to the icon.
+ * @param {Object} props - The props object.
+ * @param {string} props.noticeText - The text to display inside the tooltip.
+ * @param {string} [props.titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} props.tooltipPosition - Position for the tooltip relative to the icon.
  */
 export const NoticeIcon = ({ noticeText, titleNoticeIcon = "", tooltipPosition = TOOLTIP_POSITIONS.TOP }) => {
     const [showTooltip, setShowTooltip] = useState(false);

package/src/{components → ui-kit/components}/atoms/NoticeIcon/notice-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .notice-icon {
     position: relative;

package/src/{components → ui-kit/components}/atoms/QrCode/QrCode.jsx

@@ -1,11 +1,26 @@
 import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
-import { generateQrAndShowInCanvas } from "../../../common/adapters/qrUtils";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
+import { generateQrAndShowInCanvas } from "../../../../common-apis/adapters/qrUtils.js";
 
 import s from "./qr-code.module.scss";
 
+/**
+ * QrCode component renders a QR code for a provided crypto address.
+ *
+ * @component
+ * @example
+ * const address = "0x123456789abcdef";
+ * const fill = true;
+ * return <QrCode address={address} fill={fill} />;
+ *
+ * @param {Object} props - The props for the component.
+ * @param {string} props.address - The crypto address to generate the QR code for.
+ * @param {boolean} [props.fill=false] - If true, applies additional CSS class to fill the container.
+ *
+ * @returns {JSX.Element} A div containing the generated QR code.
+ */
 export const QrCode = ({ address, fill = false }) => {
     const canvasRef = useRef();
 
@@ -31,4 +46,5 @@ QrCode.propTypes = {
 
 QrCode.defaultProps = {
     address: "",
+    fill: false,
 };

package/src/{components → ui-kit/components}/atoms/QrCode/qr-code.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .qr-code {
     width: 180px !important;

package/src/{components → ui-kit/components}/atoms/RateSelector/RateSelector.jsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import s from "./rate-selector.module.scss";
 
+// TODO: [dev] add JSDoc
 export const RateSelector = ({
     isFixed = false,
     setIsFixed = () => {},

package/src/{components → ui-kit/components}/atoms/RateSelector/rate-selector.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .rate-selector {
     background-color: SolidColor("lightsmoke");

package/src/{components → ui-kit/components}/atoms/SupportChat/SupportChat.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 
+// TODO: [dev] add JSDoc
 export const SupportChat = ({ url, websiteToken, welcomeMessage = "", locale = "en" }) => {
     useEffect(() => {
         window.chatwootSettings = {