@rabbitio/ui-kit 1.0.0-beta.45 → 1.0.0-beta.47

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

@@ -0,0 +1,1151 @@
+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";
+
+/**
+ * This is type definition of a function that is used inside SwapForm to compose the URL for hero button.
+ *
+ * @function
+ * @name composeConfirmButtonTo
+ * @param [fromTicker] {string}
+ * @param [toTicker] {string}
+ * @param [fromAmount] {string}
+ * @return {string} full URL or relative URL that can be used for <a href="..." />
+ */
+
+/**
+ * Common click handler without params and return value, just your logic execution.
+ *
+ * @function
+ * @name handleClick
+ * @return {void}
+ */
+
+/**
+ * Form executes this function when swap creation info retrieval is finished successfully.
+ *
+ * @name setSwapCreationEstimation
+ * @function
+ * @param details {BaseSwapCreationInfo}
+ * @return {void}
+ */
+
+/**
+ * Error handler for unexpected errors.
+ *
+ * @name handleUnexpectedError
+ * @function
+ * @param error {Error}
+ * @return {void}
+ */
+
+/**
+ * Should implement the logic with rotating assets (if you want "to" to became "from" and "from" to became "to").
+ *
+ * @function
+ * @name rotateAssets
+ * @param sendingAssetTicker {string}
+ * @param receivingAssetTicker {string}
+ * @return {void}
+ */
+
+/**
+ * Error handler for standard errors that we can recognize.
+ *
+ * @function
+ * @name handleSwapServiceError
+ * @param errorCode {string} error code that is being returned as "reason" from your handlers ...
+ * @param setValidationContent {function} accepts string to be displayed on form as validation error
+ * @param setBalanceValid {function} accepts single boolean parameter
+ * @param setMinimalAmountValid {function} accepts single boolean parameter
+ * @param setMaximumAmountValid {function} accepts single boolean parameter
+ * @param setIsPairSupported {function} accepts single boolean parameter
+ * @param setIsSameCoins {function} accepts single boolean parameter
+ * @return {void}
+ */
+
+/**
+ * Async function that retrieves swap creation info by given params.
+ *
+ * @function
+ * @name retrieveSwapDetails
+ * @param sendingAssetTicker {string}
+ * @param receivingAssetTicker {string}
+ * @param amount {string}
+ * @param [isSwapAll=false] {boolean}
+ * @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 pair like whether the pair is available, min/max swappable amounts etc.
+ *
+ * @function
+ * @name retrieveInitialSwapData
+ * @param sendingAssetTicker {string}
+ * @param receivingAssetTicker {string}
+ * @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 not available fiat rates and can work without wallet environment (without balances).
+ *
+ * @param sendingAssetTicker {string} Rabbit format of ticker
+ * @param receivingAssetTicker {string} Rabbit format of ticker
+ * @param [sendingAssetDecimalCount=AmountUtils.significantDecimalCount] {number}
+ * @param [receivingAssetDecimalCount=AmountUtils.significantDecimalCount] {number}
+ * @param sendingAssetTickerPrintable {string} standard asset ticker
+ * @param receivingAssetTickerPrintable {string} standard asset ticker
+ * @param [sendingAssetProtocol] Protocol name to be displayed in text in the change asset button
+ * @param [receivingAssetProtocol] Protocol name to be displayed in text in the change asset button
+ * @param sendingAssetIconSrc {string} ready to use src
+ * @param [sendingAssetProtocolIconSrc=null] {string} optional ready to use src
+ * @param receivingAssetIconSrc {string} ready to use src
+ * @param [receivingAssetProtocolIconSrc=null] {string} optional ready to use src
+ * @param [fallBackAssetIconSrc=null] {string} optional ready to use src - used when some icon src resolution fails
+ * @param sendingAssetFeeCoinTickerPrintable {string} optional standard ticker for fee coin
+ * @param [sendingAssetBalance] {string}
+ * @param [receivingAssetBalance] {string}
+ * @param handleChangeSendingAssetClick {handleClick}
+ * @param handleChangeReceivingAssetClick {handleClick}
+ * @param handleConfirmButtonClick {handleClick}
+ * @param composeConfirmButtonTo {composeConfirmButtonTo}
+ * @param setSwapCreationEstimation {setSwapCreationEstimation}
+ * @param handleUnexpectedError {handleUnexpectedError}
+ * @param rotateAssets {rotateAssets}
+ * @param [preservedAmount=null] {string}
+ * @param handleSwapServiceError {handleSwapServiceError}
+ * @param [formHasBalance] {boolean}
+ * @param retrieveSwapDetails {retrieveSwapDetails}
+ * @param retrieveInitialSwapData {retrieveInitialSwapData}
+ * @param triggerDataUpdateResetting {number} convey changed number to reset interval updating the data periodically
+ * @param fromAssetSelectionButtonRef {React.Ref}
+ * @param toAssetSelectionButtonRef {React.Ref}
+ * @param [sendingAssetToFiatRate] {number|string}
+ * @param [receivingAssetToFiatRate] {number|string}
+ * @param [fiatCurrencyCode] {string}
+ * @param [fiatCurrencyDecimals] {number}
+ * @param formHasFiat {boolean}
+ * @param [translations] {object} default English texts will be used if the property is omitted
+ * @param swapSeparatorIconSrc {string} ready to use src
+ * @param swapButtonAlwaysActive {boolean} this setting allows to the form state in terms of validity to go
+ *        to the next step. If this setting is set to true then user always can click the hero button
+ * @return {JSX.Element}
+ * @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 = () => {},
+    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,
+    translations = {
+        swapAllButtonTitles: {
+            enable: "Swap all",
+            cancel: "Cancel",
+        },
+        input: {
+            fiatPlaceholder: "Enter fiat amount",
+            balanceLoaderText: "Loading balance...",
+        },
+        consents: {
+            consentTextRate: "Rate varies with the amount.",
+            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.",
+        },
+        confirmButtonText: "Swap",
+    },
+    swapSeparatorIconSrc,
+    swapButtonAlwaysActive = false,
+}) => {
+    const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
+
+    // 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 [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 showConsent = !formHasBalance; // We show TOS&PP consent only when working outside wallet
+
+    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) => {
+        try {
+            clearTimeout(dataUpdateTimeoutId.current);
+
+            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
+                );
+
+                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);
+                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);
+    };
+
+    useEffect(() => {
+        if (isSwapAll.current === true) {
+            requestDataRefresh(undefined, 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)
+        );
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        balanceValid,
+        formHasBalance,
+        minimalAmountValid,
+        isAmountZero,
+        isSwapCalculated,
+        isSameCoins,
+        isPairSupported,
+    ]);
+
+    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]);
+
+    return (
+        <div className={s["swap-dialog-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)
+                }
+                // TODO: texts for copy button
+            >
+                <div className={s["swap-dialog-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-dialog-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
+                        }
+                        handleCoinAmountChange={handleReceiveAssetAmountChange}
+                        handleChangeAssetClick={handleChangeReceivingAssetClick}
+                        updateAssetInputTo={updateReceiveInputTo}
+                        showChangeAssetButton
+                        changeAssetButtonProtocol={receivingAssetProtocol}
+                        showBalance={formHasBalance}
+                        lowerFormPosition
+                        estimateAmount
+                        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-dialog-form-information-field"]}>
+                    <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>
+                                ) : (
+                                    ""
+                                )}
+                            </>
+                        ) : isSwapCalculated ? (
+                            <>
+                                {translations.informationBlock.swapRate}
+                                <span>
+                                    {AmountUtils.composeRateText(
+                                        sendingAssetTickerPrintable,
+                                        receivingAssetTickerPrintable,
+                                        swapRate
+                                    )}
+                                </span>
+                            </>
+                        ) : minimalAmount.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>
+                                    ) : (
+                                        ""
+                                    )}
+                                </>
+                            )
+                        ) : sendAssetAmount.current || isSwapAll.current ? (
+                            translations.informationBlock[
+                                formHasBalance
+                                    ? "calculatingNetworkFee"
+                                    : "calculatingSwapRates"
+                            ]
+                        ) : (
+                            translations.informationBlock.loadingMinimalAmount
+                        )}
+                        {/* TODO: [feature, moderate] add "Please enter the amount you want to swap." */}
+                    </p>
+                </div>
+                {validationContent ? (
+                    <div className={s["swap-dialog-form-validation-text"]}>
+                        <Validation text={validationContent} />
+                    </div>
+                ) : (
+                    ""
+                )}
+                <div className={s["swap-dialog-form-button-container"]}>
+                    {formHasBalance ? null : (
+                        <p
+                            className={
+                                s[
+                                    "swap-dialog-form-button-container-consent-text"
+                                ]
+                            }
+                        >
+                            {translations.consents.consentTextRate}
+                        </p>
+                    )}
+                    {showConsent ? null : (
+                        <p
+                            className={
+                                s[
+                                    "swap-dialog-form-button-container-consent-text"
+                                ]
+                            }
+                        >
+                            {translations.consents.consentText + " "}
+                            <a
+                                // TODO: [dev] fix dox link - pass via property
+                                href="/docs/legal/swap-terms-of-use.html"
+                                className={
+                                    s[
+                                        "swap-dialog-form-button-container-consent-text-link"
+                                    ]
+                                }
+                                target="_blank"
+                            >
+                                {translations.consents.termsOfUse}
+                            </a>
+                            {" " + translations.consents.and + " "}
+                            <a
+                                // TODO: [dev] fix dox link - pass via property
+                                href="/docs/legal/swap-privacy-policy.html"
+                                className={
+                                    s[
+                                        "swap-dialog-form-button-container-consent-text-link"
+                                    ]
+                                }
+                                target="_blank"
+                            >
+                                {translations.consents.privacyPolicy}
+                            </a>
+                            .
+                        </p>
+                    )}
+                    <Button
+                        size="lg"
+                        mode="primary"
+                        content={translations.confirmButtonText}
+                        onClick={handleConfirmButtonClick}
+                        fullWidthOnMobiles
+                        isDisabled={!readyToSwap}
+                        to={formHasBalance ? "" : confirmButtonTo}
+                        loader={formHasBalance}
+                        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: () => {},
+    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,
+};