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

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

@@ -0,0 +1,134 @@
+@import "../../../../styles/index";
+
+.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-top: 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/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";
+
+import determinedErrorImage from "../../../assets/wrappedImages/determinedError";
+
+/**
+ * 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/components/tests/utils/inputValueProviders/provideFormatOfFloatValueByInputString.test.js

@@ -0,0 +1,139 @@
+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: 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/components/tests/utils/urlQueryUtils/getQueryParameterValues.test.js

@@ -0,0 +1,71 @@
+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"]);
+        });
+    });
+});

package/src/components/tests/utils/urlQueryUtils/saveQueryParameterAndValues.test.js

@@ -0,0 +1,144 @@
+import sinon from "sinon";
+import should from "should";
+
+import { beforeEach, afterEach, describe, it } from "vitest";
+import { saveQueryParameterAndValues } from "../../../utils/urlQueryUtils.js";
+
+describe("urlQueryUtils", function () {
+    describe("#saveQueryParameterAndValues", function () {
+        let callbackStub;
+        beforeEach(function () {
+            callbackStub = sinon.stub();
+        });
+
+        afterEach(function () {
+            global.window = {};
+        });
+
+        function setCustomQueryString(query) {
+            global.window = {
+                location: {
+                    search: query,
+                },
+            };
+        }
+
+        it("Should escape parameter values", function () {
+            setCustomQueryString("");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["e #e"],
+                callbackStub
+            );
+            result.should.be.equal(`?a=${encodeURIComponent("e #e")}`);
+        });
+
+        it("Should call callback ones", function () {
+            setCustomQueryString("");
+            saveQueryParameterAndValues("a", ["1"], callbackStub);
+            callbackStub.callCount.should.be.equal(1);
+        });
+
+        it("Should add parameter with no values - Case query is empty", function () {
+            setCustomQueryString("");
+            const result = saveQueryParameterAndValues("a", [], callbackStub);
+            result.should.be.equal("?a=");
+        });
+
+        it("Should add parameter with no values - Case query contains one parameter", function () {
+            setCustomQueryString("?one=val");
+            const result = saveQueryParameterAndValues("a", [], callbackStub);
+            result.should.be.equal("?one=val&a=");
+        });
+
+        it("Should add parameter with no values - Case query contains several parameters", function () {
+            setCustomQueryString("?one=val&err=week");
+            const result = saveQueryParameterAndValues("a", [], callbackStub);
+            result.should.be.equal("?one=val&err=week&a=");
+        });
+
+        it("Should add parameter with one value - Case query is empty", function () {
+            setCustomQueryString("");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1"],
+                callbackStub
+            );
+            result.should.be.equal("?a=1");
+        });
+
+        it("Should add parameter with one value - Case query contains one parameter", function () {
+            setCustomQueryString("?one=val");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1"],
+                callbackStub
+            );
+            result.should.be.equal("?one=val&a=1");
+        });
+
+        it("Should add parameter with one value - Case query contains several parameters", function () {
+            setCustomQueryString("?one=val&err=week");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1"],
+                callbackStub
+            );
+            result.should.be.equal("?one=val&err=week&a=1");
+        });
+
+        it("Should add parameter with several values using separator - Case query is empty", function () {
+            setCustomQueryString("");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1", "aa", "err"],
+                callbackStub
+            );
+            result.should.be.equal(`?a=${encodeURIComponent("1|*|aa|*|err")}`);
+        });
+
+        it("Should add parameter with several values using separator - Case query contains one parameter", function () {
+            setCustomQueryString("?one=val");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1", "aa", "err"],
+                callbackStub
+            );
+            result.should.be.equal(
+                `?one=val&a=${encodeURIComponent("1|*|aa|*|err")}`
+            );
+        });
+
+        it("Should add parameter with several values using separator - Case query contains several parameters", function () {
+            setCustomQueryString("?one=val&err=week");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1", "aa", "err"],
+                callbackStub
+            );
+            result.should.be.equal(
+                `?one=val&err=week&a=${encodeURIComponent("1|*|aa|*|err")}`
+            );
+        });
+
+        it("Should replace existing parameter value - Case query contains one parameter", function () {
+            setCustomQueryString("?a=val");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1"],
+                callbackStub
+            );
+            result.should.be.equal("?a=1");
+        });
+
+        it("Should replace existing parameter value - Case query contains several parameters", function () {
+            setCustomQueryString("?one=val&a=week");
+            const result = saveQueryParameterAndValues(
+                "a",
+                ["1"],
+                callbackStub
+            );
+            result.should.be.equal("?one=val&a=1");
+        });
+    });
+});

package/src/components/utils/inputValueProviders.js

@@ -0,0 +1,58 @@
+import { BigNumber } from "bignumber.js";
+
+export class InputValuesProviders {
+    /**
+     * Designed to be called onKeyUp event of html input field for float value
+     * Removes all prohibited stuff from the given float string and remains only allowed.
+     * Removes digits before and after the dot.
+     *
+     * @param inputString {string} string to be corrected
+     * @param maxValue {string} max value for the correcting float value
+     * @param digitsAfterDot {number} count of digits after the dot that this method should provide, min 0
+     * @return {string} corrected float value string
+     */
+    static provideFormatOfFloatValueByInputString(
+        inputString,
+        digitsAfterDot = 2,
+        maxValue = null
+    ) {
+        let value = inputString;
+        if (!value) {
+            return "";
+        }
+
+        if (digitsAfterDot < 0) {
+            throw new Error("Min suffix length is 0, got " + digitsAfterDot);
+        }
+
+        value = value.replace(/[,]/g, "."); // replaces commas with dots
+        value = value.replace(/[^0-9.]/g, ""); // remove non digits/dots
+        value = value.replace(/^\./g, "0."); // adds leading zero
+        value = value.replace(/\.+/g, "."); // replaces series of dots with single dot
+
+        let parts = value.split(".");
+        if (parts.length > 2) {
+            // removes all after second dot and itself
+            parts = [parts[0], parts[1]];
+        }
+
+        if (maxValue != null) {
+            const maxDigitsCountBeforeTheDot =
+                BigNumber(maxValue).toFixed(0).length;
+            if (parts[0]?.length > maxDigitsCountBeforeTheDot) {
+                // removes redundant prefix digits
+                parts[0] = parts[0].substring(
+                    parts[0].length - maxDigitsCountBeforeTheDot,
+                    parts[0].length
+                );
+            }
+        }
+
+        if (parts[1]?.length > digitsAfterDot) {
+            // removes redundant suffix digits
+            parts[1] = parts[1].substring(0, digitsAfterDot);
+        }
+
+        return parts.join(".");
+    }
+}

package/src/components/utils/textUtils.js

@@ -0,0 +1,18 @@
+import copy from "clipboard-copy";
+
+import { improveAndRethrow } from "../../common/errorUtils.js";
+
+/**
+ * Copies given text to clipboard inside browser.
+ *
+ * @param text - text to be copied
+ */
+export function copyBrowserTextToClipboard(text) {
+    try {
+        if (!copy(text)) {
+            throw new Error("Failed to execute copy command.");
+        }
+    } catch (e) {
+        improveAndRethrow(e, "saveTextToFile");
+    }
+}

package/src/components/utils/uiUtils.js

@@ -0,0 +1,14 @@
+export const handleClickOutside = (exceptionsRefs, callback) => {
+    function handleClick(event) {
+        const isExceptionClicked = exceptionsRefs.find(
+            (ref) => ref?.current && ref.current.contains(event.target)
+        );
+        if (!isExceptionClicked) {
+            callback();
+        }
+    }
+
+    document.addEventListener("click", handleClick);
+
+    return () => document.removeEventListener("click", handleClick);
+};