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

package/package.json

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

package/src/common/amountUtils.js

@@ -356,42 +356,53 @@ export class AmountUtils {
     }
 
     /**
-     * Safely composes rate string (handles small/big rates)
+     * Safely composes rate string (handles small/big rates).
+     * Here we try to calculate a clear rate for the user. The difficulty is that the rate value can be pretty
+     * small as some coins have significantly higher price than the other. For such cases we calculate
+     * not the "1 <coin_A> is X <coin B>" but "Y <coin_A> is X <coin B>" where Y is one of the powers of 100.
      *
      * @param leftTicker {string}
      * @param rightTicker {string}
      * @param rate {number|string|BigNumber}
      * @param [rightCurrencyDigitsAfterDots=8] {number}
+     * @param [strictRate=false] {boolean} true if the rate is strict and false if approximate
      * @return {string}
      */
     static composeRateText(
         leftTicker,
         rightTicker,
         rate,
-        rightCurrencyDigitsAfterDots = this.significantDecimalCount
+        rightCurrencyDigitsAfterDots = this.significantDecimalCount,
+        strictRate = false
     ) {
         try {
-            /* Here we try to calculate a clear rate for the user. The difficulty is that the rate value can be pretty
-             * small as some coins have significantly higher price than the other. For such cases we calculate
-             * not the "1 <coin_A> is X <coin B>" but "Y <coin_A> is X <coin B>" where Y is one of the powers of 100.
-             */
+            if (rightCurrencyDigitsAfterDots < 0) {
+                rightCurrencyDigitsAfterDots = this.significantDecimalCount;
+            }
             let leftNumber = BigNumber("1");
             const multiplier = BigNumber("100");
             const maxAttemptsToGetRate = 10;
             let right = null;
             const rateBigNumber = BigNumber(rate);
-            for (let i = 0; i < maxAttemptsToGetRate; ++i) {
-                const rightNumberAttempt = rateBigNumber
-                    .times(leftNumber)
-                    .toFixed(
-                        rightCurrencyDigitsAfterDots,
-                        BigNumber.ROUND_FLOOR
-                    );
-                if (!BigNumber(rightNumberAttempt).eq(BigNumber("0"))) {
-                    right = BigNumber(rightNumberAttempt);
-                    break;
-                } else {
-                    leftNumber = leftNumber.times(multiplier);
+            if (BigNumber(rate).eq("0")) {
+                right = BigNumber("0");
+            } else if (
+                rate &&
+                (BigNumber.isBigNumber(rate) || !Number.isNaN(+rate))
+            ) {
+                for (let i = 0; i < maxAttemptsToGetRate; ++i) {
+                    const rightNumberAttempt = rateBigNumber
+                        .times(leftNumber)
+                        .toFixed(
+                            rightCurrencyDigitsAfterDots,
+                            BigNumber.ROUND_FLOOR
+                        );
+                    if (!BigNumber(rightNumberAttempt).eq(BigNumber("0"))) {
+                        right = BigNumber(rightNumberAttempt);
+                        break;
+                    } else {
+                        leftNumber = leftNumber.times(multiplier);
+                    }
                 }
             }
             const leftAmountString = AmountUtils.toIntegerString(leftNumber);
@@ -402,9 +413,9 @@ export class AmountUtils {
                           BigNumber.ROUND_FLOOR
                       )
                     : null;
-            return `${leftAmountString} ${leftTicker} ~ ${
-                rightAmountString ?? "?"
-            } ${rightTicker}`;
+            return `${leftAmountString} ${leftTicker} ${
+                strictRate ? "=" : "~"
+            } ${rightAmountString ?? "?"} ${rightTicker}`;
         } catch (e) {
             // eslint-disable-next-line no-console
             console.log("composeRateText", e);

package/src/common/tests/amountUtils/composeRateText.test.js

@@ -0,0 +1,209 @@
+import sinon from "sinon";
+import should from "should";
+
+import { beforeEach, afterEach, describe, it } from "vitest";
+import BigNumber from "bignumber.js";
+import { AmountUtils } from "../../amountUtils.js";
+
+describe("AmountUtils", function () {
+    let toIntegerStringStub;
+
+    beforeEach(function () {
+        toIntegerStringStub = sinon
+            .stub(AmountUtils, "toIntegerString")
+            .callsFake((number) => number.toFixed(0));
+    });
+
+    afterEach(function () {
+        toIntegerStringStub.restore();
+    });
+
+    describe("composeRateText", function () {
+        it("Should handle simple rate calculation", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0.1");
+
+            result.should.equal("1 BTC ~ 0.10000000 ETH");
+        });
+
+        it("Should handle rate with strictRate set to true", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.1",
+                8,
+                true
+            );
+
+            result.should.equal("1 BTC = 0.10000000 ETH");
+        });
+
+        it("Should handle rate with high precision", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.12345678903422",
+                8
+            );
+
+            result.should.equal("1 BTC ~ 0.12345678 ETH");
+        });
+
+        it("Should handle very small rates by scaling up", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.000000000000001",
+                8
+            );
+
+            result.should.equal("100000000 BTC ~ 0.00000010 ETH");
+        });
+
+        it("Should handle large rates", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "1000000000000000",
+                8
+            );
+
+            result.should.equal("1 BTC ~ 1000000000000000.00000000 ETH");
+        });
+
+        it("Should return '?' for invalid rate input", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "invalid");
+
+            result.should.equal("1 BTC ~ ? ETH");
+        });
+
+        it("Should return correct format for null rate", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", null);
+
+            result.should.equal("1 BTC ~ ? ETH");
+        });
+
+        it("Should ensure that toIntegerString is called with correct parameter", function () {
+            AmountUtils.composeRateText("BTC", "ETH", "0.1");
+
+            toIntegerStringStub.calledWith(BigNumber("1")).should.be.true();
+        });
+
+        it("Should handle rate with different rightCurrencyDigitsAfterDots", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                5
+            );
+
+            result.should.equal("1 BTC ~ 0.12345 ETH");
+        });
+
+        it("Should handle rate with max rightCurrencyDigitsAfterDots", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                10
+            );
+
+            result.should.equal("1 BTC ~ 0.1234567890 ETH");
+        });
+
+        it("Should ensure proper rounding of right amount", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                4
+            );
+
+            result.should.equal("1 BTC ~ 0.1234 ETH");
+        });
+
+        it("Should handle great rightCurrencyDigitsAfterDots", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                20
+            );
+
+            result.should.equal("1 BTC ~ 0.12345678900000000000 ETH");
+        });
+
+        it("Should handle empty rate", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "");
+
+            result.should.equal("1 BTC ~ ? ETH");
+        });
+
+        it("Should handle negative rate", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "-0.1");
+
+            result.should.equal("1 BTC ~ -0.10000000 ETH");
+        });
+
+        it("Should return proper result for rate equal to zero", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "0");
+
+            result.should.equal("1 BTC ~ 0.00000000 ETH");
+        });
+
+        it("Should ensure that toIntegerString is called the correct number of times", function () {
+            AmountUtils.composeRateText("BTC", "ETH", "0.1");
+
+            toIntegerStringStub.callCount.should.equal(1);
+        });
+
+        it("Should handle rate with exponential notation", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "1e-8");
+
+            result.should.equal("1 BTC ~ 0.00000001 ETH");
+        });
+
+        it("Should return correct format when rate has a lot of trailing zeros", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.1000000000000000000000"
+            );
+
+            result.should.equal("1 BTC ~ 0.10000000 ETH");
+        });
+
+        it("Should handle zero rightCurrencyDigitsAfterDots", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                0
+            );
+
+            result.should.equal("100 BTC ~ 12 ETH");
+        });
+
+        it("Should handle negative rightCurrencyDigitsAfterDots", function () {
+            const result = AmountUtils.composeRateText(
+                "BTC",
+                "ETH",
+                "0.123456789",
+                -1
+            );
+
+            result.should.equal("1 BTC ~ 0.12345678 ETH");
+        });
+
+        it("Should handle rate input with trailing spaces", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", " 0.1 ");
+
+            result.should.equal("1 BTC ~ 0.10000000 ETH");
+        });
+
+        it("Should handle rate input in scientific notation", function () {
+            const result = AmountUtils.composeRateText("BTC", "ETH", "1e-5");
+
+            result.should.equal("1 BTC ~ 0.00001000 ETH");
+        });
+    });
+});

package/src/components/atoms/AssetSelection/asset-selection.module.scss

@@ -34,6 +34,7 @@
         border-radius: 50px;
         font-weight: $bold;
         margin-right: 3px;
+        text-wrap: nowrap;
     }
 
     &-icon-wrapper {

package/src/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -41,7 +41,10 @@ export const NoticeIcon = ({
                     className={s["notice-icon-image"]}
                 />
             ) : (
-                <div className={s["notice-icon-image"]}>
+                <div
+                    className={s["notice-icon-image"]}
+                    onClick={() => setShowTooltip((prev) => !prev)}
+                >
                     <NoticeQuestionIcon />
                 </div>
             )}

package/src/components/atoms/QrCode/QrCode.jsx

@@ -6,7 +6,7 @@ import { generateQrAndShowInCanvas } from "../../../common/adapters/qrUtils";
 
 import s from "./qr-code.module.scss";
 
-export const QrCode = ({ address }) => {
+export const QrCode = ({ address, fill = false }) => {
     const canvasRef = useRef();
 
     useEffect(() => {
@@ -22,11 +22,17 @@ export const QrCode = ({ address }) => {
         })();
     }, [address]);
 
-    return <div className={s["qr-code"]} ref={canvasRef} />;
+    return (
+        <div
+            className={s["qr-code"] + (fill ? " " + s["fill"] : "")}
+            ref={canvasRef}
+        />
+    );
 };
 
 QrCode.propTypes = {
     address: PropTypes.string.isRequired,
+    fill: PropTypes.bool,
 };
 
 QrCode.defaultProps = {

package/src/components/atoms/QrCode/qr-code.module.scss

@@ -6,4 +6,10 @@
     @media (max-width: $tablet-width) {
         margin: 0 auto;
     }
+
+    &.fill {
+        position: absolute;
+        width: 100% !important;
+        height: 100% !important;
+    }
 }

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

@@ -275,8 +275,8 @@ export const SwapForm = ({
     setRecepientAddress,
     setRecepientAddressExtraId,
     recepientAddressExtraIdAvailable = false,
-    isFixed,
-    setIsFixed,
+    displayRateSelector = false,
+    dispatchRateModeChanged = (isFixed) => {},
 }) => {
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
 
@@ -310,6 +310,7 @@ export const SwapForm = ({
     );
     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 [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(
@@ -498,7 +499,8 @@ export const SwapForm = ({
                     sendingAssetTicker,
                     receivingAssetTicker,
                     amount,
-                    isSwapAll.current
+                    isSwapAll.current,
+                    isFixedRate
                 );
 
                 if (
@@ -619,6 +621,12 @@ export const SwapForm = ({
         }, e);
     };
 
+    const handleRateModeChanged = (isFixed) => {
+        setIsFixedRate(isFixed);
+        dispatchRateModeChanged(isFixed);
+        requestDataRefresh(sendAssetAmount.current, true);
+    };
+
     useEffect(() => {
         if (isSwapAll.current === true) {
             requestDataRefresh(undefined, true, true);
@@ -943,7 +951,9 @@ export const SwapForm = ({
                                     {AmountUtils.composeRateText(
                                         sendingAssetTickerPrintable,
                                         receivingAssetTickerPrintable,
-                                        swapRate
+                                        swapRate,
+                                        receivingAssetDecimalCount,
+                                        isFixedRate
                                     )}
                                 </span>
                             </>
@@ -1098,13 +1108,11 @@ export const SwapForm = ({
                     ""
                 )}
 
-                {typeof isFixed === "boolean" &&
-                setIsFixed &&
-                typeof setIsFixed === "function" ? (
+                {displayRateSelector ? (
                     <div className={s["swap-form-rate-selector"]}>
                         <RateSelector
-                            isFixed={isFixed}
-                            setIsFixed={setIsFixed}
+                            isFixed={isFixedRate}
+                            setIsFixed={handleRateModeChanged}
                             translations={translations.rateSelector}
                         />
                     </div>
@@ -1161,7 +1169,7 @@ export const SwapForm = ({
                         fullWidthOnMobiles
                         isDisabled={!readyToSwap}
                         to={formHasBalance ? "" : confirmButtonTo}
-                        loader={formHasBalance || isAddressFieldEnabled}
+                        loader={formHasBalance}
                         handleError={callHandlingErrors}
                     />
                 </div>

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

@@ -167,13 +167,25 @@ export class SwapspaceSwapProvider extends SwapProvider {
                              */
                             const code = item.code.toUpperCase();
                             const network = item.network.toUpperCase();
+                            /** Removing ticker and protocol name from coin name as we usually use them explicitly
+                             * from coin object rather than counting on having it in the coin name itself.
+                             * This processing is needed due to poor quality of swapspace coins names. */
+                            let name = (item.name ?? "")
+                                .replaceAll(`(${code})`, "")
+                                .replaceAll(`(${network})`, "")
+                                .replaceAll(/ +/g, " ")
+                                .trim();
+                            if (name === "") {
+                                // Rolling back to original name if our processing leads in empty name
+                                name = item.name;
+                            }
                             const ticker = `${code}${
                                 code === network ? "" : network
                             }`;
                             const defaultDecimalPlacesForCoinNotSupportedOOB = 8;
                             const defaultMinConfirmationsForCoinNotSupportedOOB = 1;
                             coin = new Coin(
-                                item.name,
+                                name,
                                 ticker,
                                 code,
                                 defaultDecimalPlacesForCoinNotSupportedOOB,

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

@@ -192,6 +192,123 @@ describe("swapspaceSwapProvider", function () {
             newCoin.doesUseOutputs.should.be.equal(false);
         });
 
+        describe("Should process name when creating custom coins", function () {
+            [
+                {
+                    item: { code: "BTC", network: "BTC", name: " Bitcoin  " },
+                    expectedName: "Bitcoin",
+                },
+                {
+                    item: {
+                        code: "BTC",
+                        network: "BTC",
+                        name: " Bitcoin  (BTC)  ",
+                    },
+                    expectedName: "Bitcoin",
+                },
+                {
+                    item: { code: "BTC", network: "BTC", name: "Bitcoin" },
+                    expectedName: "Bitcoin",
+                },
+                {
+                    item: { code: "BTC", network: "BTC", name: "BTC" },
+                    expectedName: "BTC",
+                },
+                {
+                    item: {
+                        code: "BTC",
+                        network: "BTC",
+                        name: "Bitcoin (BTC)",
+                    },
+                    expectedName: "Bitcoin",
+                },
+                {
+                    item: {
+                        code: "BTC",
+                        network: "BTC",
+                        name: "Bitcoin (BTC) (BTC)",
+                    },
+                    expectedName: "Bitcoin",
+                },
+                {
+                    item: { code: "BTC", network: "BTC", name: "BTC (BTC)" },
+                    expectedName: "BTC",
+                },
+                {
+                    item: { code: "BTC", network: "BTC", name: "(BTC) (BTC)" },
+                    expectedName: "(BTC) (BTC)",
+                },
+                {
+                    item: { code: "USDT", network: "ERC20", name: "Tether" },
+                    expectedName: "Tether",
+                },
+                {
+                    item: { code: "USDT", network: "ERC20", name: "USDT" },
+                    expectedName: "USDT",
+                },
+                {
+                    item: {
+                        code: "USDT",
+                        network: "ERC20",
+                        name: "Tether (USDT)",
+                    },
+                    expectedName: "Tether",
+                },
+                {
+                    item: {
+                        code: "USDT",
+                        network: "ERC20",
+                        name: "Tether (USDT)",
+                    },
+                    expectedName: "Tether",
+                },
+                {
+                    item: {
+                        code: "USDT",
+                        network: "ERC20",
+                        name: "Tether (USDT) (ERC20)",
+                    },
+                    expectedName: "Tether",
+                },
+                {
+                    item: {
+                        code: "USDT",
+                        network: "ERC20",
+                        name: "USDT (ERC20)",
+                    },
+                    expectedName: "USDT",
+                },
+                {
+                    item: {
+                        code: "USDT",
+                        network: "ERC20",
+                        name: "(USDT) (ERC20)",
+                    },
+                    expectedName: "(USDT) (ERC20)",
+                },
+            ].forEach((testCase) => {
+                it("Should construct coins with default params if _customCoinBuilder return null for some and useRestrictedCoinsSet is false", async () => {
+                    const someResp = {
+                        data: [testCase.item],
+                    };
+                    axiosGetStub.resetBehavior();
+                    axiosGetStub.resolves(someResp);
+                    const p = new SwapspaceSwapProvider(
+                        "/",
+                        new Cache(),
+                        () => null,
+                        false
+                    );
+
+                    await p._fetchSupportedCurrenciesIfNeeded();
+
+                    p._supportedCoins[0].coin.latinName.should.be.equal(
+                        testCase.expectedName
+                    );
+                });
+            });
+        });
+
         it("Should construct coins with null protocol and ticker===<uppercase code> if _customCoinBuilder return null for item and useRestrictedCoinsSet is false and code and network are equal for item", async () => {
             const someResp = {
                 data: [