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

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

@@ -78,6 +78,21 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  * @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.
  *
@@ -145,7 +160,7 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  * @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 {handleClick} props.handleConfirmButtonClick - Function to handle clicking on the confirm 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.
@@ -190,10 +205,18 @@ export const SwapForm = ({
     receivingAssetBalance,
     handleChangeSendingAssetClick,
     handleChangeReceivingAssetClick,
-    handleConfirmButtonClick = () => {},
+    handleConfirmButtonClick = (
+        resetButtonLoader,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
     composeConfirmButtonTo = (fromTicker, toTicker, fromAmount) => "",
-    setSwapCreationEstimation = (details) => {},
-    handleUnexpectedError = (error) => {},
+    setSwapCreationEstimation = details => {},
+    handleUnexpectedError = error => {},
     rotateAssets = (fromTicker, toTicker) => {},
     preservedAmount = null,
     handleSwapServiceError = (
@@ -206,16 +229,8 @@ export const SwapForm = ({
         setIsSameCoins
     ) => {},
     formHasBalance = false,
-    retrieveSwapDetails = async (
-        sendingAssetTicker,
-        receivingAssetTicker,
-        amount,
-        isSwapAll = false
-    ) => {},
-    retrieveInitialSwapData = async (
-        sendingAssetTicker,
-        receivingAssetTicker
-    ) => {},
+    retrieveSwapDetails = async (sendingAssetTicker, receivingAssetTicker, amount, isSwapAll = false) => {},
+    retrieveInitialSwapData = async (sendingAssetTicker, receivingAssetTicker) => {},
     triggerDataUpdateResetting = 0,
     fromAssetSelectionButtonRef = null,
     toAssetSelectionButtonRef = null,
@@ -249,12 +264,10 @@ export const SwapForm = ({
             loadingMinimalAmount: "Loading minimal amount..",
             swapRate: "Rate: ",
             calculatingSwapRates: "Calculating swap rates..",
-            pairNotAvailable:
-                "Pair is not available now. Please, try again later or choose another pair.",
+            pairNotAvailable: "Pair is not available now. Please, try again later or choose another pair.",
         },
         addressFields: {
             addressTitle: "Recepient address",
-            addressPlaceholder: "Example: 1XPTgDRh...",
             extraIdTitle: "Extra ID (optional)",
             extraIdPlaceholder: "Example: ABC123",
             extraIdNotice:
@@ -276,20 +289,16 @@ export const SwapForm = ({
     setRecepientAddressExtraId,
     recepientAddressExtraIdAvailable = false,
     displayRateSelector = false,
-    dispatchRateModeChanged = (isFixed) => {},
 }) => {
     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 [updateSendInputTo, setUpdateSendInputTo] = useState(preservedAmount ?? null);
     const [updateReceiveInputTo, setUpdateReceiveInputTo] = useState(null);
 
     const [sendAssetAmount, setSendAssetAmount] = useReferredState(
-        preservedAmount == null || preservedAmount === ""
-            ? null
-            : preservedAmount
+        preservedAmount == null || preservedAmount === "" ? null : preservedAmount
     );
 
     const [swapRate, setSwapRate] = useState();
@@ -305,57 +314,40 @@ export const SwapForm = ({
     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 [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] = useState(null);
+    const [isFixedRate, setIsFixedRate] = useReferredState(null);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
-        composeConfirmButtonTo(
-            sendingAssetTicker,
-            receivingAssetTicker,
-            preservedAmount
-        )
+        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 [swapAllButtonLoaderReSetter, setSwapAllButtonLoaderReSetter] = useState([]);
 
-    const [dataUpdateTimeoutId, setDataUpdateTimeoutId] =
-        useReferredState(null);
-    const [idleDataUpdateTimeoutId, setIdleDataUpdateTimeoutId] =
-        useReferredState(null);
+    const [dataUpdateTimeoutId, setDataUpdateTimeoutId] = useReferredState(null);
+    const [idleDataUpdateTimeoutId, setIdleDataUpdateTimeoutId] = useReferredState(null);
 
     const callHandlingErrors = useCallHandlingErrors();
 
     const recalculationDelayOnTyping = 1000;
 
-    const handleSendAssetAmountChange = (amount) => {
+    const handleSendAssetAmountChange = amount => {
         if (amount != null && amount !== "") {
-            setUpdateReceiveInputTo(
-                AmountUtils.trim(
-                    BigNumber(amount).times(swapRate),
-                    receivingAssetDecimalCount
-                )
-            );
+            setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
         } else {
             setUpdateReceiveInputTo("");
         }
         setSendAssetAmount(amount);
     };
 
-    const handleReceiveAssetAmountChange = (amount) => {
+    const handleReceiveAssetAmountChange = amount => {
         let sendAssetAmount = "";
         if (amount != null && amount !== "") {
-            sendAssetAmount = AmountUtils.trim(
-                BigNumber(amount).div(swapRate),
-                sendingAssetDecimalCount
-            );
+            sendAssetAmount = AmountUtils.trim(BigNumber(amount).div(swapRate), sendingAssetDecimalCount);
         }
         setUpdateSendInputTo(sendAssetAmount);
         setSendAssetAmount(sendAssetAmount);
@@ -375,8 +367,8 @@ export const SwapForm = ({
         handleSendAssetAmountChange(maximumAmount.current?.crypto);
     };
 
-    const handleSwapAllClick = (resetButtonLoader) => {
-        setIsSwapAll((prev) => {
+    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("");
@@ -388,26 +380,18 @@ export const SwapForm = ({
         setSwapAllButtonLoaderReSetter([resetButtonLoader]);
     };
 
-    const processMinMaxAmounts = (amount) => {
+    const processMinMaxAmounts = amount => {
         if (amount === null) return;
 
         setMaximumAmountValid(
-            !maximumAmount.current ||
-                BigNumber(amount).eq("0") ||
-                BigNumber(amount).lte(maximumAmount.current.crypto)
+            !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)
+            !minimalAmount.current || BigNumber(amount).eq("0") || BigNumber(amount).gte(minimalAmount.current?.crypto)
         );
     };
 
-    const requestDataRefresh = (
-        amount,
-        immediately = false,
-        isSwapAll = false
-    ) => {
+    const requestDataRefresh = (amount, immediately = false, isSwapAll = false) => {
         try {
             clearTimeout(dataUpdateTimeoutId.current);
 
@@ -425,27 +409,14 @@ export const SwapForm = ({
                     loadMinimalAmountAndSwapRate(true);
                 } else {
                     setDataUpdateTimeoutId(
-                        setTimeout(
-                            () => loadMinimalAmountAndSwapRate(true),
-                            recalculationDelayOnTyping
-                        )
+                        setTimeout(() => loadMinimalAmountAndSwapRate(true), recalculationDelayOnTyping)
                     );
                 }
             } else {
                 if (immediately) {
-                    loadFullEstimation(
-                        amount,
-                        preservedAmount && String(preservedAmount) !== "0"
-                            ? true
-                            : undefined
-                    );
+                    loadFullEstimation(amount, preservedAmount && String(preservedAmount) !== "0" ? true : undefined);
                 } else {
-                    setDataUpdateTimeoutId(
-                        setTimeout(
-                            () => loadFullEstimation(amount),
-                            recalculationDelayOnTyping
-                        )
-                    );
+                    setDataUpdateTimeoutId(setTimeout(() => loadFullEstimation(amount), recalculationDelayOnTyping));
                 }
             }
         } catch (e) {
@@ -453,18 +424,10 @@ export const SwapForm = ({
         }
     };
 
-    const setAmountLimitsAndRate = (details) => {
+    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 }
-        );
+        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,
@@ -500,7 +463,7 @@ export const SwapForm = ({
                     receivingAssetTicker,
                     amount,
                     isSwapAll.current,
-                    isFixedRate
+                    isFixedRate.current ?? IS_FIXED_BY_DEFAULT
                 );
 
                 if (
@@ -523,18 +486,12 @@ export const SwapForm = ({
                     setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
 
                     if (isSwapAll.current) {
-                        setIsAmountZero(
-                            BigNumber("0").eq(swapCreationInfo.fromAmountCoins)
-                        );
+                        setIsAmountZero(BigNumber("0").eq(swapCreationInfo.fromAmountCoins));
                     }
 
                     setAmountLimitsAndRate(swapCreationInfo);
                     setSwapCreationEstimation(swapCreationInfo);
-                    processMinMaxAmounts(
-                        isSwapAll.current
-                            ? swapCreationInfo.fromAmountCoins
-                            : amount
-                    );
+                    processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
                     setIsSwapCalculated(true);
                 } else {
                     handleSwapServiceError(
@@ -576,15 +533,9 @@ export const SwapForm = ({
                 setValidationContent(null);
                 setIsSwapCalculated(false);
 
-                const swapData = await retrieveInitialSwapData(
-                    sendingAssetTicker,
-                    receivingAssetTicker
-                );
+                const swapData = await retrieveInitialSwapData(sendingAssetTicker, receivingAssetTicker);
 
-                if (
-                    sendAssetAmount.current != null &&
-                    !isCalledForClearedInput
-                ) {
+                if (sendAssetAmount.current != null && !isCalledForClearedInput) {
                     // Means user already entered amount after starting the form initialization
                     return;
                 }
@@ -610,7 +561,7 @@ export const SwapForm = ({
         })();
     };
 
-    const handleChangeAssetsIconClick = (e) => {
+    const handleChangeAssetsIconClick = e => {
         callHandlingErrors(() => {
             if (!isLoading.current) {
                 setIsSwapAll(null);
@@ -621,9 +572,8 @@ export const SwapForm = ({
         }, e);
     };
 
-    const handleRateModeChanged = (isFixed) => {
+    const handleRateModeChanged = isFixed => {
         setIsFixedRate(isFixed);
-        dispatchRateModeChanged(isFixed);
         requestDataRefresh(sendAssetAmount.current, true);
     };
 
@@ -650,11 +600,8 @@ export const SwapForm = ({
     useEffect(() => {
         if (!sendingAssetTicker || !receivingAssetTicker) return;
 
-        const isCurrentAmountNotZero =
-            sendAssetAmount.current &&
-            !BigNumber("0").eq(sendAssetAmount.current);
-        const isPreservedAmountNotZero =
-            preservedAmount && !BigNumber("0").eq(preservedAmount);
+        const isCurrentAmountNotZero = sendAssetAmount.current && !BigNumber("0").eq(sendAssetAmount.current);
+        const isPreservedAmountNotZero = preservedAmount && !BigNumber("0").eq(preservedAmount);
         if (isCurrentAmountNotZero) {
             loadFullEstimation(sendAssetAmount.current);
         } else if (isPreservedAmountNotZero) {
@@ -703,11 +650,7 @@ export const SwapForm = ({
         let timeoutId = null;
         if (readyToSwap) {
             timeoutId = setTimeout(
-                () =>
-                    requestDataRefresh(
-                        sendAssetAmount.current ?? preservedAmount,
-                        true
-                    ),
+                () => requestDataRefresh(sendAssetAmount.current ?? preservedAmount, true),
                 DETAIL_REFRESH_INTERVAL_MS
             );
             setIdleDataUpdateTimeoutId(timeoutId);
@@ -743,20 +686,14 @@ export const SwapForm = ({
     useEffect(() => {
         if (swapRate != null && sendAssetAmount.current != null) {
             setUpdateReceiveInputTo(
-                AmountUtils.trim(
-                    BigNumber(sendAssetAmount.current).times(swapRate),
-                    receivingAssetDecimalCount
-                )
+                AmountUtils.trim(BigNumber(sendAssetAmount.current).times(swapRate), receivingAssetDecimalCount)
             );
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [swapRate]);
 
     useEffect(() => {
-        if (
-            isLoading.current === false &&
-            swapAllButtonLoaderReSetter?.length
-        ) {
+        if (isLoading.current === false && swapAllButtonLoaderReSetter?.length) {
             swapAllButtonLoaderReSetter[0]();
             setSwapAllButtonLoaderReSetter([]);
         }
@@ -765,17 +702,10 @@ export const SwapForm = ({
 
     // Handlers upon changing the asset amount
     useEffect(() => {
-        setConfirmButtonTo(
-            composeConfirmButtonTo(
-                sendingAssetTicker,
-                receivingAssetTicker,
-                sendAssetAmount.current
-            )
-        );
+        setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current));
 
         if (sendAssetAmount.current == null) return;
-        let processingAmount =
-            sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
+        let processingAmount = sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
         requestDataRefresh(processingAmount);
         processMinMaxAmounts(processingAmount);
         setIsAmountZero(BigNumber("0").eq(processingAmount));
@@ -810,8 +740,7 @@ export const SwapForm = ({
                 linkButtonClick={
                     BigNumber(sendingAssetBalance?.assetAmount).eq(0)
                         ? null
-                        : (resetButtonLoader) =>
-                              handleSwapAllClick(resetButtonLoader)
+                        : resetButtonLoader => handleSwapAllClick(resetButtonLoader)
                 }
                 linkText={
                     !formHasBalance
@@ -836,16 +765,10 @@ export const SwapForm = ({
                         assetIconSrc={sendingAssetIconSrc}
                         assetIconProtocolSrc={sendingAssetProtocolIconSrc}
                         fallbackAssetIconSrc={fallBackAssetIconSrc}
-                        disabled={
-                            isSwapAll.current ||
-                            sendingAssetTicker === null ||
-                            receivingAssetTicker === null
-                        }
+                        disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
                         handleCoinAmountChange={handleSendAssetAmountChange}
                         handleChangeAssetClick={handleChangeSendingAssetClick}
-                        handleBalanceValidationChange={(isValid) =>
-                            setBalanceValid(!isValid)
-                        }
+                        handleBalanceValidationChange={isValid => setBalanceValid(!isValid)}
                         updateAssetInputTo={updateSendInputTo}
                         showBalance={formHasBalance}
                         showBalanceValidation={formHasBalance}
@@ -859,17 +782,13 @@ export const SwapForm = ({
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
                         balanceLoaderText={translations.input.balanceLoaderText}
-                        fiatInputPlaceholderText={
-                            translations.input.fiatPlaceholder
-                        }
+                        fiatInputPlaceholderText={translations.input.fiatPlaceholder}
                     />
                     <div
                         className={
                             s["swap-form-inputs-separator"] +
                             " " +
-                            (isLoading.current ||
-                            sendingAssetTicker === null ||
-                            receivingAssetTicker === null
+                            (isLoading.current || sendingAssetTicker === null || receivingAssetTicker === null
                                 ? s["disabled"]
                                 : "")
                         }
@@ -878,12 +797,7 @@ export const SwapForm = ({
                             src={swapSeparatorIconSrc}
                             alt="swap icon"
                             draggable={false}
-                            onClick={(e) =>
-                                callHandlingErrors(
-                                    handleChangeAssetsIconClick,
-                                    e
-                                )
-                            }
+                            onClick={e => callHandlingErrors(handleChangeAssetsIconClick, e)}
                         />
                     </div>
                     <AmountInput
@@ -894,11 +808,8 @@ export const SwapForm = ({
                         assetIconSrc={receivingAssetIconSrc}
                         assetIconProtocolSrc={receivingAssetProtocolIconSrc}
                         fallbackAssetIconSrc={fallBackAssetIconSrc}
-                        disabled={
-                            isSwapAll.current ||
-                            sendingAssetTicker === null ||
-                            receivingAssetTicker === null
-                        }
+                        disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
+                        locked={!formHasBalance}
                         handleCoinAmountChange={handleReceiveAssetAmountChange}
                         handleChangeAssetClick={handleChangeReceivingAssetClick}
                         updateAssetInputTo={updateReceiveInputTo}
@@ -906,16 +817,14 @@ export const SwapForm = ({
                         changeAssetButtonProtocol={receivingAssetProtocol}
                         showBalance={formHasBalance}
                         lowerFormPosition
-                        estimateAmount
+                        estimateAmount={!isFixedRate}
                         ref={toAssetSelectionButtonRef}
                         isLoading={isLoading.current}
                         cryptoAssetToFiatRate={receivingAssetToFiatRate}
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
                         balanceLoaderText={translations.input.balanceLoaderText}
-                        fiatInputPlaceholderText={
-                            translations.input.fiatPlaceholder
-                        }
+                        fiatInputPlaceholderText={translations.input.fiatPlaceholder}
                     />
                 </div>
                 <div className={s["swap-form-information-field"]}>
@@ -926,25 +835,17 @@ export const SwapForm = ({
                             <>
                                 {translations.informationBlock.transactionFee}
                                 <span>
-                                    {AmountUtils.crypto(
-                                        transactionFee?.crypto,
-                                        sendingAssetFeeCoinTickerPrintable
-                                    )}
+                                    {AmountUtils.crypto(transactionFee?.crypto, sendingAssetFeeCoinTickerPrintable)}
                                 </span>
-                                {transactionFee?.fiat != null &&
-                                transactionFee?.fiat !== "" ? (
+                                {transactionFee?.fiat != null && transactionFee?.fiat !== "" ? (
                                     <span className={s["semi-transparent"]}>
-                                        {" ~ " +
-                                            AmountUtils.fiat(
-                                                transactionFee?.fiat,
-                                                fiatCurrencyCode
-                                            )}
+                                        {" ~ " + AmountUtils.fiat(transactionFee?.fiat, fiatCurrencyCode)}
                                     </span>
                                 ) : (
                                     ""
                                 )}
                             </>
-                        ) : isSwapCalculated ? (
+                        ) : isSwapCalculated || (!minimalAmount.current && swapRate) ? (
                             <>
                                 {translations.informationBlock.swapRate}
                                 <span>
@@ -953,45 +854,27 @@ export const SwapForm = ({
                                         receivingAssetTickerPrintable,
                                         swapRate,
                                         receivingAssetDecimalCount,
-                                        isFixedRate
+                                        isFixedRate.current ?? IS_FIXED_BY_DEFAULT
                                     )}
                                 </span>
                             </>
-                        ) : minimalAmount.current ? (
-                            !maximumAmountValid &&
-                            maximumAmount.current != null ? (
+                        ) : minimalAmount.current || maximumAmount.current ? (
+                            !maximumAmountValid && maximumAmount.current != null ? (
                                 <>
-                                    {
-                                        translations.informationBlock
-                                            .maximumAmount
-                                    }
+                                    {translations.informationBlock.maximumAmount}
                                     <span
-                                        className={
-                                            s["interactable"] + " " + s["red"]
-                                        }
+                                        className={s["interactable"] + " " + s["red"]}
                                         onClick={
                                             isLoading.current
                                                 ? () => {}
-                                                : (e) =>
-                                                      callHandlingErrors(
-                                                          handleMaximumAmountClick,
-                                                          e
-                                                      )
+                                                : e => callHandlingErrors(handleMaximumAmountClick, e)
                                         }
                                     >
-                                        {AmountUtils.crypto(
-                                            maximumAmount.current?.crypto,
-                                            sendingAssetTickerPrintable
-                                        )}
+                                        {AmountUtils.crypto(maximumAmount.current?.crypto, sendingAssetTickerPrintable)}
                                     </span>
-                                    {maximumAmount.current?.fiat != null &&
-                                    maximumAmount.current?.fiat !== "" ? (
+                                    {maximumAmount.current?.fiat != null && maximumAmount.current?.fiat !== "" ? (
                                         <span className={s["semi-transparent"]}>
-                                            {" ~ " +
-                                                AmountUtils.fiat(
-                                                    maximumAmount.current.fiat,
-                                                    fiatCurrencyCode
-                                                )}
+                                            {" ~ " + AmountUtils.fiat(maximumAmount.current.fiat, fiatCurrencyCode)}
                                         </span>
                                     ) : (
                                         ""
@@ -999,41 +882,20 @@ export const SwapForm = ({
                                 </>
                             ) : (
                                 <>
-                                    {
-                                        translations.informationBlock
-                                            .minimumAmount
-                                    }
+                                    {translations.informationBlock.minimumAmount}
                                     <span
-                                        className={
-                                            s["interactable"] +
-                                            " " +
-                                            (!minimalAmountValid
-                                                ? s["red"]
-                                                : "")
-                                        }
+                                        className={s["interactable"] + " " + (!minimalAmountValid ? s["red"] : "")}
                                         onClick={
                                             isLoading.current
                                                 ? () => {}
-                                                : (e) =>
-                                                      callHandlingErrors(
-                                                          handleMinimalAmountClick,
-                                                          e
-                                                      )
+                                                : e => callHandlingErrors(handleMinimalAmountClick, e)
                                         }
                                     >
-                                        {AmountUtils.crypto(
-                                            minimalAmount.current.crypto,
-                                            sendingAssetTickerPrintable
-                                        )}
+                                        {AmountUtils.crypto(minimalAmount.current.crypto, sendingAssetTickerPrintable)}
                                     </span>
-                                    {minimalAmount.current?.fiat != null &&
-                                    minimalAmount.current.fiat !== "" ? (
+                                    {minimalAmount.current?.fiat != null && minimalAmount.current.fiat !== "" ? (
                                         <span className={s["semi-transparent"]}>
-                                            {" ~ " +
-                                                AmountUtils.fiat(
-                                                    minimalAmount.current.fiat,
-                                                    fiatCurrencyCode
-                                                )}
+                                            {" ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)}
                                         </span>
                                     ) : (
                                         ""
@@ -1042,9 +904,7 @@ export const SwapForm = ({
                             )
                         ) : sendAssetAmount.current || isSwapAll.current ? (
                             translations.informationBlock[
-                                formHasBalance
-                                    ? "calculatingNetworkFee"
-                                    : "calculatingSwapRates"
+                                formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"
                             ]
                         ) : (
                             translations.informationBlock.loadingMinimalAmount
@@ -1054,50 +914,28 @@ export const SwapForm = ({
 
                 {isAddressFieldEnabled ? (
                     <div className={s["swap-form-address-field"]}>
-                        <TitleBox
-                            title={translations.addressFields.addressTitle}
-                        >
+                        <TitleBox title={translations.addressFields.addressTitle}>
                             <Textarea
                                 type={"text"}
-                                onChange={(e) =>
-                                    setRecepientAddress(e.target.value)
-                                }
+                                onChange={e => setRecepientAddress(e.target.value)}
                                 value={recepientAddress}
                                 adaptiveHeight={true}
-                                errorEncountered={
-                                    !recepientAddressValid &&
-                                    recepientAddress !== ""
-                                }
-                                placeholder={
-                                    translations.addressFields
-                                        .addressPlaceholder
-                                }
+                                errorEncountered={!recepientAddressValid && recepientAddress !== ""}
                             />
                         </TitleBox>
                         {recepientAddressExtraIdAvailable ? (
                             <TitleBox
                                 title={translations.addressFields.extraIdTitle}
-                                titleNoticeText={
-                                    translations.addressFields.extraIdNotice
-                                }
+                                titleNoticeText={translations.addressFields.extraIdNotice}
                                 titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
                             >
                                 <Textarea
                                     type={"text"}
-                                    onChange={(e) =>
-                                        setRecepientAddressExtraId(
-                                            e.target.value
-                                        )
-                                    }
+                                    onChange={e => setRecepientAddressExtraId(e.target.value)}
                                     value={recepientAddressExtraId}
                                     adaptiveHeight={true}
-                                    errorEncountered={
-                                        !recepientAddressExtraIdValid
-                                    }
-                                    placeholder={
-                                        translations.addressFields
-                                            .extraIdPlaceholder
-                                    }
+                                    errorEncountered={!recepientAddressExtraIdValid}
+                                    placeholder={translations.addressFields.extraIdPlaceholder}
                                 />
                             </TitleBox>
                         ) : (
@@ -1111,8 +949,8 @@ export const SwapForm = ({
                 {displayRateSelector ? (
                     <div className={s["swap-form-rate-selector"]}>
                         <RateSelector
-                            isFixed={isFixedRate}
-                            setIsFixed={handleRateModeChanged}
+                            isFixed={isFixedRate.current ?? IS_FIXED_BY_DEFAULT}
+                            setIsFixed={!isLoading.current ? handleRateModeChanged : () => {}}
                             translations={translations.rateSelector}
                         />
                     </div>
@@ -1129,19 +967,11 @@ export const SwapForm = ({
                 )}
                 <div className={s["swap-form-button-container"]}>
                     {!termsOfUseUrl || !privacyPolicyUrl ? null : (
-                        <p
-                            className={
-                                s["swap-form-button-container-consent-text"]
-                            }
-                        >
+                        <p className={s["swap-form-button-container-consent-text"]}>
                             {translations.consents.consentText + " "}
                             <a
                                 href={termsOfUseUrl}
-                                className={
-                                    s[
-                                        "swap-form-button-container-consent-text-link"
-                                    ]
-                                }
+                                className={s["swap-form-button-container-consent-text-link"]}
                                 target="_blank"
                             >
                                 {translations.consents.termsOfUse}
@@ -1149,11 +979,7 @@ export const SwapForm = ({
                             {" " + translations.consents.and + " "}
                             <a
                                 href={privacyPolicyUrl}
-                                className={
-                                    s[
-                                        "swap-form-button-container-consent-text-link"
-                                    ]
-                                }
+                                className={s["swap-form-button-container-consent-text-link"]}
                                 target="_blank"
                             >
                                 {translations.consents.privacyPolicy}
@@ -1165,11 +991,21 @@ export const SwapForm = ({
                         size="lg"
                         mode="primary"
                         content={translations.confirmButtonText}
-                        onClick={handleConfirmButtonClick}
+                        onClick={resetButtonLoader =>
+                            handleConfirmButtonClick(
+                                resetButtonLoader,
+                                setValidationContent,
+                                setBalanceValid,
+                                setMinimalAmountValid,
+                                setMaximumAmountValid,
+                                setIsPairSupported,
+                                setIsSameCoins
+                            )
+                        }
                         fullWidthOnMobiles
                         isDisabled={!readyToSwap}
                         to={formHasBalance ? "" : confirmButtonTo}
-                        loader={formHasBalance}
+                        loader
                         handleError={callHandlingErrors}
                     />
                 </div>
@@ -1190,10 +1026,7 @@ SwapForm.propTypes = {
     sendingAssetIconSrc: PropTypes.string.isRequired,
     sendingAssetProtocolIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
     receivingAssetIconSrc: PropTypes.string.isRequired,
-    receivingAssetProtocolIconSrc: PropTypes.oneOfType([
-        PropTypes.string,
-        null,
-    ]),
+    receivingAssetProtocolIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
     fallBackAssetIconSrc: PropTypes.oneOfType([PropTypes.string, null]),
     sendingAssetFeeCoinTickerPrintable: PropTypes.string,
     sendingAssetBalance: PropTypes.string,
@@ -1213,16 +1046,8 @@ SwapForm.propTypes = {
     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,
-    ]),
+    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,
@@ -1237,10 +1062,18 @@ SwapForm.defaultProps = {
     sendingAssetProtocolIconSrc: null,
     receivingAssetProtocolIconSrc: null,
     fallBackAssetIconSrc: null,
-    handleConfirmButtonClick: () => {},
+    handleConfirmButtonClick: (
+        resetButtonLoader,
+        setValidationContent,
+        setBalanceValid,
+        setMinimalAmountValid,
+        setMaximumAmountValid,
+        setIsPairSupported,
+        setIsSameCoins
+    ) => {},
     composeConfirmButtonTo: (fromTicker, toTicker, fromAmount) => "",
-    setSwapCreationEstimation: (details) => {},
-    handleUnexpectedError: (error) => {},
+    setSwapCreationEstimation: details => {},
+    handleUnexpectedError: error => {},
     rotateAssets: (fromTicker, toTicker) => {},
     preservedAmount: null,
     handleSwapServiceError: (
@@ -1252,16 +1085,8 @@ SwapForm.defaultProps = {
         setIsPairSupported,
         setIsSameCoins
     ) => {},
-    retrieveSwapDetails: async (
-        sendingAssetTicker,
-        receivingAssetTicker,
-        amount,
-        isSwapAll = false
-    ) => {},
-    retrieveInitialSwapData: async (
-        sendingAssetTicker,
-        receivingAssetTicker
-    ) => {},
+    retrieveSwapDetails: async (sendingAssetTicker, receivingAssetTicker, amount, isSwapAll = false) => {},
+    retrieveInitialSwapData: async (sendingAssetTicker, receivingAssetTicker) => {},
     triggerDataUpdateResetting: 0,
     fromAssetSelectionButtonRef: null,
     toAssetSelectionButtonRef: null,