@rabbitio/ui-kit 1.0.0-beta.11 → 1.0.0-beta.111

package/src/ui-kit/components/organisms/SwapForm/swap-form.module.scss

@@ -0,0 +1,134 @@
+@use "../../../assets/styles/index" as *;
+
+.swap-form {
+    width: 100%;
+
+    &-inputs {
+        position: relative;
+        z-index: 2;
+
+        &-separator {
+            height: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+
+            img {
+                margin: -13px 0;
+            }
+
+            &:not(.disabled) {
+                @extend %hover-state;
+            }
+
+            &.disabled {
+                opacity: 0.7;
+            }
+        }
+    }
+
+    &-information-field {
+        z-index: 1;
+        background-color: SolidColor("lightsmoke");
+        margin-top: 4px;
+        border-radius: 0 0 8px 8px;
+        padding: 10px 20px;
+        position: relative;
+        text-align: left;
+
+        .semi-transparent {
+            opacity: 0.5;
+        }
+
+        p {
+            color: SolidColor("grey");
+
+            .interactable {
+                text-decoration: underline;
+                cursor: pointer;
+                transition: 0.3s;
+
+                @media (hover: hover) {
+                    &:hover {
+                        opacity: 0.7;
+                        transition: 0s;
+                    }
+                }
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+
+            .red {
+                color: SolidColor("red");
+            }
+        }
+
+        &::before {
+            z-index: 0;
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: calc(100% + 4px);
+
+            width: 100%;
+            height: 20px;
+            border-radius: 8px;
+            background-color: transparent;
+            box-shadow:
+                0px 0px 0px 4px $white,
+                0px 10px 0px 0px SolidColor("lightsmoke");
+        }
+    }
+
+    &-address-field {
+        margin-top: Margin("5");
+        display: flex;
+        flex-direction: column;
+        gap: Margin("3");
+    }
+
+    &-rate-selector {
+        margin-bottom: Margin("5");
+        display: block;
+        width: 100%;
+    }
+
+    &-validation-text {
+        margin-top: Margin("5");
+    }
+
+    &-button-container {
+        &-consent-text {
+            text-align: end;
+            color: SolidColor("grey");
+            font-size: 13px;
+            font-style: italic;
+
+            @media (max-width: $phone-width) {
+                text-align: center;
+            }
+
+            &-link {
+                color: SolidColor("grey");
+                text-decoration: underline;
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+        }
+
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: Margin("10");
+        gap: Margin("3");
+
+        @media (max-width: $phone-width) {
+            flex-direction: column-reverse;
+        }
+    }
+}

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

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../../common-apis/utils/errorUtils.js";
+import { Coin } from "../../../../common-apis/models/coin";
+
+import { ColoredNotice } from "../../molecules/ColoredNotice/ColoredNotice";
+import { Dialog } from "../Dialog/Dialog";
+import { DialogStep } from "../Dialog/DialogStep/DialogStep";
+import { Input } from "../../atoms/Input/Input";
+import { TitleBox } from "../../atoms/TitleBox/TitleBox";
+import { Validation } from "../../atoms/Validation/Validation";
+
+import messageIcon from "../../../assets/wrappedImages/messageIcon";
+import supportDialogImage from "../../../assets/wrappedImages/supportDialogImage";
+
+/**
+ * Saves a user's subscription to receive notifications about a specific coin.
+ * This function sends an email to subscribe the user to notifications for the specified coin.
+ *
+ * @function
+ * @name saveSubscription
+ * @param {Coin} coin - The coin object containing information about the coin, including its ticker symbol.
+ * @param {string} address - The email address of the user who wishes to subscribe.
+ * @returns {Promise<boolean>} A promise that resolves to `true` if the subscription email was sent successfully, or `false` if an error occurred during the process.
+ */
+
+/**
+ * WaitlistSubscription component handles user subscription to a waitlist for coin notifications.
+ * It displays a notice with a button to open a dialog where the user can enter their email to subscribe.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Coin} props.coin - The coin object containing information about the coin.
+ * @param {Object} props.translations - The text translations for the component.
+ * @param {saveSubscription} props.saveSubscription - Function to handle/save the subscription.
+ * @returns {JSX.Element} The WaitlistSubscription component.
+ */
+export const WaitlistSubscription = ({ coin, translations, saveSubscription }) => {
+    const [controls, initControls] = useState();
+    const [showDialog, setShowDialog] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [isEmailValid, setIsEmailValid] = useState(false);
+    const [errorEncountered, setErrorEncountered] = useState(false);
+
+    const defaultTranslations = {
+        coloredNotice: {
+            text: "This is a pre-listed coin, meaning that the swap is not yet available. As soon as this coin allows exchanges, it will be automatically enabled. If you want to get a notification as soon as this coin becomes available for swap - sign up for the waitlist below!",
+            buttonTitle: "Subscribe for updates",
+        },
+        signUpStep: {
+            title: coin.latinName + " (" + coin.ticker + ") listing notification",
+            subtitle:
+                "To be notified as soon as " +
+                coin.latinName +
+                " becomes available for swaps, please provide your email address. We’ll send you a single notification when it’s listed.",
+            actionButtonTitle: "Subscribe",
+            inputTitle: "Your email address:",
+            error: "Something went wrong. Please try again later.",
+        },
+        successStep: {
+            title: "Subscribed successfully!",
+            subtitle:
+                "We’ll notify you as soon as " +
+                coin.latinName +
+                " becomes available for swaps. Keep an eye on your inbox for the update.",
+            actionButtonTitle: "Close",
+        },
+    };
+
+    const t = translations ?? defaultTranslations;
+
+    const STEPS = {
+        signUp: "signUp",
+        success: "success",
+    };
+
+    const subscribe = async resetButtonLoader => {
+        try {
+            setErrorEncountered(false);
+            const result = await saveSubscription(coin, inputValue);
+            if (result) {
+                controls?.goToStep(STEPS.success);
+            } else {
+                setErrorEncountered(true);
+            }
+            resetButtonLoader();
+        } catch (e) {
+            resetButtonLoader();
+            logErrorOrOutputToConsole(e);
+            setShowDialog(false);
+        }
+    };
+
+    const openDialog = () => {
+        setErrorEncountered(false);
+        setInputValue("");
+        setIsEmailValid(false);
+        controls?.toFirstStep(false);
+        setShowDialog(true);
+    };
+
+    useEffect(() => {
+        setIsEmailValid(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(inputValue));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+
+    return (
+        <>
+            <Dialog
+                initControls={controls => initControls(controls)}
+                showDialog={showDialog}
+                onClose={() => setShowDialog(false)}
+            >
+                <DialogStep
+                    stepName={STEPS.signUp}
+                    controls={controls}
+                    title={t.signUpStep.title}
+                    subtitle={t.signUpStep.subtitle}
+                    confirmButtonClick={subscribe}
+                    confirmButtonEnabled={isEmailValid}
+                    confirmButtonText={t.signUpStep.actionButtonTitle}
+                    primaryButtonLoader={true}
+                    subtitleSmallMargin
+                    showBackgroundTitle={false}
+                    ImageRaw={messageIcon}
+                >
+                    <TitleBox title={t.signUpStep.inputTitle}>
+                        <Input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} />
+                        {errorEncountered ? <Validation text={t.signUpStep.error} /> : null}
+                    </TitleBox>
+                </DialogStep>
+                <DialogStep
+                    stepName={STEPS.success}
+                    controls={controls}
+                    title={t.successStep.title}
+                    subtitle={t.successStep.subtitle}
+                    confirmButtonClick={() => setShowDialog(false)}
+                    confirmButtonText={t.successStep.actionButtonTitle}
+                    showBackgroundTitle={false}
+                    ImageRaw={supportDialogImage}
+                    showCornerBackButton={false}
+                    subtitleSmallMargin
+                />
+            </Dialog>
+            <ColoredNotice
+                text={t.coloredNotice.text}
+                buttonTitle={t.coloredNotice.buttonTitle}
+                onButtonClick={openDialog}
+            />
+        </>
+    );
+};
+
+WaitlistSubscription.propTypes = {
+    coin: PropTypes.object.isRequired,
+    translations: PropTypes.object,
+};

package/src/ui-kit/components/templates/DeterminedErrorDialogStep/DeterminedErrorDialogStep.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { DialogStep } from "../../organisms/Dialog/DialogStep/DialogStep.jsx";
+
+import determinedErrorImage from "../../../assets/wrappedImages/determinedError.jsx";
+
+/**
+ * Template dialog step to display an error through the title and subtitle.
+ * You can insert it into any dialog windows and implement them into flows.
+ *
+ * @param {object} props - Component props.
+ * @param {object} props.controls - Control elements for the dialog.
+ * @param {string} props.stepName - Name of the current step.
+ * @param {string} props.title - Title of the dialog.
+ * @param {string} props.subtitle - Subtitle of the dialog.
+ * @param {string} props.backButtonText - Text for the back button.
+ * @param {Function} props.backButtonClick - Handler for back button click.
+ * @param {string} props.backButtonLink - Link for the back button.
+ * @param {string} props.confirmButtonText - Text for the confirm button.
+ * @param {Function} props.confirmButtonClick - Handler for confirm button click.
+ * @param {string} props.confirmButtonLink - Link for the confirm button.
+ * @param {boolean} props.showCornerBackButton - Whether to show the corner back button.
+ * @returns {JSX.Element} React component
+ */
+export const DeterminedErrorDialogStep = ({
+    controls,
+    stepName,
+    title,
+    subtitle,
+    backButtonText,
+    backButtonClick,
+    backButtonLink,
+    confirmButtonText,
+    confirmButtonClick,
+    confirmButtonLink,
+    showCornerBackButton,
+}) => {
+    return (
+        <DialogStep
+            controls={controls}
+            stepName={stepName}
+            ImageRaw={determinedErrorImage}
+            title={title}
+            subtitle={subtitle}
+            backButtonText={backButtonText}
+            backButtonClick={backButtonClick}
+            backButtonTo={backButtonLink}
+            confirmButtonText={confirmButtonText}
+            confirmButtonClick={confirmButtonClick}
+            confirmButtonLink={confirmButtonLink}
+            showCornerBackButton={showCornerBackButton}
+        />
+    );
+};
+
+DeterminedErrorDialogStep.propTypes = {
+    controls: PropTypes.object,
+    stepName: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    backButtonText: PropTypes.string,
+    backButtonClick: PropTypes.func,
+    backButtonLink: PropTypes.string,
+    confirmButtonText: PropTypes.string,
+    confirmButtonClick: PropTypes.func,
+    confirmButtonLink: PropTypes.string,
+    showCornerBackButton: PropTypes.bool,
+};
+
+DeterminedErrorDialogStep.defaultProps = {
+    backButtonText: "",
+    backButtonClick: null,
+    confirmButtonText: "",
+    confirmButtonClick: null,
+    showCornerBackButton: false,
+};

package/src/ui-kit/hooks/useCallHandlingErrors.js

@@ -0,0 +1,27 @@
+import { useCallback, useState } from "react";
+
+import { Logger } from "../../common-apis/utils/logging/logger.js";
+
+/**
+ * This hook retrieves an error-handler function.
+ * The error-handler function triggers ErrorBoundary displaying in case of error during the callback function execution.
+ * (Actually, we just re-throw an error so react can catch it in the ErrorBoundary, so you should have ErrorBoundary setup for proper behavior).
+ *
+ * Optionally you can pass a single parameter to the callback.
+ *
+ * @return {(function(function, any): Promise<void>)} - error handling function accepting callback and optional parameter for it
+ */
+export function useCallHandlingErrors() {
+    const [, setState] = useState();
+    return useCallback(async (functionToBeCalled, parameter) => {
+        try {
+            await functionToBeCalled(parameter);
+        } catch (error) {
+            Logger.logError(error, functionToBeCalled?.name || "errorBoundaryTrigger", "Caught by ErrorBoundary");
+            // Triggering ErrorBoundary
+            setState(() => {
+                throw error;
+            });
+        }
+    }, []);
+}

package/src/ui-kit/hooks/useIsHydrated.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+
+// Custom hook to check if the component is hydrated
+export function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = useState(false);
+
+    useEffect(() => {
+        setIsHydrated(true);
+    }, []);
+
+    return isHydrated;
+}

package/src/ui-kit/hooks/useReferredState.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+/**
+ * Adds reference to standard state variable. It is helpful to be able to use state variable value inside
+ * event handlers and other callbacks without the need to call setState(prev => { value = prev; return prev; }).
+ *
+ * @param initialValue {any} to be passed to useState
+ * @return {[React.Ref, function]} reference to state variable and its setter
+ */
+export function useReferredState(initialValue) {
+    const [state, setState] = React.useState(initialValue);
+    const reference = React.useRef(state);
+
+    const setReferredState = value => {
+        if (value && {}.toString.call(value) === "[object Function]") {
+            value = value(reference.current);
+        }
+
+        reference.current = value;
+        setState(value);
+    };
+
+    return [reference, setReferredState];
+}

package/src/ui-kit/tests/utils/inputValueProviders/provideFormatOfFloatValueByInputString.test.js

@@ -0,0 +1,146 @@
+import should from "should";
+
+import { describe, it } from "vitest";
+import { InputValuesProviders } from "../../../utils/inputValueProviders.js";
+
+describe("InputValueProviders", function () {
+    describe("#provideFormatOfFloatValueByInputString", function () {
+        [
+            {
+                max: null,
+                maxSuffix: 2,
+                test: "1989401950928592501985.3233",
+                expected: "1989401950928592501985.32",
+                message: "Should not touch prefix if max is null",
+            },
+            {
+                max: null,
+                maxSuffix: 2,
+                test: "1989.",
+                expected: "1989.",
+                message: "Should correctly handle ending dot",
+            },
+            {
+                max: null,
+                maxSuffix: 2,
+                test: "1989,",
+                expected: "1989.",
+                message: "Should correctly handle ending comma",
+            },
+            {
+                max: 21000000,
+                maxSuffix: 2,
+                test: "1989401950928592501985.3243",
+                expected: "92501985.32",
+                message: "Should left no more than max digits count for prefix - some prefix case",
+            },
+            {
+                max: 3,
+                maxSuffix: 2,
+                test: "1989401950928592501985.3243",
+                expected: "5.32",
+                message: "Should left no more than max digits count for prefix - min prefix case",
+            },
+            {
+                max: 21000000,
+                maxSuffix: 1,
+                test: "232.1243",
+                expected: "232.1",
+                message:
+                    "Should left no more than maxSuffix digits count in suffix - case maxSuffix is minimal = 1 and actual is londer",
+            },
+            {
+                max: 21000000,
+                maxSuffix: 1,
+                test: "232.1",
+                expected: "232.1",
+                message:
+                    "Should left no more than maxSuffix digits count in suffix - case maxSuffix is minimal = 1 and actual is the same length",
+            },
+            {
+                max: 21000000,
+                maxSuffix: 8,
+                test: "232.1243909909",
+                expected: "232.12439099",
+                message:
+                    "Should left no more than maxSuffix digits count in suffix - some maxSuffix case and actual suffix longer",
+            },
+            {
+                max: 21000000,
+                maxSuffix: 8,
+                test: "232.1243",
+                expected: "232.1243",
+                message:
+                    "Should left no more than maxSuffix digits count in suffix - some maxSuffix case and actual suffix shorter",
+            },
+            {
+                max: null,
+                maxSuffix: 2,
+                test: "1323,23",
+                expected: "1323.23",
+                message: "Should replace comma with dot",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: "434,343,3423",
+                expected: "434.343",
+                message: "Should remove all after the second comma and itself",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: "434.343.3423",
+                expected: "434.343",
+                message: "Should remove all after the second dot and itself",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: "`3|49(3.3@43f",
+                expected: "3493.343",
+                message: "Should remove all non-digits and non-dot symbols",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: ".219",
+                expected: "0.219",
+                message: "Should add leading zero",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: "32..219",
+                expected: "32.219",
+                message: "Should replace the series of dots with the only",
+            },
+            {
+                max: null,
+                maxSuffix: 8,
+                test: "32,,219",
+                expected: "32.219",
+                message: "Should replace the series of commas with the only",
+            },
+        ].forEach(testData => {
+            it(testData.message, function () {
+                InputValuesProviders.provideFormatOfFloatValueByInputString(
+                    testData.test,
+                    testData.maxSuffix,
+                    testData.max
+                ).should.be.equal(testData.expected);
+            });
+        });
+
+        it("Should throw an error if passed suffix length less than 0", function () {
+            let error = null;
+            try {
+                InputValuesProviders.provideFormatOfFloatValueByInputString("23232", -1);
+            } catch (e) {
+                error = e;
+            }
+
+            (error?.message ?? "").should.startWith("Min suffix length is 0, got");
+        });
+    });
+});

package/src/ui-kit/tests/utils/urlQueryUtils/getQueryParameterValues.test.js

@@ -0,0 +1,65 @@
+import should from "should";
+
+import { beforeEach, afterEach, describe, it } from "vitest";
+import { getQueryParameterValues } from "../../../utils/urlQueryUtils.js";
+
+describe("urlQueryUtils", function () {
+    describe("#getQueryParameterValues", function () {
+        beforeEach(function () {});
+
+        afterEach(function () {
+            global.window = {};
+        });
+
+        function setCustomQueryString(query) {
+            global.window = {
+                location: {
+                    search: query,
+                },
+            };
+        }
+
+        it("Should unescape parameter values", function () {
+            const parameterValuesWithSpecialSymbols = "#a@se /wer|*|##eee$";
+            setCustomQueryString(`?a=${encodeURIComponent(parameterValuesWithSpecialSymbols)}`);
+            const result = getQueryParameterValues("a");
+
+            result.should.be.deepEqual([...parameterValuesWithSpecialSymbols.split("|*|")]);
+        });
+
+        it("Should return empty array if there is no such parameter in the query", function () {
+            setCustomQueryString(`?a=val&b=val2`);
+            const result = getQueryParameterValues("c");
+
+            result.should.be.deepEqual([]);
+        });
+
+        it("Should return array with the only empty string element if the value of the parameter is empty", function () {
+            setCustomQueryString(`?a=`);
+            const result = getQueryParameterValues("a");
+
+            result.should.be.deepEqual([""]);
+        });
+
+        it("Should return array with one value", function () {
+            setCustomQueryString(`?a=val1`);
+            const result = getQueryParameterValues("a");
+
+            result.should.be.deepEqual(["val1"]);
+        });
+
+        it("Should return array with several values", function () {
+            setCustomQueryString(`?a=${encodeURIComponent("val1|*|val2")}`);
+            const result = getQueryParameterValues("a");
+
+            result.should.be.deepEqual(["val1", "val2"]);
+        });
+
+        it("Should return array of all values if parameter is defined several times in the query", function () {
+            setCustomQueryString(`?a=${encodeURIComponent("val1|*|val2")}&a=val3`);
+            const result = getQueryParameterValues("a");
+
+            result.should.be.deepEqual(["val1", "val2", "val3"]);
+        });
+    });
+});