@rabbitio/ui-kit 1.0.0-beta.64 → 1.0.0-beta.66

package/dist/index.modern.js

@@ -1951,13 +1951,13 @@ const Validation = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     className: s$h["validation"]
-  }, isSuccessAlert ?
+  }, /*#__PURE__*/React.createElement("div", null, isSuccessAlert ?
   /*#__PURE__*/
   // <img src={successfulValidationIcon} alt="validation icon" />
   React.createElement(SuccessfulValidationIcon, null) :
   /*#__PURE__*/
   // <img src={failedValidationIcon} alt="validation icon" />
-  React.createElement(FailedValidationIcon, null), /*#__PURE__*/React.createElement("span", {
+  React.createElement(FailedValidationIcon, null)), /*#__PURE__*/React.createElement("span", {
     className: s$h["validation-text"]
   }, _text));
 };
@@ -2588,10 +2588,10 @@ const DialogStep = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleTransitionEnd = event => {
-    if (isMultiStep && isCurrentStep(_stepName) && event.propertyName === "opacity" && event.target.classList[0] === DIALOG_STEP_CLASS) {
+    if (isMultiStep && isCurrentStep(_stepName) && event.propertyName === "opacity" && event.target.classList[0] === s$f[DIALOG_STEP_CLASS]) {
       disableAnimation(animationConfiguration.animateHeightTransitionEnabled);
     }
-    if (isMultiStep && unmountOnAnimationEndTrigger && event.propertyName === "opacity" && event.target.classList[0] === DIALOG_STEP_CLASS) {
+    if (isMultiStep && unmountOnAnimationEndTrigger && event.propertyName === "opacity" && event.target.classList[0] === s$f[DIALOG_STEP_CLASS]) {
       clearButtonsConfiguration();
       scrollDialogToTop();
       setStepMounted(false);
@@ -3646,6 +3646,7 @@ const AmountInput = /*#__PURE__*/React.forwardRef(({
   handleChangeAssetClick: _handleChangeAssetClick = () => {},
   handleBalanceValidationChange: _handleBalanceValidationChange = isValid => {},
   disabled,
+  locked,
   alertText,
   predefinedValue,
   children,
@@ -3736,7 +3737,7 @@ const AmountInput = /*#__PURE__*/React.forwardRef(({
   };
   const placeholderByDecimalCount = decimalCount => "0" + (decimalCount > 0 ? "." + "0".repeat(decimalCount) : "");
   const handleFiatInteraction = () => {
-    if (disabled) return;
+    if (disabled || locked) return;
     setFiatAmountAutoFocus(true);
     setInteractedWith(true);
   };
@@ -3766,7 +3767,7 @@ const AmountInput = /*#__PURE__*/React.forwardRef(({
   }, [coinAmountValue, _assetBalance]);
 
   // Clearing the custom focus upon disabling or enabling the form
-  useEffect(() => setIsInFocus(false), [disabled]);
+  useEffect(() => setIsInFocus(false), [disabled, locked]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleBox, {
     title: _label,
     linkText: _isSendAll !== null ? _isSendAll ? _linkButtonActiveText : _linkButtonInactiveText : null,
@@ -3789,7 +3790,7 @@ const AmountInput = /*#__PURE__*/React.forwardRef(({
     onChange: e => handleChangeAmount(e.target.value),
     placeholder: coinAmountPlaceholder,
     className: s$a["requested-amount-coin-input"],
-    disabled: disabled,
+    disabled: disabled || locked,
     onFocus: e => callHandlingErrors(() => setIsInFocus(true), e),
     onBlur: e => callHandlingErrors(() => setIsInFocus(false), e)
   }) : /*#__PURE__*/React.createElement("div", {
@@ -3805,7 +3806,7 @@ const AmountInput = /*#__PURE__*/React.forwardRef(({
     inputMode: "decimal",
     className: s$a["requested-amount-fiat-input"],
     value: fiatAmountValue,
-    disabled: disabled,
+    disabled: disabled || locked,
     onChange: e => handleChangeAmountFiat(e.target.value),
     placeholder: placeholderByDecimalCount(_fiatCurrencyDecimals),
     autoFocus: fiatAmountAutoFocus,
@@ -4028,6 +4029,21 @@ const RateSelector = ({
  * @return {void}
  */
 
+/**
+ * Handler for the confirm button click. You should implement errors handling inside it.
+ *
+ * @function
+ * @name handleConfirmButtonClick
+ * @param {function} resetButtonLoader - callback 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.
+ * @return {void}
+ */
+
 /**
  * Async function that retrieves swap creation info by given params.
  *
@@ -4095,7 +4111,7 @@ const RateSelector = ({
  * @param {string} [props.receivingAssetBalance] - Balance of the receiving asset.
  * @param {handleClick} props.handleChangeSendingAssetClick - Function to handle clicking on the change sending asset button.
  * @param {handleClick} props.handleChangeReceivingAssetClick - Function to handle clicking on the change receiving asset button.
- * @param {handleClick} props.handleConfirmButtonClick - Function to handle clicking on the confirm button.
+ * @param {handleConfirmButtonClick} props.handleConfirmButtonClick - Function to handle clicking on the confirm button.
  * @param {composeConfirmButtonTo} props.composeConfirmButtonTo - Function to compose the URL for the confirm button.
  * @param {setSwapCreationEstimation} props.setSwapCreationEstimation - Function to set the swap creation estimation.
  * @param {handleUnexpectedError} props.handleUnexpectedError - Function to handle unexpected errors.
@@ -4140,7 +4156,7 @@ const SwapForm = ({
   receivingAssetBalance,
   handleChangeSendingAssetClick,
   handleChangeReceivingAssetClick,
-  handleConfirmButtonClick: _handleConfirmButtonClick = () => {},
+  handleConfirmButtonClick: _handleConfirmButtonClick = (resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins) => {},
   composeConfirmButtonTo: _composeConfirmButtonTo = (fromTicker, toTicker, fromAmount) => "",
   setSwapCreationEstimation: _setSwapCreationEstimation = details => {},
   handleUnexpectedError: _handleUnexpectedError = error => {},
@@ -4187,7 +4203,6 @@ const SwapForm = ({
     },
     addressFields: {
       addressTitle: "Recepient address",
-      addressPlaceholder: "Example: 1XPTgDRh...",
       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."
@@ -4207,11 +4222,11 @@ const SwapForm = ({
   setRecepientAddress,
   setRecepientAddressExtraId,
   recepientAddressExtraIdAvailable: _recepientAddressExtraIdAvailable = false,
-  displayRateSelector: _displayRateSelector = false,
-  dispatchRateModeChanged: _dispatchRateModeChanged = isFixed => {}
+  displayRateSelector: _displayRateSelector = false
 }) => {
-  var _maximumAmount$curren4, _maximumAmount$curren5, _maximumAmount$curren6, _minimalAmount$curren5;
+  var _isFixedRate$current2, _maximumAmount$curren4, _maximumAmount$curren5, _maximumAmount$curren6, _minimalAmount$curren5, _isFixedRate$current3;
   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 ? _preservedAmount : null);
@@ -4232,7 +4247,7 @@ const SwapForm = ({
   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] = useState(null);
+  const [isFixedRate, setIsFixedRate] = useReferredState(null);
   const [confirmButtonTo, setConfirmButtonTo] = useState(_composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, _preservedAmount));
   const [transactionFee, setTransactionFee] = useState();
   const [balanceValid, setBalanceValid] = useState(true); // Whether the amount is less than total balance
@@ -4338,7 +4353,7 @@ const SwapForm = ({
   const loadFullEstimation = (amount, isForPreserved = false) => {
     (async () => {
       try {
-        var _minimalAmount$curren4, _maximumAmount$curren3;
+        var _minimalAmount$curren4, _maximumAmount$curren3, _isFixedRate$current;
         const dataMemento = {
           rate: swapRate,
           min: (_minimalAmount$curren4 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren4.crypto,
@@ -4355,7 +4370,7 @@ const SwapForm = ({
         setIsSameCoins(false);
         setIsPairSupported(true);
         setIsSwapCalculated(false);
-        const response = await _retrieveSwapDetails(sendingAssetTicker, receivingAssetTicker, amount, isSwapAll.current, isFixedRate);
+        const response = await _retrieveSwapDetails(sendingAssetTicker, receivingAssetTicker, amount, isSwapAll.current, (_isFixedRate$current = isFixedRate.current) != null ? _isFixedRate$current : IS_FIXED_BY_DEFAULT);
         if (!isSwapAll.current && String(amount) !== String(isForPreserved && sendAssetAmount.current == null ? _preservedAmount : sendAssetAmount.current)) {
           // Means amount changed and we no more need to do this exact calculation
           return;
@@ -4429,7 +4444,6 @@ const SwapForm = ({
   };
   const handleRateModeChanged = isFixed => {
     setIsFixedRate(isFixed);
-    _dispatchRateModeChanged(isFixed);
     requestDataRefresh(sendAssetAmount.current, true);
   };
   useEffect(() => {
@@ -4587,6 +4601,7 @@ const SwapForm = ({
     assetIconProtocolSrc: _receivingAssetProtocolIconSrc,
     fallbackAssetIconSrc: _fallBackAssetIconSrc,
     disabled: isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null,
+    locked: !_formHasBalance,
     handleCoinAmountChange: handleReceiveAssetAmountChange,
     handleChangeAssetClick: handleChangeReceivingAssetClick,
     updateAssetInputTo: updateReceiveInputTo,
@@ -4594,7 +4609,7 @@ const SwapForm = ({
     changeAssetButtonProtocol: receivingAssetProtocol,
     showBalance: _formHasBalance,
     lowerFormPosition: true,
-    estimateAmount: true,
+    estimateAmount: !isFixedRate,
     ref: _toAssetSelectionButtonRef,
     isLoading: isLoading.current,
     cryptoAssetToFiatRate: _receivingAssetToFiatRate,
@@ -4606,7 +4621,7 @@ const SwapForm = ({
     className: s$9["swap-form-information-field"]
   }, /*#__PURE__*/React.createElement("p", null, !isPairSupported ? _translations.informationBlock.pairNotAvailable : transactionFee && minimalAmountValid ? /*#__PURE__*/React.createElement(React.Fragment, null, _translations.informationBlock.transactionFee, /*#__PURE__*/React.createElement("span", null, AmountUtils.crypto(transactionFee == null ? void 0 : transactionFee.crypto, sendingAssetFeeCoinTickerPrintable)), (transactionFee == null ? void 0 : transactionFee.fiat) != null && (transactionFee == null ? void 0 : transactionFee.fiat) !== "" ? /*#__PURE__*/React.createElement("span", {
     className: s$9["semi-transparent"]
-  }, " ~ " + AmountUtils.fiat(transactionFee == null ? void 0 : transactionFee.fiat, _fiatCurrencyCode)) : "") : isSwapCalculated ? /*#__PURE__*/React.createElement(React.Fragment, null, _translations.informationBlock.swapRate, /*#__PURE__*/React.createElement("span", null, AmountUtils.composeRateText(sendingAssetTickerPrintable, receivingAssetTickerPrintable, swapRate, _receivingAssetDecimalCount, isFixedRate))) : minimalAmount.current ? !maximumAmountValid && maximumAmount.current != null ? /*#__PURE__*/React.createElement(React.Fragment, null, _translations.informationBlock.maximumAmount, /*#__PURE__*/React.createElement("span", {
+  }, " ~ " + AmountUtils.fiat(transactionFee == null ? void 0 : transactionFee.fiat, _fiatCurrencyCode)) : "") : isSwapCalculated || !minimalAmount.current && swapRate ? /*#__PURE__*/React.createElement(React.Fragment, null, _translations.informationBlock.swapRate, /*#__PURE__*/React.createElement("span", null, AmountUtils.composeRateText(sendingAssetTickerPrintable, receivingAssetTickerPrintable, swapRate, _receivingAssetDecimalCount, (_isFixedRate$current2 = isFixedRate.current) != null ? _isFixedRate$current2 : IS_FIXED_BY_DEFAULT))) : minimalAmount.current || maximumAmount.current ? !maximumAmountValid && maximumAmount.current != null ? /*#__PURE__*/React.createElement(React.Fragment, null, _translations.informationBlock.maximumAmount, /*#__PURE__*/React.createElement("span", {
     className: s$9["interactable"] + " " + s$9["red"],
     onClick: isLoading.current ? () => {} : e => callHandlingErrors(handleMaximumAmountClick, e)
   }, AmountUtils.crypto((_maximumAmount$curren4 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren4.crypto, sendingAssetTickerPrintable)), ((_maximumAmount$curren5 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren5.fiat) != null && ((_maximumAmount$curren6 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren6.fiat) !== "" ? /*#__PURE__*/React.createElement("span", {
@@ -4625,8 +4640,7 @@ const SwapForm = ({
     onChange: e => setRecepientAddress(e.target.value),
     value: recepientAddress,
     adaptiveHeight: true,
-    errorEncountered: !_recepientAddressValid && recepientAddress !== "",
-    placeholder: _translations.addressFields.addressPlaceholder
+    errorEncountered: !_recepientAddressValid && recepientAddress !== ""
   })), _recepientAddressExtraIdAvailable ? /*#__PURE__*/React.createElement(TitleBox, {
     title: _translations.addressFields.extraIdTitle,
     titleNoticeText: _translations.addressFields.extraIdNotice,
@@ -4641,8 +4655,8 @@ const SwapForm = ({
   })) : "") : "", _displayRateSelector ? /*#__PURE__*/React.createElement("div", {
     className: s$9["swap-form-rate-selector"]
   }, /*#__PURE__*/React.createElement(RateSelector, {
-    isFixed: isFixedRate,
-    setIsFixed: handleRateModeChanged,
+    isFixed: (_isFixedRate$current3 = isFixedRate.current) != null ? _isFixedRate$current3 : IS_FIXED_BY_DEFAULT,
+    setIsFixed: !isLoading.current ? handleRateModeChanged : () => {},
     translations: _translations.rateSelector
   })) : "", validationContent ? /*#__PURE__*/React.createElement("div", {
     className: s$9["swap-form-validation-text"]
@@ -4664,11 +4678,11 @@ const SwapForm = ({
     size: "lg",
     mode: "primary",
     content: _translations.confirmButtonText,
-    onClick: _handleConfirmButtonClick,
+    onClick: resetButtonLoader => _handleConfirmButtonClick(resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins),
     fullWidthOnMobiles: true,
     isDisabled: !readyToSwap,
     to: _formHasBalance ? "" : confirmButtonTo,
-    loader: _formHasBalance,
+    loader: true,
     handleError: callHandlingErrors
   }))));
 };
@@ -4719,7 +4733,7 @@ SwapForm.defaultProps = {
   sendingAssetProtocolIconSrc: null,
   receivingAssetProtocolIconSrc: null,
   fallBackAssetIconSrc: null,
-  handleConfirmButtonClick: () => {},
+  handleConfirmButtonClick: (resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins) => {},
   composeConfirmButtonTo: (fromTicker, toTicker, fromAmount) => "",
   setSwapCreationEstimation: details => {},
   handleUnexpectedError: error => {},
@@ -8120,7 +8134,8 @@ class SwapspaceSwapProvider extends SwapProvider {
       const response = await axios.get(`${this._URL}/api/v2/amounts?fromCurrency=${fromCoinSwapspaceDetails.code}&fromNetwork=${fromCoinSwapspaceDetails.network}&toNetwork=${toCoinSwapspaceDetails.network}&toCurrency=${toCoinSwapspaceDetails.code}&amount=${amountCoins}&estimated=false`);
       Logger.log(`Retrieved ${response == null || (_response$data = response.data) == null ? void 0 : _response$data.length} options`, loggerSource);
       const options = Array.isArray(response.data) ? response.data : [];
-      let exchangesSupportingThePairDespiteFixedOrFloating = options.filter(exchange => (exchange == null ? void 0 : exchange.exists) && !BANNED_PARTNERS.find(bannedPartner => bannedPartner === (exchange == null ? void 0 : exchange.partner)) && ((exchange == null ? void 0 : exchange.fixed) === false || (exchange == null ? void 0 : exchange.fixed) === true) && (exchange.min === 0 || exchange.max === 0 || exchange.max > exchange.min || (typeof exchange.min !== "number" || typeof exchange.max !== "number") && exchange.toAmount > 0));
+      // TODO: [feature, high] remove if possible over-engineering about toAmount = 0 options treating as supported but not available. task_id=404ae30d9a7743238af3cc0d3bae9239
+      let exchangesSupportingThePairDespiteFixedOrFloating = options.filter(exchange => (exchange == null ? void 0 : exchange.exists) && !BANNED_PARTNERS.find(bannedPartner => bannedPartner === (exchange == null ? void 0 : exchange.partner)) && ((exchange == null ? void 0 : exchange.fixed) === false || (exchange == null ? void 0 : exchange.fixed) === true) && typeof exchange.min === "number" && typeof exchange.max === "number" && typeof exchange.toAmount === "number" && exchange.toAmount > 0 && (exchange.min === 0 || exchange.max === 0 || exchange.max > exchange.min));
       let exchangesSupportingThePair = exchangesSupportingThePairDespiteFixedOrFloating;
       if (fixed != null) {
         exchangesSupportingThePair = exchangesSupportingThePairDespiteFixedOrFloating.filter(option => option.fixed === fixed);