@rabbitio/ui-kit 1.0.0-beta.71 → 1.0.0-beta.73

package/src/{components → ui-kit/components}/organisms/SwapForm/SwapForm.jsx

@@ -4,17 +4,18 @@ import PropTypes from "prop-types";
 
 import s from "./swap-form.module.scss";
 
-import { useReferredState } from "../../hooks/useReferredState.js";
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
 
-import { AmountUtils } from "../../../common/amountUtils.js";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 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";
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
 import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
+import { TOOLTIP_POSITIONS } from "../../atoms/Tooltip/Tooltip.jsx";
+import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
 
 /**
  * This is the type definition of a function used inside SwapForm to compose the URL for the hero button.
@@ -79,17 +80,21 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  */
 
 /**
- * Handler for the confirm button click. You should implement errors handling inside it.
+ * Handler for the confirm button click. You should implement error handling inside it.
  *
  * @function
  * @name handleConfirmButtonClick
- * @param {function} resetButtonLoader - callback resetting the confirm button loader
+ * @param {function} resetButtonLoader - Callback for resetting the confirm button loader.
  * @param {function} setValidationContent - Function to set the validation error message on the form.
  * @param {function} setBalanceValid - Function to set the balance validity, accepts a boolean.
  * @param {function} setMinimalAmountValid - Function to set the minimal amount validity, accepts a boolean.
  * @param {function} setMaximumAmountValid - Function to set the maximum amount validity, accepts a boolean.
  * @param {function} setIsPairSupported - Function to set the pair support status, accepts a boolean.
  * @param {function} setIsSameCoins - Function to set the status if the same coins are used, accepts a boolean.
+ * @param {string} recipientAddress - The address of the recipient.
+ * @param {string} recipientAddressExtraId - Additional identifier for the recipient address.
+ * @param {string} refundAddress - The address for refund.
+ * @param {string} refundAddressExtraId - Additional identifier for the refund address.
  * @return {void}
  */
 
@@ -136,6 +141,38 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  *         }>}
  */
 
+/**
+ * Function returning extraId name for asset if present.
+ * You must pass it if you use the form with addresses inputs.
+ *
+ * @function
+ * @name getExtraIdNameByTicker
+ * @param {string} ticker - Ticker symbol of the asset.
+ * @return {string|null}
+ */
+
+/**
+ * Callback to handle isFixed flag change.
+ *
+ * @function
+ * @name onIsFixedChange
+ * @param {boolean} isFixedNewValue - new value
+ * @return {void}
+ */
+
+/**
+ * Function validating addresses.
+ * By default, will treat any addresses as valid.
+ * You must pass it if you use the form with addresses inputs and want to validate addresses.
+ *
+ * @function
+ * @name validateAddressByTicker
+ * @param {string} ticker - Ticker symbol of the asset.
+ * @param {string} address - Address to be validated
+ * @param {boolean} isFixed - Is swap rate mode = fixed
+ * @return {Promise<boolean>}
+ */
+
 /**
  * Swap form provides basic functionality for entering to/from amounts both in crypto and fiat, switching assets,
  * selecting assets, showing balance for assets. It gracefully handles unavailable fiat rates and can work
@@ -180,9 +217,13 @@ import { RateSelector } from "../../atoms/RateSelector/RateSelector.jsx";
  * @param {boolean} [props.formHasFiat] - Indicates if the form supports fiat currency.
  * @param {string|null} [props.termsOfUseUrl] - Terms of use URL, shown only if both terms & privacy policy passed.
  * @param {string|null} [props.privacyPolicyUrl] - Privacy policy of use URL, shown only if both terms & privacy policy passed.
+ * @param {string} props.recipientAddressExtraIdName - Extra ID name for the recipient address.
+ * @param {string} props.refundAddressExtraIdName - Extra ID name for the refund address.
  * @param {object} [props.translations] - Object containing translations, default English texts will be used if omitted.
  * @param {string} props.swapSeparatorIconSrc - Source URL for the swap separator icon.
  * @param {boolean} props.swapButtonAlwaysActive - Setting that allows the form state to proceed to the next step regardless of validity.
+ * @param {validateAddressByTicker} [props.validateAddressByTicker] - Function validating address
+ * @param {onIsFixedChange} [props.onIsFixedChange] - callback for changed isFixed
  * @return {JSX.Element} Rendered SwapForm component.
  * @constructor
  */
@@ -212,7 +253,11 @@ export const SwapForm = ({
         setMinimalAmountValid,
         setMaximumAmountValid,
         setIsPairSupported,
-        setIsSameCoins
+        setIsSameCoins,
+        recipientAddress,
+        recipientAddressExtraId,
+        refundAddress,
+        refundAddressExtraId
     ) => {},
     composeConfirmButtonTo = (fromTicker, toTicker, fromAmount) => "",
     setSwapCreationEstimation = details => {},
@@ -229,7 +274,13 @@ export const SwapForm = ({
         setIsSameCoins
     ) => {},
     formHasBalance = false,
-    retrieveSwapDetails = async (sendingAssetTicker, receivingAssetTicker, amount, isSwapAll = false) => {},
+    retrieveSwapDetails = async (
+        sendingAssetTicker,
+        receivingAssetTicker,
+        amount,
+        isSwapAll = false,
+        editedLastInput = false
+    ) => {},
     retrieveInitialSwapData = async (sendingAssetTicker, receivingAssetTicker) => {},
     triggerDataUpdateResetting = 0,
     fromAssetSelectionButtonRef = null,
@@ -241,6 +292,13 @@ export const SwapForm = ({
     formHasFiat = true,
     termsOfUseUrl = null,
     privacyPolicyUrl = null,
+    getExtraIdNameByTicker = ticker => null,
+    validateAddressByTicker = () => false,
+    swapSeparatorIconSrc,
+    swapButtonAlwaysActive = false,
+    onIsFixedChange = () => {},
+    recipientAddressExtraIdName,
+    refundAddressExtraIdName,
     translations = {
         swapAllButtonTitles: {
             enable: "Swap all",
@@ -268,10 +326,14 @@ export const SwapForm = ({
         },
         addressFields: {
             addressTitle: "Recepient address",
-            extraIdTitle: "Extra ID (optional)",
-            extraIdPlaceholder: "Example: ABC123",
-            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.",
+            refundAddressTitle: "Refund address",
+            extraIdPlaceholder: "(optional)",
+            refundAddressExtraIdTitle: "Refund extra ID (MEMO):",
+            refundAddressExtraIdNotice:
+                "Please check if your address requires additional identifier (sometimes called a Memo, Destination Tag, Tag, ID, Label or Note). Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
+            receivingAddressExtraIdTitle: "Destination extra ID (MEMO):",
+            receivingAddressExtraIdNotice:
+                "Please check if your address requires additional identifier (sometimes called a Memo, Destination Tag, Tag, ID, Label or Note). Including this identifier is crucial when required, as omitting or misentering it can result in lost assets.",
         },
         rateSelector: {
             floatingRate: "Floating rate",
@@ -279,21 +341,10 @@ export const SwapForm = ({
         },
         confirmButtonText: "Swap",
     },
-    swapSeparatorIconSrc,
-    swapButtonAlwaysActive = false,
-    recepientAddress,
-    recepientAddressExtraId,
-    recepientAddressValid = true,
-    recepientAddressExtraIdValid = true,
-    setRecepientAddress,
-    setRecepientAddressExtraId,
-    recepientAddressExtraIdAvailable = false,
-    displayRateSelector = false,
 }) => {
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
     const IS_FIXED_BY_DEFAULT = false;
 
-    // Updating the states below will insert the new value into the send or receive input field
     const [updateSendInputTo, setUpdateSendInputTo] = useState(preservedAmount ?? null);
     const [updateReceiveInputTo, setUpdateReceiveInputTo] = useState(null);
 
@@ -312,12 +363,10 @@ export const SwapForm = ({
     const [isSameCoins, setIsSameCoins] = useState(false);
     const [isSwapCalculated, setIsSwapCalculated] = useState(false);
     const [readyToSwap, setReadyToSwap] = useState(false); // Basically a param that enables/disables the "Next" button
-    // TODO: [refactoring, moderate] instead of handling preservedAmount at a lot of cases below, just
-    //       write single useEffect setting sendAssetAmount to the=is passed value and simplify the logic below. task_id=6453251e49b04c5e88a3cc771479ffb5
     const [isAmountZero, setIsAmountZero] = useState(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 [isFixedRate, setIsFixedRate] = useReferredState(null);
+    const [isLastEditedReceiving, setIsLastEditedReceiving] = useState(false);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)
@@ -331,11 +380,24 @@ export const SwapForm = ({
     const [dataUpdateTimeoutId, setDataUpdateTimeoutId] = useReferredState(null);
     const [idleDataUpdateTimeoutId, setIdleDataUpdateTimeoutId] = useReferredState(null);
 
+    const [recipientAddress, setRecipientAddress] = useReferredState("");
+    const [recipientAddressExtraId, setRecipientAddressExtraId] = useReferredState("");
+    const [isRecipientAddressValid, setIsRecipientAddressValid] = useReferredState(false);
+    const [isRefundAddressRequired, setIsRefundAddressRequired] = useState(false);
+    const [refundAddress, setRefundAddress] = useReferredState("");
+    const [refundAddressExtraId, setRefundAddressExtraId] = useReferredState("");
+    const [isRefundAddressValid, setIsRefundAddressValid] = useReferredState(false);
+
     const callHandlingErrors = useCallHandlingErrors();
+    const isHydrated = useIsHydrated();
 
     const recalculationDelayOnTyping = 1000;
 
+    const isAddressFieldEnabled = !formHasBalance;
+    const displayRateSelector = !formHasBalance;
+
     const handleSendAssetAmountChange = amount => {
+        setIsLastEditedReceiving(false);
         if (amount != null && amount !== "") {
             setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
         } else {
@@ -345,6 +407,7 @@ export const SwapForm = ({
     };
 
     const handleReceiveAssetAmountChange = amount => {
+        setIsLastEditedReceiving(true);
         let sendAssetAmount = "";
         if (amount != null && amount !== "") {
             sendAssetAmount = AmountUtils.trim(BigNumber(amount).div(swapRate), sendingAssetDecimalCount);
@@ -463,7 +526,8 @@ export const SwapForm = ({
                     receivingAssetTicker,
                     amount,
                     isSwapAll.current,
-                    isFixedRate.current ?? IS_FIXED_BY_DEFAULT
+                    isFixedRate.current ?? IS_FIXED_BY_DEFAULT,
+                    isFixedRate.current ? isLastEditedReceiving : false
                 );
 
                 if (
@@ -491,6 +555,7 @@ export const SwapForm = ({
 
                     setAmountLimitsAndRate(swapCreationInfo);
                     setSwapCreationEstimation(swapCreationInfo);
+                    setIsRefundAddressRequired(swapCreationInfo?.isRefundAddressRequired);
                     processMinMaxAmounts(isSwapAll.current ? swapCreationInfo.fromAmountCoins : amount);
                     setIsSwapCalculated(true);
                 } else {
@@ -587,6 +652,11 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSwapAll.current]);
 
+    useEffect(() => {
+        onIsFixedChange(isFixedRate.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFixedRate.current]);
+
     useEffect(() => {
         setConfirmButtonTo(
             composeConfirmButtonTo(
@@ -630,9 +700,9 @@ export const SwapForm = ({
                     isSwapCalculated &&
                     (!isSameCoins || !formHasBalance) &&
                     isPairSupported &&
-                    (!isAddressFieldEnabled || recepientAddressValid))
+                    (!isAddressFieldEnabled || isRecipientAddressValid.current) &&
+                    (!isRefundAddressRequired || isRefundAddressValid.current))
         );
-
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         balanceValid,
@@ -643,9 +713,49 @@ export const SwapForm = ({
         isSameCoins,
         isPairSupported,
         isAddressFieldEnabled,
-        recepientAddressValid,
+        isRecipientAddressValid.current,
+        isRefundAddressRequired,
+        isRefundAddressValid.current,
     ]);
 
+    useEffect(() => {
+        setIsRecipientAddressValid(false);
+        setRecipientAddress("");
+        setRecipientAddressExtraId("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [receivingAssetTicker]);
+
+    useEffect(() => {
+        setIsRefundAddressValid(false);
+        setRefundAddress("");
+        setRefundAddressExtraId("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendingAssetTicker]);
+
+    useEffect(() => {
+        (async () => {
+            if (!receivingAssetTicker) return;
+            setIsRecipientAddressValid(
+                recipientAddress.current === ""
+                    ? false
+                    : await validateAddressByTicker(receivingAssetTicker, recipientAddress.current, isFixedRate.current)
+            );
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [recipientAddress.current, recipientAddressExtraId.current, receivingAssetTicker]);
+
+    useEffect(() => {
+        (async () => {
+            if (!sendingAssetTicker || !isRefundAddressRequired) return;
+            setIsRefundAddressValid(
+                refundAddress.current === ""
+                    ? false
+                    : await validateAddressByTicker(sendingAssetTicker, refundAddress.current, isFixedRate.current)
+            );
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refundAddress.current, refundAddressExtraId.current, sendingAssetTicker, isRefundAddressRequired]);
+
     useEffect(() => {
         // Here we set up auto recalculations for the swap details if the form is ready to swap but is idle for some time
         let timeoutId = null;
@@ -665,7 +775,6 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [readyToSwap]);
 
-    // TODO: [refactoring, critical] this code looks like a hack related to task_id=6e328d39063142b7b9fa01d497e616da
     useEffect(() => {
         if (triggerDataUpdateResetting) {
             clearTimeout(dataUpdateTimeoutId.current);
@@ -677,7 +786,6 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [triggerDataUpdateResetting]);
 
-    // Resets the passed "set value to" param to null, so it can be used multiple times with any value
     useEffect(() => {
         if (!!updateSendInputTo) setUpdateSendInputTo(null);
         if (!!updateReceiveInputTo) setUpdateReceiveInputTo(null);
@@ -701,7 +809,6 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoading.current, swapAllButtonLoaderReSetter]);
 
-    // Handlers upon changing the asset amount
     useEffect(() => {
         setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current));
 
@@ -714,27 +821,6 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sendAssetAmount.current]);
 
-    // Checking if all necessary props for address input are passed properly.
-    useEffect(() => {
-        setIsAddressFieldEnabled(
-            recepientAddress !== undefined &&
-                recepientAddressExtraId !== undefined &&
-                recepientAddressValid !== undefined &&
-                setRecepientAddress !== undefined &&
-                typeof setRecepientAddress === "function" &&
-                setRecepientAddressExtraId !== undefined &&
-                typeof setRecepientAddressExtraId === "function"
-        );
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        recepientAddress,
-        recepientAddressExtraId,
-        recepientAddressValid,
-        recepientAddressExtraIdValid,
-        setRecepientAddress,
-        setRecepientAddressExtraId,
-    ]);
-
     return (
         <div className={s["swap-form"]}>
             <TitleBox
@@ -757,6 +843,18 @@ export const SwapForm = ({
                     BigNumber(sendingAssetBalance?.assetAmount).eq(0)
                 }
             >
+                {displayRateSelector ? (
+                    <div className={s["swap-form-rate-selector"]}>
+                        <RateSelector
+                            isFixed={isFixedRate.current ?? IS_FIXED_BY_DEFAULT}
+                            setIsFixed={handleRateModeChanged}
+                            translations={translations.rateSelector}
+                        />
+                    </div>
+                ) : (
+                    ""
+                )}
+
                 <div className={s["swap-form-inputs"]}>
                     <AmountInput
                         ticker={sendingAssetTicker}
@@ -810,7 +908,7 @@ export const SwapForm = ({
                         assetIconProtocolSrc={receivingAssetProtocolIconSrc}
                         fallbackAssetIconSrc={fallBackAssetIconSrc}
                         disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
-                        locked={!formHasBalance}
+                        locked={!formHasBalance && !isFixedRate.current}
                         handleCoinAmountChange={handleReceiveAssetAmountChange}
                         handleChangeAssetClick={handleChangeReceivingAssetClick}
                         updateAssetInputTo={updateReceiveInputTo}
@@ -829,7 +927,6 @@ export const SwapForm = ({
                     />
                 </div>
                 <div className={s["swap-form-information-field"]}>
-                    {/* TODO: [refactoring, moderate] Add flags calculation for each message to avoid this ugly cumbersome implicit unclear logic of message displaying. task_id=8bc31dbcd94d46a598346e8bfb505971 */}
                     <p>
                         {!isPairSupported ? (
                             translations.informationBlock.pairNotAvailable
@@ -925,46 +1022,57 @@ export const SwapForm = ({
                         <TitleBox title={translations.addressFields.addressTitle}>
                             <Textarea
                                 type={"text"}
-                                onChange={e => setRecepientAddress(e.target.value)}
-                                value={recepientAddress}
+                                onChange={e => setRecipientAddress(e.target.value)}
+                                value={recipientAddress.current}
                                 adaptiveHeight={true}
-                                errorEncountered={!recepientAddressValid && recepientAddress !== ""}
+                                errorEncountered={recipientAddress.current !== "" && !isRecipientAddressValid.current}
                             />
                         </TitleBox>
-                        {recepientAddressExtraIdAvailable ? (
+                        {isHydrated && recipientAddressExtraIdName ? (
                             <TitleBox
-                                title={translations.addressFields.extraIdTitle}
-                                titleNoticeText={translations.addressFields.extraIdNotice}
+                                title={translations.addressFields.receivingAddressExtraIdTitle}
+                                titleNoticeText={translations.addressFields.receivingAddressExtraIdNotice}
                                 titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
                             >
                                 <Textarea
                                     type={"text"}
-                                    onChange={e => setRecepientAddressExtraId(e.target.value)}
-                                    value={recepientAddressExtraId}
+                                    onChange={e => setRecipientAddressExtraId(e.target.value)}
+                                    value={recipientAddressExtraId.current}
                                     adaptiveHeight={true}
-                                    errorEncountered={!recepientAddressExtraIdValid}
                                     placeholder={translations.addressFields.extraIdPlaceholder}
                                 />
                             </TitleBox>
-                        ) : (
-                            ""
-                        )}
-                    </div>
-                ) : (
-                    ""
-                )}
-
-                {displayRateSelector ? (
-                    <div className={s["swap-form-rate-selector"]}>
-                        <RateSelector
-                            isFixed={isFixedRate.current ?? IS_FIXED_BY_DEFAULT}
-                            setIsFixed={!isLoading.current ? handleRateModeChanged : () => {}}
-                            translations={translations.rateSelector}
-                        />
+                        ) : null}
+                        {isHydrated && isRefundAddressRequired ? (
+                            <>
+                                <TitleBox title={translations.addressFields.refundAddressTitle}>
+                                    <Textarea
+                                        type={"text"}
+                                        onChange={e => setRefundAddress(e.target.value)}
+                                        value={refundAddress.current}
+                                        adaptiveHeight={true}
+                                        errorEncountered={refundAddress.current !== "" && !isRefundAddressValid.current}
+                                    />
+                                </TitleBox>
+                                {refundAddressExtraIdName ? (
+                                    <TitleBox
+                                        title={translations.addressFields.refundAddressExtraIdTitle}
+                                        titleNoticeText={translations.addressFields.refundAddressExtraIdNotice}
+                                        titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
+                                    >
+                                        <Textarea
+                                            type={"text"}
+                                            onChange={e => setRefundAddressExtraId(e.target.value)}
+                                            value={refundAddressExtraId.current}
+                                            adaptiveHeight={true}
+                                            placeholder={translations.addressFields.extraIdPlaceholder}
+                                        />
+                                    </TitleBox>
+                                ) : null}
+                            </>
+                        ) : null}
                     </div>
-                ) : (
-                    ""
-                )}
+                ) : null}
 
                 {validationContent ? (
                     <div className={s["swap-form-validation-text"]}>
@@ -1007,7 +1115,11 @@ export const SwapForm = ({
                                 setMinimalAmountValid,
                                 setMaximumAmountValid,
                                 setIsPairSupported,
-                                setIsSameCoins
+                                setIsSameCoins,
+                                recipientAddress.current,
+                                recipientAddressExtraId.current,
+                                refundAddress.current,
+                                refundAddressExtraId.current
                             )
                         }
                         fullWidthOnMobiles
@@ -1059,7 +1171,12 @@ SwapForm.propTypes = {
     fiatCurrencyCode: PropTypes.oneOfType([PropTypes.string, null]),
     fiatCurrencyDecimals: PropTypes.oneOfType([PropTypes.number, null]),
     formHasFiat: PropTypes.bool,
+    termsOfUseUrl: PropTypes.oneOfType([PropTypes.string, null]),
+    privacyPolicyUrl: PropTypes.oneOfType([PropTypes.string, null]),
+    recipientAddressExtraIdName: PropTypes.string,
+    refundAddressExtraIdName: PropTypes.string,
     translations: PropTypes.object,
+    validateAddressByTicker: PropTypes.func,
     swapSeparatorIconSrc: PropTypes.string.isRequired,
     swapButtonAlwaysActive: PropTypes.bool,
 };
@@ -1077,7 +1194,11 @@ SwapForm.defaultProps = {
         setMinimalAmountValid,
         setMaximumAmountValid,
         setIsPairSupported,
-        setIsSameCoins
+        setIsSameCoins,
+        recipientAddress,
+        recipientAddressExtraId,
+        refundAddress,
+        refundAddressExtraId
     ) => {},
     composeConfirmButtonTo: (fromTicker, toTicker, fromAmount) => "",
     setSwapCreationEstimation: details => {},
@@ -1103,5 +1224,8 @@ SwapForm.defaultProps = {
     fiatCurrencyCode: null,
     fiatCurrencyDecimals: null,
     formHasFiat: true,
+    termsOfUseUrl: null,
+    privacyPolicyUrl: null,
+    validateAddressByTicker: ticker => false,
     swapButtonAlwaysActive: false,
 };

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

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .swap-form {
     width: 100%;
@@ -91,7 +91,7 @@
     }
 
     &-rate-selector {
-        margin-top: Margin("5");
+        margin-bottom: Margin("5");
         display: block;
         width: 100%;
     }

package/src/{components → ui-kit/components}/templates/DeterminedErrorDialogStep/DeterminedErrorDialogStep.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { DialogStep } from "../../organisms/Dialog/DialogStep/DialogStep";
+import { DialogStep } from "../../organisms/Dialog/DialogStep/DialogStep.jsx";
 
-import determinedErrorImage from "../../../assets/wrappedImages/determinedError";
+import determinedErrorImage from "../../../assets/wrappedImages/determinedError.jsx";
 
 /**
  * Template dialog step to display an error through the title and subtitle.

package/src/{components → ui-kit}/hooks/useCallHandlingErrors.js

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 
-import { Logger } from "../../common/utils/logging/logger.js";
+import { Logger } from "../../common-apis/utils/logging/logger.js";
 
 export function useCallHandlingErrors() {
     const [, setState] = useState();

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/{components → ui-kit}/utils/textUtils.js

@@ -1,6 +1,6 @@
 import copy from "clipboard-copy";
 
-import { improveAndRethrow } from "../../common/errorUtils.js";
+import { improveAndRethrow } from "../../common-apis/errorUtils.js";
 
 /**
  * Copies given text to clipboard inside browser.