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

package/package.json

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

package/src/swaps-lib/external-apis/letsExchangeSwapProvider.js

@@ -112,6 +112,8 @@ export class LetsExchangeSwapProvider extends SwapProvider {
         amountIsToReceive = false
     ) {
         const loggerSource = "getSwapInfo";
+        let min = null;
+        let max = null;
         try {
             if (
                 !(fromCoin instanceof Coin) ||
@@ -164,11 +166,9 @@ export class LetsExchangeSwapProvider extends SwapProvider {
             //     const extraUsdToFitMinMax = BigNumber("1"); // We correct the limits as the exact limit can fluctuate and cause failed swap creation
             //     extraCoinsToFitMinMax = AmountUtils.trim(extraUsdToFitMinMax.div(fromCoinToUsdRate), fromCoin.digits);
             // }
-            let min = null;
             if (data?.min_amount) {
                 min = AmountUtils.trim(data?.min_amount, amountIsToReceive ? toCoin.digits : fromCoin.digits);
             }
-            let max = null;
             if (data?.max_amount) {
                 max = AmountUtils.trim(data?.max_amount, amountIsToReceive ? toCoin.digits : fromCoin.digits);
             }
@@ -224,12 +224,21 @@ export class LetsExchangeSwapProvider extends SwapProvider {
                 isRefundAddressRequired: false,
             };
         } catch (e) {
+            if (e?.response?.status === 404) {
+                return {
+                    result: false,
+                    reason: SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED,
+                    smallestMin: min,
+                    greatestMax: max,
+                };
+            }
             if (e?.response?.status === 429) {
                 return {
                     result: false,
                     reason: SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED,
                 };
             }
+
             Logger.log(`Internal error when getting swap options ${safeStringify(e)}`, loggerSource);
             improveAndRethrow(e, loggerSource);
         }
@@ -366,22 +375,31 @@ export class LetsExchangeSwapProvider extends SwapProvider {
                     const isExpiredByTime = expiresAt && expiresAt < Date.now();
                     const status = this._mapLetsExchangeStatusToRabbitStatus(swap.status, isExpiredByTime);
                     const toDigits = status === SwapProvider.SWAP_STATUSES.REFUNDED ? fromCoin.digits : toCoin.digits;
+                    const deposit =
+                        swap.real_deposit_amount && swap.real_deposit_amount !== ""
+                            ? swap.real_deposit_amount
+                            : swap.deposit_amount;
+                    const withdrawal =
+                        swap.real_withdrawal_amount && swap.real_withdrawal_amount !== ""
+                            ? swap.real_withdrawal_amount
+                            : swap.withdrawal_amount;
+                    const rate = BigNumber(withdrawal).div(deposit).toFixed(this._maxRateDigits); // We don't use their rate as it excludes their fee
                     return new ExistingSwap(
                         swapIds[index],
                         status,
                         createdAt,
                         expiresAt,
                         swap.confirmations,
-                        AmountUtils.trim(swap.rate, this._maxRateDigits),
+                        rate,
                         swap.is_float != null ? !swap.is_float : false,
                         swap.return,
                         swap.deposit,
                         fromCoin,
-                        AmountUtils.trim(swap.deposit_amount, fromCoin.digits),
+                        AmountUtils.trim(deposit, fromCoin.digits),
                         swap.hash_in,
                         swap.hash_in ? `${swap.coin_from_explorer_url}${swap.hash_in}` : null,
                         toCoin,
-                        AmountUtils.trim(swap.withdrawal_amount, toDigits),
+                        AmountUtils.trim(withdrawal, toDigits),
                         swap.hash_out,
                         swap.hash_out ? `${swap.coin_to_explorer_url}${swap.hash_out}` : null,
                         swap.withdrawal,
@@ -410,20 +428,21 @@ export class LetsExchangeSwapProvider extends SwapProvider {
         }
     }
 
-    // TODO: [dev] Serg, please check this during the review to make sure I did no mistakes in statuses mapping.
-    //   I will remove these comments after the review. https://api.letsexchange.io/doc
-    // wait	The exchange has just been created and it’s waiting for coins to reach the deposit wallet
-    // confirmation	The transaction appears in mempool and now it is waiting for necessary network confirmations to start.
-    // confirmed	The user’s payment is confirmed, the exchange process is about to start.
-    // exchanging	The exchange process is running.
-    // sending	Funds are being sent to the recipient`s address.
-    // sending_confirmation	The outgoing transaction is waiting for network confirmations.
-    // success	The exchange is completed and the funds are successfully sent to the recipient’s address.
-    // aml_check_failed	The deposit was marked as risky by AML check service.
-    // overdue	The deposit receiving time for this transaction has expired.
-    // error	The transaction has failed. In most cases, the amount that was sent differs from the amount that was specified when creating the transaction.
-    // refund	The exchange failed and the coins were refunded to the user's wallet.
     _mapLetsExchangeStatusToRabbitStatus(status, isExpiredByTime) {
+        /**
+         * Lets exchange statuses description
+         * wait - The exchange has just been created and it’s waiting for coins to reach the deposit wallet
+         * confirmation - The transaction appears in mempool and now it is waiting for necessary network confirmations to start.
+         * confirmed - The user’s payment is confirmed, the exchange process is about to start.
+         * exchanging -	The exchange process is running.
+         * sending - Funds are being sent to the recipient`s address.
+         * sending_confirmation - The outgoing transaction is waiting for network confirmations.
+         * success - The exchange is completed and the funds are successfully sent to the recipient’s address.
+         * aml_check_failed - The deposit was marked as risky by AML check service.
+         * overdue - The deposit receiving time for this transaction has expired.
+         * error - The transaction has failed. In most cases, the amount that was sent differs from the amount that was specified when creating the transaction.
+         * refund -	The exchange failed and the coins were refunded to the user's wallet.
+         */
         switch (status) {
             case "wait":
                 if (isExpiredByTime) {
@@ -437,7 +456,7 @@ export class LetsExchangeSwapProvider extends SwapProvider {
             case "exchanging":
                 return SwapProvider.SWAP_STATUSES.EXCHANGING;
             case "sending":
-                return SwapProvider.SWAP_STATUSES.PAYMENT_RECEIVED;
+                return SwapProvider.SWAP_STATUSES.EXCHANGING;
             case "sending_confirmation":
                 return SwapProvider.SWAP_STATUSES.EXCHANGING;
             case "success":

package/src/swaps-lib/external-apis/swapProvider.js

@@ -62,8 +62,57 @@ export class SwapProvider {
      * @private
      */
     _putPopularCoinsFirst() {
+        const popularCoinsList = [
+            "BTC",
+            "ETH",
+            "USDTERC20",
+            "USDTTRC20",
+            "USDCERC20",
+            "XRP",
+            "TON",
+            "XMR",
+            "TRX",
+            "DAIERC20",
+            "DOGE",
+            "BNB",
+            "PEPEERC20",
+            "NOTTON",
+            "SOL",
+            "DOT",
+            "LTC",
+            "SHIBERC20",
+            "AVAX",
+            "UNIERC20",
+            "LINKERC20",
+            "MATIC",
+            "BUSDBEP20",
+            "AAVEERC20",
+            "ATOM",
+            "RUNE",
+            "ADA",
+        ];
+
         this._supportedCoins.sort((i1, i2) => {
-            if (i1.isPopular !== i2.isPopular) return i2.isPopular - i1.isPopular;
+            const isInPopularList1 = popularCoinsList.includes(i1.coin.ticker);
+            const isInPopularList2 = popularCoinsList.includes(i2.coin.ticker);
+
+            // If both are in the popularCoinsList, sort by their index in the list
+            if (isInPopularList1 && isInPopularList2) {
+                const index1 = popularCoinsList.indexOf(i1.coin.ticker);
+                const index2 = popularCoinsList.indexOf(i2.coin.ticker);
+                return index1 - index2;
+            }
+
+            // Sort by whether the coin is in the popularCoinsList
+            if (isInPopularList1 && !isInPopularList2) return -1;
+            if (!isInPopularList1 && isInPopularList2) return 1;
+
+            // If both are not in the popularCoinsList, use the isPopular flag - partners can fill it
+            let p1 = i1.isPopular;
+            let p2 = i2.isPopular;
+            if (p1 !== p2) return p2 - p1;
+
+            // By default, sort by the coin ticker
             return i1.coin.ticker.localeCompare(i2.coin.ticker);
         });
     }

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

@@ -498,6 +498,12 @@ export class SwapspaceSwapProvider extends SwapProvider {
                     const status = this._mapSwapspaceStatusToRabbitStatus(swap.status, isExpiredByTime);
                     const toDigits = status === SwapProvider.SWAP_STATUSES.REFUNDED ? fromCoin.digits : toCoin.digits;
                     const addressToSendCoinsToSwapspace = swap.from.address;
+                    const toUrl = (swap.blockExplorerTransactionUrl.to ?? "")
+                        .replace(/from=swapspace&?/g, "")
+                        .replaceAll(/&&+/g, "&")
+                        .replace("?&", "?")
+                        .replace(/&$/, "")
+                        .replace(/\?$/, "");
                     return new ExistingSwap(
                         swapIds[index],
                         status,
@@ -515,7 +521,7 @@ export class SwapspaceSwapProvider extends SwapProvider {
                         toCoin,
                         AmountUtils.trim(swap.to.amount, toDigits),
                         swap.to.transactionHash,
-                        swap.blockExplorerTransactionUrl.to,
+                        toUrl,
                         swap.to.address,
                         swap.partner,
                         swap.from.extraId ?? null,

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

@@ -169,7 +169,7 @@ export class PublicSwapService {
      *
      * @param fromCoin {Coin}
      * @param toCoin {Coin}
-     * @param fromAmountCoins {string}
+     * @param amountCoins {string}
      * @param [fixed=false] {boolean|null} null means fixed or float doesn't matter
      * @param [withoutFiat=false] {boolean} pass true if you don't need the fiat equivalent - this will diminish requests count
      * @param [amountIsToReceive=false] {boolean} whether the given amount is receiving amount.
@@ -190,7 +190,7 @@ export class PublicSwapService {
     async getPublicSwapDetails(
         fromCoin,
         toCoin,
-        fromAmountCoins,
+        amountCoins,
         fixed = false,
         withoutFiat = false,
         amountIsToReceive = false
@@ -208,7 +208,7 @@ export class PublicSwapService {
             const details = await (fixed ? this._fixedSwapProvider : this._swapProvider).getSwapInfo(
                 fromCoin,
                 toCoin,
-                fromAmountCoins,
+                amountCoins,
                 fixed,
                 coinUsdtRate,
                 amountIsToReceive
@@ -259,18 +259,23 @@ export class PublicSwapService {
                 }
             }
 
-            const fromAmountBigNumber = BigNumber(fromAmountCoins);
-            if (typeof min === "string" && fromAmountBigNumber.lt(min)) {
+            const amountBigNumber = BigNumber(amountCoins);
+            if (typeof min === "string" && amountBigNumber.lt(min)) {
                 return composeFailResult(
                     PublicSwapService.PUBLIC_SWAP_DETAILS_FAIL_REASONS.AMOUNT_LESS_THAN_MIN_SWAPPABLE
                 );
-            } else if (typeof max === "string" && fromAmountBigNumber.gt(max)) {
+            } else if (typeof max === "string" && amountBigNumber.gt(max)) {
                 return composeFailResult(
                     PublicSwapService.PUBLIC_SWAP_DETAILS_FAIL_REASONS.AMOUNT_HIGHER_THAN_MAX_SWAPPABLE
                 );
             }
 
-            const toAmountCoins = AmountUtils.trim(fromAmountBigNumber.times(details.rate), fromCoin.digits);
+            const fromAmountCoins = amountIsToReceive
+                ? AmountUtils.trim(amountBigNumber.div(details.rate), fromCoin.digits)
+                : amountCoins;
+            const toAmountCoins = amountIsToReceive
+                ? amountCoins
+                : AmountUtils.trim(amountBigNumber.times(details.rate), toCoin.digits);
             const result = {
                 result: true,
                 swapCreationInfo: new BaseSwapCreationInfo(

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

@@ -515,7 +515,7 @@ describe("swapspaceSwapProvider", function () {
 
             swapspaceProvider._supportedCoins
                 .map(coin => coin.coin.ticker)
-                .should.be.deepEqual(["AAAXXX", "ETH", "AAAEEE", "BAC", "BTCBBB"]);
+                .should.be.deepEqual(["ETH", "AAAXXX", "AAAEEE", "BAC", "BTCBBB"]);
         });
 
         it("should handle empty response data", async () => {

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

@@ -279,7 +279,8 @@ export const SwapForm = ({
         receivingAssetTicker,
         amount,
         isSwapAll = false,
-        editedLastInput = false
+        isFixed = false,
+        amountIsToReceive = false
     ) => {},
     retrieveInitialSwapData = async (sendingAssetTicker, receivingAssetTicker) => {},
     triggerDataUpdateResetting = 0,
@@ -297,8 +298,8 @@ export const SwapForm = ({
     swapSeparatorIconSrc,
     swapButtonAlwaysActive = false,
     onIsFixedChange = () => {},
-    recipientAddressExtraIdName,
-    refundAddressExtraIdName,
+    // recipientAddressExtraIdName,
+    // refundAddressExtraIdName,
     translations = {
         swapAllButtonTitles: {
             enable: "Swap all",
@@ -345,12 +346,14 @@ export const SwapForm = ({
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
     const IS_FIXED_BY_DEFAULT = false;
 
+    // Updating the states below will insert the new value into the send or receive input field
     const [updateSendInputTo, setUpdateSendInputTo] = useState(preservedAmount ?? null);
     const [updateReceiveInputTo, setUpdateReceiveInputTo] = useState(null);
 
     const [sendAssetAmount, setSendAssetAmount] = useReferredState(
         preservedAmount == null || preservedAmount === "" ? null : preservedAmount
     );
+    const [receiveAssetAmount, setReceiveAssetAmount] = useReferredState(null);
 
     const [swapRate, setSwapRate] = useState();
     const [minimalAmount, setMinimalAmount] = useReferredState(null);
@@ -363,6 +366,8 @@ export const SwapForm = ({
     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 [isFixedRate, setIsFixedRate] = useReferredState(null);
@@ -398,8 +403,10 @@ export const SwapForm = ({
 
     const handleSendAssetAmountChange = amount => {
         setIsLastEditedReceiving(false);
+        const receiveAmount = AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount);
         if (amount != null && amount !== "") {
-            setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
+            setReceiveAssetAmount(receiveAmount);
+            setUpdateReceiveInputTo(receiveAmount);
         } else {
             setUpdateReceiveInputTo("");
         }
@@ -407,6 +414,7 @@ export const SwapForm = ({
     };
 
     const handleReceiveAssetAmountChange = amount => {
+        setReceiveAssetAmount(amount);
         setIsLastEditedReceiving(true);
         let sendAssetAmount = "";
         if (amount != null && amount !== "") {
@@ -536,7 +544,9 @@ export const SwapForm = ({
                         String(
                             isForPreserved && sendAssetAmount.current == null
                                 ? preservedAmount
-                                : sendAssetAmount.current
+                                : isFixedRate.current && isLastEditedReceiving
+                                  ? receiveAssetAmount.current
+                                  : sendAssetAmount.current
                         )
                 ) {
                     // Means amount changed and we no more need to do this exact calculation
@@ -546,9 +556,6 @@ export const SwapForm = ({
                 if (response.result) {
                     const swapCreationInfo = response.swapCreationInfo;
 
-                    setUpdateSendInputTo(swapCreationInfo.fromAmountCoins);
-                    setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
-
                     if (isSwapAll.current) {
                         setIsAmountZero(BigNumber("0").eq(swapCreationInfo.fromAmountCoins));
                     }
@@ -558,6 +565,9 @@ export const SwapForm = ({
                     setIsRefundAddressRequired(swapCreationInfo?.isRefundAddressRequired);
                     processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
                     setIsSwapCalculated(true);
+
+                    setUpdateSendInputTo(swapCreationInfo.fromAmountCoins);
+                    setUpdateReceiveInputTo(swapCreationInfo.toAmountCoins);
                 } else {
                     handleSwapServiceError(
                         response.reason,
@@ -640,7 +650,7 @@ export const SwapForm = ({
 
     const handleRateModeChanged = isFixed => {
         setIsFixedRate(isFixed);
-        requestDataRefresh(sendAssetAmount.current, true);
+        requestDataRefresh(isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current, true);
     };
 
     useEffect(() => {
@@ -674,7 +684,7 @@ export const SwapForm = ({
         const isCurrentAmountNotZero = sendAssetAmount.current && !BigNumber("0").eq(sendAssetAmount.current);
         const isPreservedAmountNotZero = preservedAmount && !BigNumber("0").eq(preservedAmount);
         if (isCurrentAmountNotZero) {
-            loadFullEstimation(sendAssetAmount.current);
+            loadFullEstimation(isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current);
         } else if (isPreservedAmountNotZero) {
             loadFullEstimation(preservedAmount, true);
         } else {
@@ -761,7 +771,11 @@ export const SwapForm = ({
         let timeoutId = null;
         if (readyToSwap) {
             timeoutId = setTimeout(
-                () => requestDataRefresh(sendAssetAmount.current ?? preservedAmount, true),
+                () =>
+                    requestDataRefresh(
+                        isLastEditedReceiving ? receiveAssetAmount.current : sendAssetAmount.current ?? preservedAmount,
+                        true
+                    ),
                 DETAIL_REFRESH_INTERVAL_MS
             );
             setIdleDataUpdateTimeoutId(timeoutId);
@@ -794,9 +808,15 @@ export const SwapForm = ({
 
     useEffect(() => {
         if (swapRate != null && sendAssetAmount.current != null) {
-            setUpdateReceiveInputTo(
-                AmountUtils.trim(BigNumber(sendAssetAmount.current).times(swapRate), receivingAssetDecimalCount)
-            );
+            if (isLastEditedReceiving) {
+                setUpdateSendInputTo(
+                    AmountUtils.trim(BigNumber(receiveAssetAmount.current).div(swapRate), sendingAssetDecimalCount)
+                );
+            } else {
+                setUpdateReceiveInputTo(
+                    AmountUtils.trim(BigNumber(sendAssetAmount.current).times(swapRate), receivingAssetDecimalCount)
+                );
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [swapRate]);
@@ -814,13 +834,17 @@ export const SwapForm = ({
 
         if (sendAssetAmount.current == null) return;
         let processingAmount = sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
-        requestDataRefresh(processingAmount);
+        let processingReceivingAmount = receiveAssetAmount.current === "" ? "0" : receiveAssetAmount.current;
+        requestDataRefresh(isLastEditedReceiving ? processingReceivingAmount : processingAmount);
         processMinMaxAmounts(processingAmount);
         setIsAmountZero(BigNumber("0").eq(processingAmount));
         setIsSwapCalculated(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sendAssetAmount.current]);
 
+    const recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
+    const refundAddressExtraIdName = getExtraIdNameByTicker(sendingAssetTicker);
+
     return (
         <div className={s["swap-form"]}>
             <TitleBox
@@ -876,7 +900,7 @@ export const SwapForm = ({
                         upperFormPosition
                         errorEncountered={!minimalAmountValid}
                         ref={fromAssetSelectionButtonRef}
-                        isLoading={false}
+                        isLoading={isLastEditedReceiving ? isLoading.current : false}
                         cryptoAssetToFiatRate={sendingAssetToFiatRate}
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
@@ -918,7 +942,7 @@ export const SwapForm = ({
                         lowerFormPosition
                         estimateAmount={!isFixedRate.current}
                         ref={toAssetSelectionButtonRef}
-                        isLoading={isLoading.current}
+                        isLoading={isLastEditedReceiving ? false : isLoading.current}
                         cryptoAssetToFiatRate={receivingAssetToFiatRate}
                         fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
@@ -1119,7 +1143,8 @@ export const SwapForm = ({
                                 recipientAddress.current,
                                 recipientAddressExtraId.current,
                                 refundAddress.current,
-                                refundAddressExtraId.current
+                                refundAddressExtraId.current,
+                                isLastEditedReceiving
                             )
                         }
                         fullWidthOnMobiles