@rabbitio/ui-kit 1.0.0-beta.46 → 1.0.0-beta.48

package/dist/index.cjs

@@ -1,4 +1,4 @@
-var React$1 = require('react');
+var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var AnimateHeight = require('react-animate-height');
 var ResizeObserver = require('resize-observer-polyfill');
@@ -13,7 +13,7 @@ var uuid = require('uuid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var AnimateHeight__default = /*#__PURE__*/_interopDefaultLegacy(AnimateHeight);
 var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 var animateScrollTo__default = /*#__PURE__*/_interopDefaultLegacy(animateScrollTo);
@@ -1284,23 +1284,23 @@ var Button = function Button(_ref) {
     handleError = _ref$handleError === void 0 ? function (func, event) {
       return func(event);
     } : _ref$handleError;
-  var _useState = React$1.useState(loading),
+  var _useState = React.useState(loading),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
-  var _useState2 = React$1.useState(false),
+  var _useState2 = React.useState(false),
     isCheckShown = _useState2[0],
     setIsCheckShown = _useState2[1];
-  var _useState3 = React$1.useState(null),
+  var _useState3 = React.useState(null),
     event = _useState3[0],
     setEvent = _useState3[1];
-  var buttonRef = React$1.useRef();
-  React$1.useEffect(function () {
+  var buttonRef = React.useRef();
+  React.useEffect(function () {
     setClickTrigger(function () {
       return buttonRef.current.click();
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttonRef]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (isLoading) {
       onClick(function () {
         return setIsLoading(false);
@@ -1425,7 +1425,7 @@ var SupportChat = function SupportChat(_ref) {
     welcomeMessage = _ref$welcomeMessage === void 0 ? "" : _ref$welcomeMessage,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? "en" : _ref$locale;
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     window.chatwootSettings = {
       position: "right",
       type: "standard",
@@ -1652,9 +1652,9 @@ function _catch$a(body, recover) {
   return result;
 }
 function useCallHandlingErrors() {
-  var _useState = React$1.useState(),
+  var _useState = React.useState(),
     setState = _useState[1];
-  return React$1.useCallback(function (functionToBeCalled, event) {
+  return React.useCallback(function (functionToBeCalled, event) {
     try {
       var _temp = _catch$a(function () {
         return Promise.resolve(functionToBeCalled(event)).then(function () {});
@@ -1713,10 +1713,10 @@ var LinkButton = function LinkButton(_ref) {
     iconRotate = _ref.iconRotate,
     IconComponent = _ref.IconComponent;
   var callHandlingErrors = useCallHandlingErrors();
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
-  var _useState2 = React$1.useState(null),
+  var _useState2 = React.useState(null),
     processedIconRotation = _useState2[0],
     setProcessedIconRotation = _useState2[1];
   var handleClick = function handleClick() {
@@ -1732,7 +1732,7 @@ var LinkButton = function LinkButton(_ref) {
       }
     });
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (iconRotate && Object.keys(iconRotateOptions).find(function (key) {
       return iconRotateOptions[key] === iconRotate;
     })) setProcessedIconRotation(iconRotate);
@@ -2263,22 +2263,22 @@ var Dialog = function Dialog(_ref) {
     secondaryButtonTo: null,
     fixedButtonsEnabled: false
   };
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     showDialogProcessed = _useState[0],
     setShowDialogProcessed = _useState[1];
-  var _useState2 = React$1.useState(0),
+  var _useState2 = React.useState(0),
     currentStep = _useState2[0],
     setCurrentStep = _useState2[1];
-  var _useState3 = React$1.useState(null),
+  var _useState3 = React.useState(null),
     steps = _useState3[0],
     setSteps = _useState3[1];
-  var _useState4 = React$1.useState({
+  var _useState4 = React.useState({
       cornerBackButtonTitle: "",
       customWidth: width !== "" ? width : DIALOG_SIZES.small.width
     }),
     dialogConfiguration = _useState4[0],
     updateDialogConfiguration = _useState4[1];
-  var _useState5 = React$1.useState({
+  var _useState5 = React.useState({
       animateHeightDelay: DIALOG_TRANSITION_STEP_DURATION * 2,
       animateHeightTransitionSpeed: DIALOG_TRANSITION_STEP_DURATION,
       animateHeightTransitionEnabled: false,
@@ -2291,38 +2291,38 @@ var Dialog = function Dialog(_ref) {
     }),
     animationConfiguration = _useState5[0],
     updateAnimationConfiguration = _useState5[1];
-  var _useState6 = React$1.useState(0),
+  var _useState6 = React.useState(0),
     stepAnimationFinishedTrigger = _useState6[0],
     setStepAnimationFinishedTrigger = _useState6[1];
-  var _useState7 = React$1.useState(300),
+  var _useState7 = React.useState(300),
     dialogVerticalHeight = _useState7[0],
     setDialogVerticalHeight = _useState7[1];
-  var _useState8 = React$1.useState({}),
+  var _useState8 = React.useState({}),
     currentStepRef = _useState8[0],
     setCurrentStepRef = _useState8[1];
-  var _useState9 = React$1.useState({
+  var _useState9 = React.useState({
       width: 0,
       height: 0
     }),
     dimensions = _useState9[0],
     setDimensions = _useState9[1];
-  var _useState10 = React$1.useState(buttonsConfigurationDefault),
+  var _useState10 = React.useState(buttonsConfigurationDefault),
     buttonsConfiguration = _useState10[0],
     updateButtonsConfigurationState = _useState10[1];
   var _useReferredState = useReferredState(""),
     buttonControllingStep = _useReferredState[0],
     updateButtonControllingStep = _useReferredState[1];
-  var _useState11 = React$1.useState(false),
+  var _useState11 = React.useState(false),
     isMultiStep = _useState11[0],
     setIsMultiStep = _useState11[1];
-  var dialogWrapperRef = React$1.useRef();
-  var dialogRef = React$1.useRef();
-  var scrollableRef = React$1.useRef();
-  var resizeObserverRef = React$1.useRef(null);
+  var dialogWrapperRef = React.useRef();
+  var dialogRef = React.useRef();
+  var scrollableRef = React.useRef();
+  var resizeObserverRef = React.useRef(null);
   var updateButtonsConfiguration = function updateButtonsConfiguration(newConfiguration, stepName) {
     if (buttonControllingStep.current === stepName || buttonControllingStep.current === "") updateButtonsConfigurationState(newConfiguration);
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (showDialog) disableAnimation();
     setShowDialogProcessed(showDialog);
     showDialog ? dispatchDialogOpened() : dispatchDialogClosed();
@@ -2432,7 +2432,7 @@ var Dialog = function Dialog(_ref) {
       });
     }
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (animationConfiguration.triggerAnimationFinishedDispatcher) {
       setStepAnimationFinishedTrigger(function (prev) {
         return prev + 1;
@@ -2472,7 +2472,7 @@ var Dialog = function Dialog(_ref) {
   var clearButtonsConfiguration = function clearButtonsConfiguration() {
     updateButtonsConfigurationState(buttonsConfigurationDefault);
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     initControls && initControls(function (prev) {
       return _extends({}, prev, {
         stepAnimationFinishedTrigger: stepAnimationFinishedTrigger
@@ -2480,7 +2480,7 @@ var Dialog = function Dialog(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stepAnimationFinishedTrigger]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     initControls && initControls(function (prev) {
       return _extends({}, prev, {
         animationConfiguration: animationConfiguration
@@ -2488,7 +2488,7 @@ var Dialog = function Dialog(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animationConfiguration]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (currentStepRef.current) {
       resizeObserverRef.current = new ResizeObserver__default["default"](function (entries) {
         if (entries === void 0) {
@@ -2511,13 +2511,13 @@ var Dialog = function Dialog(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStepRef]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setDialogVerticalHeight(function (prev) {
       return prev !== 0 && dimensions.height === 0 ? prev : dimensions.height;
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dimensions]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     var childrenFormatted = children.length > 1 ? children : [children];
     var stepsArr = childrenFormatted.map(function (child) {
       return {
@@ -2529,11 +2529,11 @@ var Dialog = function Dialog(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setIsMultiStep(typeof initControls === "function");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initControls]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (steps) initControls && initControls({
       nextStep: nextStep,
       previousStep: previousStep,
@@ -2559,7 +2559,7 @@ var Dialog = function Dialog(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep, steps]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     return function () {
       bodyScrollLock.clearAllBodyScrollLocks();
       updateButtonControllingStep("");
@@ -2792,25 +2792,25 @@ var DialogStep = function DialogStep(_ref) {
     _controls$updateAnima = controls.updateAnimationConfiguration,
     updateAnimationConfiguration = _controls$updateAnima === void 0 ? function () {} : _controls$updateAnima,
     inline = controls.inline;
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     isMultiStep = _useState[0],
     setIsMultiStep = _useState[1];
-  var _useState2 = React$1.useState(""),
+  var _useState2 = React.useState(""),
     stepClass = _useState2[0],
     setStepClass = _useState2[1];
-  var _useState3 = React$1.useState(""),
+  var _useState3 = React.useState(""),
     wrapperDirectionSubclass = _useState3[0],
     setWrapperDirectionSubclass = _useState3[1];
-  var _useState4 = React$1.useState(0),
+  var _useState4 = React.useState(0),
     unmountOnAnimationEndTrigger = _useState4[0],
     setUnmountOnAnimationEndTrigger = _useState4[1];
-  var _useState5 = React$1.useState(false),
+  var _useState5 = React.useState(false),
     stepMounted = _useState5[0],
     setStepMounted = _useState5[1];
-  var currentStepRef = React$1.useRef();
+  var currentStepRef = React.useRef();
   // const { t } = useTranslation();
 
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (controls !== {} && stepName !== "") setIsMultiStep(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -2825,7 +2825,7 @@ var DialogStep = function DialogStep(_ref) {
       setUnmountOnAnimationEndTrigger(0);
     }
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     var multiStep = false;
     if (controls !== {} && stepName !== "") {
       setIsMultiStep(true);
@@ -2879,7 +2879,7 @@ var DialogStep = function DialogStep(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (isMultiStep && isCurrentStep(stepName) && fixedButtons && (confirmButtonText || backButtonText)) {
       updateButtonsConfiguration({
         primaryButtonTitle: confirmButtonText,
@@ -3249,11 +3249,11 @@ var NoticeIcon = function NoticeIcon(_ref) {
     titleNoticeIcon = _ref$titleNoticeIcon === void 0 ? "" : _ref$titleNoticeIcon,
     _ref$tooltipPosition = _ref.tooltipPosition,
     tooltipPosition = _ref$tooltipPosition === void 0 ? TOOLTIP_POSITIONS.TOP : _ref$tooltipPosition;
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     showTooltip = _useState[0],
     setShowTooltip = _useState[1];
-  var noticeRef = React$1.useRef();
-  React$1.useEffect(function () {
+  var noticeRef = React.useRef();
+  React.useEffect(function () {
     return handleClickOutside([noticeRef], function () {
       return setShowTooltip(false);
     });
@@ -3358,7 +3358,7 @@ var TitleBox = function TitleBox(_ref) {
     copyButtonTooltipContent = _ref.copyButtonTooltipContent;
   var handleError = useCallHandlingErrors();
   var transparentTitleClass = transparentTitle ? s$2["transparent-title"] : "";
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     showCopyNotice = _useState[0],
     setShowCopyNotice = _useState[1];
   var handleCopyButton = function handleCopyButton(e) {
@@ -3965,35 +3965,35 @@ var AmountInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
     fiatInputPlaceholderText = _ref$fiatInputPlaceho === void 0 ? null : _ref$fiatInputPlaceho;
   // const { t } = useTranslation();
   var callHandlingErrors = useCallHandlingErrors();
-  var _useState = React$1.useState(""),
+  var _useState = React.useState(""),
     coinAmountValue = _useState[0],
     setCoinAmountValue = _useState[1];
-  var _useState2 = React$1.useState("0"),
+  var _useState2 = React.useState("0"),
     coinAmountPlaceholder = _useState2[0],
     setCoinAmountPlaceholder = _useState2[1];
-  var _useState3 = React$1.useState(""),
+  var _useState3 = React.useState(""),
     fiatAmountValue = _useState3[0],
     setFiatAmountValue = _useState3[1];
-  var _useState4 = React$1.useState(false),
+  var _useState4 = React.useState(false),
     interactedWith = _useState4[0],
     setInteractedWith = _useState4[1];
-  var _useState5 = React$1.useState(false),
+  var _useState5 = React.useState(false),
     fiatAmountAutoFocus = _useState5[0],
     setFiatAmountAutoFocus = _useState5[1];
-  var _useState6 = React$1.useState(false),
+  var _useState6 = React.useState(false),
     isInFocus = _useState6[0],
     setIsInFocus = _useState6[1];
-  var _useState7 = React$1.useState(false),
+  var _useState7 = React.useState(false),
     highlightBalance = _useState7[0],
     setHighlightBalance = _useState7[1];
-  var _useState8 = React$1.useState(false),
+  var _useState8 = React.useState(false),
     highlightInput = _useState8[0],
     setHighlightInput = _useState8[1];
   var resetToDefault = function resetToDefault() {
     setInteractedWith(false);
     setFiatAmountAutoFocus(false);
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (updateAssetInputTo !== null) handleChangeAmount(updateAssetInputTo == null ? void 0 : updateAssetInputTo.toString(), false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateAssetInputTo]);
@@ -4049,11 +4049,11 @@ var AmountInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
     setFiatAmountAutoFocus(true);
     setInteractedWith(true);
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     predefinedValue != null && handleChangeAmount(predefinedValue + "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [predefinedValue]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     try {
       setCoinAmountPlaceholder(placeholderByDecimalCount(assetDecimalPlaces));
     } catch (e) {
@@ -4064,7 +4064,7 @@ var AmountInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
   }, [ticker]);
 
   // Check if input & balance highlights are needed after a change in either the asset amount or the balance
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (!showBalanceValidation || (assetBalance == null ? void 0 : assetBalance.assetAmount) == null) return;
     var enableHighlight = bignumber_js.BigNumber(coinAmountValue).gt(assetBalance == null ? void 0 : assetBalance.assetAmount);
     handleBalanceValidationChange(enableHighlight);
@@ -4075,7 +4075,7 @@ var AmountInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
   }, [coinAmountValue, assetBalance]);
 
   // Clearing the custom focus upon disabling or enabling the form
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     return setIsInFocus(false);
   }, [disabled]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TitleBox, {
@@ -4151,11 +4151,7 @@ var AmountInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
         return handleFiatInteraction();
       }, e);
     }
-  }, fiatInputPlaceholderText))) : /*#__PURE__*/React__default["default"].createElement(LoadingDots, {
-    isColored: true,
-    noMargins: false,
-    align: "left"
-  })), showChangeAssetButton && ticker ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fiatInputPlaceholderText))) : null), showChangeAssetButton && ticker ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: s$1["amount-input-container-button-wrapper"],
     ref: buttonForwardRef
   }, /*#__PURE__*/React__default["default"].createElement(AssetSelection, {
@@ -4439,16 +4435,16 @@ var SwapForm = function SwapForm(_ref) {
   var DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
 
   // Updating the states below will insert the new value into the send or receive input field
-  var _useState = React$1.useState(preservedAmount != null ? preservedAmount : null),
+  var _useState = React.useState(preservedAmount != null ? preservedAmount : null),
     updateSendInputTo = _useState[0],
     setUpdateSendInputTo = _useState[1];
-  var _useState2 = React$1.useState(null),
+  var _useState2 = React.useState(null),
     updateReceiveInputTo = _useState2[0],
     setUpdateReceiveInputTo = _useState2[1];
   var _useReferredState = useReferredState(preservedAmount == null || preservedAmount === "" ? null : preservedAmount),
     sendAssetAmount = _useReferredState[0],
     setSendAssetAmount = _useReferredState[1];
-  var _useState3 = React$1.useState(),
+  var _useState3 = React.useState(),
     swapRate = _useState3[0],
     setSwapRate = _useState3[1];
   var _useReferredState2 = useReferredState(null),
@@ -4457,48 +4453,48 @@ var SwapForm = function SwapForm(_ref) {
   var _useReferredState3 = useReferredState(null),
     maximumAmount = _useReferredState3[0],
     setMaximumAmount = _useReferredState3[1];
-  var _useState4 = React$1.useState(),
+  var _useState4 = React.useState(),
     validationContent = _useState4[0],
     setValidationContent = _useState4[1];
-  var _useState5 = React$1.useState(true),
+  var _useState5 = React.useState(true),
     minimalAmountValid = _useState5[0],
     setMinimalAmountValid = _useState5[1]; // Whether the amount is above the minimal amount
-  var _useState6 = React$1.useState(true),
+  var _useState6 = React.useState(true),
     maximumAmountValid = _useState6[0],
     setMaximumAmountValid = _useState6[1];
-  var _useState7 = React$1.useState(true),
+  var _useState7 = React.useState(true),
     isPairSupported = _useState7[0],
     setIsPairSupported = _useState7[1];
-  var _useState8 = React$1.useState(false),
+  var _useState8 = React.useState(false),
     isSameCoins = _useState8[0],
     setIsSameCoins = _useState8[1];
-  var _useState9 = React$1.useState(false),
+  var _useState9 = React.useState(false),
     isSwapCalculated = _useState9[0],
     setIsSwapCalculated = _useState9[1];
-  var _useState10 = React$1.useState(false),
+  var _useState10 = React.useState(false),
     readyToSwap = _useState10[0],
     setReadyToSwap = _useState10[1]; // 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
-  var _useState11 = React$1.useState(preservedAmount == null || String(preservedAmount) === "0"),
+  var _useState11 = React.useState(preservedAmount == null || String(preservedAmount) === "0"),
     isAmountZero = _useState11[0],
     setIsAmountZero = _useState11[1];
   var _useReferredState4 = useReferredState(false),
     isLoading = _useReferredState4[0],
     setIsLoading = _useReferredState4[1]; // Whether the form is in the progress of loading some data (new rates, for example)
-  var _useState12 = React$1.useState(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)),
+  var _useState12 = React.useState(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, preservedAmount)),
     confirmButtonTo = _useState12[0],
     setConfirmButtonTo = _useState12[1];
-  var _useState13 = React$1.useState(),
+  var _useState13 = React.useState(),
     transactionFee = _useState13[0],
     setTransactionFee = _useState13[1];
-  var _useState14 = React$1.useState(true),
+  var _useState14 = React.useState(true),
     balanceValid = _useState14[0],
     setBalanceValid = _useState14[1]; // Whether the amount is less than total balance
   var _useReferredState5 = useReferredState(null),
     isSwapAll = _useReferredState5[0],
     setIsSwapAll = _useReferredState5[1];
-  var _useState15 = React$1.useState([]),
+  var _useState15 = React.useState([]),
     swapAllButtonLoaderReSetter = _useState15[0],
     setSwapAllButtonLoaderReSetter = _useState15[1];
   var _useReferredState6 = useReferredState(null),
@@ -4715,7 +4711,7 @@ var SwapForm = function SwapForm(_ref) {
       }
     }, e);
   };
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (isSwapAll.current === true) {
       requestDataRefresh(undefined, true);
     } else if (isSwapAll.current === false) {
@@ -4723,11 +4719,11 @@ var SwapForm = function SwapForm(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSwapAll.current]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current || preservedAmount || null));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sendingAssetTicker, receivingAssetTicker]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (!sendingAssetTicker || !receivingAssetTicker) return;
     var isCurrentAmountNotZero = sendAssetAmount.current && !bignumber_js.BigNumber("0").eq(sendAssetAmount.current);
     var isPreservedAmountNotZero = preservedAmount && !bignumber_js.BigNumber("0").eq(preservedAmount);
@@ -4741,7 +4737,7 @@ var SwapForm = function SwapForm(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sendingAssetTicker, receivingAssetTicker]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (!minimalAmountValid || isAmountZero) {
       setTransactionFee(null);
     }
@@ -4752,7 +4748,7 @@ var SwapForm = function SwapForm(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [balanceValid, formHasBalance, minimalAmountValid, isAmountZero, isSwapCalculated, isSameCoins, isPairSupported]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     // Here we set up auto recalculations for the swap details if the form is ready to swap but is idle for some time
     var timeoutId = null;
     if (readyToSwap) {
@@ -4772,7 +4768,7 @@ var SwapForm = function SwapForm(_ref) {
   }, [readyToSwap]);
 
   // TODO: [refactoring, critical] this code looks like a hack related to task_id=6e328d39063142b7b9fa01d497e616da
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (triggerDataUpdateResetting) {
       clearTimeout(dataUpdateTimeoutId.current);
       setDataUpdateTimeoutId(null);
@@ -4783,18 +4779,18 @@ var SwapForm = function SwapForm(_ref) {
   }, [triggerDataUpdateResetting]);
 
   // Resets the passed "set value to" param to null, so it can be used multiple times with any value
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (!!updateSendInputTo) setUpdateSendInputTo(null);
     if (!!updateReceiveInputTo) setUpdateReceiveInputTo(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateSendInputTo, updateReceiveInputTo]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (swapRate != null && sendAssetAmount.current != null) {
       setUpdateReceiveInputTo(AmountUtils.trim(bignumber_js.BigNumber(sendAssetAmount.current).times(swapRate), receivingAssetDecimalCount));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [swapRate]);
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (isLoading.current === false && swapAllButtonLoaderReSetter != null && swapAllButtonLoaderReSetter.length) {
       swapAllButtonLoaderReSetter[0]();
       setSwapAllButtonLoaderReSetter([]);
@@ -4803,7 +4799,7 @@ var SwapForm = function SwapForm(_ref) {
   }, [isLoading.current, swapAllButtonLoaderReSetter]);
 
   // Handlers upon changing the asset amount
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setConfirmButtonTo(composeConfirmButtonTo(sendingAssetTicker, receivingAssetTicker, sendAssetAmount.current));
     if (sendAssetAmount.current == null) return;
     var processingAmount = sendAssetAmount.current === "" ? "0" : sendAssetAmount.current;
@@ -4813,19 +4809,18 @@ var SwapForm = function SwapForm(_ref) {
     setIsSwapCalculated(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sendAssetAmount.current]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-form"]
-  }, /*#__PURE__*/React.createElement(TitleBox, {
+  }, /*#__PURE__*/React__default["default"].createElement(TitleBox, {
     linkButtonClick: bignumber_js.BigNumber(sendingAssetBalance == null ? void 0 : sendingAssetBalance.assetAmount).eq(0) ? null : function (resetButtonLoader) {
       return handleSwapAllClick(resetButtonLoader);
     },
     linkText: !formHasBalance ? "" : isSwapAll.current ? translations.swapAllButtonTitles.cancel : translations.swapAllButtonTitles.enable,
     linkButtonLoader: true,
     isLinkButtonDisabled: isLoading.current || sendingAssetTicker === receivingAssetTicker || bignumber_js.BigNumber(sendingAssetBalance == null ? void 0 : sendingAssetBalance.assetAmount).eq(0)
-    // TODO: texts for copy button
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-form-inputs"]
-  }, /*#__PURE__*/React.createElement(AmountInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(AmountInput, {
     ticker: sendingAssetTicker,
     tickerPrintable: sendingAssetTickerPrintable,
     assetDecimalPlaces: sendingAssetDecimalCount,
@@ -4853,16 +4848,16 @@ var SwapForm = function SwapForm(_ref) {
     fiatCurrencyDecimals: fiatCurrencyDecimals,
     balanceLoaderText: translations.input.balanceLoaderText,
     fiatInputPlaceholderText: translations.input.fiatPlaceholder
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-form-inputs-separator"] + " " + (isLoading.current || sendingAssetTicker === null || receivingAssetTicker === null ? s["disabled"] : "")
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: swapSeparatorIconSrc,
     alt: "swap icon",
     draggable: false,
     onClick: function onClick(e) {
       return callHandlingErrors(handleChangeAssetsIconClick, e);
     }
-  })), /*#__PURE__*/React.createElement(AmountInput, {
+  })), /*#__PURE__*/React__default["default"].createElement(AmountInput, {
     ticker: receivingAssetTicker,
     tickerPrintable: receivingAssetTickerPrintable,
     assetDecimalPlaces: receivingAssetDecimalCount,
@@ -4886,45 +4881,45 @@ var SwapForm = function SwapForm(_ref) {
     fiatCurrencyDecimals: fiatCurrencyDecimals,
     balanceLoaderText: translations.input.balanceLoaderText,
     fiatInputPlaceholderText: translations.input.fiatPlaceholder
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-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", {
+  }, /*#__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["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))) : 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 ? /*#__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))) : 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", {
     className: s["interactable"] + " " + s["red"],
     onClick: isLoading.current ? function () {} : function (e) {
       return 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", {
+  }, 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__default["default"].createElement("span", {
     className: s["semi-transparent"]
-  }, " ~ " + AmountUtils.fiat(maximumAmount.current.fiat, fiatCurrencyCode)) : "") : /*#__PURE__*/React.createElement(React.Fragment, null, translations.informationBlock.minimumAmount, /*#__PURE__*/React.createElement("span", {
+  }, " ~ " + AmountUtils.fiat(maximumAmount.current.fiat, fiatCurrencyCode)) : "") : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, translations.informationBlock.minimumAmount, /*#__PURE__*/React__default["default"].createElement("span", {
     className: s["interactable"] + " " + (!minimalAmountValid ? s["red"] : ""),
     onClick: isLoading.current ? function () {} : function (e) {
       return callHandlingErrors(handleMinimalAmountClick, e);
     }
-  }, AmountUtils.crypto(minimalAmount.current.crypto, sendingAssetTickerPrintable)), ((_minimalAmount$curren5 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren5.fiat) != null && minimalAmount.current.fiat !== "" ? /*#__PURE__*/React.createElement("span", {
+  }, AmountUtils.crypto(minimalAmount.current.crypto, sendingAssetTickerPrintable)), ((_minimalAmount$curren5 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren5.fiat) != null && minimalAmount.current.fiat !== "" ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: s["semi-transparent"]
-  }, " ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)) : "") : sendAssetAmount.current || isSwapAll.current ? translations.informationBlock[formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"] : translations.informationBlock.loadingMinimalAmount)), validationContent ? /*#__PURE__*/React.createElement("div", {
+  }, " ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)) : "") : sendAssetAmount.current || isSwapAll.current ? translations.informationBlock[formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"] : translations.informationBlock.loadingMinimalAmount)), validationContent ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-form-validation-text"]
-  }, /*#__PURE__*/React.createElement(Validation, {
+  }, /*#__PURE__*/React__default["default"].createElement(Validation, {
     text: validationContent
-  })) : "", /*#__PURE__*/React.createElement("div", {
+  })) : "", /*#__PURE__*/React__default["default"].createElement("div", {
     className: s["swap-dialog-form-button-container"]
-  }, formHasBalance ? null : /*#__PURE__*/React.createElement("p", {
+  }, formHasBalance ? null : /*#__PURE__*/React__default["default"].createElement("p", {
     className: s["swap-dialog-form-button-container-consent-text"]
-  }, translations.consents.consentTextRate), showConsent ? null : /*#__PURE__*/React.createElement("p", {
+  }, translations.consents.consentTextRate), showConsent ? null : /*#__PURE__*/React__default["default"].createElement("p", {
     className: s["swap-dialog-form-button-container-consent-text"]
-  }, translations.consents.consentText + " ", /*#__PURE__*/React.createElement("a", {
+  }, translations.consents.consentText + " ", /*#__PURE__*/React__default["default"].createElement("a", {
     // TODO: [dev] fix dox link - pass via property
     href: "/docs/legal/swap-terms-of-use.html",
     className: s["swap-dialog-form-button-container-consent-text-link"],
     target: "_blank"
-  }, translations.consents.termsOfUse), " " + translations.consents.and + " ", /*#__PURE__*/React.createElement("a", {
+  }, translations.consents.termsOfUse), " " + translations.consents.and + " ", /*#__PURE__*/React__default["default"].createElement("a", {
     // TODO: [dev] fix dox link - pass via property
     href: "/docs/legal/swap-privacy-policy.html",
     className: s["swap-dialog-form-button-container-consent-text-link"],
     target: "_blank"
-  }, translations.consents.privacyPolicy), "."), /*#__PURE__*/React.createElement(Button, {
+  }, translations.consents.privacyPolicy), "."), /*#__PURE__*/React__default["default"].createElement(Button, {
     size: "lg",
     mode: "primary",
     content: translations.confirmButtonText,