@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/swaps-lib/test/utils/swapUtils/safeHandleRequestsLimitExceeding.test.js

@@ -0,0 +1,80 @@
+import sinon from "sinon";
+import should from "should";
+
+import { beforeEach, afterEach, describe, it } from "vitest";
+import { Logger } from "../../../../common-apis/utils/logging/logger.js";
+import { EmailsApi } from "../../../../common-apis/utils/emailAPI.js";
+import { SwapUtils } from "../../../utils/swapUtils.js";
+
+describe("SwapUtils", function () {
+    let sendEmailStub;
+
+    beforeEach(function () {
+        sendEmailStub = sinon.stub(EmailsApi, "sendEmail").resolves();
+    });
+
+    afterEach(function () {
+        sendEmailStub.restore();
+    });
+
+    describe("safeHandleRequestsLimitExceeding", function () {
+        it("Should ensure that sendEmail is called when safeHandleRequestsLimitExceeding is invoked", function () {
+            SwapUtils.safeHandleRequestsLimitExceeding();
+
+            sendEmailStub.called.should.be.true();
+        });
+
+        it("Should verify that sendEmail is called once", function () {
+            SwapUtils.safeHandleRequestsLimitExceeding();
+
+            sendEmailStub.callCount.should.equal(1);
+        });
+
+        it('Should ensure that sendEmail is called with the correct subject: "AUTOMATIC EMAIL - SWAPSPACE REQUESTS LIMIT EXCEEDED"', function () {
+            SwapUtils.safeHandleRequestsLimitExceeding();
+
+            sendEmailStub.calledWith("AUTOMATIC EMAIL - SWAPSPACE REQUESTS LIMIT EXCEEDED").should.be.true();
+        });
+
+        it('Should ensure that sendEmail is called with the correct body: "Requests limit exceeded. Urgently ask swapspace support for limit increasing"', function () {
+            SwapUtils.safeHandleRequestsLimitExceeding();
+
+            sendEmailStub
+                .calledWith(
+                    sinon.match.any,
+                    "Requests limit exceeded. Urgently ask swaps provider support for limit increasing"
+                )
+                .should.be.true();
+        });
+
+        it("Should handle an error thrown by the sendEmail function without crashing", function (done) {
+            sendEmailStub.rejects(new Error("Fake error for testing purposes"));
+
+            let error;
+            try {
+                SwapUtils.safeHandleRequestsLimitExceeding();
+            } catch (e) {
+                error = e;
+            }
+            (error === undefined).should.be.true();
+        });
+
+        it("Should ensure that safeHandleRequestsLimitExceeding does not return a value", function () {
+            const result = SwapUtils.safeHandleRequestsLimitExceeding();
+
+            (!result).should.be.true();
+        });
+
+        it("Should log a descriptive error message when a failure occurs", function (done) {
+            sendEmailStub.rejects(new Error("Fake error for testing purposes"));
+            const logStub = sinon.stub(Logger, "log");
+
+            SwapUtils.safeHandleRequestsLimitExceeding();
+
+            setTimeout(() => {
+                logStub.calledWithMatch(sinon.match("Failed to handle limit exceeding")).should.be.true();
+                logStub.restore();
+            }, 10);
+        });
+    });
+});

package/src/swaps-lib/utils/swapUtils.js

@@ -0,0 +1,195 @@
+import { BigNumber } from "bignumber.js";
+
+import { AmountUtils } from "../../common-apis/amountUtils.js";
+import { FiatCurrenciesService } from "../../common-apis/fiatCurrenciesService.js";
+import { improveAndRethrow } from "../../common-apis/errorUtils.js";
+import { ExistingSwapWithFiatData } from "../models/existingSwapWithFiatData.js";
+import { EmailsApi } from "../../common-apis/utils/emailAPI.js";
+import { SwapProvider } from "../external-apis/swapProvider.js";
+import { Logger } from "../../common-apis/utils/logging/logger.js";
+import { safeStringify } from "../../common-apis/utils/safeStringify.js";
+
+export class SwapUtils {
+    /**
+     * Retrieves min and max limits for swapping giving currencies.
+     * Returns also conversion rate if possible with predefined amount logic.
+     * Rate is how many "to" coins does 1 "from" coin contain.
+     *
+     * In case of errors returns one of reasons
+     *   - SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED
+     *   - one of SwapProvider.COMMON_ERRORS.*
+     *
+     * @param swapProvider {SwapProvider}
+     * @param fromCoin {Coin} enabled coin (to swap amount from)
+     * @param toCoin {Coin}
+     * @param coinToCurrentFiatRate {string|null}
+     * @param fiatCurrencyDecimals {number|null}
+     * @return {Promise<{
+     *             result: true,
+     *             min: string,
+     *             fiatMin: (number|null),
+     *             max: string,
+     *             fiatMax: (number|null),
+     *             rate: (string|null),
+     *         }|{
+     *             result: false,
+     *             reason: string
+     *         }>}
+     */
+    static async getInitialSwapData(
+        swapProvider,
+        fromCoin,
+        toCoin,
+        coinToCurrentFiatRate = null,
+        fiatCurrencyDecimals = null
+    ) {
+        const loggerSource = "getInitialSwapData";
+        try {
+            /* We use some amount here that should fit at least some of the limits of the swap providers.
+             * So we are going to get some rate to be used as the default for the on-flight calculations before we get
+             * the exact rate (that should be retrieved by getSwapCreationInfo method) for a specific amount.
+             */
+            const defaultAmountUsd = BigNumber("300");
+            const coinUsdRate = await swapProvider.getCoinToUSDTRate(fromCoin);
+            const coinAmountForDefaultUsdAmount = AmountUtils.trim(
+                coinUsdRate.result ? defaultAmountUsd.div(coinUsdRate?.rate) : defaultAmountUsd,
+                fromCoin.digits
+            );
+            Logger.log(`Init: ${coinAmountForDefaultUsdAmount} ${fromCoin.ticker}->${toCoin.ticker}`, loggerSource);
+            const details = await swapProvider.getSwapInfo(fromCoin, toCoin, coinAmountForDefaultUsdAmount);
+            if (!details) {
+                throw new Error("The details are empty: " + safeStringify(details));
+            }
+            if (!details.result) {
+                Logger.log(`Failed with reason: ${details.reason}. ${fromCoin.ticker}->${toCoin.ticker}`, loggerSource);
+                if (
+                    details?.reason === SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED ||
+                    details?.reason === SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED
+                ) {
+                    return { result: false, reason: details.reason };
+                } else {
+                    throw new Error("Unhandled error case: " + details?.reason);
+                }
+            }
+            let fiatMin = null;
+            let fiatMax = null;
+            const fiatRate = coinToCurrentFiatRate ?? coinUsdRate?.rate;
+            const fiatDecimals = fiatCurrencyDecimals ?? FiatCurrenciesService.getCurrencyDecimalCountByCode("USD");
+            if (fiatRate != null) {
+                fiatMin = BigNumber(details?.smallestMin).times(fiatRate).toFixed(fiatDecimals);
+                fiatMax = BigNumber(details?.greatestMax).times(fiatRate).toFixed(fiatDecimals);
+            }
+
+            const result = {
+                result: true,
+                min: details?.smallestMin,
+                fiatMin: fiatMin,
+                max: details?.greatestMax,
+                fiatMax: fiatMax,
+                rate: AmountUtils.trim(details.rate, 30),
+            };
+            Logger.log(`Returning: ${safeStringify(result)}`, loggerSource);
+            return result;
+        } catch (e) {
+            Logger.logError(e, loggerSource, `Failed to init swap: ${safeStringify(e)}`);
+            improveAndRethrow(e, loggerSource);
+        }
+    }
+
+    static safeHandleRequestsLimitExceeding() {
+        (async () => {
+            try {
+                await EmailsApi.sendEmail(
+                    "AUTOMATIC EMAIL - SWAPSPACE REQUESTS LIMIT EXCEEDED",
+                    "Requests limit exceeded. Urgently ask swaps provider support for limit increasing"
+                );
+            } catch (e) {
+                Logger.log(`Failed to handle limit exceeding ${safeStringify(e)}`, "_safeHandleRequestsLimitExceeding");
+            }
+        })();
+    }
+
+    /**
+     * If some swap is not found by id then there is no item in return list.
+     *
+     * @param swapProviders {SwapProvider[]} - Array of swap providers
+     * @param swapIds {string[]} - Array of swap IDs
+     * @return {Promise<{
+     *             result: true,
+     *             swaps: ExistingSwapWithFiatData[]
+     *         }|{
+     *             result: false,
+     *             reason: string
+     *         }>}
+     */
+    static async getExistingSwapsDetailsWithFiatAmounts(swapProviders, swapIds) {
+        try {
+            let allSwaps = [];
+            let remainingSwapIds = new Set(swapIds);
+            const failResults = [];
+            for (let provider of swapProviders) {
+                const result = await provider.getExistingSwapsDetailsAndStatus([...remainingSwapIds]);
+                if (result.result) {
+                    const extendedSwaps = [];
+                    for (let swap of result.swaps) {
+                        if (swap.status === SwapProvider.SWAP_STATUSES.REFUNDED) {
+                            const rate = await provider.getCoinToUSDTRate(swap.fromCoin);
+                            extendedSwaps.push(
+                                ExistingSwapWithFiatData.fromExistingSwap(
+                                    swap,
+                                    rate?.rate != null ? BigNumber(swap.fromAmount).times(rate.rate).toNumber() : null,
+                                    rate?.rate != null ? BigNumber(swap.toAmount).times(rate.rate).toNumber() : null,
+                                    "USD",
+                                    FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
+                                )
+                            );
+                        } else {
+                            const [fromCoinFiatRate, toCoinFiatRate] = await Promise.all([
+                                provider.getCoinToUSDTRate(swap.fromCoin),
+                                provider.getCoinToUSDTRate(swap.toCoin),
+                            ]);
+                            extendedSwaps.push(
+                                ExistingSwapWithFiatData.fromExistingSwap(
+                                    swap,
+                                    fromCoinFiatRate?.rate != null
+                                        ? BigNumber(swap.fromAmount).times(fromCoinFiatRate.rate).toNumber()
+                                        : null,
+                                    toCoinFiatRate?.rate != null
+                                        ? BigNumber(swap.toAmount).times(toCoinFiatRate.rate).toNumber()
+                                        : null,
+                                    "USD",
+                                    FiatCurrenciesService.getCurrencyDecimalCountByCode("USD")
+                                )
+                            );
+                        }
+                        remainingSwapIds.delete(swap.id);
+                    }
+                    allSwaps = allSwaps.concat(extendedSwaps);
+
+                    // Stop if we have retrieved all swaps
+                    if (allSwaps.length >= swapIds.length) {
+                        break;
+                    }
+                } else {
+                    failResults.push(result);
+                }
+            }
+
+            if (swapIds.length > 0 && allSwaps.length === 0 && failResults.length > 0) {
+                const failReasons = failResults.map(r => r.reason);
+                return {
+                    result: false,
+                    reason: failReasons.find(r => r !== SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED)
+                        ? failReasons.join("\n")
+                        : SwapProvider.COMMON_ERRORS.REQUESTS_LIMIT_EXCEEDED,
+                };
+            }
+            return {
+                result: true,
+                swaps: allSwaps,
+            };
+        } catch (e) {
+            improveAndRethrow(e, "getExistingSwapsDetailsWithFiatAmounts");
+        }
+    }
+}

package/{styles → src/ui-kit/assets/styles}/_functions.scss

@@ -1,3 +1,8 @@
+@use "size/margin-size" as *;
+@use "size/padding-size" as *;
+@use "colors/solid-colors" as *;
+@use "colors/light-colors" as *;
+
 @function SolidColor($color) {
     @return map_get($solidColor, $color);
 }

package/{styles → src/ui-kit/assets/styles}/_mixins.scss

@@ -1,5 +1,5 @@
-@import "variables";
-@import "functions";
+@use "variables" as *;
+@use "functions" as *;
 
 @mixin typograpy($tag) {
     @if ($tag == "h1") {

package/{styles → src/ui-kit/assets/styles}/_placeholder.scss

@@ -1,5 +1,5 @@
-@import "variables";
-@import "functions";
+@use "variables" as *;
+@use "functions" as *;
 
 %container-padding {
     padding: Padding("50");
@@ -10,7 +10,7 @@
 }
 
 %font {
-    font-family: NunitoSans;
+    // font-family: NunitoSans;
 }
 
 %text-very-bold {

package/{styles → src/ui-kit/assets/styles}/_variables.scss

@@ -1,29 +1,28 @@
-@import "colors/solid-colors";
-@import "colors/light-colors";
-@import "size/margin-size";
-@import "size/padding-size";
+@use "colors/solid-colors" as *;
+@use "colors/light-colors" as *;
+@use "size/margin-size" as *;
+@use "size/padding-size" as *;
+@use "functions" as *;
 
 $borderRadius: 16px;
-$background: linear-gradient(
-    39deg,
-    #6fdfa0 0%,
-    #405db0 81%,
-    #405db0 81%,
-    #3b5bb6 81%
-);
+$background: linear-gradient(39deg, #6fdfa0 0%, #405db0 81%, #405db0 81%, #3b5bb6 81%);
 $white: #ffffff;
 
 $separatorBorder: 0.5px solid SolidColor("smoke");
 $buttonBorder: 2px solid SolidColor("tosca");
 $buttonBorderWhite: 2px solid $white;
 
-$shadowOutlineStatic: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset,
+$shadowOutlineStatic:
+    0px 0px 0px 1px rgba(0, 0, 0, 0) inset,
     0px 0px 3px 0px rgba(0, 0, 0, 0);
-$shadowOutlineHover: 0px 0px 0px 1px LightColor("dark-20") inset,
+$shadowOutlineHover:
+    0px 0px 0px 1px LightColor("dark-20") inset,
     0px 0px 3px 0px rgba(0, 0, 0, 0);
-$shadowOutlineActive: 0px 0px 0px 1px #16cdd6 inset,
+$shadowOutlineActive:
+    0px 0px 0px 1px #16cdd6 inset,
     0px 0px 3px 0px rgba(22, 205, 214, 0.3);
-$shadowOutlineError: 0px 0px 0px 1px #ee6a7d inset,
+$shadowOutlineError:
+    0px 0px 0px 1px #ee6a7d inset,
     0px 0px 3px 0px rgba(#ee6a7d, 0.3);
 
 $transitionEaseOut: cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -44,3 +43,6 @@ $medium: 400;
 $regular: 300;
 
 $letterSpacing: 0.5px;
+
+// SSR landings width
+$landingMaxWidth: 1172px;

package/src/ui-kit/assets/styles/global.scss

@@ -0,0 +1,165 @@
+@use "mixins" as *;
+@use "functions" as *;
+@use "placeholder" as *;
+@use "variables" as *;
+
+// Global classes
+
+.container {
+    max-width: 1260px;
+    margin: 0 auto;
+    @extend %container-padding;
+}
+
+.background-shine {
+    position: absolute;
+    left: -165px;
+    top: -300px;
+    z-index: -1;
+
+    @media (max-width: $phone-width) {
+        left: -165px;
+        top: -103px;
+        width: 648px;
+    }
+}
+
+.path {
+    width: 100%;
+    height: 1px;
+    background: LightColor("white-20");
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    border-bottom: 0.5px solid SolidColor("smoke");
+}
+
+.skeleton {
+    background: SolidColor("lightsmoke");
+    animation: skeleton-animate 1s 1s infinite ease-in-out;
+}
+
+.skeleton-dark {
+    background: LightColor("dark-20");
+    animation: skeleton-dark-animate 1s 1s infinite ease-in-out;
+}
+
+.skeleton-transparent {
+    background: rgba($white, 0.2);
+    animation: skeleton-transparent-animate 1s 1s infinite ease-in-out;
+}
+
+.semi-transparent {
+    opacity: 0.5;
+}
+
+@keyframes skeleton-animate {
+    0% {
+        background: #eaeaea;
+    }
+    50% {
+        background: SolidColor("lightsmoke");
+    }
+    100% {
+        background: #eaeaea;
+    }
+}
+
+@keyframes skeleton-dark-animate {
+    0% {
+        background: LightColor("dark-20");
+    }
+    50% {
+        background: LightColor("grey-20");
+    }
+    100% {
+        background: LightColor("dark-20");
+    }
+}
+
+@keyframes skeleton-transparent-animate {
+    0% {
+        background: rgba($white, 0.2);
+    }
+    50% {
+        background: rgba($white, 0.1);
+    }
+    100% {
+        background: rgba($white, 0.2);
+    }
+}
+
+// Tag-level rules
+
+a {
+    text-decoration: none;
+}
+
+td {
+    padding: 0;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+* {
+    outline: none !important;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+html {
+    background-color: SolidColor("dark");
+}
+
+body {
+    margin: 0;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+h1 {
+    @include typograpy("h1");
+}
+
+h2 {
+    @include typograpy("h2");
+}
+
+h3 {
+    @include typograpy("h3");
+}
+
+h4 {
+    @include typograpy("h4");
+}
+
+h5 {
+    @include typograpy("h5");
+}
+
+h6 {
+    @include typograpy("h6");
+}
+
+p {
+    @include typograpy("p");
+}

package/src/ui-kit/assets/styles/index.scss

@@ -0,0 +1,10 @@
+@forward "colors/solid-colors";
+@forward "colors/light-colors";
+
+@forward "size/margin-size";
+@forward "size/padding-size";
+
+@forward "variables";
+@forward "placeholder";
+@forward "mixins";
+@forward "functions";

package/src/ui-kit/assets/wrappedImages/arrowIcon.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#232d42"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/arrowTosca.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+// Originally: arrow-tosca.svg
+export default () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#16CDD6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/arrowWhite.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+// Originally: arrow-white.svg
+export default () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#fff"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/darkRectangle.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default () => (
+    <svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 13L25 0H0L12.5 13Z" fill="#232D42" />
+    </svg>
+);