@rabbitio/ui-kit 1.0.0-beta.75 → 1.0.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.75",
+    "version": "1.0.0-beta.77",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",

package/src/swaps-lib/services/publicSwapService.js

@@ -203,8 +203,11 @@ export class PublicSwapService {
 
             const coinUsdtRate = withoutFiat
                 ? null
-                : (await (fixed ? this._fixedSwapProvider : this._swapProvider).getCoinToUSDTRate(fromCoin))?.rate ??
-                  null;
+                : (
+                      await (fixed ? this._fixedSwapProvider : this._swapProvider).getCoinToUSDTRate(
+                          amountIsToReceive ? toCoin : fromCoin
+                      )
+                  )?.rate ?? null;
             const details = await (fixed ? this._fixedSwapProvider : this._swapProvider).getSwapInfo(
                 fromCoin,
                 toCoin,

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -144,6 +144,13 @@ export const AmountInput = React.forwardRef(
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [predefinedValue]);
 
+        useEffect(() => {
+            if (!cryptoAssetToFiatRate || typeof cryptoAssetToFiatRate !== "string") return;
+
+            handleChangeAmount(coinAmountValue, false);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [cryptoAssetToFiatRate]);
+
         useEffect(() => {
             try {
                 setCoinAmountPlaceholder(placeholderByDecimalCount(assetDecimalPlaces));
@@ -256,18 +263,31 @@ export const AmountInput = React.forwardRef(
                                                 <span className={s["requested-amount-fiat-currency"]}>
                                                     {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
                                                 </span>
-                                                <input
-                                                    type="text"
-                                                    inputMode="decimal"
-                                                    className={s["requested-amount-fiat-input"]}
-                                                    value={fiatAmountValue}
-                                                    disabled={disabled || locked}
-                                                    onChange={e => handleChangeAmountFiat(e.target.value)}
-                                                    placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
-                                                    autoFocus={fiatAmountAutoFocus}
-                                                    onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
-                                                    onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
-                                                />
+
+                                                {!isLoading && cryptoAssetToFiatRate ? (
+                                                    <input
+                                                        type="text"
+                                                        inputMode="decimal"
+                                                        className={s["requested-amount-fiat-input"]}
+                                                        value={fiatAmountValue}
+                                                        disabled={disabled || locked}
+                                                        onChange={e => handleChangeAmountFiat(e.target.value)}
+                                                        placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
+                                                        autoFocus={fiatAmountAutoFocus}
+                                                        onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
+                                                        onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
+                                                    />
+                                                ) : (
+                                                    <div className={s["requested-amount-fiat-skeleton"]}>
+                                                        <span
+                                                            className={
+                                                                s["requested-amount-fiat-skeleton-content"] +
+                                                                " " +
+                                                                s["skeleton-dark"]
+                                                            }
+                                                        ></span>
+                                                    </div>
+                                                )}
                                             </>
                                         ) : (
                                             <span

package/src/ui-kit/components/molecules/AmountInput/amount-input.module.scss

@@ -181,6 +181,16 @@
                 }
             }
 
+            &-skeleton {
+                width: 25%;
+                display: flex;
+                align-items: center;
+
+                &-content {
+                    @extend %skeleton-text;
+                }
+            }
+
             &-placeholder {
                 cursor: pointer;
             }

package/src/ui-kit/components/organisms/SwapForm/SwapForm.jsx

@@ -346,6 +346,15 @@ export const SwapForm = ({
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
     const IS_FIXED_BY_DEFAULT = false;
 
+    const [sendingAssetTickerReferred, setSendingAssetTickerReferred] = useReferredState(null);
+    const [receivingAssetTickerReferred, setReceivingAssetTickerReferred] = useReferredState(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => setSendingAssetTickerReferred(sendingAssetTicker), [sendingAssetTicker]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => setReceivingAssetTickerReferred(receivingAssetTicker), [receivingAssetTicker]);
+
     // 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);
@@ -371,7 +380,7 @@ export const SwapForm = ({
     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 [isFixedRate, setIsFixedRate] = useReferredState(null);
-    const [isLastEditedReceiving, setIsLastEditedReceiving] = useState(false);
+    const [isLastEditedReceiving, setIsLastEditedReceiving] = useReferredState(false);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)
@@ -403,21 +412,20 @@ export const SwapForm = ({
 
     const handleSendAssetAmountChange = amount => {
         setIsLastEditedReceiving(false);
-        const receiveAmount = AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount);
-        if (amount != null && amount !== "") {
-            setReceiveAssetAmount(receiveAmount);
-            setUpdateReceiveInputTo(receiveAmount);
-        } else {
-            setUpdateReceiveInputTo("");
+        let receiveAmount = "";
+        if (amount != null && amount !== "" && swapRate != null) {
+            receiveAmount = AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount);
         }
+        setReceiveAssetAmount(receiveAmount);
+        setUpdateReceiveInputTo(receiveAmount);
         setSendAssetAmount(amount);
     };
 
     const handleReceiveAssetAmountChange = amount => {
         setReceiveAssetAmount(amount);
-        setIsLastEditedReceiving(true);
+        if (isFixedRate.current) setIsLastEditedReceiving(true);
         let sendAssetAmount = "";
-        if (amount != null && amount !== "") {
+        if (amount != null && amount !== "" && swapRate != null) {
             sendAssetAmount = AmountUtils.trim(BigNumber(amount).div(swapRate), sendingAssetDecimalCount);
         }
         setUpdateSendInputTo(sendAssetAmount);
@@ -427,15 +435,25 @@ export const SwapForm = ({
     const handleMinimalAmountClick = () => {
         if (!minimalAmount.current) return;
 
-        setUpdateSendInputTo(minimalAmount.current?.crypto);
-        handleSendAssetAmountChange(minimalAmount.current?.crypto);
+        if (isLastEditedReceiving.current) {
+            setUpdateReceiveInputTo(minimalAmount.current?.crypto);
+            handleReceiveAssetAmountChange(minimalAmount.current?.crypto);
+        } else {
+            setUpdateSendInputTo(minimalAmount.current?.crypto);
+            handleSendAssetAmountChange(minimalAmount.current?.crypto);
+        }
     };
 
     const handleMaximumAmountClick = () => {
         if (!maximumAmount.current) return;
 
-        setUpdateSendInputTo(maximumAmount.current?.crypto);
-        handleSendAssetAmountChange(maximumAmount.current?.crypto);
+        if (isLastEditedReceiving.current) {
+            setUpdateReceiveInputTo(maximumAmount.current?.crypto);
+            handleReceiveAssetAmountChange(maximumAmount.current?.crypto);
+        } else {
+            setUpdateSendInputTo(maximumAmount.current?.crypto);
+            handleSendAssetAmountChange(maximumAmount.current?.crypto);
+        }
     };
 
     const handleSwapAllClick = resetButtonLoader => {
@@ -445,6 +463,7 @@ export const SwapForm = ({
                 setUpdateSendInputTo("");
                 setUpdateReceiveInputTo("");
                 setSendAssetAmount(null);
+                setReceiveAssetAmount(null);
             }
             return !prev;
         });
@@ -497,6 +516,15 @@ export const SwapForm = ({
 
     const setAmountLimitsAndRate = details => {
         setSwapRate(details?.rate ?? null);
+        if (!details?.rate) {
+            if (isLastEditedReceiving.current) {
+                setUpdateSendInputTo("");
+                setSendAssetAmount("");
+            } else {
+                setUpdateReceiveInputTo("");
+                setReceiveAssetAmount("");
+            }
+        }
         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) {
@@ -529,22 +557,32 @@ export const SwapForm = ({
                 setIsPairSupported(true);
                 setIsSwapCalculated(false);
 
+                const currentSendingAssetTicker = sendingAssetTicker;
+                const currentReceivingAssetTicker = receivingAssetTicker;
+
                 const response = await retrieveSwapDetails(
-                    sendingAssetTicker,
-                    receivingAssetTicker,
+                    currentSendingAssetTicker,
+                    currentReceivingAssetTicker,
                     amount,
                     isSwapAll.current,
                     isFixedRate.current ?? IS_FIXED_BY_DEFAULT,
-                    isFixedRate.current ? isLastEditedReceiving : false
+                    isFixedRate.current ? isLastEditedReceiving.current : false
                 );
 
+                if (
+                    currentSendingAssetTicker !== sendingAssetTickerReferred.current ||
+                    currentReceivingAssetTicker !== receivingAssetTickerReferred.current
+                ) {
+                    return;
+                }
+
                 if (
                     !isSwapAll.current &&
                     String(amount) !==
                         String(
-                            isForPreserved && sendAssetAmount.current == null
+                            isForPreserved && sendAssetAmount.current == null && receiveAssetAmount.current == null
                                 ? preservedAmount
-                                : isFixedRate.current && isLastEditedReceiving
+                                : isFixedRate.current && isLastEditedReceiving.current
                                   ? receiveAssetAmount.current
                                   : sendAssetAmount.current
                         )
@@ -553,21 +591,27 @@ export const SwapForm = ({
                     return;
                 }
 
-                if (response.result) {
-                    const swapCreationInfo = response.swapCreationInfo;
+                const swapCreationInfo = response?.swapCreationInfo;
 
+                if (response.result) {
                     if (isSwapAll.current) {
                         setIsAmountZero(BigNumber("0").eq(swapCreationInfo.fromAmountCoins));
                     }
 
+                    setUpdateSendInputTo(swapCreationInfo.fromAmountCoins);
+                    setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
+
+                    if (isLastEditedReceiving.current) {
+                        setSendAssetAmount(swapCreationInfo.fromAmountCoins);
+                    } else {
+                        setReceiveAssetAmount(swapCreationInfo.toAmountCoins);
+                    }
+
                     setAmountLimitsAndRate(swapCreationInfo);
                     setSwapCreationEstimation(swapCreationInfo);
                     setIsRefundAddressRequired(swapCreationInfo?.isRefundAddressRequired);
                     processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
                     setIsSwapCalculated(true);
-
-                    setUpdateSendInputTo(swapCreationInfo.fromAmountCoins);
-                    setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
                 } else {
                     handleSwapServiceError(
                         response.reason,
@@ -589,6 +633,11 @@ export const SwapForm = ({
                          * for the swap All case.
                          */
                         setAmountLimitsAndRate(response);
+                        if (isLastEditedReceiving.current) {
+                            setSendAssetAmount("");
+                        } else {
+                            setReceiveAssetAmount("");
+                        }
                     }
                 }
                 setIsLoading(false);
@@ -643,6 +692,24 @@ export const SwapForm = ({
                 setIsSwapAll(null);
                 setMaximumAmountValid(true);
                 setMinimalAmountValid(true);
+
+                const sendAssetAmountMemento = sendAssetAmount.current;
+                const receiveAssetAmountMemento = receiveAssetAmount.current;
+
+                if (isLastEditedReceiving.current) {
+                    setSendAssetAmount("");
+                    setUpdateSendInputTo("");
+
+                    setReceiveAssetAmount(sendAssetAmountMemento);
+                    setUpdateReceiveInputTo(sendAssetAmountMemento);
+                } else {
+                    setSendAssetAmount(receiveAssetAmountMemento);
+                    setUpdateSendInputTo(receiveAssetAmountMemento);
+
+                    setReceiveAssetAmount("");
+                    setUpdateReceiveInputTo("");
+                }
+
                 rotateAssets(sendingAssetTicker, receivingAssetTicker);
             }
         }, e);
@@ -650,7 +717,7 @@ export const SwapForm = ({
 
     const handleRateModeChanged = isFixed => {
         setIsFixedRate(isFixed);
-        requestDataRefresh(isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current, true);
+        requestDataRefresh(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current, true);
     };
 
     useEffect(() => {
@@ -664,31 +731,18 @@ export const SwapForm = ({
 
     useEffect(() => {
         onIsFixedChange(isFixedRate.current);
+        if (!isFixedRate.current) setIsLastEditedReceiving(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isFixedRate.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(isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current);
-        } else if (isPreservedAmountNotZero) {
-            loadFullEstimation(preservedAmount, true);
+            loadFullEstimation(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current);
         } else {
-            loadMinimalAmountAndSwapRate();
+            loadMinimalAmountAndSwapRate(true);
         }
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -773,7 +827,9 @@ export const SwapForm = ({
             timeoutId = setTimeout(
                 () =>
                     requestDataRefresh(
-                        isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current ?? preservedAmount,
+                        isLastEditedReceiving.current
+                            ? receiveAssetAmount.current
+                            : sendAssetAmount.current ?? preservedAmount,
                         true
                     ),
                 DETAIL_REFRESH_INTERVAL_MS
@@ -808,7 +864,7 @@ export const SwapForm = ({
 
     useEffect(() => {
         if (swapRate != null && sendAssetAmount.current != null) {
-            if (isLastEditedReceiving) {
+            if (isLastEditedReceiving.current) {
                 setUpdateSendInputTo(
                     AmountUtils.trim(BigNumber(receiveAssetAmount.current).div(swapRate), sendingAssetDecimalCount)
                 );
@@ -829,17 +885,21 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoading.current, swapAllButtonLoaderReSetter]);
 
-    useEffect(() => {
-        setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current));
-
-        if (sendAssetAmount.current == null) return;
-        let processingAmount = sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
-        let processingReceivingAmount = receiveAssetAmount.current === "" ? "0" : receiveAssetAmount.current;
-        requestDataRefresh(isLastEditedReceiving ? processingReceivingAmount : processingAmount);
-        processMinMaxAmounts(processingAmount);
-        setIsAmountZero(BigNumber("0").eq(processingAmount));
+    const handleAmountChange = amount => {
+        requestDataRefresh(amount);
+        processMinMaxAmounts(amount);
+        setIsAmountZero(BigNumber("0").eq(amount));
         setIsSwapCalculated(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+
+    useEffect(() => {
+        if (!isLastEditedReceiving.current) return;
+        handleAmountChange(receiveAssetAmount.current === "" ? "0" : receiveAssetAmount.current);
+    }, [receiveAssetAmount.current]);
+
+    useEffect(() => {
+        if (isLastEditedReceiving.current) return;
+        handleAmountChange(sendAssetAmount.current === "" ? "0" : sendAssetAmount.current);
     }, [sendAssetAmount.current]);
 
     const recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
@@ -898,9 +958,11 @@ export const SwapForm = ({
                         showChangeAssetButton
                         changeAssetButtonProtocol={sendingAssetProtocol}
                         upperFormPosition
-                        errorEncountered={!minimalAmountValid}
+                        errorEncountered={
+                            !isLastEditedReceiving.current && (!minimalAmountValid || !maximumAmountValid)
+                        }
                         ref={fromAssetSelectionButtonRef}
-                        isLoading={isLastEditedReceiving ? isLoading.current : false}
+                        isLoading={isLastEditedReceiving.current ? isLoading.current : false}
                         cryptoAssetToFiatRate={sendingAssetToFiatRate}
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
@@ -940,9 +1002,10 @@ export const SwapForm = ({
                         changeAssetButtonProtocol={receivingAssetProtocol}
                         showBalance={formHasBalance}
                         lowerFormPosition
+                        errorEncountered={isLastEditedReceiving.current && (!minimalAmountValid || !maximumAmountValid)}
                         estimateAmount={!isFixedRate.current}
                         ref={toAssetSelectionButtonRef}
-                        isLoading={isLastEditedReceiving ? false : isLoading.current}
+                        isLoading={isLastEditedReceiving.current ? false : isLoading.current}
                         cryptoAssetToFiatRate={receivingAssetToFiatRate}
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
@@ -993,7 +1056,12 @@ export const SwapForm = ({
                                                 : e => callHandlingErrors(handleMaximumAmountClick, e)
                                         }
                                     >
-                                        {AmountUtils.crypto(maximumAmount.current?.crypto, sendingAssetTickerPrintable)}
+                                        {AmountUtils.crypto(
+                                            maximumAmount.current?.crypto,
+                                            isLastEditedReceiving.current
+                                                ? receivingAssetTickerPrintable
+                                                : sendingAssetTickerPrintable
+                                        )}
                                     </span>
                                     {maximumAmount.current?.fiat != null && maximumAmount.current?.fiat !== "" ? (
                                         <span className={s["semi-transparent"]}>
@@ -1016,7 +1084,12 @@ export const SwapForm = ({
                                                 : e => callHandlingErrors(handleMinimalAmountClick, e)
                                         }
                                     >
-                                        {AmountUtils.crypto(minimalAmount.current.crypto, sendingAssetTickerPrintable)}
+                                        {AmountUtils.crypto(
+                                            minimalAmount.current.crypto,
+                                            isLastEditedReceiving.current
+                                                ? receivingAssetTickerPrintable
+                                                : sendingAssetTickerPrintable
+                                        )}
                                     </span>
                                     {minimalAmount.current?.fiat != null && minimalAmount.current.fiat !== "" ? (
                                         <span className={s["semi-transparent"]}>
@@ -1144,7 +1217,7 @@ export const SwapForm = ({
                                 recipientAddressExtraId.current,
                                 refundAddress.current,
                                 refundAddressExtraId.current,
-                                isLastEditedReceiving
+                                isLastEditedReceiving.current
                             )
                         }
                         fullWidthOnMobiles