@rabbitio/ui-kit 1.0.0-beta.60 → 1.0.0-beta.63

package/package.json

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

package/src/components/atoms/RateSelector/RateSelector.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import s from "./rate-selector.module.scss";
+
+export const RateSelector = ({
+    isFixed = false,
+    setIsFixed = () => {},
+    translations = {
+        floatingRate: "Floating rate",
+        fixedRate: "Fixed rate",
+    },
+}) => {
+    return (
+        <div className={s["rate-selector"]}>
+            <div
+                className={`${s["rate-selector-item"]} ${
+                    !isFixed ? s["selected"] : ""
+                }`}
+                onClick={() => setIsFixed(false)}
+            >
+                <div className={s["rate-selector-item-text"]}>
+                    {translations.floatingRate}
+                </div>
+            </div>
+            <div
+                className={`${s["rate-selector-item"]} ${
+                    isFixed ? s["selected"] : ""
+                }`}
+                onClick={() => setIsFixed(true)}
+            >
+                <div className={s["rate-selector-item-text"]}>
+                    {translations.fixedRate}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/components/atoms/RateSelector/rate-selector.module.scss

@@ -0,0 +1,47 @@
+@import "../../../../styles/index";
+
+.rate-selector {
+    background-color: SolidColor("lightsmoke");
+    border-radius: 8px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+    gap: Margin("1");
+    user-select: none;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: Padding("3") Padding("3");
+        flex: 1 1;
+        border-radius: 4px;
+        gap: Margin("1");
+        cursor: pointer;
+        transition: 0.2s all $transitionEaseOut;
+        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
+
+        @media (hover: hover) {
+            &:not(.selected):hover {
+                box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+            }
+        }
+
+        &:not(.selected):active {
+            box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+        }
+
+        &.selected {
+            background: $white;
+            color: SolidColor("tosca");
+        }
+
+        &-text {
+            font-weight: $semi-bold;
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+}

package/src/components/atoms/TwoLinesOfText/lines-of-text.module.scss

@@ -5,6 +5,7 @@
     font-weight: $bold;
     white-space: nowrap;
     // font-family: NunitoSans;
+    text-align: left;
 
     .wrap {
         white-space: normal;

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

@@ -14,6 +14,7 @@ import { Validation } from "../../atoms/Validation/Validation.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
 import { Textarea } from "../../atoms/Textarea/Textarea.jsx";
 import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
 
 /**
  * This is the type definition of a function used inside SwapForm to compose the URL for the hero button.
@@ -259,6 +260,10 @@ export const SwapForm = ({
             extraIdNotice:
                 "Please check if your recipient address requires a 'Memo' or 'Destination Tag' - sometimes called a tag, ID, label, or a note. Exchanges may require such ID for the deposit. Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
         },
+        rateSelector: {
+            floatingRate: "Floating rate",
+            fixedRate: "Fixed rate",
+        },
         confirmButtonText: "Swap",
     },
     swapSeparatorIconSrc,
@@ -270,6 +275,8 @@ export const SwapForm = ({
     setRecepientAddress,
     setRecepientAddressExtraId,
     recepientAddressExtraIdAvailable = false,
+    isFixed,
+    setIsFixed,
 }) => {
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
 
@@ -303,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 [isInitialReaction, setIsInitialReaction] = useState(true);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(
@@ -789,6 +797,14 @@ export const SwapForm = ({
         setRecepientAddressExtraId,
     ]);
 
+    useEffect(() => {
+        if (typeof isFixed !== "boolean" || !setIsFixed) return;
+        if (isInitialReaction) return;
+        requestDataRefresh(sendAssetAmount.current, true);
+        setIsInitialReaction(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFixed]);
+
     return (
         <div className={s["swap-form"]}>
             <TitleBox
@@ -1090,6 +1106,21 @@ export const SwapForm = ({
                 ) : (
                     ""
                 )}
+
+                {typeof isFixed === "boolean" &&
+                setIsFixed &&
+                typeof setIsFixed === "function" ? (
+                    <div className={s["swap-form-rate-selector"]}>
+                        <RateSelector
+                            isFixed={isFixed}
+                            setIsFixed={setIsFixed}
+                            translations={translations.rateSelector}
+                        />
+                    </div>
+                ) : (
+                    ""
+                )}
+
                 {validationContent ? (
                     <div className={s["swap-form-validation-text"]}>
                         <Validation text={validationContent} />

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

@@ -90,6 +90,12 @@
         gap: Margin("3");
     }
 
+    &-rate-selector {
+        margin-top: Margin("5");
+        display: block;
+        width: 100%;
+    }
+
     &-validation-text {
         margin-top: Margin("5");
     }