@rabbitio/ui-kit 1.0.0-beta.7 → 1.0.0-beta.70

package/src/components/organisms/SwapForm/SwapForm.jsx

@@ -0,0 +1,1105 @@
+import { BigNumber } from "bignumber.js";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./swap-form.module.scss";
+
+import { useReferredState } from "../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+
+import { AmountUtils } from "../../../common/amountUtils.js";
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { AmountInput } from "../../molecules/AmountInput/AmountInput.jsx";
+import { Validation } from "../../atoms/Validation/Validation.jsx";
+import { Button } from "../../atoms/buttons/Button/Button.jsx";
+import { Textarea } from "../../atoms/Textarea/Textarea.jsx";
+import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
+
+/**
+ * This is the type definition of a function used inside SwapForm to compose the URL for the hero button.
+ *
+ * @function
+ * @name composeConfirmButtonTo
+ * @param {string} [fromTicker] - Ticker symbol of the asset being sent.
+ * @param {string} [toTicker] - Ticker symbol of the asset being received.
+ * @param {string} [fromAmount] - Amount of the asset being sent.
+ * @return {string} Full URL or relative URL that can be used for <a href="..." />.
+ */
+
+/**
+ * Common click handler without parameters and return value, just your logic execution.
+ *
+ * @function
+ * @name handleClick
+ * @return {void}
+ */
+
+/**
+ * Form executes this function when swap creation info retrieval is finished successfully.
+ *
+ * @function
+ * @name setSwapCreationEstimation
+ * @param {BaseSwapCreationInfo} details - Details of the swap creation estimation.
+ * @return {void}
+ */
+
+/**
+ * Error handler for unexpected errors.
+ *
+ * @function
+ * @name handleUnexpectedError
+ * @param {Error} error - The unexpected error encountered.
+ * @return {void}
+ */
+
+/**
+ * Should implement the logic with rotating assets (if you want "to" to become "from" and "from" to become "to").
+ *
+ * @function
+ * @name rotateAssets
+ * @param {string} sendingAssetTicker - Ticker symbol of the asset being sent.
+ * @param {string} receivingAssetTicker - Ticker symbol of the asset being received.
+ * @return {void}
+ */
+
+/**
+ * Error handler for standard errors that we can recognize.
+ *
+ * @function
+ * @name handleSwapServiceError
+ * @param {string} errorCode - Error code returned as "reason" from your handlers.
+ * @param {function} setValidationContent - Function to set the validation error message on the form.
+ * @param {function} setBalanceValid - Function to set the balance validity, accepts a boolean.
+ * @param {function} setMinimalAmountValid - Function to set the minimal amount validity, accepts a boolean.
+ * @param {function} setMaximumAmountValid - Function to set the maximum amount validity, accepts a boolean.
+ * @param {function} setIsPairSupported - Function to set the pair support status, accepts a boolean.
+ * @param {function} setIsSameCoins - Function to set the status if the same coins are used, accepts a boolean.
+ * @return {void}
+ */
+
+/**
+ * Handler for the confirm button click. You should implement errors handling inside it.
+ *
+ * @function
+ * @name handleConfirmButtonClick
+ * @param {function} resetButtonLoader - callback resetting the confirm button loader
+ * @param {function} setValidationContent - Function to set the validation error message on the form.
+ * @param {function} setBalanceValid - Function to set the balance validity, accepts a boolean.
+ * @param {function} setMinimalAmountValid - Function to set the minimal amount validity, accepts a boolean.
+ * @param {function} setMaximumAmountValid - Function to set the maximum amount validity, accepts a boolean.
+ * @param {function} setIsPairSupported - Function to set the pair support status, accepts a boolean.
+ * @param {function} setIsSameCoins - Function to set the status if the same coins are used, accepts a boolean.
+ * @return {void}
+ */
+
+/**
+ * Async function that retrieves swap creation info by given params.
+ *
+ * @function
+ * @name retrieveSwapDetails
+ * @param {string} sendingAssetTicker - Ticker symbol of the asset being sent.
+ * @param {string} receivingAssetTicker - Ticker symbol of the asset being received.
+ * @param {string} amount - Amount of the asset to be swapped.
+ * @param {boolean} [isSwapAll=false] - Indicates if the swap should use all available balance.
+ * @return {Promise<{
+ *             result: false,
+ *             reason: string,
+ *             min: (string|null),
+ *             max: (string|null),
+ *             rate: (string|undefined),
+ *             fiatMin: (number|null),
+ *             fiatMax: (number|null)
+ *         }|{
+ *             result: true,
+ *             swapCreationInfo: BaseSwapCreationInfo
+ *         }>}
+ */
+
+/**
+ * Async function that retrieves initial swap details for a pair like whether the pair is available, min/max swappable amounts, etc.
+ *
+ * @function
+ * @name retrieveInitialSwapData
+ * @param {string} sendingAssetTicker - Ticker symbol of the asset being sent.
+ * @param {string} receivingAssetTicker - Ticker symbol of the asset being received.
+ * @return {Promise<{
+ *             result: true,
+ *             min: string,
+ *             fiatMin: (number|null),
+ *             max: string,
+ *             fiatMax: (number|null),
+ *             rate: (string|null)
+ *         }|{
+ *             result: false,
+ *             reason: string
+ *         }>}
+ */
+
+/**
+ * Swap form provides basic functionality for entering to/from amounts both in crypto and fiat, switching assets,
+ * selecting assets, showing balance for assets. It gracefully handles unavailable fiat rates and can work
+ * both with and without a wallet environment (without balances).
+ *
+ * @param {object} props - Props object for SwapForm component.
+ * @param {string} props.sendingAssetTicker - Rabbit format of the ticker symbol for the asset being sent.
+ * @param {string} props.receivingAssetTicker - Rabbit format of the ticker symbol for the asset being received.
+ * @param {number} [props.sendingAssetDecimalCount=AmountUtils.significantDecimalCount] - Decimal count for the sending asset.
+ * @param {number} [props.receivingAssetDecimalCount=AmountUtils.significantDecimalCount] - Decimal count for the receiving asset.
+ * @param {string} props.sendingAssetTickerPrintable - Standard ticker symbol for the sending asset.
+ * @param {string} props.receivingAssetTickerPrintable - Standard ticker symbol for the receiving asset.
+ * @param {string} [props.sendingAssetProtocol] - Protocol name to be displayed in text on the change asset button.
+ * @param {string} [props.receivingAssetProtocol] - Protocol name to be displayed in text on the change asset button.
+ * @param {string} props.sendingAssetIconSrc - Source URL for the sending asset icon.
+ * @param {string} [props.sendingAssetProtocolIconSrc=null] - Optional source URL for the sending asset protocol icon.
+ * @param {string} props.receivingAssetIconSrc - Source URL for the receiving asset icon.
+ * @param {string} [props.receivingAssetProtocolIconSrc=null] - Optional source URL for the receiving asset protocol icon.
+ * @param {string} [props.fallBackAssetIconSrc=null] - Optional source URL for a fallback icon used when an icon fails to load.
+ * @param {string} [props.sendingAssetFeeCoinTickerPrintable] - Optional standard ticker symbol for the fee coin of the sending asset.
+ * @param {string} [props.sendingAssetBalance] - Balance of the sending asset.
+ * @param {string} [props.receivingAssetBalance] - Balance of the receiving asset.
+ * @param {handleClick} props.handleChangeSendingAssetClick - Function to handle clicking on the change sending asset button.
+ * @param {handleClick} props.handleChangeReceivingAssetClick - Function to handle clicking on the change receiving asset button.
+ * @param {handleConfirmButtonClick} props.handleConfirmButtonClick - Function to handle clicking on the confirm button.
+ * @param {composeConfirmButtonTo} props.composeConfirmButtonTo - Function to compose the URL for the confirm button.
+ * @param {setSwapCreationEstimation} props.setSwapCreationEstimation - Function to set the swap creation estimation.
+ * @param {handleUnexpectedError} props.handleUnexpectedError - Function to handle unexpected errors.
+ * @param {rotateAssets} props.rotateAssets - Function to rotate the assets (swap sending and receiving assets).
+ * @param {string} [props.preservedAmount=null] - Amount to be preserved.
+ * @param {handleSwapServiceError} props.handleSwapServiceError - Function to handle standard errors that we can recognize.
+ * @param {boolean} [props.formHasBalance] - Indicates if the form has balance information.
+ * @param {retrieveSwapDetails} props.retrieveSwapDetails - Function to retrieve swap details based on the given parameters.
+ * @param {retrieveInitialSwapData} props.retrieveInitialSwapData - Function to retrieve initial swap data for a given pair of assets.
+ * @param {number} props.triggerDataUpdateResetting - Number to reset interval updating the data periodically.
+ * @param {React.Ref} props.fromAssetSelectionButtonRef - Reference to the from asset selection button.
+ * @param {React.Ref} props.toAssetSelectionButtonRef - Reference to the to asset selection button.
+ * @param {number|string} [props.sendingAssetToFiatRate] - Rate for converting the sending asset to fiat.
+ * @param {number|string} [props.receivingAssetToFiatRate] - Rate for converting the receiving asset to fiat.
+ * @param {string} [props.fiatCurrencyCode] - Code for the fiat currency.
+ * @param {number} [props.fiatCurrencyDecimals] - Decimal places for the fiat currency.
+ * @param {boolean} [props.formHasFiat] - Indicates if the form supports fiat currency.
+ * @param {string|null} [props.termsOfUseUrl] - Terms of use URL, shown only if both terms & privacy policy passed.
+ * @param {string|null} [props.privacyPolicyUrl] - Privacy policy of use URL, shown only if both terms & privacy policy passed.
+ * @param {object} [props.translations] - Object containing translations, default English texts will be used if omitted.
+ * @param {string} props.swapSeparatorIconSrc - Source URL for the swap separator icon.
+ * @param {boolean} props.swapButtonAlwaysActive - Setting that allows the form state to proceed to the next step regardless of validity.
+ * @return {JSX.Element} Rendered SwapForm component.
+ * @constructor
+ */
+export const SwapForm = ({
+    sendingAssetTicker,
+    receivingAssetTicker,
+    sendingAssetDecimalCount = AmountUtils.significantDecimalCount,
+    receivingAssetDecimalCount = AmountUtils.significantDecimalCount,
+    sendingAssetTickerPrintable,
+    receivingAssetTickerPrintable,
+    sendingAssetProtocol,
+    receivingAssetProtocol,
+    sendingAssetIconSrc,
+    sendingAssetProtocolIconSrc = null,
+    receivingAssetIconSrc,
+    receivingAssetProtocolIconSrc = null,
+    fallBackAssetIconSrc = null,
+    sendingAssetFeeCoinTickerPrintable,
+    sendingAssetBalance,
+    receivingAssetBalance,
+    handleChangeSendingAssetClick,
+    handleChangeReceivingAssetClick,
+    handleConfirmButtonClick = (
+        resetButtonLoader,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
+    composeConfirmButtonTo = (fromTicker, toTicker, fromAmount) => "",
+    setSwapCreationEstimation = details => {},
+    handleUnexpectedError = error => {},
+    rotateAssets = (fromTicker, toTicker) => {},
+    preservedAmount = null,
+    handleSwapServiceError = (
+        errorCode,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
+    formHasBalance = false,
+    retrieveSwapDetails = async (sendingAssetTicker, receivingAssetTicker, amount, isSwapAll = false) => {},
+    retrieveInitialSwapData = async (sendingAssetTicker, receivingAssetTicker) => {},
+    triggerDataUpdateResetting = 0,
+    fromAssetSelectionButtonRef = null,
+    toAssetSelectionButtonRef = null,
+    sendingAssetToFiatRate = null,
+    receivingAssetToFiatRate = null,
+    fiatCurrencyCode = null,
+    fiatCurrencyDecimals = null,
+    formHasFiat = true,
+    termsOfUseUrl = null,
+    privacyPolicyUrl = null,
+    translations = {
+        swapAllButtonTitles: {
+            enable: "Swap all",
+            cancel: "Cancel",
+        },
+        input: {
+            fiatPlaceholder: "Enter fiat amount",
+            balanceLoaderText: "Loading balance...",
+        },
+        consents: {
+            consentText: 'By clicking "Swap" you agree with Rabbit Swap\'s',
+            termsOfUse: "Terms of Use",
+            and: "and",
+            privacyPolicy: "Privacy Policy",
+        },
+        informationBlock: {
+            minimumAmount: "Minimal amount: ",
+            maximumAmount: "Maximum amount: ",
+            transactionFee: "Network fee: ",
+            calculatingNetworkFee: "Calculating network fee..",
+            loadingMinimalAmount: "Loading minimal amount..",
+            swapRate: "Rate: ",
+            calculatingSwapRates: "Calculating swap rates..",
+            pairNotAvailable: "Pair is not available now. Please, try again later or choose another pair.",
+        },
+        addressFields: {
+            addressTitle: "Recepient address",
+            extraIdTitle: "Extra ID (optional)",
+            extraIdPlaceholder: "Example: ABC123",
+            extraIdNotice:
+                "Please check if your recipient address requires a 'Memo' or 'Destination Tag' - sometimes called a tag, ID, label, or a note. Exchanges may require such ID for the deposit. Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
+        },
+        rateSelector: {
+            floatingRate: "Floating rate",
+            fixedRate: "Fixed rate",
+        },
+        confirmButtonText: "Swap",
+    },
+    swapSeparatorIconSrc,
+    swapButtonAlwaysActive = false,
+    recepientAddress,
+    recepientAddressExtraId,
+    recepientAddressValid = true,
+    recepientAddressExtraIdValid = true,
+    setRecepientAddress,
+    setRecepientAddressExtraId,
+    recepientAddressExtraIdAvailable = false,
+    displayRateSelector = false,
+}) => {
+    const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
+    const IS_FIXED_BY_DEFAULT = false;
+
+    // Updating the states below will insert the new value into the send or receive input field
+    const [updateSendInputTo, setUpdateSendInputTo] = useState(preservedAmount ?? null);
+    const [updateReceiveInputTo, setUpdateReceiveInputTo] = useState(null);
+
+    const [sendAssetAmount, setSendAssetAmount] = useReferredState(
+        preservedAmount == null || preservedAmount === "" ? null : preservedAmount
+    );
+
+    const [swapRate, setSwapRate] = useState();
+    const [minimalAmount, setMinimalAmount] = useReferredState(null);
+    const [maximumAmount, setMaximumAmount] = useReferredState(null);
+    const [validationContent, setValidationContent] = useState();
+
+    const [minimalAmountValid, setMinimalAmountValid] = useState(true); // Whether the amount is above the minimal amount
+    const [maximumAmountValid, setMaximumAmountValid] = useState(true);
+    const [isPairSupported, setIsPairSupported] = useState(true);
+    const [isSameCoins, setIsSameCoins] = useState(false);
+    const [isSwapCalculated, setIsSwapCalculated] = useState(false);
+    const [readyToSwap, setReadyToSwap] = useState(false); // Basically a param that enables/disables the "Next" button
+    // TODO: [refactoring, moderate] instead of handling preservedAmount at a lot of cases below, just
+    //       write single useEffect setting sendAssetAmount to the=is passed value and simplify the logic below. task_id=6453251e49b04c5e88a3cc771479ffb5
+    const [isAmountZero, setIsAmountZero] = useState(preservedAmount == null || String(preservedAmount) === "0");
+    const [isLoading, setIsLoading] = useReferredState(false); // Whether the form is in the progress of loading some data (new rates, for example)
+    const [isAddressFieldEnabled, setIsAddressFieldEnabled] = useState(false);
+    const [isFixedRate, setIsFixedRate] = useReferredState(null);
+
+    const [confirmButtonTo, setConfirmButtonTo] = useState(
+        composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)
+    );
+
+    const [transactionFee, setTransactionFee] = useState();
+    const [balanceValid, setBalanceValid] = useState(true); // Whether the amount is less than total balance
+    const [isSwapAll, setIsSwapAll] = useReferredState(null);
+    const [swapAllButtonLoaderReSetter, setSwapAllButtonLoaderReSetter] = useState([]);
+
+    const [dataUpdateTimeoutId, setDataUpdateTimeoutId] = useReferredState(null);
+    const [idleDataUpdateTimeoutId, setIdleDataUpdateTimeoutId] = useReferredState(null);
+
+    const callHandlingErrors = useCallHandlingErrors();
+
+    const recalculationDelayOnTyping = 1000;
+
+    const handleSendAssetAmountChange = amount => {
+        if (amount != null && amount !== "") {
+            setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
+        } else {
+            setUpdateReceiveInputTo("");
+        }
+        setSendAssetAmount(amount);
+    };
+
+    const handleReceiveAssetAmountChange = amount => {
+        let sendAssetAmount = "";
+        if (amount != null && amount !== "") {
+            sendAssetAmount = AmountUtils.trim(BigNumber(amount).div(swapRate), sendingAssetDecimalCount);
+        }
+        setUpdateSendInputTo(sendAssetAmount);
+        setSendAssetAmount(sendAssetAmount);
+    };
+
+    const handleMinimalAmountClick = () => {
+        if (!minimalAmount.current) return;
+
+        setUpdateSendInputTo(minimalAmount.current?.crypto);
+        handleSendAssetAmountChange(minimalAmount.current?.crypto);
+    };
+
+    const handleMaximumAmountClick = () => {
+        if (!maximumAmount.current) return;
+
+        setUpdateSendInputTo(maximumAmount.current?.crypto);
+        handleSendAssetAmountChange(maximumAmount.current?.crypto);
+    };
+
+    const handleSwapAllClick = resetButtonLoader => {
+        setIsSwapAll(prev => {
+            if (prev) {
+                // Setting amount inputs to empty string if we are handling the disabling of previously enabled swap all
+                setUpdateSendInputTo("");
+                setUpdateReceiveInputTo("");
+                setSendAssetAmount(null);
+            }
+            return !prev;
+        });
+        setSwapAllButtonLoaderReSetter([resetButtonLoader]);
+    };
+
+    const processMinMaxAmounts = amount => {
+        if (amount === null) return;
+
+        setMaximumAmountValid(
+            !maximumAmount.current || BigNumber(amount).eq("0") || BigNumber(amount).lte(maximumAmount.current.crypto)
+        );
+        setMinimalAmountValid(
+            !minimalAmount.current || BigNumber(amount).eq("0") || BigNumber(amount).gte(minimalAmount.current?.crypto)
+        );
+    };
+
+    const requestDataRefresh = (amount, immediately = false, isSwapAll = false) => {
+        try {
+            clearTimeout(dataUpdateTimeoutId.current);
+
+            if (isSwapAll) {
+                loadFullEstimation(null);
+                return;
+            }
+
+            if (!amount) {
+                return;
+            }
+
+            if (BigNumber(amount).eq("0")) {
+                if (immediately) {
+                    loadMinimalAmountAndSwapRate(true);
+                } else {
+                    setDataUpdateTimeoutId(
+                        setTimeout(() => loadMinimalAmountAndSwapRate(true), recalculationDelayOnTyping)
+                    );
+                }
+            } else {
+                if (immediately) {
+                    loadFullEstimation(amount, preservedAmount && String(preservedAmount) !== "0" ? true : undefined);
+                } else {
+                    setDataUpdateTimeoutId(setTimeout(() => loadFullEstimation(amount), recalculationDelayOnTyping));
+                }
+            }
+        } catch (e) {
+            handleUnexpectedError(e);
+        }
+    };
+
+    const setAmountLimitsAndRate = details => {
+        setSwapRate(details?.rate ?? null);
+        setMinimalAmount(details.min == null ? null : { crypto: details.min, fiat: details.fiatMin });
+        setMaximumAmount(details.max == null ? null : { crypto: details.max, fiat: details.fiatMax });
+        if (details.feeCoins != null) {
+            setTransactionFee({
+                crypto: details.feeCoins,
+                fiat: details.feeFiat,
+            });
+        } else {
+            setTransactionFee(null);
+        }
+    };
+
+    const loadFullEstimation = (amount, isForPreserved = false) => {
+        (async () => {
+            try {
+                const dataMemento = {
+                    rate: swapRate,
+                    min: minimalAmount.current?.crypto,
+                    max: maximumAmount.current?.crypto,
+                    feeCoins: transactionFee?.crypto,
+                    feeFiat: transactionFee?.fiat,
+                };
+                setIsLoading(true);
+                setMinimalAmount(null);
+                setMaximumAmount(null);
+                setTransactionFee(null);
+                setValidationContent(null);
+                setSwapCreationEstimation(null);
+                setIsSameCoins(false);
+                setIsPairSupported(true);
+                setIsSwapCalculated(false);
+
+                const response = await retrieveSwapDetails(
+                    sendingAssetTicker,
+                    receivingAssetTicker,
+                    amount,
+                    isSwapAll.current,
+                    isFixedRate.current ?? IS_FIXED_BY_DEFAULT
+                );
+
+                if (
+                    !isSwapAll.current &&
+                    String(amount) !==
+                        String(
+                            isForPreserved && sendAssetAmount.current == null
+                                ? preservedAmount
+                                : sendAssetAmount.current
+                        )
+                ) {
+                    // Means amount changed and we no more need to do this exact calculation
+                    return;
+                }
+
+                if (response.result) {
+                    const swapCreationInfo = response.swapCreationInfo;
+
+                    setUpdateSendInputTo(swapCreationInfo.fromAmountCoins);
+                    setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
+
+                    if (isSwapAll.current) {
+                        setIsAmountZero(BigNumber("0").eq(swapCreationInfo.fromAmountCoins));
+                    }
+
+                    setAmountLimitsAndRate(swapCreationInfo);
+                    setSwapCreationEstimation(swapCreationInfo);
+                    processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
+                    setIsSwapCalculated(true);
+                } else {
+                    handleSwapServiceError(
+                        response.reason,
+                        setValidationContent,
+                        setBalanceValid,
+                        setMinimalAmountValid,
+                        setMaximumAmountValid,
+                        setIsPairSupported,
+                        setIsSameCoins
+                    );
+                    if (isSwapAll.current) {
+                        /* We disable swap all if swap all details retrieval fails and set
+                         * previous limits and rate. We set null to avoid triggering reloading of initial data.
+                         */
+                        setIsSwapAll(null);
+                        setAmountLimitsAndRate(dataMemento);
+                    } else {
+                        /* We set returned amount limits and rate only if the failed details retrieval is not
+                         * for the swap All case.
+                         */
+                        setAmountLimitsAndRate(response);
+                    }
+                }
+                setIsLoading(false);
+            } catch (e) {
+                handleUnexpectedError(e);
+            }
+        })();
+    };
+
+    const loadMinimalAmountAndSwapRate = (isCalledForClearedInput = false) => {
+        (async () => {
+            try {
+                setIsLoading(true);
+                setMinimalAmount(null);
+                setMaximumAmount(null);
+                setSwapRate(null);
+                setValidationContent(null);
+                setIsPairSupported(true);
+                setIsSwapCalculated(false);
+
+                const swapData = await retrieveInitialSwapData(sendingAssetTicker, receivingAssetTicker);
+
+                if (sendAssetAmount.current != null && !isCalledForClearedInput) {
+                    // Means user already entered amount after starting the form initialization
+                    return;
+                }
+
+                if (swapData.result === true) {
+                    setAmountLimitsAndRate(swapData);
+                } else {
+                    handleSwapServiceError(
+                        swapData.reason,
+                        setValidationContent,
+                        setBalanceValid,
+                        setMinimalAmountValid,
+                        setMaximumAmountValid,
+                        setIsPairSupported,
+                        setIsSameCoins
+                    );
+                }
+
+                setIsLoading(false);
+            } catch (e) {
+                handleUnexpectedError(e);
+            }
+        })();
+    };
+
+    const handleChangeAssetsIconClick = e => {
+        callHandlingErrors(() => {
+            if (!isLoading.current) {
+                setIsSwapAll(null);
+                setMaximumAmountValid(true);
+                setMinimalAmountValid(true);
+                rotateAssets(sendingAssetTicker, receivingAssetTicker);
+            }
+        }, e);
+    };
+
+    const handleRateModeChanged = isFixed => {
+        setIsFixedRate(isFixed);
+        requestDataRefresh(sendAssetAmount.current, true);
+    };
+
+    useEffect(() => {
+        if (isSwapAll.current === true) {
+            requestDataRefresh(undefined, true, true);
+        } else if (isSwapAll.current === false) {
+            loadMinimalAmountAndSwapRate();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSwapAll.current]);
+
+    useEffect(() => {
+        setConfirmButtonTo(
+            composeConfirmButtonTo(
+                sendingAssetTicker,
+                receivingAssetTicker,
+                sendAssetAmount.current || preservedAmount || null
+            )
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendingAssetTicker, receivingAssetTicker]);
+
+    useEffect(() => {
+        if (!sendingAssetTicker || !receivingAssetTicker) return;
+
+        const isCurrentAmountNotZero = sendAssetAmount.current && !BigNumber("0").eq(sendAssetAmount.current);
+        const isPreservedAmountNotZero = preservedAmount && !BigNumber("0").eq(preservedAmount);
+        if (isCurrentAmountNotZero) {
+            loadFullEstimation(sendAssetAmount.current);
+        } else if (isPreservedAmountNotZero) {
+            loadFullEstimation(preservedAmount, true);
+        } else {
+            loadMinimalAmountAndSwapRate();
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendingAssetTicker, receivingAssetTicker]);
+
+    useEffect(() => {
+        if (!minimalAmountValid || isAmountZero) {
+            setTransactionFee(null);
+        }
+        if (isAmountZero) {
+            clearTimeout(dataUpdateTimeoutId.current);
+        }
+
+        setReadyToSwap(
+            swapButtonAlwaysActive ||
+                ((balanceValid || !formHasBalance) &&
+                    minimalAmountValid &&
+                    !isAmountZero &&
+                    isSwapCalculated &&
+                    (!isSameCoins || !formHasBalance) &&
+                    isPairSupported &&
+                    (!isAddressFieldEnabled || recepientAddressValid))
+        );
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        balanceValid,
+        formHasBalance,
+        minimalAmountValid,
+        isAmountZero,
+        isSwapCalculated,
+        isSameCoins,
+        isPairSupported,
+        isAddressFieldEnabled,
+        recepientAddressValid,
+    ]);
+
+    useEffect(() => {
+        // Here we set up auto recalculations for the swap details if the form is ready to swap but is idle for some time
+        let timeoutId = null;
+        if (readyToSwap) {
+            timeoutId = setTimeout(
+                () => requestDataRefresh(sendAssetAmount.current ?? preservedAmount, true),
+                DETAIL_REFRESH_INTERVAL_MS
+            );
+            setIdleDataUpdateTimeoutId(timeoutId);
+        } else {
+            clearTimeout(idleDataUpdateTimeoutId.current);
+            setIdleDataUpdateTimeoutId(null);
+        }
+        return () => {
+            timeoutId != null && clearTimeout(timeoutId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [readyToSwap]);
+
+    // TODO: [refactoring, critical] this code looks like a hack related to task_id=6e328d39063142b7b9fa01d497e616da
+    useEffect(() => {
+        if (triggerDataUpdateResetting) {
+            clearTimeout(dataUpdateTimeoutId.current);
+            setDataUpdateTimeoutId(null);
+
+            clearTimeout(idleDataUpdateTimeoutId.current);
+            setIdleDataUpdateTimeoutId(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [triggerDataUpdateResetting]);
+
+    // Resets the passed "set value to" param to null, so it can be used multiple times with any value
+    useEffect(() => {
+        if (!!updateSendInputTo) setUpdateSendInputTo(null);
+        if (!!updateReceiveInputTo) setUpdateReceiveInputTo(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [updateSendInputTo, updateReceiveInputTo]);
+
+    useEffect(() => {
+        if (swapRate != null && sendAssetAmount.current != null) {
+            setUpdateReceiveInputTo(
+                AmountUtils.trim(BigNumber(sendAssetAmount.current).times(swapRate), receivingAssetDecimalCount)
+            );
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [swapRate]);
+
+    useEffect(() => {
+        if (isLoading.current === false && swapAllButtonLoaderReSetter?.length) {
+            swapAllButtonLoaderReSetter[0]();
+            setSwapAllButtonLoaderReSetter([]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoading.current, swapAllButtonLoaderReSetter]);
+
+    // Handlers upon changing the asset amount
+    useEffect(() => {
+        setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current));
+
+        if (sendAssetAmount.current == null) return;
+        let processingAmount = sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
+        requestDataRefresh(processingAmount);
+        processMinMaxAmounts(processingAmount);
+        setIsAmountZero(BigNumber("0").eq(processingAmount));
+        setIsSwapCalculated(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendAssetAmount.current]);
+
+    // Checking if all necessary props for address input are passed properly.
+    useEffect(() => {
+        setIsAddressFieldEnabled(
+            recepientAddress !== undefined &&
+                recepientAddressExtraId !== undefined &&
+                recepientAddressValid !== undefined &&
+                setRecepientAddress !== undefined &&
+                typeof setRecepientAddress === "function" &&
+                setRecepientAddressExtraId !== undefined &&
+                typeof setRecepientAddressExtraId === "function"
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        recepientAddress,
+        recepientAddressExtraId,
+        recepientAddressValid,
+        recepientAddressExtraIdValid,
+        setRecepientAddress,
+        setRecepientAddressExtraId,
+    ]);
+
+    return (
+        <div className={s["swap-form"]}>
+            <TitleBox
+                linkButtonClick={
+                    BigNumber(sendingAssetBalance?.assetAmount).eq(0)
+                        ? null
+                        : resetButtonLoader => handleSwapAllClick(resetButtonLoader)
+                }
+                linkText={
+                    !formHasBalance
+                        ? ""
+                        : isSwapAll.current
+                          ? translations.swapAllButtonTitles.cancel
+                          : translations.swapAllButtonTitles.enable
+                }
+                linkButtonLoader={true}
+                isLinkButtonDisabled={
+                    isLoading.current ||
+                    sendingAssetTicker === receivingAssetTicker ||
+                    BigNumber(sendingAssetBalance?.assetAmount).eq(0)
+                }
+            >
+                <div className={s["swap-form-inputs"]}>
+                    <AmountInput
+                        ticker={sendingAssetTicker}
+                        tickerPrintable={sendingAssetTickerPrintable}
+                        assetDecimalPlaces={sendingAssetDecimalCount}
+                        assetBalance={sendingAssetBalance}
+                        assetIconSrc={sendingAssetIconSrc}
+                        assetIconProtocolSrc={sendingAssetProtocolIconSrc}
+                        fallbackAssetIconSrc={fallBackAssetIconSrc}
+                        disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
+                        handleCoinAmountChange={handleSendAssetAmountChange}
+                        handleChangeAssetClick={handleChangeSendingAssetClick}
+                        handleBalanceValidationChange={isValid => setBalanceValid(!isValid)}
+                        updateAssetInputTo={updateSendInputTo}
+                        showBalance={formHasBalance}
+                        showBalanceValidation={formHasBalance}
+                        showChangeAssetButton
+                        changeAssetButtonProtocol={sendingAssetProtocol}
+                        upperFormPosition
+                        errorEncountered={!minimalAmountValid}
+                        ref={fromAssetSelectionButtonRef}
+                        isLoading={false}
+                        cryptoAssetToFiatRate={sendingAssetToFiatRate}
+                        fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
+                        fiatCurrencyDecimals={fiatCurrencyDecimals}
+                        balanceLoaderText={translations.input.balanceLoaderText}
+                        fiatInputPlaceholderText={translations.input.fiatPlaceholder}
+                    />
+                    <div
+                        className={
+                            s["swap-form-inputs-separator"] +
+                            " " +
+                            (isLoading.current || sendingAssetTicker === null || receivingAssetTicker === null
+                                ? s["disabled"]
+                                : "")
+                        }
+                    >
+                        <img
+                            src={swapSeparatorIconSrc}
+                            alt="swap icon"
+                            draggable={false}
+                            onClick={e => callHandlingErrors(handleChangeAssetsIconClick, e)}
+                        />
+                    </div>
+                    <AmountInput
+                        ticker={receivingAssetTicker}
+                        tickerPrintable={receivingAssetTickerPrintable}
+                        assetDecimalPlaces={receivingAssetDecimalCount}
+                        assetBalance={receivingAssetBalance}
+                        assetIconSrc={receivingAssetIconSrc}
+                        assetIconProtocolSrc={receivingAssetProtocolIconSrc}
+                        fallbackAssetIconSrc={fallBackAssetIconSrc}
+                        disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
+                        locked={!formHasBalance}
+                        handleCoinAmountChange={handleReceiveAssetAmountChange}
+                        handleChangeAssetClick={handleChangeReceivingAssetClick}
+                        updateAssetInputTo={updateReceiveInputTo}
+                        showChangeAssetButton
+                        changeAssetButtonProtocol={receivingAssetProtocol}
+                        showBalance={formHasBalance}
+                        lowerFormPosition
+                        estimateAmount={!isFixedRate.current}
+                        ref={toAssetSelectionButtonRef}
+                        isLoading={isLoading.current}
+                        cryptoAssetToFiatRate={receivingAssetToFiatRate}
+                        fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
+                        fiatCurrencyDecimals={fiatCurrencyDecimals}
+                        balanceLoaderText={translations.input.balanceLoaderText}
+                        fiatInputPlaceholderText={translations.input.fiatPlaceholder}
+                    />
+                </div>
+                <div className={s["swap-form-information-field"]}>
+                    {/* TODO: [refactoring, moderate] Add flags calculation for each message to avoid this ugly cumbersome implicit unclear logic of message displaying. task_id=8bc31dbcd94d46a598346e8bfb505971 */}
+                    <p>
+                        {!isPairSupported ? (
+                            translations.informationBlock.pairNotAvailable
+                        ) : transactionFee && minimalAmountValid ? (
+                            <>
+                                {translations.informationBlock.transactionFee}
+                                <span>
+                                    {AmountUtils.crypto(transactionFee?.crypto, sendingAssetFeeCoinTickerPrintable)}
+                                </span>
+                                {transactionFee?.fiat != null && transactionFee?.fiat !== "" ? (
+                                    <span className={s["semi-transparent"]}>
+                                        {" ~ " + AmountUtils.fiat(transactionFee?.fiat, fiatCurrencyCode)}
+                                    </span>
+                                ) : (
+                                    ""
+                                )}
+                            </>
+                        ) : !isLoading.current && (isSwapCalculated || (!minimalAmount.current && swapRate)) ? (
+                            <>
+                                {translations.informationBlock.swapRate}
+                                <span>
+                                    {AmountUtils.composeRateText(
+                                        sendingAssetTickerPrintable,
+                                        receivingAssetTickerPrintable,
+                                        swapRate,
+                                        receivingAssetDecimalCount,
+                                        isFixedRate.current ?? IS_FIXED_BY_DEFAULT
+                                    )}
+                                </span>
+                            </>
+                        ) : minimalAmount.current || maximumAmount.current ? (
+                            !maximumAmountValid && maximumAmount.current != null ? (
+                                <>
+                                    {translations.informationBlock.maximumAmount}
+                                    <span
+                                        className={s["interactable"] + " " + s["red"]}
+                                        onClick={
+                                            isLoading.current
+                                                ? () => {}
+                                                : e => callHandlingErrors(handleMaximumAmountClick, e)
+                                        }
+                                    >
+                                        {AmountUtils.crypto(maximumAmount.current?.crypto, sendingAssetTickerPrintable)}
+                                    </span>
+                                    {maximumAmount.current?.fiat != null && maximumAmount.current?.fiat !== "" ? (
+                                        <span className={s["semi-transparent"]}>
+                                            {" ~ " + AmountUtils.fiat(maximumAmount.current.fiat, fiatCurrencyCode)}
+                                        </span>
+                                    ) : (
+                                        ""
+                                    )}
+                                </>
+                            ) : (
+                                <>
+                                    {translations.informationBlock.minimumAmount}
+                                    <span
+                                        className={s["interactable"] + " " + (!minimalAmountValid ? s["red"] : "")}
+                                        onClick={
+                                            isLoading.current
+                                                ? () => {}
+                                                : e => callHandlingErrors(handleMinimalAmountClick, e)
+                                        }
+                                    >
+                                        {AmountUtils.crypto(minimalAmount.current.crypto, sendingAssetTickerPrintable)}
+                                    </span>
+                                    {minimalAmount.current?.fiat != null && minimalAmount.current.fiat !== "" ? (
+                                        <span className={s["semi-transparent"]}>
+                                            {" ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)}
+                                        </span>
+                                    ) : (
+                                        ""
+                                    )}
+                                </>
+                            )
+                        ) : isLoading.current ? (
+                            sendAssetAmount.current || isSwapAll.current ? (
+                                translations.informationBlock[
+                                    formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"
+                                ]
+                            ) : (
+                                translations.informationBlock.loadingMinimalAmount
+                            )
+                        ) : (
+                            ""
+                        )}
+                    </p>
+                </div>
+
+                {isAddressFieldEnabled ? (
+                    <div className={s["swap-form-address-field"]}>
+                        <TitleBox title={translations.addressFields.addressTitle}>
+                            <Textarea
+                                type={"text"}
+                                onChange={e => setRecepientAddress(e.target.value)}
+                                value={recepientAddress}
+                                adaptiveHeight={true}
+                                errorEncountered={!recepientAddressValid && recepientAddress !== ""}
+                            />
+                        </TitleBox>
+                        {recepientAddressExtraIdAvailable ? (
+                            <TitleBox
+                                title={translations.addressFields.extraIdTitle}
+                                titleNoticeText={translations.addressFields.extraIdNotice}
+                                titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
+                            >
+                                <Textarea
+                                    type={"text"}
+                                    onChange={e => setRecepientAddressExtraId(e.target.value)}
+                                    value={recepientAddressExtraId}
+                                    adaptiveHeight={true}
+                                    errorEncountered={!recepientAddressExtraIdValid}
+                                    placeholder={translations.addressFields.extraIdPlaceholder}
+                                />
+                            </TitleBox>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                ) : (
+                    ""
+                )}
+
+                {displayRateSelector ? (
+                    <div className={s["swap-form-rate-selector"]}>
+                        <RateSelector
+                            isFixed={isFixedRate.current ?? IS_FIXED_BY_DEFAULT}
+                            setIsFixed={!isLoading.current ? handleRateModeChanged : () => {}}
+                            translations={translations.rateSelector}
+                        />
+                    </div>
+                ) : (
+                    ""
+                )}
+
+                {validationContent ? (
+                    <div className={s["swap-form-validation-text"]}>
+                        <Validation text={validationContent} />
+                    </div>
+                ) : (
+                    ""
+                )}
+                <div className={s["swap-form-button-container"]}>
+                    {!termsOfUseUrl || !privacyPolicyUrl ? null : (
+                        <p className={s["swap-form-button-container-consent-text"]}>
+                            {translations.consents.consentText + " "}
+                            <a
+                                href={termsOfUseUrl}
+                                className={s["swap-form-button-container-consent-text-link"]}
+                                target="_blank"
+                            >
+                                {translations.consents.termsOfUse}
+                            </a>
+                            {" " + translations.consents.and + " "}
+                            <a
+                                href={privacyPolicyUrl}
+                                className={s["swap-form-button-container-consent-text-link"]}
+                                target="_blank"
+                            >
+                                {translations.consents.privacyPolicy}
+                            </a>
+                            .
+                        </p>
+                    )}
+                    <Button
+                        size="lg"
+                        mode="primary"
+                        content={translations.confirmButtonText}
+                        onClick={resetButtonLoader =>
+                            handleConfirmButtonClick(
+                                resetButtonLoader,
+                                setValidationContent,
+                                setBalanceValid,
+                                setMinimalAmountValid,
+                                setMaximumAmountValid,
+                                setIsPairSupported,
+                                setIsSameCoins
+                            )
+                        }
+                        fullWidthOnMobiles
+                        isDisabled={!readyToSwap}
+                        to={formHasBalance ? "" : confirmButtonTo}
+                        loader
+                        handleError={callHandlingErrors}
+                    />
+                </div>
+            </TitleBox>
+        </div>
+    );
+};
+
+SwapForm.propTypes = {
+    sendingAssetTicker: PropTypes.string.isRequired,
+    receivingAssetTicker: PropTypes.string.isRequired,
+    sendingAssetDecimalCount: PropTypes.number,
+    receivingAssetDecimalCount: PropTypes.number,
+    sendingAssetTickerPrintable: PropTypes.string.isRequired,
+    receivingAssetTickerPrintable: PropTypes.string.isRequired,
+    sendingAssetProtocol: PropTypes.string,
+    receivingAssetProtocol: PropTypes.string,
+    sendingAssetIconSrc: PropTypes.string.isRequired,
+    sendingAssetProtocolIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
+    receivingAssetIconSrc: PropTypes.string.isRequired,
+    receivingAssetProtocolIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
+    fallBackAssetIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
+    sendingAssetFeeCoinTickerPrintable: PropTypes.string,
+    sendingAssetBalance: PropTypes.string,
+    receivingAssetBalance: PropTypes.string,
+    handleChangeSendingAssetClick: PropTypes.func.isRequired,
+    handleChangeReceivingAssetClick: PropTypes.func.isRequired,
+    handleConfirmButtonClick: PropTypes.func,
+    composeConfirmButtonTo: PropTypes.func,
+    setSwapCreationEstimation: PropTypes.func,
+    handleUnexpectedError: PropTypes.func,
+    rotateAssets: PropTypes.func,
+    preservedAmount: PropTypes.oneOfType([PropTypes.string, null]),
+    handleSwapServiceError: PropTypes.func.isRequired,
+    formHasBalance: PropTypes.bool,
+    retrieveSwapDetails: PropTypes.func.isRequired,
+    retrieveInitialSwapData: PropTypes.func.isRequired,
+    triggerDataUpdateResetting: PropTypes.number,
+    fromAssetSelectionButtonRef: PropTypes.any,
+    toAssetSelectionButtonRef: PropTypes.any,
+    sendingAssetToFiatRate: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
+    receivingAssetToFiatRate: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
+    fiatCurrencyCode: PropTypes.oneOfType([PropTypes.string, null]),
+    fiatCurrencyDecimals: PropTypes.oneOfType([PropTypes.number, null]),
+    formHasFiat: PropTypes.bool,
+    translations: PropTypes.object,
+    swapSeparatorIconSrc: PropTypes.string.isRequired,
+    swapButtonAlwaysActive: PropTypes.bool,
+};
+
+SwapForm.defaultProps = {
+    sendingAssetDecimalCount: AmountUtils.significantDecimalCount,
+    receivingAssetDecimalCount: AmountUtils.significantDecimalCount,
+    sendingAssetProtocolIconSrc: null,
+    receivingAssetProtocolIconSrc: null,
+    fallBackAssetIconSrc: null,
+    handleConfirmButtonClick: (
+        resetButtonLoader,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
+    composeConfirmButtonTo: (fromTicker, toTicker, fromAmount) => "",
+    setSwapCreationEstimation: details => {},
+    handleUnexpectedError: error => {},
+    rotateAssets: (fromTicker, toTicker) => {},
+    preservedAmount: null,
+    handleSwapServiceError: (
+        errorCode,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
+    retrieveSwapDetails: async (sendingAssetTicker, receivingAssetTicker, amount, isSwapAll = false) => {},
+    retrieveInitialSwapData: async (sendingAssetTicker, receivingAssetTicker) => {},
+    triggerDataUpdateResetting: 0,
+    fromAssetSelectionButtonRef: null,
+    toAssetSelectionButtonRef: null,
+    sendingAssetToFiatRate: null,
+    receivingAssetToFiatRate: null,
+    fiatCurrencyCode: null,
+    fiatCurrencyDecimals: null,
+    formHasFiat: true,
+    swapButtonAlwaysActive: false,
+};