@rabbitio/ui-kit 1.0.0-beta.55 → 1.0.0-beta.56

package/package.json

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

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

@@ -12,6 +12,7 @@ import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
 import { AmountInput } from "../../molecules/AmountInput/AmountInput.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
+import { Textarea } from "../../atoms/Textarea/Textarea.jsx";
 
 /**
  * This is the type definition of a function used inside SwapForm to compose the URL for the hero button.
@@ -254,6 +255,10 @@ export const SwapForm = ({
     },
     swapSeparatorIconSrc,
     swapButtonAlwaysActive = false,
+    recepientAddress,
+    recepientAddressExtraId,
+    setRecepientAddress,
+    setRecepientAddressExtraId,
 }) => {
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
 
@@ -286,6 +291,8 @@ export const SwapForm = ({
         preservedAmount == null || String(preservedAmount) === "0"
     );
     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 [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(
             sendingAssetTicker,
@@ -747,6 +754,21 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sendAssetAmount.current]);
 
+    useEffect(() => {
+        setIsAddressFieldEnabled(
+            recepientAddress !== undefined &&
+                recepientAddressExtraId !== undefined &&
+                setRecepientAddress !== undefined &&
+                setRecepientAddressExtraId !== undefined
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        recepientAddress,
+        recepientAddressExtraId,
+        setRecepientAddress,
+        setRecepientAddressExtraId,
+    ]);
+
     return (
         <div className={s["swap-form"]}>
             <TitleBox
@@ -992,6 +1014,34 @@ export const SwapForm = ({
                         )}
                     </p>
                 </div>
+
+                {isAddressFieldEnabled ? (
+                    <div className={s["swap-form-address-field"]}>
+                        <TitleBox title={"Recepient address"}>
+                            <Textarea
+                                type={"text"}
+                                onChange={(e) =>
+                                    setRecepientAddress(e.target.value)
+                                }
+                                value={recepientAddress.current}
+                                adaptiveHeight={true}
+                                errorEncountered={!isRecepientAddressValid}
+                            />
+                        </TitleBox>
+                        <TitleBox>
+                            <Textarea
+                                type={"text"}
+                                onChange={(e) =>
+                                    setRecepientAddressExtraId(e.target.value)
+                                }
+                                value={recepientAddressExtraId.current}
+                                adaptiveHeight={true}
+                            />
+                        </TitleBox>
+                    </div>
+                ) : (
+                    ""
+                )}
                 {validationContent ? (
                     <div className={s["swap-form-validation-text"]}>
                         <Validation text={validationContent} />
@@ -1050,7 +1100,7 @@ export const SwapForm = ({
                         fullWidthOnMobiles
                         isDisabled={!readyToSwap}
                         to={formHasBalance ? "" : confirmButtonTo}
-                        loader={formHasBalance}
+                        loader={formHasBalance || isAddressFieldEnabled}
                         handleError={callHandlingErrors}
                     />
                 </div>

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

@@ -77,10 +77,19 @@
             height: 20px;
             border-radius: 8px;
             background-color: transparent;
-            box-shadow: 0px 0px 0px 4px $white, 0px 10px 0px 0px SolidColor("lightsmoke");
+            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("5");
+    }
+
     &-validation-text {
         margin-top: Margin("5");
     }