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

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

@@ -151,6 +151,15 @@ import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
  * @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.
@@ -160,6 +169,7 @@ import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
  * @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>}
  */
 
@@ -207,11 +217,13 @@ import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
  * @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 {getExtraIdNameByTicker} props.getExtraIdNameByTicker - Function returning extraId name for asset
  * @param {validateAddressByTicker} [props.validateAddressByTicker] - Function validating address
+ * @param {onIsFixedChange} [props.onIsFixedChange] - callback for changed isFixed
  * @return {JSX.Element} Rendered SwapForm component.
  * @constructor
  */
@@ -262,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,
@@ -275,9 +293,12 @@ export const SwapForm = ({
     termsOfUseUrl = null,
     privacyPolicyUrl = null,
     getExtraIdNameByTicker = ticker => null,
-    validateAddressByTicker = ticker => false,
+    validateAddressByTicker = () => false,
     swapSeparatorIconSrc,
     swapButtonAlwaysActive = false,
+    onIsFixedChange = () => {},
+    recipientAddressExtraIdName,
+    refundAddressExtraIdName,
     translations = {
         swapAllButtonTitles: {
             enable: "Swap all",
@@ -307,8 +328,10 @@ export const SwapForm = ({
             addressTitle: "Recepient address",
             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.",
         },
@@ -322,7 +345,6 @@ export const SwapForm = ({
     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);
 
@@ -341,11 +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 [isFixedRate, setIsFixedRate] = useReferredState(null);
+    const [isLastEditedReceiving, setIsLastEditedReceiving] = useState(false);
 
     const [confirmButtonTo, setConfirmButtonTo] = useState(
         composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)
@@ -374,10 +395,9 @@ export const SwapForm = ({
 
     const isAddressFieldEnabled = !formHasBalance;
     const displayRateSelector = !formHasBalance;
-    const recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
-    const refundAddressExtraIdName = getExtraIdNameByTicker(sendingAssetTicker);
 
     const handleSendAssetAmountChange = amount => {
+        setIsLastEditedReceiving(false);
         if (amount != null && amount !== "") {
             setUpdateReceiveInputTo(AmountUtils.trim(BigNumber(amount).times(swapRate), receivingAssetDecimalCount));
         } else {
@@ -387,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);
@@ -505,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 (
@@ -630,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(
@@ -711,7 +738,7 @@ export const SwapForm = ({
             setIsRecipientAddressValid(
                 recipientAddress.current === ""
                     ? false
-                    : await validateAddressByTicker(receivingAssetTicker, recipientAddress.current)
+                    : await validateAddressByTicker(receivingAssetTicker, recipientAddress.current, isFixedRate.current)
             );
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -723,7 +750,7 @@ export const SwapForm = ({
             setIsRefundAddressValid(
                 refundAddress.current === ""
                     ? false
-                    : await validateAddressByTicker(sendingAssetTicker, refundAddress.current)
+                    : await validateAddressByTicker(sendingAssetTicker, refundAddress.current, isFixedRate.current)
             );
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -748,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);
@@ -760,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);
@@ -784,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));
 
@@ -819,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}
@@ -872,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}
@@ -891,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
@@ -995,7 +1030,7 @@ export const SwapForm = ({
                         </TitleBox>
                         {isHydrated && recipientAddressExtraIdName ? (
                             <TitleBox
-                                title={recipientAddressExtraIdName}
+                                title={translations.addressFields.receivingAddressExtraIdTitle}
                                 titleNoticeText={translations.addressFields.receivingAddressExtraIdNotice}
                                 titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
                             >
@@ -1021,7 +1056,7 @@ export const SwapForm = ({
                                 </TitleBox>
                                 {refundAddressExtraIdName ? (
                                     <TitleBox
-                                        title={refundAddressExtraIdName}
+                                        title={translations.addressFields.refundAddressExtraIdTitle}
                                         titleNoticeText={translations.addressFields.refundAddressExtraIdNotice}
                                         titleNoticePosition={TOOLTIP_POSITIONS.TOP_LEFT}
                                     >
@@ -1039,18 +1074,6 @@ export const SwapForm = ({
                     </div>
                 ) : null}
 
-                {displayRateSelector ? (
-                    <div className={s["swap-form-rate-selector"]}>
-                        <RateSelector
-                            isFixed={isFixedRate.current ?? IS_FIXED_BY_DEFAULT}
-                            setIsFixed={!isLoading.current ? handleRateModeChanged : () => {}}
-                            translations={translations.rateSelector}
-                        />
-                    </div>
-                ) : (
-                    ""
-                )}
-
                 {validationContent ? (
                     <div className={s["swap-form-validation-text"]}>
                         <Validation text={validationContent} />
@@ -1148,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,
 };
@@ -1196,5 +1224,8 @@ SwapForm.defaultProps = {
     fiatCurrencyCode: null,
     fiatCurrencyDecimals: null,
     formHasFiat: true,
+    termsOfUseUrl: null,
+    privacyPolicyUrl: null,
+    validateAddressByTicker: ticker => false,
     swapButtonAlwaysActive: false,
 };

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

@@ -91,7 +91,7 @@
     }
 
     &-rate-selector {
-        margin-top: Margin("5");
+        margin-bottom: Margin("5");
         display: block;
         width: 100%;
     }

package/coverage/rabbit-ui-kit/src/swaps-lib/external-apis/index.html

@@ -1,131 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for rabbit-ui-kit/src/swaps-lib/external-apis</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../../../prettify.css" />
-    <link rel="stylesheet" href="../../../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../../../index.html">All files</a> rabbit-ui-kit/src/swaps-lib/external-apis</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">73.41% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>685/933</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">97.22% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>210/216</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">29.41% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>10/34</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">73.41% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>685/933</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line medium'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file high" data-value="swapProvider.js"><a href="swapProvider.js.html">swapProvider.js</a></td>
-	<td data-value="82.29" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 82%"></div><div class="cover-empty" style="width: 18%"></div></div>
-	</td>
-	<td data-value="82.29" class="pct high">82.29%</td>
-	<td data-value="209" class="abs high">172/209</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="7.14" class="pct low">7.14%</td>
-	<td data-value="14" class="abs low">1/14</td>
-	<td data-value="82.29" class="pct high">82.29%</td>
-	<td data-value="209" class="abs high">172/209</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="swapspaceSwapProvider.js"><a href="swapspaceSwapProvider.js.html">swapspaceSwapProvider.js</a></td>
-	<td data-value="70.85" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 70%"></div><div class="cover-empty" style="width: 30%"></div></div>
-	</td>
-	<td data-value="70.85" class="pct medium">70.85%</td>
-	<td data-value="724" class="abs medium">513/724</td>
-	<td data-value="97.2" class="pct high">97.2%</td>
-	<td data-value="215" class="abs high">209/215</td>
-	<td data-value="45" class="pct low">45%</td>
-	<td data-value="20" class="abs low">9/20</td>
-	<td data-value="70.85" class="pct medium">70.85%</td>
-	<td data-value="724" class="abs medium">513/724</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-06-03T13:53:18.820Z
-            </div>
-        <script src="../../../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../../../sorter.js"></script>
-        <script src="../../../../block-navigation.js"></script>
-    </body>
-</html>
-