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

package/dist/index.umd.js

@@ -2051,13 +2051,13 @@
 	    isSuccessAlert = _ref.isSuccessAlert;
 	  return /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: s$h["validation"]
-	  }, isSuccessAlert ?
+	  }, /*#__PURE__*/React__default["default"].createElement("div", null, isSuccessAlert ?
 	  /*#__PURE__*/
 	  // <img src={successfulValidationIcon} alt="validation icon" />
 	  React__default["default"].createElement(SuccessfulValidationIcon, null) :
 	  /*#__PURE__*/
 	  // <img src={failedValidationIcon} alt="validation icon" />
-	  React__default["default"].createElement(FailedValidationIcon, null), /*#__PURE__*/React__default["default"].createElement("span", {
+	  React__default["default"].createElement(FailedValidationIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
 	    className: s$h["validation-text"]
 	  }, text));
 	};
@@ -2858,10 +2858,10 @@
 	    // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
 	  var handleTransitionEnd = function 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);
@@ -4031,6 +4031,7 @@
 	    _ref$handleBalanceVal = _ref.handleBalanceValidationChange,
 	    handleBalanceValidationChange = _ref$handleBalanceVal === void 0 ? function (isValid) {} : _ref$handleBalanceVal,
 	    disabled = _ref.disabled,
+	    locked = _ref.locked,
 	    alertText = _ref.alertText,
 	    predefinedValue = _ref.predefinedValue,
 	    children = _ref.children,
@@ -4162,7 +4163,7 @@
 	    return "0" + (decimalCount > 0 ? "." + "0".repeat(decimalCount) : "");
 	  };
 	  var handleFiatInteraction = function handleFiatInteraction() {
-	    if (disabled) return;
+	    if (disabled || locked) return;
 	    setFiatAmountAutoFocus(true);
 	    setInteractedWith(true);
 	  };
@@ -4194,7 +4195,7 @@
 	  // Clearing the custom focus upon disabling or enabling the form
 	  React.useEffect(function () {
 	    return setIsInFocus(false);
-	  }, [disabled]);
+	  }, [disabled, locked]);
 	  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TitleBox, {
 	    title: label,
 	    linkText: isSendAll !== null ? isSendAll ? linkButtonActiveText : linkButtonInactiveText : null,
@@ -4218,7 +4219,7 @@
 	    },
 	    placeholder: coinAmountPlaceholder,
 	    className: s$a["requested-amount-coin-input"],
-	    disabled: disabled,
+	    disabled: disabled || locked,
 	    onFocus: function onFocus(e) {
 	      return callHandlingErrors(function () {
 	        return setIsInFocus(true);
@@ -4242,7 +4243,7 @@
 	    inputMode: "decimal",
 	    className: s$a["requested-amount-fiat-input"],
 	    value: fiatAmountValue,
-	    disabled: disabled,
+	    disabled: disabled || locked,
 	    onChange: function onChange(e) {
 	      return handleChangeAmountFiat(e.target.value);
 	    },
@@ -4503,6 +4504,21 @@
 	 * @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.
 	 *
@@ -4570,7 +4586,7 @@
 	 * @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.
@@ -4609,7 +4625,7 @@
 	  return result;
 	}
 	var SwapForm = function SwapForm(_ref) {
-	  var _maximumAmount$curren4, _maximumAmount$curren5, _maximumAmount$curren6, _minimalAmount$curren5;
+	  var _isFixedRate$current2, _maximumAmount$curren4, _maximumAmount$curren5, _maximumAmount$curren6, _minimalAmount$curren5, _isFixedRate$current3;
 	  var sendingAssetTicker = _ref.sendingAssetTicker,
 	    receivingAssetTicker = _ref.receivingAssetTicker,
 	    _ref$sendingAssetDeci = _ref.sendingAssetDecimalCount,
@@ -4634,7 +4650,7 @@
 	    handleChangeSendingAssetClick = _ref.handleChangeSendingAssetClick,
 	    handleChangeReceivingAssetClick = _ref.handleChangeReceivingAssetClick,
 	    _ref$handleConfirmBut = _ref.handleConfirmButtonClick,
-	    handleConfirmButtonClick = _ref$handleConfirmBut === void 0 ? function () {} : _ref$handleConfirmBut,
+	    handleConfirmButtonClick = _ref$handleConfirmBut === void 0 ? function (resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins) {} : _ref$handleConfirmBut,
 	    _ref$composeConfirmBu = _ref.composeConfirmButtonTo,
 	    composeConfirmButtonTo = _ref$composeConfirmBu === void 0 ? function (fromTicker, toTicker, fromAmount) {
 	      return "";
@@ -4707,7 +4723,6 @@
 	      },
 	      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."
@@ -4732,10 +4747,9 @@
 	    _ref$recepientAddress3 = _ref.recepientAddressExtraIdAvailable,
 	    recepientAddressExtraIdAvailable = _ref$recepientAddress3 === void 0 ? false : _ref$recepientAddress3,
 	    _ref$displayRateSelec = _ref.displayRateSelector,
-	    displayRateSelector = _ref$displayRateSelec === void 0 ? false : _ref$displayRateSelec,
-	    _ref$dispatchRateMode = _ref.dispatchRateModeChanged,
-	    dispatchRateModeChanged = _ref$dispatchRateMode === void 0 ? function (isFixed) {} : _ref$dispatchRateMode;
+	    displayRateSelector = _ref$displayRateSelec === void 0 ? false : _ref$displayRateSelec;
 	  var DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
+	  var IS_FIXED_BY_DEFAULT = false;
 
 	  // Updating the states below will insert the new value into the send or receive input field
 	  var _useState = React.useState(preservedAmount != null ? preservedAmount : null),
@@ -4788,30 +4802,30 @@
 	  var _useState12 = React.useState(false),
 	    isAddressFieldEnabled = _useState12[0],
 	    setIsAddressFieldEnabled = _useState12[1];
-	  var _useState13 = React.useState(null),
-	    isFixedRate = _useState13[0],
-	    setIsFixedRate = _useState13[1];
-	  var _useState14 = React.useState(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)),
-	    confirmButtonTo = _useState14[0],
-	    setConfirmButtonTo = _useState14[1];
-	  var _useState15 = React.useState(),
-	    transactionFee = _useState15[0],
-	    setTransactionFee = _useState15[1];
-	  var _useState16 = React.useState(true),
-	    balanceValid = _useState16[0],
-	    setBalanceValid = _useState16[1]; // Whether the amount is less than total balance
 	  var _useReferredState5 = useReferredState(null),
-	    isSwapAll = _useReferredState5[0],
-	    setIsSwapAll = _useReferredState5[1];
-	  var _useState17 = React.useState([]),
-	    swapAllButtonLoaderReSetter = _useState17[0],
-	    setSwapAllButtonLoaderReSetter = _useState17[1];
+	    isFixedRate = _useReferredState5[0],
+	    setIsFixedRate = _useReferredState5[1];
+	  var _useState13 = React.useState(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)),
+	    confirmButtonTo = _useState13[0],
+	    setConfirmButtonTo = _useState13[1];
+	  var _useState14 = React.useState(),
+	    transactionFee = _useState14[0],
+	    setTransactionFee = _useState14[1];
+	  var _useState15 = React.useState(true),
+	    balanceValid = _useState15[0],
+	    setBalanceValid = _useState15[1]; // Whether the amount is less than total balance
 	  var _useReferredState6 = useReferredState(null),
-	    dataUpdateTimeoutId = _useReferredState6[0],
-	    setDataUpdateTimeoutId = _useReferredState6[1];
+	    isSwapAll = _useReferredState6[0],
+	    setIsSwapAll = _useReferredState6[1];
+	  var _useState16 = React.useState([]),
+	    swapAllButtonLoaderReSetter = _useState16[0],
+	    setSwapAllButtonLoaderReSetter = _useState16[1];
 	  var _useReferredState7 = useReferredState(null),
-	    idleDataUpdateTimeoutId = _useReferredState7[0],
-	    setIdleDataUpdateTimeoutId = _useReferredState7[1];
+	    dataUpdateTimeoutId = _useReferredState7[0],
+	    setDataUpdateTimeoutId = _useReferredState7[1];
+	  var _useReferredState8 = useReferredState(null),
+	    idleDataUpdateTimeoutId = _useReferredState8[0],
+	    setIdleDataUpdateTimeoutId = _useReferredState8[1];
 	  var callHandlingErrors = useCallHandlingErrors();
 	  var recalculationDelayOnTyping = 1000;
 	  var handleSendAssetAmountChange = function handleSendAssetAmountChange(amount) {
@@ -4924,7 +4938,7 @@
 	    (function () {
 	      try {
 	        return _catch$c(function () {
-	          var _minimalAmount$curren4, _maximumAmount$curren3;
+	          var _minimalAmount$curren4, _maximumAmount$curren3, _isFixedRate$current;
 	          var dataMemento = {
 	            rate: swapRate,
 	            min: (_minimalAmount$curren4 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren4.crypto,
@@ -4941,7 +4955,7 @@
 	          setIsSameCoins(false);
 	          setIsPairSupported(true);
 	          setIsSwapCalculated(false);
-	          return Promise.resolve(retrieveSwapDetails(sendingAssetTicker, receivingAssetTicker, amount, isSwapAll.current, isFixedRate)).then(function (response) {
+	          return Promise.resolve(retrieveSwapDetails(sendingAssetTicker, receivingAssetTicker, amount, isSwapAll.current, (_isFixedRate$current = isFixedRate.current) != null ? _isFixedRate$current : IS_FIXED_BY_DEFAULT)).then(function (response) {
 	            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;
@@ -5027,7 +5041,6 @@
 	  };
 	  var handleRateModeChanged = function handleRateModeChanged(isFixed) {
 	    setIsFixedRate(isFixed);
-	    dispatchRateModeChanged(isFixed);
 	    requestDataRefresh(sendAssetAmount.current, true);
 	  };
 	  React.useEffect(function () {
@@ -5191,6 +5204,7 @@
 	    assetIconProtocolSrc: receivingAssetProtocolIconSrc,
 	    fallbackAssetIconSrc: fallBackAssetIconSrc,
 	    disabled: isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null,
+	    locked: !formHasBalance,
 	    handleCoinAmountChange: handleReceiveAssetAmountChange,
 	    handleChangeAssetClick: handleChangeReceivingAssetClick,
 	    updateAssetInputTo: updateReceiveInputTo,
@@ -5198,7 +5212,7 @@
 	    changeAssetButtonProtocol: receivingAssetProtocol,
 	    showBalance: formHasBalance,
 	    lowerFormPosition: true,
-	    estimateAmount: true,
+	    estimateAmount: !isFixedRate,
 	    ref: toAssetSelectionButtonRef,
 	    isLoading: isLoading.current,
 	    cryptoAssetToFiatRate: receivingAssetToFiatRate,
@@ -5210,7 +5224,7 @@
 	    className: s$9["swap-form-information-field"]
 	  }, /*#__PURE__*/React__default["default"].createElement("p", null, !isPairSupported ? translations.informationBlock.pairNotAvailable : transactionFee && minimalAmountValid ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.transactionFee, /*#__PURE__*/React__default["default"].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__default["default"].createElement("span", {
 	    className: s$9["semi-transparent"]
-	  }, " ~ " + AmountUtils.fiat(transactionFee == null ? void 0 : transactionFee.fiat, fiatCurrencyCode)) : "") : isSwapCalculated ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.swapRate, /*#__PURE__*/React__default["default"].createElement("span", null, AmountUtils.composeRateText(sendingAssetTickerPrintable, receivingAssetTickerPrintable, swapRate, receivingAssetDecimalCount, isFixedRate))) : minimalAmount.current ? !maximumAmountValid && maximumAmount.current != null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.maximumAmount, /*#__PURE__*/React__default["default"].createElement("span", {
+	  }, " ~ " + AmountUtils.fiat(transactionFee == null ? void 0 : transactionFee.fiat, fiatCurrencyCode)) : "") : isSwapCalculated || !minimalAmount.current && swapRate ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.swapRate, /*#__PURE__*/React__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.maximumAmount, /*#__PURE__*/React__default["default"].createElement("span", {
 	    className: s$9["interactable"] + " " + s$9["red"],
 	    onClick: isLoading.current ? function () {} : function (e) {
 	      return callHandlingErrors(handleMaximumAmountClick, e);
@@ -5235,8 +5249,7 @@
 	    },
 	    value: recepientAddress,
 	    adaptiveHeight: true,
-	    errorEncountered: !recepientAddressValid && recepientAddress !== "",
-	    placeholder: translations.addressFields.addressPlaceholder
+	    errorEncountered: !recepientAddressValid && recepientAddress !== ""
 	  })), recepientAddressExtraIdAvailable ? /*#__PURE__*/React__default["default"].createElement(TitleBox, {
 	    title: translations.addressFields.extraIdTitle,
 	    titleNoticeText: translations.addressFields.extraIdNotice,
@@ -5253,8 +5266,8 @@
 	  })) : "") : "", displayRateSelector ? /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: s$9["swap-form-rate-selector"]
 	  }, /*#__PURE__*/React__default["default"].createElement(RateSelector, {
-	    isFixed: isFixedRate,
-	    setIsFixed: handleRateModeChanged,
+	    isFixed: (_isFixedRate$current3 = isFixedRate.current) != null ? _isFixedRate$current3 : IS_FIXED_BY_DEFAULT,
+	    setIsFixed: !isLoading.current ? handleRateModeChanged : function () {},
 	    translations: translations.rateSelector
 	  })) : "", validationContent ? /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: s$9["swap-form-validation-text"]
@@ -5276,11 +5289,13 @@
 	    size: "lg",
 	    mode: "primary",
 	    content: translations.confirmButtonText,
-	    onClick: handleConfirmButtonClick,
+	    onClick: function onClick(resetButtonLoader) {
+	      return handleConfirmButtonClick(resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins);
+	    },
 	    fullWidthOnMobiles: true,
 	    isDisabled: !readyToSwap,
 	    to: formHasBalance ? "" : confirmButtonTo,
-	    loader: formHasBalance,
+	    loader: true,
 	    handleError: callHandlingErrors
 	  }))));
 	};
@@ -5331,7 +5346,7 @@
 	  sendingAssetProtocolIconSrc: null,
 	  receivingAssetProtocolIconSrc: null,
 	  fallBackAssetIconSrc: null,
-	  handleConfirmButtonClick: function handleConfirmButtonClick() {},
+	  handleConfirmButtonClick: function handleConfirmButtonClick(resetButtonLoader, setValidationContent, setBalanceValid, setMinimalAmountValid, setMaximumAmountValid, setIsPairSupported, setIsSameCoins) {},
 	  composeConfirmButtonTo: function composeConfirmButtonTo(fromTicker, toTicker, fromAmount) {
 	    return "";
 	  },
@@ -9985,10 +10000,11 @@
 	          var _response$data, _exchangesSupportingT;
 	          Logger.log("Retrieved " + (response == null || (_response$data = response.data) == null ? void 0 : _response$data.length) + " options", loggerSource);
 	          var options = Array.isArray(response.data) ? response.data : [];
+	          // TODO: [feature, high] remove if possible over-engineering about toAmount = 0 options treating as supported but not available. task_id=404ae30d9a7743238af3cc0d3bae9239
 	          var exchangesSupportingThePairDespiteFixedOrFloating = options.filter(function (exchange) {
 	            return (exchange == null ? void 0 : exchange.exists) && !BANNED_PARTNERS.find(function (bannedPartner) {
 	              return 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);
+	            }) && ((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);
 	          });
 	          var exchangesSupportingThePair = exchangesSupportingThePairDespiteFixedOrFloating;
 	          if (fixed != null) {