@rabbitio/ui-kit 1.0.0-beta.83 → 1.0.0-beta.85

package/dist/index.module.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import AnimateHeight from 'react-animate-height';
-import ResizeObserver from 'resize-observer-polyfill';
+import ResizeObserver$1 from 'resize-observer-polyfill';
 import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 import animateScrollTo from 'animated-scroll-to';
 import copy from 'clipboard-copy';
@@ -1456,7 +1456,7 @@ SupportChat.defaultProps = {
   locale: "en"
 };
 
-var s$m = {"asset-icon":"_0RwWA","small":"_QL4L6","asset-icon-primary":"_ltTJa","asset-icon-secondary":"_3rtPy"};
+var s$o = {"asset-icon":"_0RwWA","small":"_QL4L6","asset-icon-primary":"_ltTJa","asset-icon-secondary":"_3rtPy"};
 
 /**
  * AssetIcon component to display an icon for an asset.
@@ -1481,16 +1481,16 @@ var AssetIcon = function AssetIcon(_ref) {
     e.target.src = fallbackSrc;
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: s$m["asset-icon"] + (small ? " " + s$m["small"] : "")
+    className: s$o["asset-icon"] + (small ? " " + s$o["small"] : "")
   }, /*#__PURE__*/React.createElement("img", {
     src: assetIconSrc,
-    className: s$m["asset-icon-primary"] + (small ? " " + s$m["small"] : ""),
+    className: s$o["asset-icon-primary"] + (small ? " " + s$o["small"] : ""),
     alt: " ",
     onError: handleFailedLoad,
     loading: "lazy"
   }), assetIconProtocolSrc ? /*#__PURE__*/React.createElement("img", {
     src: assetIconProtocolSrc,
-    className: s$m["asset-icon-secondary"] + (small ? " " + s$m["small"] : ""),
+    className: s$o["asset-icon-secondary"] + (small ? " " + s$o["small"] : ""),
     alt: " ",
     onError: handleFailedLoad,
     loading: "lazy"
@@ -1646,7 +1646,7 @@ var Logger = /*#__PURE__*/function () {
   return Logger;
 }();
 
-function _catch$f(body, recover) {
+function _catch$g(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -1662,7 +1662,7 @@ function useCallHandlingErrors() {
     setState = _useState[1];
   return useCallback(function (functionToBeCalled, event) {
     try {
-      var _temp = _catch$f(function () {
+      var _temp = _catch$g(function () {
         return Promise.resolve(functionToBeCalled(event)).then(function () {});
       }, function (error) {
         Logger.logError(error, (functionToBeCalled == null ? void 0 : functionToBeCalled.name) || "errorBoundaryTrigger", "Caught by ErrorBoundary");
@@ -1678,7 +1678,7 @@ function useCallHandlingErrors() {
   }, []);
 }
 
-var s$l = {"link-button-text":"_1Qn04","link-button":"_UDMz-","disabled":"_UtHO6","icon-rotate-90deg":"_v0g-W","icon-rotate-180deg":"_oxet9","icon-rotate-270deg":"_0aAbG","colored":"_UlsXW"};
+var s$n = {"link-button-text":"_1Qn04","link-button":"_UDMz-","disabled":"_UtHO6","icon-rotate-90deg":"_v0g-W","icon-rotate-180deg":"_oxet9","icon-rotate-270deg":"_0aAbG","colored":"_UlsXW"};
 
 var ICON_ROTATE_OPTIONS = {
   rotate0: "0deg",
@@ -1747,14 +1747,14 @@ var LinkButton = function LinkButton(_ref) {
   return isLoading ? /*#__PURE__*/React.createElement(LoadingDots, {
     isColored: true
   }) : /*#__PURE__*/React.createElement("div", {
-    className: s$l["link-button"] + (" " + (processedIconRotation && processedIconRotation !== ICON_ROTATE_OPTIONS.rotate0 ? " " + s$l["icon-rotate-" + processedIconRotation] : "") + " " + (isDisabled ? " " + s$l["disabled"] : "")),
+    className: s$n["link-button"] + (" " + (processedIconRotation && processedIconRotation !== ICON_ROTATE_OPTIONS.rotate0 ? " " + s$n["icon-rotate-" + processedIconRotation] : "") + " " + (isDisabled ? " " + s$n["disabled"] : "")),
     onClick: handleClick
   }, icon ? /*#__PURE__*/React.createElement("img", {
     src: icon,
     alt: "link button alt",
     loading: "lazy"
   }) : null, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, null) : null, /*#__PURE__*/React.createElement("p", {
-    className: s$l["link-button-text"] + (" " + (isColored ? s$l["colored"] : "") + " " + (isDisabled ? s$l["disabled"] : ""))
+    className: s$n["link-button-text"] + (" " + (isColored ? s$n["colored"] : "") + " " + (isDisabled ? s$n["disabled"] : ""))
   }, content));
 };
 LinkButton.propTypes = {
@@ -1777,7 +1777,7 @@ LinkButton.defaultProps = {
   iconRotate: ICON_ROTATE_OPTIONS.rotate0
 };
 
-var s$k = {"dialog-buttons":"_UtFG3","hide-on-mobiles":"_fVQUd","space-between-layout":"_zVTkC"};
+var s$m = {"dialog-buttons":"_UtFG3","hide-on-mobiles":"_fVQUd","space-between-layout":"_zVTkC"};
 
 /**
  * Renders a dialog component with configurable primary and secondary buttons.
@@ -1788,11 +1788,13 @@ var s$k = {"dialog-buttons":"_UtFG3","hide-on-mobiles":"_fVQUd","space-between-l
  * @param {Object} props - Props for configuring the DialogButtons.
  * @param {string} [props.primaryButtonTitle] - The text to display on the primary button.
  * @param {Function} props.primaryButtonOnClick - Function to call when the primary button is clicked.
+ * @param {boolean} props.primaryButtonEnabled - Determines whether the secondary button is enabled.
  * @param {boolean} [props.primaryButtonLoader=false] - Whether to show a loader on the primary button.
  * @param {string} [props.primaryButtonTo] - The URL or route the primary button should navigate to.
  * @param {Function} [props.primaryButtonSetClickTrigger] - Additional click handling logic for the primary button.
  * @param {string} [props.secondaryButtonTitle] - The text to display on the secondary button.
  * @param {Function} props.secondaryButtonOnClick - Function to call when the secondary button is clicked.
+ * @param {boolean} props.secondaryButtonEnabled - Determines whether the primary button is enabled.
  * @param {string} [props.secondaryButtonTo] - The URL or route the secondary button should navigate to.
  * @param {boolean} [props.secondaryButtonBig=false] - Makes the secondary button larger for visual emphasis.
  * @param {boolean} [props.withBackgroundImage=false] - Indicates if the button should adjust its styling for background images.
@@ -1802,12 +1804,14 @@ var s$k = {"dialog-buttons":"_UtFG3","hide-on-mobiles":"_fVQUd","space-between-l
 var DialogButtons = function DialogButtons(_ref) {
   var primaryButtonTitle = _ref.primaryButtonTitle,
     primaryButtonOnClick = _ref.primaryButtonOnClick,
+    primaryButtonEnabled = _ref.primaryButtonEnabled,
     _ref$primaryButtonLoa = _ref.primaryButtonLoader,
     primaryButtonLoader = _ref$primaryButtonLoa === void 0 ? false : _ref$primaryButtonLoa,
     primaryButtonTo = _ref.primaryButtonTo,
     primaryButtonSetClickTrigger = _ref.primaryButtonSetClickTrigger,
     secondaryButtonTitle = _ref.secondaryButtonTitle,
     secondaryButtonOnClick = _ref.secondaryButtonOnClick,
+    secondaryButtonEnabled = _ref.secondaryButtonEnabled,
     secondaryButtonTo = _ref.secondaryButtonTo,
     _ref$secondaryButtonB = _ref.secondaryButtonBig,
     secondaryButtonBig = _ref$secondaryButtonB === void 0 ? false : _ref$secondaryButtonB,
@@ -1817,7 +1821,7 @@ var DialogButtons = function DialogButtons(_ref) {
     hideOnMobiles = _ref$hideOnMobiles === void 0 ? false : _ref$hideOnMobiles;
   var callHandlingErrors = useCallHandlingErrors();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: s$k["dialog-buttons"] + (hideOnMobiles ? " " + s$k["hide-on-mobiles"] : "") + (secondaryButtonBig ? " " + s$k["space-between-layout"] : "")
+    className: s$m["dialog-buttons"] + (hideOnMobiles ? " " + s$m["hide-on-mobiles"] : "") + (secondaryButtonBig ? " " + s$m["space-between-layout"] : "")
   }, secondaryButtonTitle ? secondaryButtonTo ? /*#__PURE__*/React.createElement(Button, {
     mode: "primary-transparent",
     to: secondaryButtonTo,
@@ -1826,7 +1830,8 @@ var DialogButtons = function DialogButtons(_ref) {
     fullWidthOnMobiles: true,
     content: secondaryButtonTitle,
     onClick: secondaryButtonOnClick,
-    handleError: callHandlingErrors
+    handleError: callHandlingErrors,
+    isDisabled: !secondaryButtonEnabled
   }) : secondaryButtonBig ? /*#__PURE__*/React.createElement(Button, {
     mode: "transparent",
     size: "lg",
@@ -1834,11 +1839,13 @@ var DialogButtons = function DialogButtons(_ref) {
     fullWidthOnMobiles: true,
     content: secondaryButtonTitle,
     onClick: secondaryButtonOnClick,
-    handleError: callHandlingErrors
+    handleError: callHandlingErrors,
+    isDisabled: !secondaryButtonEnabled
   }) : /*#__PURE__*/React.createElement(LinkButton, {
     onClick: secondaryButtonOnClick,
     content: secondaryButtonTitle,
-    isColored: !withBackgroundImage
+    isColored: !withBackgroundImage,
+    isDisabled: !secondaryButtonEnabled
   }) : null, primaryButtonTitle ? /*#__PURE__*/React.createElement(Button, {
     mode: "primary",
     size: "lg",
@@ -1848,17 +1855,20 @@ var DialogButtons = function DialogButtons(_ref) {
     fullWidthOnMobiles: true,
     content: primaryButtonTitle,
     setClickTrigger: primaryButtonSetClickTrigger,
-    handleError: callHandlingErrors
+    handleError: callHandlingErrors,
+    isDisabled: !primaryButtonEnabled
   }) : null));
 };
 DialogButtons.propTypes = {
   primaryButtonTitle: PropTypes.string,
   primaryButtonOnClick: PropTypes.func,
+  primaryButtonEnabled: PropTypes.bool,
   primaryButtonLoader: PropTypes.bool,
   primaryButtonTo: PropTypes.string,
   primaryButtonSetClickTrigger: PropTypes.func,
   secondaryButtonTitle: PropTypes.string,
   secondaryButtonOnClick: PropTypes.func,
+  secondaryButtonEnabled: PropTypes.bool,
   secondaryButtonTo: PropTypes.string,
   secondaryButtonBig: PropTypes.bool,
   withBackgroundImage: PropTypes.bool,
@@ -1871,7 +1881,7 @@ DialogButtons.defaultProps = {
   hideOnMobiles: false
 };
 
-var s$j = {"background-title":"_Gzho7","background-title-wrapper":"_Rvcyg","small-margins":"_WjuWI","background-title-wrapper-text":"_cAVcA"};
+var s$l = {"background-title":"_Gzho7","background-title-wrapper":"_Rvcyg","small-margins":"_WjuWI","background-title-wrapper-text":"_cAVcA"};
 
 /**
  * Component for displaying a title with a fancy background text, which
@@ -1887,11 +1897,11 @@ var BackgroundTitle = function BackgroundTitle(_ref) {
     _ref$smallMargins = _ref.smallMargins,
     smallMargins = _ref$smallMargins === void 0 ? false : _ref$smallMargins;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$j["background-title"]
+    className: s$l["background-title"]
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$j["background-title-wrapper"] + (smallMargins ? " " + s$j["small-margins"] : "")
+    className: s$l["background-title-wrapper"] + (smallMargins ? " " + s$l["small-margins"] : "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$j["background-title-wrapper-text"] + (smallMargins ? " " + s$j["small-margins"] : "")
+    className: s$l["background-title-wrapper-text"] + (smallMargins ? " " + s$l["small-margins"] : "")
   }, text)));
 };
 BackgroundTitle.propTypes = {
@@ -1902,7 +1912,7 @@ BackgroundTitle.defaultProps = {
   smallMargins: false
 };
 
-var s$i = {"close":"_yMoDc","large":"_clOG2","white":"_145xN","dark-invert":"_-CvSS","dark":"_tTNnu"};
+var s$k = {"close":"_yMoDc","large":"_clOG2","white":"_145xN","dark-invert":"_-CvSS","dark":"_tTNnu"};
 
 var CLOSE_COLORS = {
   WHITE: "white",
@@ -1930,7 +1940,7 @@ var Close = function Close(_ref) {
     large = _ref$large === void 0 ? false : _ref$large;
   var callHandlingErrors = useCallHandlingErrors();
   return /*#__PURE__*/React.createElement("svg", {
-    className: s$i["close"] + " " + s$i[color] + (large ? " " + s$i["large"] : ""),
+    className: s$k["close"] + " " + s$k[color] + (large ? " " + s$k["large"] : ""),
     onClick: function onClick(e) {
       return callHandlingErrors(_onClick, e);
     },
@@ -1956,7 +1966,7 @@ Close.defaultProps = {
   large: false
 };
 
-var s$h = {"validation-text":"_VIr-M","validation":"_L3OdW"};
+var s$j = {"validation-text":"_VIr-M","validation":"_L3OdW"};
 
 var SuccessfulValidationIcon = (function () {
   return /*#__PURE__*/React.createElement("svg", {
@@ -2054,15 +2064,15 @@ var Validation = function Validation(_ref) {
     text = _ref$text === void 0 ? "" : _ref$text,
     isSuccessAlert = _ref.isSuccessAlert;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$h["validation"]
-  }, /*#__PURE__*/React.createElement("div", null, isSuccessAlert ?
+    className: s$j["validation"]
+  }, 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", {
-    className: s$h["validation-text"]
+  React.createElement(FailedValidationIcon, null), /*#__PURE__*/React.createElement("span", {
+    className: s$j["validation-text"]
   }, text));
 };
 Validation.propTypes = {
@@ -2194,7 +2204,7 @@ function logErrorOrOutputToConsole(e) {
   }
 }
 
-var s$g = {"dialog":"_AyHwj","hidden":"_hX4Lf","vertical-overflow-disabled":"_gRENy","inline":"_Da-tZ","dialog-transition-enter":"_0YlL9","scrollable":"_LaCqO","dialog-transition-enter-active":"_j35L1","dialog-transition-exit":"_lGJtS","dialog-transition-exit-active":"_Vg6Z2","fixed-buttons-container":"_ZNfnj","fixed-buttons-container-enter":"_vi-ug","fixed-buttons-container-enter-active":"_rIo-s","fixed-buttons-container-enter-done":"_5aNZC","fixed-buttons-container-exit":"_3ImpU","fixed-buttons-container-exit-active":"_dk-DE","fixed-buttons-container-exit-done":"_h9qrO","dialog-wrapper":"_HhhGp","animation-disabled":"_f8vf5","wide":"_hVh9o","dialog-wrapper-rah-content":"_ioVHo","dialog-wrapper-controls-top-padding":"_1bNLu","dialog-wrapper-close":"_nCuuj"};
+var s$i = {"dialog":"_AyHwj","hidden":"_hX4Lf","vertical-overflow-disabled":"_gRENy","inline":"_Da-tZ","dialog-transition-enter":"_0YlL9","scrollable":"_LaCqO","dialog-transition-enter-active":"_j35L1","dialog-transition-exit":"_lGJtS","dialog-transition-exit-active":"_Vg6Z2","fixed-buttons-container":"_ZNfnj","fixed-buttons-container-enter":"_vi-ug","fixed-buttons-container-enter-active":"_rIo-s","fixed-buttons-container-enter-done":"_5aNZC","fixed-buttons-container-exit":"_3ImpU","fixed-buttons-container-exit-active":"_dk-DE","fixed-buttons-container-exit-done":"_h9qrO","dialog-wrapper":"_HhhGp","animation-disabled":"_f8vf5","wide":"_hVh9o","dialog-wrapper-rah-content":"_ioVHo","dialog-wrapper-controls-top-padding":"_1bNLu","dialog-wrapper-close":"_nCuuj"};
 
 var DIALOG_SIZES = {
   small: {
@@ -2495,7 +2505,7 @@ var Dialog = function Dialog(_ref) {
   }, [animationConfiguration]);
   useEffect(function () {
     if (currentStepRef.current) {
-      resizeObserverRef.current = new ResizeObserver(function (entries) {
+      resizeObserverRef.current = new ResizeObserver$1(function (entries) {
         if (entries === void 0) {
           entries = [];
         }
@@ -2576,10 +2586,10 @@ var Dialog = function Dialog(_ref) {
     "in": showDialogProcessed,
     timeout: DIALOG_TRANSITION_STEP_DURATION,
     classNames: inline ? undefined : {
-      enter: s$g["dialog-transition-enter"],
-      enterActive: s$g["dialog-transition-enter-active"],
-      exit: s$g["dialog-transition-exit"],
-      exitActive: s$g["dialog-transition-exit-active"]
+      enter: s$i["dialog-transition-enter"],
+      enterActive: s$i["dialog-transition-enter-active"],
+      exit: s$i["dialog-transition-exit"],
+      exitActive: s$i["dialog-transition-exit-active"]
     },
     unmountOnExit: true,
     onExited: function onExited() {
@@ -2598,13 +2608,13 @@ var Dialog = function Dialog(_ref) {
       disableBodyScroll(dialogRef.current);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$g["dialog"] + " " + (dialogVerticalHeight > 1 || !isMultiStep ? "" : " " + s$g["hidden"]) + (animationConfiguration.dialogContainerOverflowDisabled ? " " + s$g["vertical-overflow-disabled"] : "") + (inline ? " " + s$g["inline"] : ""),
+    className: s$i["dialog"] + " " + (dialogVerticalHeight > 1 || !isMultiStep ? "" : " " + s$i["hidden"]) + (animationConfiguration.dialogContainerOverflowDisabled ? " " + s$i["vertical-overflow-disabled"] : "") + (inline ? " " + s$i["inline"] : ""),
     ref: dialogRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$g["scrollable"] + (inline ? " " + s$g["inline"] : ""),
+    className: s$i["scrollable"] + (inline ? " " + s$i["inline"] : ""),
     ref: scrollableRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$g["dialog-wrapper"] + (animationConfiguration.wrapperWidthAnimationEnabled ? "" : " " + s$g["animation-disabled"]) + (inline ? " " + s$g["inline"] : ""),
+    className: s$i["dialog-wrapper"] + (animationConfiguration.wrapperWidthAnimationEnabled ? "" : " " + s$i["animation-disabled"]) + (inline ? " " + s$i["inline"] : ""),
     ref: dialogWrapperRef,
     style: dialogConfiguration.customWidth !== "" ? {
       maxWidth: dialogConfiguration.customWidth
@@ -2615,9 +2625,9 @@ var Dialog = function Dialog(_ref) {
     duration: animationConfiguration.animateHeightTransitionEnabled ? animationConfiguration.animateHeightTransitionSpeed : 0,
     delay: animationConfiguration.animateHeightTransitionEnabled ? animationConfiguration.animateHeightDelay : 0,
     height: isMultiStep ? dialogVerticalHeight : "auto",
-    contentClassName: s$g["dialog-wrapper-rah-content"]
+    contentClassName: s$i["dialog-wrapper-rah-content"]
   }, inline ? "" : /*#__PURE__*/React.createElement("div", {
-    className: s$g["dialog-wrapper-close"]
+    className: s$i["dialog-wrapper-close"]
   }, /*#__PURE__*/React.createElement(Close, {
     color: "dark",
     onClick: function onClick(e) {
@@ -2630,16 +2640,16 @@ var Dialog = function Dialog(_ref) {
     // classNames={s["fixed-buttons-container"]}
     ,
     classNames: {
-      enter: s$g["fixed-buttons-container-enter"],
-      enterActive: s$g["fixed-buttons-container-enter-active"],
-      enterDone: s$g["fixed-buttons-container-enter-done"],
-      exit: s$g["fixed-buttons-container-exit"],
-      exitActive: s$g["fixed-buttons-container-exit-active"],
-      exitDone: s$g["fixed-buttons-container-exit-done"]
+      enter: s$i["fixed-buttons-container-enter"],
+      enterActive: s$i["fixed-buttons-container-enter-active"],
+      enterDone: s$i["fixed-buttons-container-enter-done"],
+      exit: s$i["fixed-buttons-container-exit"],
+      exitActive: s$i["fixed-buttons-container-exit-active"],
+      exitDone: s$i["fixed-buttons-container-exit-done"]
     },
     unmountOnExit: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$g["fixed-buttons-container"]
+    className: s$i["fixed-buttons-container"]
   }, /*#__PURE__*/React.createElement(DialogButtons, buttonsConfiguration)))));
 };
 Dialog.propTypes = {
@@ -2696,7 +2706,7 @@ var arrowWhite = (function () {
   }));
 });
 
-var s$f = {"dialog-step":"_0e-Qk","dialog":"_hKHTW","hidden":"_OT1zR","vertical-overflow-disabled":"_r1zu9","inline":"_Fl90j","dialog-transition-enter":"_I2XgD","scrollable":"_bzLMI","dialog-transition-enter-active":"_oVr8Y","dialog-transition-exit":"_Z16VM","dialog-transition-exit-active":"_n15oq","fixed-buttons-container":"_wROD2","fixed-buttons-container-enter":"_sjNeR","fixed-buttons-container-enter-active":"_ClXNv","fixed-buttons-container-enter-done":"_RFDsV","fixed-buttons-container-exit":"_biF1s","fixed-buttons-container-exit-active":"_rnsbL","fixed-buttons-container-exit-done":"_fq5hb","dialog-wrapper":"_f3-0r","animation-disabled":"_WC3TT","wide":"_KzekW","dialog-wrapper-rah-content":"_RQkF-","dialog-wrapper-controls-top-padding":"_4IXJZ","dialog-wrapper-close":"_ursQ7","single-step":"_uhIvi","current":"_cf5Kv","with-background":"_50qat","prev":"_XwrWV","next":"_rWauR","dialog-step-background-image":"_BGO3z","dialog-step-background-image-desktop":"_JHVKU","dialog-step-background-image-mobile":"_XCWwZ","primary":"_CZCMe","dialog-step-wrapper":"_abWKW","slideToLeft":"_gUTFZ","slideToRight":"_IvqZI","appear-from-left":"_kCimd","slideFromLeft":"_Qn75y","appear-from-right":"_IJNy-","slideFromRight":"_-pa-6","dialog-step-wrapper-back-button":"_RtjTj","dialog-step-wrapper-header":"_-n02U","text-left":"_KgtZY","with-background-image":"_Lvz6f","dialog-step-wrapper-header-logo":"_ICMMd","dialog-step-wrapper-header-title":"_Sit8v","without-logo":"_GuW8x","close-button-padding":"_ovES2","no-close-button-padding":"_sFNQz","dialog-step-wrapper-header-title-icon":"_Ygqlx","dialog-step-wrapper-header-title-coin-icon":"_wQKfR","dialog-step-wrapper-header-title-loading":"_pR41Y","dialog-step-wrapper-header-title-text-content":"_-kVUI","white":"_JShTb","dialog-step-wrapper-header-text":"_a7sff","break-words":"_I16HH","small-margin":"_w6f6j","no-margin":"_RF8u-","dialog-step-wrapper-content":"_dgGiX","align-left":"_9c1qs","align-center":"_z0o-e","align-right":"_-6p5j","dialog-step-wrapper-buttons":"_uuxmx","big-margin":"_U-vR6"};
+var s$h = {"dialog-step":"_0e-Qk","dialog":"_hKHTW","hidden":"_OT1zR","vertical-overflow-disabled":"_r1zu9","inline":"_Fl90j","dialog-transition-enter":"_I2XgD","scrollable":"_bzLMI","dialog-transition-enter-active":"_oVr8Y","dialog-transition-exit":"_Z16VM","dialog-transition-exit-active":"_n15oq","fixed-buttons-container":"_wROD2","fixed-buttons-container-enter":"_sjNeR","fixed-buttons-container-enter-active":"_ClXNv","fixed-buttons-container-enter-done":"_RFDsV","fixed-buttons-container-exit":"_biF1s","fixed-buttons-container-exit-active":"_rnsbL","fixed-buttons-container-exit-done":"_fq5hb","dialog-wrapper":"_f3-0r","animation-disabled":"_WC3TT","wide":"_KzekW","dialog-wrapper-rah-content":"_RQkF-","dialog-wrapper-controls-top-padding":"_4IXJZ","dialog-wrapper-close":"_ursQ7","single-step":"_uhIvi","current":"_cf5Kv","with-background":"_50qat","prev":"_XwrWV","next":"_rWauR","dialog-step-background-image":"_BGO3z","dialog-step-background-image-desktop":"_JHVKU","dialog-step-background-image-mobile":"_XCWwZ","primary":"_CZCMe","dialog-step-wrapper":"_abWKW","slideToLeft":"_gUTFZ","slideToRight":"_IvqZI","appear-from-left":"_kCimd","slideFromLeft":"_Qn75y","appear-from-right":"_IJNy-","slideFromRight":"_-pa-6","dialog-step-wrapper-back-button":"_RtjTj","dialog-step-wrapper-header":"_-n02U","text-left":"_KgtZY","with-background-image":"_Lvz6f","dialog-step-wrapper-header-logo":"_ICMMd","dialog-step-wrapper-header-title":"_Sit8v","without-logo":"_GuW8x","close-button-padding":"_ovES2","no-close-button-padding":"_sFNQz","dialog-step-wrapper-header-title-icon":"_Ygqlx","dialog-step-wrapper-header-title-coin-icon":"_wQKfR","dialog-step-wrapper-header-title-loading":"_pR41Y","dialog-step-wrapper-header-title-text-content":"_-kVUI","white":"_JShTb","dialog-step-wrapper-header-text":"_a7sff","break-words":"_I16HH","small-margin":"_w6f6j","no-margin":"_RF8u-","dialog-step-wrapper-content":"_dgGiX","align-left":"_9c1qs","align-center":"_z0o-e","align-right":"_-6p5j","dialog-step-wrapper-buttons":"_uuxmx","big-margin":"_U-vR6"};
 
 var DIALOG_STEP_CLASS = "dialog-step";
 
@@ -2717,9 +2727,11 @@ var DIALOG_STEP_CLASS = "dialog-step";
  * @param {string} props.subtitle - Step subtitle.
  * @param {string} props.backButtonText - Secondary button title.
  * @param {function} props.backButtonClick - Secondary button click handler.
+ * @param {boolean} props.backButtonEnabled - Determines whether the secondary button is enabled.
  * @param {string} props.backButtonTo - Secondary button link.
  * @param {string} props.confirmButtonText - Primary button title.
  * @param {function} props.confirmButtonClick - Primary button click handler.
+ * @param {boolean} props.confirmButtonEnabled - Determines whether the primary button is enabled.
  * @param {string} props.confirmButtonLink - Primary button link.
  * @param {boolean} props.primaryButtonLoader - Enable loader for the primary button.
  * @param {boolean} props.fixedButtons - Enable fixed buttons in the bottom for mobile devices.
@@ -2766,12 +2778,16 @@ var DialogStep = function DialogStep(_ref) {
     backButtonText = _ref$backButtonText === void 0 ? "" : _ref$backButtonText,
     _ref$backButtonClick = _ref.backButtonClick,
     backButtonClick = _ref$backButtonClick === void 0 ? function () {} : _ref$backButtonClick,
+    _ref$backButtonEnable = _ref.backButtonEnabled,
+    backButtonEnabled = _ref$backButtonEnable === void 0 ? true : _ref$backButtonEnable,
     _ref$backButtonTo = _ref.backButtonTo,
     backButtonTo = _ref$backButtonTo === void 0 ? "" : _ref$backButtonTo,
     _ref$confirmButtonTex = _ref.confirmButtonText,
     confirmButtonText = _ref$confirmButtonTex === void 0 ? "" : _ref$confirmButtonTex,
     _ref$confirmButtonCli = _ref.confirmButtonClick,
     confirmButtonClick = _ref$confirmButtonCli === void 0 ? function () {} : _ref$confirmButtonCli,
+    _ref$confirmButtonEna = _ref.confirmButtonEnabled,
+    confirmButtonEnabled = _ref$confirmButtonEna === void 0 ? true : _ref$confirmButtonEna,
     _ref$confirmButtonLin = _ref.confirmButtonLink,
     confirmButtonLink = _ref$confirmButtonLin === void 0 ? "" : _ref$confirmButtonLin,
     _ref$primaryButtonLoa = _ref.primaryButtonLoader,
@@ -2864,10 +2880,10 @@ var DialogStep = function DialogStep(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var handleTransitionEnd = function handleTransitionEnd(event) {
-    if (isMultiStep && isCurrentStep(stepName) && event.propertyName === "opacity" && event.target.classList[0] === s$f[DIALOG_STEP_CLASS]) {
+    if (isMultiStep && isCurrentStep(stepName) && event.propertyName === "opacity" && event.target.classList[0] === s$h[DIALOG_STEP_CLASS]) {
       disableAnimation(animationConfiguration.animateHeightTransitionEnabled);
     }
-    if (isMultiStep && unmountOnAnimationEndTrigger && event.propertyName === "opacity" && event.target.classList[0] === s$f[DIALOG_STEP_CLASS]) {
+    if (isMultiStep && unmountOnAnimationEndTrigger && event.propertyName === "opacity" && event.target.classList[0] === s$h[DIALOG_STEP_CLASS]) {
       clearButtonsConfiguration();
       scrollDialogToTop();
       setStepMounted(false);
@@ -2904,11 +2920,13 @@ var DialogStep = function DialogStep(_ref) {
           primaryButtonOnClick: function primaryButtonOnClick(resetButtonLoader) {
             return confirmButtonClick(resetButtonLoader);
           },
+          primaryButtonEnabled: confirmButtonEnabled,
           primaryButtonLoader: primaryButtonLoader,
           primaryButtonTo: confirmButtonLink,
           primaryButtonSetClickTrigger: setClickTrigger,
           secondaryButtonTitle: backButtonText,
           secondaryButtonOnClick: backButtonClick,
+          secondaryButtonEnabled: backButtonEnabled,
           secondaryButtonTo: backButtonTo,
           fixedButtonsEnabled: fixedButtons
         }, stepName);
@@ -2935,44 +2953,46 @@ var DialogStep = function DialogStep(_ref) {
         primaryButtonOnClick: function primaryButtonOnClick(resetButtonLoader) {
           return confirmButtonClick(resetButtonLoader);
         },
+        primaryButtonEnabled: confirmButtonEnabled,
         primaryButtonLoader: primaryButtonLoader,
         primaryButtonTo: confirmButtonLink,
         primaryButtonSetClickTrigger: setClickTrigger,
         secondaryButtonTitle: backButtonText,
         secondaryButtonOnClick: backButtonClick,
+        secondaryButtonEnabled: backButtonEnabled,
         secondaryButtonTo: backButtonTo,
         fixedButtonsEnabled: fixedButtons
       }, stepName);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [confirmButtonText, confirmButtonClick, primaryButtonLoader, confirmButtonLink, setClickTrigger, backButtonText, backButtonClick, backButtonTo, currentStep]);
+  }, [confirmButtonText, confirmButtonClick, confirmButtonEnabled, primaryButtonLoader, confirmButtonLink, setClickTrigger, backButtonText, backButtonClick, backButtonEnabled, backButtonTo, currentStep]);
   var _ref2 = titleIconCoin && coinToIconPaths ? coinToIconPaths(titleIconCoin) : {},
     assetIconSrc = _ref2.assetIconSrc,
     assetIconProtocolSrc = _ref2.assetIconProtocolSrc,
     fallbackSrc = _ref2.fallbackSrc;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$f[DIALOG_STEP_CLASS] + " " + s$f[stepClass] + (!isMultiStep || !(animationConfiguration != null && animationConfiguration.currentStepAnimationEnabled) ? " " + s$f["animation-disabled"] : "") + (!isMultiStep ? " " + s$f["single-step"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$f["with-background"] : "") + (inline ? " " + s$f["inline"] : ""),
+    className: s$h[DIALOG_STEP_CLASS] + " " + s$h[stepClass] + (!isMultiStep || !(animationConfiguration != null && animationConfiguration.currentStepAnimationEnabled) ? " " + s$h["animation-disabled"] : "") + (!isMultiStep ? " " + s$h["single-step"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$h["with-background"] : "") + (inline ? " " + s$h["inline"] : ""),
     ref: currentStepRef,
     onTransitionEnd: handleTransitionEnd,
     style: height ? {
       height: height
     } : null
   }, stepMounted ? /*#__PURE__*/React.createElement(React.Fragment, null, backgroundImage || backgroundImageMobile ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-background-image"] + " " + s$f[stepClass]
+    className: s$h["dialog-step-background-image"] + " " + s$h[stepClass]
   }, backgroundImage ? /*#__PURE__*/React.createElement("img", {
     src: backgroundImage,
-    className: s$f["dialog-step-background-image-desktop"] + " " + stepClass + (!backgroundImageMobile ? " " + s$f["primary"] : ""),
+    className: s$h["dialog-step-background-image-desktop"] + " " + stepClass + (!backgroundImageMobile ? " " + s$h["primary"] : ""),
     alt: "dialog step background",
     loading: "lazy"
   }) : null, backgroundImageMobile ? /*#__PURE__*/React.createElement("img", {
     src: backgroundImageMobile,
-    className: s$f["dialog-step-background-image-mobile"] + " " + stepClass + (!backgroundImage ? " " + s$f["primary"] : ""),
+    className: s$h["dialog-step-background-image-mobile"] + " " + stepClass + (!backgroundImage ? " " + s$h["primary"] : ""),
     alt: "dialog step background",
     loading: "lazy"
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper"] + " " + s$f[stepClass] + " " + s$f[wrapperDirectionSubclass] + (inline ? " " + s$f["inline"] : "")
+    className: s$h["dialog-step-wrapper"] + " " + s$h[stepClass] + " " + s$h[wrapperDirectionSubclass] + (inline ? " " + s$h["inline"] : "")
   }, isMultiStep && showCornerButtonForStep(stepName, showCornerBackButton) ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-back-button"]
+    className: s$h["dialog-step-wrapper-back-button"]
   }, /*#__PURE__*/React.createElement(LinkButton, {
     onClick: cornerBackButtonClick ? cornerBackButtonClick : previousStep,
     content: cornerBackButtonTitle ? cornerBackButtonTitle :
@@ -2982,54 +3002,56 @@ var DialogStep = function DialogStep(_ref) {
     iconRotate: ICON_ROTATE_OPTIONS.rotate90,
     isColored: backgroundImage || backgroundImageMobile ? false : undefined
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header"] + (headerTitleLeft ? " " + s$f["text-left"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$f["with-background-image"] : "")
+    className: s$h["dialog-step-wrapper-header"] + (headerTitleLeft ? " " + s$h["text-left"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$h["with-background-image"] : "")
   }, image ? /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: "dialog popup logo",
-    className: s$f["dialog-step-wrapper-header-logo"],
+    className: s$h["dialog-step-wrapper-header-logo"],
     loading: "lazy"
   }) : ImageRaw ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-logo"]
+    className: s$h["dialog-step-wrapper-header-logo"]
   }, /*#__PURE__*/React.createElement(ImageRaw, null)) : null, /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-title"] + (!isTopImagePassed ? " " + s$f["without-logo"] : "") + (!isTopImagePassed && headerTitleLeft ? " " + s$f["close-button-padding"] : "") + (inline ? " " + s$f["no-close-button-padding"] : "")
+    className: s$h["dialog-step-wrapper-header-title"] + (!isTopImagePassed ? " " + s$h["without-logo"] : "") + (!isTopImagePassed && headerTitleLeft ? " " + s$h["close-button-padding"] : "") + (inline ? " " + s$h["no-close-button-padding"] : "")
   }, titleIconCoin ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-title-coin-icon"]
+    className: s$h["dialog-step-wrapper-header-title-coin-icon"]
   }, /*#__PURE__*/React.createElement(AssetIcon, {
     assetIconSrc: assetIconSrc,
     assetIconProtocolSrc: assetIconProtocolSrc,
     fallbackSrc: fallbackSrc
   })) : titleIcon ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-title-icon"]
+    className: s$h["dialog-step-wrapper-header-title-icon"]
   }, /*#__PURE__*/React.createElement("img", {
     src: titleIcon,
     alt: "coin icon to send",
     loading: "lazy"
   })) : null, titleLoadingDots ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-title-loading"]
+    className: s$h["dialog-step-wrapper-header-title-loading"]
   }, /*#__PURE__*/React.createElement(LoadingDots, {
     isColored: true
   })) : "", /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-header-title-text"]
+    className: s$h["dialog-step-wrapper-header-title-text"]
   }, !isTopImagePassed && showBackgroundTitle ? /*#__PURE__*/React.createElement(BackgroundTitle, {
     text: title
   }) : null, /*#__PURE__*/React.createElement("h5", {
-    className: s$f["dialog-step-wrapper-header-title-text-content"] + (!isTopImagePassed ? " " + s$f["without-logo"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$f["white"] : "")
+    className: s$h["dialog-step-wrapper-header-title-text-content"] + (!isTopImagePassed ? " " + s$h["without-logo"] : "") + (backgroundImage || backgroundImageMobile ? " " + s$h["white"] : "")
   }, title))), subtitle ? /*#__PURE__*/React.createElement("p", {
-    className: s$f["dialog-step-wrapper-header-text"] + (" " + (!isTopImagePassed ? s$f["without-logo"] : "") + " " + (subtitleSmallMargin ? s$f["small-margin"] : "") + (subtitleNoMargin ? s$f["no-margin"] : "") + " " + (headerTitleLeft ? s$f["text-left"] : "") + " " + (breakSubtitleWords ? s$f["break-words"] : "") + " " + (backgroundImage || backgroundImageMobile ? s$f["white"] : ""))
+    className: s$h["dialog-step-wrapper-header-text"] + (" " + (!isTopImagePassed ? s$h["without-logo"] : "") + " " + (subtitleSmallMargin ? s$h["small-margin"] : "") + (subtitleNoMargin ? s$h["no-margin"] : "") + " " + (headerTitleLeft ? s$h["text-left"] : "") + " " + (breakSubtitleWords ? s$h["break-words"] : "") + " " + (backgroundImage || backgroundImageMobile ? s$h["white"] : ""))
   }, subtitle) : null), /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-content"] + " " + s$f["align-" + contentAlign]
+    className: s$h["dialog-step-wrapper-content"] + " " + s$h["align-" + contentAlign]
   }, children), backButtonText || confirmButtonText ? /*#__PURE__*/React.createElement("div", {
-    className: s$f["dialog-step-wrapper-buttons"] + (" " + (bigButtonMargins ? s$f["big-margin"] : "") + " " + (noButtonMargins ? s$f["no-margin"] : "") + " " + (isSecondaryButtonBig ? s$f["space-between-layout"] : ""))
+    className: s$h["dialog-step-wrapper-buttons"] + (" " + (bigButtonMargins ? s$h["big-margin"] : "") + " " + (noButtonMargins ? s$h["no-margin"] : "") + " " + (isSecondaryButtonBig ? s$h["space-between-layout"] : ""))
   }, /*#__PURE__*/React.createElement(DialogButtons, {
     primaryButtonTitle: confirmButtonText,
     primaryButtonOnClick: function primaryButtonOnClick(resetButtonLoader) {
       return confirmButtonClick(resetButtonLoader);
     },
+    primaryButtonEnabled: confirmButtonEnabled,
     primaryButtonLoader: primaryButtonLoader,
     primaryButtonTo: confirmButtonLink,
     primaryButtonSetClickTrigger: setClickTrigger,
     secondaryButtonTitle: backButtonText,
     secondaryButtonOnClick: backButtonClick,
+    secondaryButtonEnabled: backButtonEnabled,
     secondaryButtonTo: backButtonTo,
     secondaryButtonBig: isSecondaryButtonBig,
     withBackgroundImage: !!backgroundImage || !!backgroundImageMobile,
@@ -3049,9 +3071,11 @@ DialogStep.propTypes = {
   subtitle: PropTypes.string,
   backButtonText: PropTypes.string,
   backButtonClick: PropTypes.func,
+  backButtonEnabled: PropTypes.bool,
   backButtonTo: PropTypes.string,
   confirmButtonText: PropTypes.string,
   confirmButtonClick: PropTypes.func,
+  confirmButtonEnabled: PropTypes.bool,
   confirmButtonLink: PropTypes.string,
   primaryButtonLoader: PropTypes.bool,
   fixedButtons: PropTypes.bool,
@@ -3087,9 +3111,11 @@ DialogStep.defaultProps = {
   subtitle: "",
   backButtonText: "",
   backButtonClick: function backButtonClick() {},
+  backButtonEnabled: true,
   backButtonTo: "",
   confirmButtonText: "",
   confirmButtonClick: function confirmButtonClick() {},
+  confirmButtonEnabled: true,
   confirmButtonLink: "",
   primaryButtonLoader: false,
   fixedButtons: false,
@@ -3112,7 +3138,7 @@ DialogStep.defaultProps = {
   isSecondaryButtonBig: false
 };
 
-var s$e = {"asset-selection":"_xevLY","disabled":"_DZRfD","active":"_oBw9O","asset-selection-protocol-wrapper":"_ixAiH","asset-selection-icon-wrapper":"_gJ5LN","arrow":"_W8Ibq"};
+var s$g = {"asset-selection":"_xevLY","disabled":"_DZRfD","active":"_oBw9O","asset-selection-protocol-wrapper":"_ixAiH","asset-selection-icon-wrapper":"_gJ5LN","arrow":"_W8Ibq"};
 
 var ArrowIcon = (function () {
   return /*#__PURE__*/React.createElement("svg", {
@@ -3154,21 +3180,21 @@ var AssetSelection = function AssetSelection(_ref) {
     fallbackSrc = _ref.fallbackSrc;
   var handleError = useCallHandlingErrors();
   return /*#__PURE__*/React.createElement("div", {
-    className: s$e["asset-selection"] + " " + (disabled ? s$e["disabled"] : ""),
+    className: s$g["asset-selection"] + " " + (disabled ? s$g["disabled"] : ""),
     onClick: disabled ? function () {} : function (e) {
       return handleError(handleClick, e);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$e["asset-selection-icon-wrapper"]
+    className: s$g["asset-selection-icon-wrapper"]
   }, /*#__PURE__*/React.createElement(AssetIcon, {
     small: true,
     assetIconSrc: assetIconSrc,
     assetIconProtocolSrc: assetIconProtocolSrc,
     fallbackSrc: fallbackSrc
   })), protocolName ? /*#__PURE__*/React.createElement("div", {
-    className: s$e["asset-selection-protocol-wrapper"]
+    className: s$g["asset-selection-protocol-wrapper"]
   }, protocolName) : "", /*#__PURE__*/React.createElement("div", {
-    className: s$e["arrow"]
+    className: s$g["arrow"]
   }, /*#__PURE__*/React.createElement(ArrowIcon, null)));
 };
 AssetSelection.propTypes = {
@@ -3185,7 +3211,7 @@ AssetSelection.defaultProps = {
   assetIconProtocolSrc: null
 };
 
-var s$d = {"tooltip":"_8eyAx","enter":"_RpNdl","enter-active":"_BJddw","exit":"_BTWC-","exit-active":"_nxU2j","top-left":"_pPuyF","enter-done":"_UTN4U","top-right":"_2ppAB","left":"_--VUv","bottom":"_a1OJb","right":"_KNVu3","wide":"_s17pG","ignore-pointer":"_RCyas","tooltip-enter":"_3372j","tooltip-enter-active":"_-RNGY","tooltip-enter-done":"_90MOt","tooltip-exit":"_QT297","tooltip-exit-active":"_a0CNW"};
+var s$f = {"tooltip":"_8eyAx","enter":"_RpNdl","enter-active":"_BJddw","exit":"_BTWC-","exit-active":"_nxU2j","top-left":"_pPuyF","enter-done":"_UTN4U","top-right":"_2ppAB","left":"_--VUv","bottom":"_a1OJb","right":"_KNVu3","wide":"_s17pG","ignore-pointer":"_RCyas","tooltip-enter":"_3372j","tooltip-enter-active":"_-RNGY","tooltip-enter-done":"_90MOt","tooltip-exit":"_QT297","tooltip-exit-active":"_a0CNW"};
 
 var DarkRectangle = (function () {
   return /*#__PURE__*/React.createElement("svg", {
@@ -3244,7 +3270,7 @@ var Tooltip = function Tooltip(_ref) {
     timeout: 400,
     unmountOnExit: true
   }, /*#__PURE__*/React.createElement("span", {
-    className: s$d["tooltip"] + " " + (wide ? s$d["wide"] : "") + " " + s$d[position] + " " + (ignorePointerEvents ? s$d["ignore-pointer"] : ""),
+    className: s$f["tooltip"] + " " + (wide ? s$f["wide"] : "") + " " + s$f[position] + " " + (ignorePointerEvents ? s$f["ignore-pointer"] : ""),
     onClick: function onClick(e) {
       return handleError(_onClick, e);
     },
@@ -3270,7 +3296,7 @@ Tooltip.defaultProps = {
   ignorePointerEvents: false
 };
 
-var s$c = {"notice-icon-image":"_MdvCj","notice-icon":"_lFNkE","notice-icon-tooltip":"_l38uS"};
+var s$e = {"notice-icon-image":"_MdvCj","notice-icon":"_lFNkE","notice-icon-tooltip":"_l38uS"};
 
 var handleClickOutside = function handleClickOutside(exceptionsRefs, callback) {
   function handleClick(event) {
@@ -3376,7 +3402,7 @@ var NoticeIcon = function NoticeIcon(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     ref: noticeRef,
-    className: s$c["notice-icon"]
+    className: s$e["notice-icon"]
   }, titleNoticeIcon ? /*#__PURE__*/React.createElement("img", {
     src: titleNoticeIcon,
     alt: "title icon",
@@ -3385,17 +3411,17 @@ var NoticeIcon = function NoticeIcon(_ref) {
         return !prev;
       });
     },
-    className: s$c["notice-icon-image"],
+    className: s$e["notice-icon-image"],
     loading: "lazy"
   }) : /*#__PURE__*/React.createElement("div", {
-    className: s$c["notice-icon-image"],
+    className: s$e["notice-icon-image"],
     onClick: function onClick() {
       return setShowTooltip(function (prev) {
         return !prev;
       });
     }
   }, /*#__PURE__*/React.createElement(NoticeQuestionIcon, null)), /*#__PURE__*/React.createElement("div", {
-    className: s$c["notice-icon-tooltip"]
+    className: s$e["notice-icon-tooltip"]
   }, /*#__PURE__*/React.createElement(Tooltip, {
     showTooltip: showTooltip,
     handleClick: function handleClick() {
@@ -3415,7 +3441,7 @@ NoticeIcon.defaultProps = {
   tooltipPosition: TOOLTIP_POSITIONS.TOP
 };
 
-var s$b = {"title-box":"_2Kb-x","full-width":"_-5MIw","title-box-wrapper":"_f8RmO","title-box-wrapper-title":"_Oxg7u","transparent-title":"_NwGqA","title-box-wrapper-link-button":"_f-4ZL"};
+var s$d = {"title-box":"_2Kb-x","full-width":"_-5MIw","title-box-wrapper":"_f8RmO","title-box-wrapper-title":"_Oxg7u","transparent-title":"_NwGqA","title-box-wrapper-link-button":"_f-4ZL"};
 
 /**
  * Copies given text to clipboard inside browser.
@@ -3479,7 +3505,7 @@ var TitleBox = function TitleBox(_ref) {
     copyButtonContent = _ref.copyButtonContent,
     copyButtonTooltipContent = _ref.copyButtonTooltipContent;
   var handleError = useCallHandlingErrors();
-  var transparentTitleClass = transparentTitle ? s$b["transparent-title"] : "";
+  var transparentTitleClass = transparentTitle ? s$d["transparent-title"] : "";
   var _useState = useState(false),
     showCopyNotice = _useState[0],
     setShowCopyNotice = _useState[1];
@@ -3493,19 +3519,19 @@ var TitleBox = function TitleBox(_ref) {
     }, e);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: s$b["title-box"] + " " + (fullWidth ? s$b["full-width"] : "")
+    className: s$d["title-box"] + " " + (fullWidth ? s$d["full-width"] : "")
   }, title || titleNoticeText || linkText ? /*#__PURE__*/React.createElement("div", {
-    className: s$b["title-box-wrapper"]
+    className: s$d["title-box-wrapper"]
   }, bigTitle ? /*#__PURE__*/React.createElement("h5", {
-    className: s$b["title-box-wrapper-title"] + " " + transparentTitleClass
+    className: s$d["title-box-wrapper-title"] + " " + transparentTitleClass
   }, title) : /*#__PURE__*/React.createElement("h6", {
-    className: s$b["title-box-wrapper-title"] + " " + transparentTitleClass
+    className: s$d["title-box-wrapper-title"] + " " + transparentTitleClass
   }, title), titleNoticeText ? /*#__PURE__*/React.createElement(NoticeIcon, {
     noticeText: titleNoticeText,
     titleNoticeIcon: titleNoticeIcon,
     tooltipPosition: titleNoticePosition
   }) : null, copyButtonContent && copyButtonText ? /*#__PURE__*/React.createElement("div", {
-    className: s$b["title-box-wrapper-link-button"]
+    className: s$d["title-box-wrapper-link-button"]
   }, /*#__PURE__*/React.createElement(LinkButton, {
     content: copyButtonText,
     onClick: handleCopyButton,
@@ -3515,7 +3541,7 @@ var TitleBox = function TitleBox(_ref) {
     position: TOOLTIP_POSITIONS.TOP_LEFT,
     showTooltip: showCopyNotice
   }, copyButtonTooltipContent)) : linkText ? /*#__PURE__*/React.createElement("div", {
-    className: s$b["title-box-wrapper-link-button"]
+    className: s$d["title-box-wrapper-link-button"]
   }, /*#__PURE__*/React.createElement(LinkButton, {
     content: linkText,
     onClick: linkButtonClick,
@@ -3553,7 +3579,7 @@ TitleBox.defaultProps = {
   transparentTitle: false
 };
 
-var s$a = {"amount-input-container-input-wrapper":"_OQ-ym","requested-amount-fiat-skeleton-content":"_zck4j","requested-amount-coin-skeleton-content":"_rZsYH","amount-input-container":"_AQaqi","upper-form-position":"_FjX1X","lower-form-position":"_g5zUv","error-encountered":"_XjaEm","focus":"_-jHS0","disabled":"_3y8Yo","bottom-margin":"_3RoIe","asset-balance":"_Z9fcv","red":"_EXTAF","requested-amount-coin":"_AV4qa","requested-amount-coin-currency":"_OGQ9l","requested-amount-coin-input":"_KY6tO","requested-amount-coin-skeleton":"_gIBI7","requested-amount-fiat":"_gwWcz","requested-amount-fiat-currency":"_RACoB","requested-amount-fiat-input":"_L5lVd","requested-amount-fiat-placeholder":"_HV2XM","requested-amount-fiat-skeleton":"_63hUZ"};
+var s$c = {"amount-input-container-input-wrapper":"_OQ-ym","requested-amount-fiat-skeleton-content":"_zck4j","requested-amount-coin-skeleton-content":"_rZsYH","amount-input-container":"_AQaqi","upper-form-position":"_FjX1X","lower-form-position":"_g5zUv","error-encountered":"_XjaEm","focus":"_-jHS0","disabled":"_3y8Yo","bottom-margin":"_3RoIe","asset-balance":"_Z9fcv","red":"_EXTAF","requested-amount-coin":"_AV4qa","requested-amount-coin-currency":"_OGQ9l","requested-amount-coin-input":"_KY6tO","requested-amount-coin-skeleton":"_gIBI7","requested-amount-fiat":"_gwWcz","requested-amount-fiat-enter":"_Q3eUh","requested-amount-fiat-enter-active":"_ijYoP","requested-amount-fiat-exit":"_czDtf","requested-amount-fiat-exit-active":"_Hav2r","requested-amount-fiat-currency":"_RACoB","requested-amount-fiat-input":"_L5lVd","requested-amount-fiat-placeholder":"_HV2XM","requested-amount-fiat-skeleton":"_63hUZ"};
 
 var WalletIcon = (function () {
   return /*#__PURE__*/React.createElement("svg", {
@@ -4222,15 +4248,15 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
     linkText: isSendAll !== null ? isSendAll ? linkButtonActiveText : linkButtonInactiveText : null,
     linkButtonClick: handleSendAllClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: [s$a["amount-input-container"], isInFocus ? s$a["focus"] : "", errorEncountered || highlightInput ? s$a["error-encountered"] : "", upperFormPosition ? s$a["upper-form-position"] : "", lowerFormPosition ? s$a["lower-form-position"] : ""].join(" ")
+    className: [s$c["amount-input-container"], isInFocus ? s$c["focus"] : "", errorEncountered || highlightInput ? s$c["error-encountered"] : "", upperFormPosition ? s$c["upper-form-position"] : "", lowerFormPosition ? s$c["lower-form-position"] : ""].join(" ")
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$a["amount-input-container-input-wrapper"] + " " + (disabled ? s$a["disabled"] : "") + "\n                        " + (children ? s$a["bottom-margin"] : "")
+    className: s$c["amount-input-container-input-wrapper"] + " " + (disabled ? s$c["disabled"] : "") + "\n                        " + (children ? s$c["bottom-margin"] : "")
   }, showBalance ? /*#__PURE__*/React.createElement("div", {
-    className: s$a["asset-balance"] + " " + (highlightBalance ? s$a["red"] : "")
+    className: s$c["asset-balance"] + " " + (highlightBalance ? s$c["red"] : "")
   }, /*#__PURE__*/React.createElement(WalletIcon, null), /*#__PURE__*/React.createElement("p", null, (assetBalance == null ? void 0 : assetBalance.assetAmount) != null && (assetBalance == null ? void 0 : assetBalance.fiatAmount) != null && ticker && fiatCurrencyCode ? /*#__PURE__*/React.createElement(React.Fragment, null, AmountUtils.cryptoFull(assetBalance.assetAmount, tickerPrintable, assetDecimalPlaces), /*#__PURE__*/React.createElement("span", null, " ~ " + AmountUtils.fiat(assetBalance.fiatAmount, fiatCurrencyCode))) : balanceLoaderText)) : "", /*#__PURE__*/React.createElement("div", {
-    className: s$a["requested-amount-coin"]
+    className: s$c["requested-amount-coin"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: s$a["requested-amount-coin-currency"]
+    className: s$c["requested-amount-coin-currency"]
   }, tickerPrintable ? (estimateAmount ? "~ " : "") + tickerPrintable : ""), !isLoading ? /*#__PURE__*/React.createElement("input", {
     type: "text",
     inputMode: "decimal",
@@ -4239,7 +4265,7 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
       return handleChangeAmount(e.target.value);
     },
     placeholder: coinAmountPlaceholder,
-    className: s$a["requested-amount-coin-input"],
+    className: s$c["requested-amount-coin-input"],
     disabled: disabled || locked,
     onFocus: function onFocus(e) {
       return callHandlingErrors(function () {
@@ -4252,17 +4278,27 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
       }, e);
     }
   }) : /*#__PURE__*/React.createElement("div", {
-    className: s$a["requested-amount-coin-skeleton"]
+    className: s$c["requested-amount-coin-skeleton"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: s$a["requested-amount-coin-skeleton-content"] + " " + "skeleton-dark"
-  }))), fiatCurrencyCode !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: s$a["requested-amount-fiat"] + (interactedWith ? " " + s$a["interacted"] : "")
+    className: s$c["requested-amount-coin-skeleton-content"] + " " + "skeleton-dark"
+  }))), /*#__PURE__*/React.createElement(CSSTransition, {
+    "in": fiatCurrencyCode !== null,
+    timeout: 200,
+    classNames: {
+      enter: s$c["requested-amount-fiat-enter"],
+      enterActive: s$c["requested-amount-fiat-enter-active"],
+      exit: s$c["requested-amount-fiat-exit"],
+      exitActive: s$c["requested-amount-fiat-exit-active"]
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: s$c["requested-amount-fiat"] + (interactedWith ? " " + s$c["interacted"] : "")
   }, interactedWith ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: s$a["requested-amount-fiat-currency"]
+    className: s$c["requested-amount-fiat-currency"]
   }, (estimateAmount ? "~ " : "") + fiatCurrencyCode), !isLoading && cryptoAssetToFiatRate != null ? /*#__PURE__*/React.createElement("input", {
     type: "text",
     inputMode: "decimal",
-    className: s$a["requested-amount-fiat-input"],
+    className: s$c["requested-amount-fiat-input"],
     value: fiatAmountValue,
     disabled: disabled || locked,
     onChange: function onChange(e) {
@@ -4281,18 +4317,18 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
       }, e);
     }
   }) : /*#__PURE__*/React.createElement("div", {
-    className: s$a["requested-amount-fiat-skeleton"]
+    className: s$c["requested-amount-fiat-skeleton"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: s$a["requested-amount-fiat-skeleton-content"] + " " + "skeleton-dark"
+    className: s$c["requested-amount-fiat-skeleton-content"] + " " + "skeleton-dark"
   }))) : /*#__PURE__*/React.createElement("span", {
-    className: s$a["requested-amount-fiat-placeholder"],
+    className: s$c["requested-amount-fiat-placeholder"],
     onClick: function onClick(e) {
       return callHandlingErrors(function () {
         return handleFiatInteraction();
       }, e);
     }
-  }, fiatInputPlaceholderText))) : null), showChangeAssetButton && ticker ? /*#__PURE__*/React.createElement("div", {
-    className: s$a["amount-input-container-button-wrapper"],
+  }, fiatInputPlaceholderText)))), showChangeAssetButton && ticker ? /*#__PURE__*/React.createElement("div", {
+    className: s$c["amount-input-container-button-wrapper"],
     ref: buttonForwardRef
   }, /*#__PURE__*/React.createElement(AssetSelection, {
     assetIconSrc: assetIconSrc,
@@ -4306,9 +4342,9 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
   }) : null);
 });
 
-var s$9 = {"swap-form-inputs-separator":"_2vSSb","disabled":"_t1R13","swap-form":"_Uwb2p","swap-form-inputs":"_kkR8O","swap-form-information-field":"_ZUAfe","semi-transparent":"_1mu0j","interactable":"_S9zQS","red":"_SbQSO","swap-form-address-field":"_c8Nfv","swap-form-rate-selector":"_Fo9O-","swap-form-validation-text":"_8iEHB","swap-form-button-container":"_cVVfG","swap-form-button-container-consent-text":"_UNMjb","swap-form-button-container-consent-text-link":"_-g020"};
+var s$b = {"swap-form-inputs-separator":"_2vSSb","disabled":"_t1R13","swap-form":"_Uwb2p","swap-form-inputs":"_kkR8O","swap-form-information-field":"_ZUAfe","semi-transparent":"_1mu0j","interactable":"_S9zQS","red":"_SbQSO","swap-form-address-field":"_c8Nfv","swap-form-rate-selector":"_Fo9O-","swap-form-validation-text":"_8iEHB","swap-form-button-container":"_cVVfG","swap-form-button-container-consent-text":"_UNMjb","swap-form-button-container-consent-text-link":"_-g020"};
 
-var s$8 = {"textarea-input":"_EJFn-","textarea":"_YjRAf","full-height":"_kDp5e","textarea-input-label":"_XQC6S","adaptive-height":"_UnSJE","small-text":"_WtRnB","disabled":"_IO5nl","error-encountered":"_00pBS"};
+var s$a = {"textarea-input":"_EJFn-","textarea":"_YjRAf","full-height":"_kDp5e","textarea-input-label":"_XQC6S","adaptive-height":"_UnSJE","small-text":"_WtRnB","disabled":"_IO5nl","error-encountered":"_00pBS"};
 
 /**
  * A textarea component with optional adaptive height and validation messaging.
@@ -4369,12 +4405,12 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (((_e$target = e.target) == null ? void 0 : _e$target.value.indexOf("\n")) === -1 || !ignoreEnter) _onChange(e);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: s$8["textarea"] + (" " + (fullHeight ? " " + s$8["full-height"] : ""))
+    className: s$a["textarea"] + (" " + (fullHeight ? " " + s$a["full-height"] : ""))
   }, label ? /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
-    className: s$8["textarea-input-label"]
+    className: s$a["textarea-input-label"]
   }, label) : null, adaptiveHeight ? /*#__PURE__*/React.createElement(TextareaAutosize, {
-    className: s$8["textarea-input"] + " " + s$8["adaptive-height"] + (disabled ? " " + s$8["disabled"] : "") + (errorEncountered ? " " + s$8["error-encountered"] : ""),
+    className: s$a["textarea-input"] + " " + s$a["adaptive-height"] + (disabled ? " " + s$a["disabled"] : "") + (errorEncountered ? " " + s$a["error-encountered"] : ""),
     minRows: 1,
     maxRows: 3,
     onChange: function onChange(e) {
@@ -4388,7 +4424,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: disabled
   }) : /*#__PURE__*/React.createElement("textarea", {
     name: name,
-    className: s$8["textarea-input"] + (" " + (fullHeight ? s$8["full-height"] : "") + " " + (smallText ? s$8["small-text"] : "") + " " + (disabled ? s$8["disabled"] : "")),
+    className: s$a["textarea-input"] + (" " + (fullHeight ? s$a["full-height"] : "") + " " + (smallText ? s$a["small-text"] : "") + " " + (disabled ? s$a["disabled"] : "")),
     onChange: function onChange(e) {
       return callHandlingErrors(_onChange, e);
     },
@@ -4438,7 +4474,7 @@ Textarea.defaultProps = {
   ignoreEnter: false
 };
 
-var s$7 = {"rate-selector":"_bqJFm","rate-selector-item":"_te8yb","selected":"_HU2Oq","rate-selector-item-text":"_ew-Z1"};
+var s$9 = {"rate-selector":"_bqJFm","rate-selector-item":"_te8yb","selected":"_HU2Oq","rate-selector-item-text":"_ew-Z1"};
 
 // TODO: [dev] add JSDoc
 var RateSelector = function RateSelector(_ref) {
@@ -4452,21 +4488,21 @@ var RateSelector = function RateSelector(_ref) {
       fixedRate: "Fixed rate"
     } : _ref$translations;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$7["rate-selector"]
+    className: s$9["rate-selector"]
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$7["rate-selector-item"] + " " + (!isFixed ? s$7["selected"] : ""),
+    className: s$9["rate-selector-item"] + " " + (!isFixed ? s$9["selected"] : ""),
     onClick: function onClick() {
-      return setIsFixed(false);
+      return isFixed ? setIsFixed(false) : null;
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$7["rate-selector-item-text"]
+    className: s$9["rate-selector-item-text"]
   }, translations.floatingRate)), /*#__PURE__*/React.createElement("div", {
-    className: s$7["rate-selector-item"] + " " + (isFixed ? s$7["selected"] : ""),
+    className: s$9["rate-selector-item"] + " " + (isFixed ? s$9["selected"] : ""),
     onClick: function onClick() {
-      return setIsFixed(true);
+      return !isFixed ? setIsFixed(true) : null;
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$7["rate-selector-item-text"]
+    className: s$9["rate-selector-item-text"]
   }, translations.fixedRate)));
 };
 
@@ -4691,7 +4727,7 @@ function useIsHydrated() {
  * @constructor
  */
 
-function _catch$e(body, recover) {
+function _catch$f(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5015,23 +5051,26 @@ var SwapForm = function SwapForm(_ref) {
     setMaximumAmountValid(!maximumAmount.current || BigNumber(amount).eq("0") || BigNumber(amount).lte(maximumAmount.current.crypto));
     setMinimalAmountValid(!minimalAmount.current || BigNumber(amount).eq("0") || BigNumber(amount).gte((_minimalAmount$curren5 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren5.crypto));
   };
-  var requestDataRefresh = function requestDataRefresh(amount, immediately, isSwapAll) {
+  var requestDataRefresh = function requestDataRefresh(amount, immediately, isSwapAll, ignoreEmptyAmount) {
     if (immediately === void 0) {
       immediately = false;
     }
     if (isSwapAll === void 0) {
       isSwapAll = false;
     }
+    if (ignoreEmptyAmount === void 0) {
+      ignoreEmptyAmount = false;
+    }
     try {
       clearTimeout(dataUpdateTimeoutId.current);
       if (isSwapAll) {
         loadFullEstimation(null);
         return;
       }
-      if (!amount) {
+      if (!amount && !ignoreEmptyAmount) {
         return;
       }
-      if (BigNumber(amount).eq("0")) {
+      if (BigNumber(amount).eq("0") || amount == null || amount === "") {
         if (immediately) {
           loadMinimalAmountAndSwapRate(true);
         } else {
@@ -5087,7 +5126,7 @@ var SwapForm = function SwapForm(_ref) {
     }
     (function () {
       try {
-        return _catch$e(function () {
+        return _catch$f(function () {
           var _minimalAmount$curren6, _maximumAmount$curren5, _isFixedRate$current;
           var dataMemento = {
             rate: swapRate,
@@ -5173,7 +5212,7 @@ var SwapForm = function SwapForm(_ref) {
     }
     (function () {
       try {
-        return _catch$e(function () {
+        return _catch$f(function () {
           setIsLoading(true);
           setMinimalAmount(null);
           setMaximumAmount(null);
@@ -5182,7 +5221,7 @@ var SwapForm = function SwapForm(_ref) {
           setIsPairSupported(true);
           setIsSwapCalculated(false);
           return Promise.resolve(retrieveInitialSwapData(sendingAssetTicker, receivingAssetTicker)).then(function (swapData) {
-            if (sendAssetAmount.current != null && !isCalledForClearedInput) {
+            if ((isFixedRate.current && isLastEditedReceiving.current ? receiveAssetAmount.current != null : sendAssetAmount.current != null) && !isCalledForClearedInput) {
               // Means user already entered amount after starting the form initialization
               return;
             }
@@ -5226,7 +5265,7 @@ var SwapForm = function SwapForm(_ref) {
   };
   var handleRateModeChanged = function handleRateModeChanged(isFixed) {
     setIsFixedRate(isFixed);
-    requestDataRefresh(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current, true);
+    requestDataRefresh(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current, true, null, true);
   };
   useEffect(function () {
     if (isSwapAll.current === true) {
@@ -5243,9 +5282,10 @@ var SwapForm = function SwapForm(_ref) {
   }, [isFixedRate.current]);
   useEffect(function () {
     if (!sendingAssetTicker || !receivingAssetTicker) return;
-    var isCurrentAmountNotZero = sendAssetAmount.current && !BigNumber("0").eq(sendAssetAmount.current);
+    var currentAmount = isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current;
+    var isCurrentAmountNotZero = currentAmount && !BigNumber("0").eq(currentAmount);
     if (isCurrentAmountNotZero) {
-      loadFullEstimation(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current);
+      loadFullEstimation(currentAmount);
     } else {
       loadMinimalAmountAndSwapRate(true);
     }
@@ -5341,7 +5381,7 @@ var SwapForm = function SwapForm(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateSendInputTo, updateReceiveInputTo]);
   useEffect(function () {
-    if (swapRate != null && sendAssetAmount.current != null) {
+    if (swapRate != null && (isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current) != null) {
       if (isLastEditedReceiving.current) {
         setUpdateSendInputTo(AmountUtils.trim(BigNumber(receiveAssetAmount.current).div(swapRate), sendingAssetDecimalCount));
       } else {
@@ -5372,7 +5412,7 @@ var SwapForm = function SwapForm(_ref) {
   var recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
   var refundAddressExtraIdName = getExtraIdNameByTicker(sendingAssetTicker);
   return /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form"]
+    className: s$b["swap-form"]
   }, /*#__PURE__*/React.createElement(TitleBox, {
     linkButtonClick: BigNumber(sendingAssetBalance == null ? void 0 : sendingAssetBalance.assetAmount).eq(0) ? null : function (resetButtonLoader) {
       return handleSwapAllClick(resetButtonLoader);
@@ -5381,13 +5421,13 @@ var SwapForm = function SwapForm(_ref) {
     linkButtonLoader: true,
     isLinkButtonDisabled: isLoading.current || sendingAssetTicker === receivingAssetTicker || BigNumber(sendingAssetBalance == null ? void 0 : sendingAssetBalance.assetAmount).eq(0)
   }, displayRateSelector ? /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-rate-selector"]
+    className: s$b["swap-form-rate-selector"]
   }, /*#__PURE__*/React.createElement(RateSelector, {
     isFixed: (_isFixedRate$current2 = isFixedRate.current) != null ? _isFixedRate$current2 : IS_FIXED_BY_DEFAULT,
     setIsFixed: handleRateModeChanged,
     translations: translations.rateSelector
   })) : "", /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-inputs"]
+    className: s$b["swap-form-inputs"]
   }, /*#__PURE__*/React.createElement(AmountInput, {
     ticker: sendingAssetTicker,
     tickerPrintable: sendingAssetTickerPrintable,
@@ -5412,12 +5452,12 @@ var SwapForm = function SwapForm(_ref) {
     ref: fromAssetSelectionButtonRef,
     isLoading: isLastEditedReceiving.current ? isLoading.current : false,
     cryptoAssetToFiatRate: sendingAssetToFiatRate,
-    fiatCurrencyCode: formHasFiat ? fiatCurrencyCode : null,
+    fiatCurrencyCode: formHasFiat && (isLoading.current || sendingAssetToFiatRate != null) ? fiatCurrencyCode : null,
     fiatCurrencyDecimals: fiatCurrencyDecimals,
     balanceLoaderText: translations.input.balanceLoaderText,
     fiatInputPlaceholderText: translations.input.fiatPlaceholder
   }), /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-inputs-separator"] + " " + (isLoading.current || sendingAssetTicker === null || receivingAssetTicker === null ? s$9["disabled"] : "")
+    className: s$b["swap-form-inputs-separator"] + " " + (isLoading.current || sendingAssetTicker === null || receivingAssetTicker === null ? s$b["disabled"] : "")
   }, /*#__PURE__*/React.createElement("img", {
     src: swapSeparatorIconSrc,
     alt: "swap icon",
@@ -5435,7 +5475,7 @@ var SwapForm = function SwapForm(_ref) {
     assetIconProtocolSrc: receivingAssetProtocolIconSrc,
     fallbackAssetIconSrc: fallBackAssetIconSrc,
     disabled: isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null,
-    locked: !formHasBalance && !isFixedRate.current,
+    locked: !formHasBalance,
     handleCoinAmountChange: handleReceiveAssetAmountChange,
     handleChangeAssetClick: handleChangeReceivingAssetClick,
     updateAssetInputTo: updateReceiveInputTo,
@@ -5448,30 +5488,30 @@ var SwapForm = function SwapForm(_ref) {
     ref: toAssetSelectionButtonRef,
     isLoading: isLastEditedReceiving.current ? false : isLoading.current,
     cryptoAssetToFiatRate: receivingAssetToFiatRate,
-    fiatCurrencyCode: formHasFiat ? fiatCurrencyCode : null,
+    fiatCurrencyCode: formHasFiat && (isLoading.current || receivingAssetToFiatRate != null) ? fiatCurrencyCode : null,
     fiatCurrencyDecimals: fiatCurrencyDecimals,
     balanceLoaderText: translations.input.balanceLoaderText,
     fiatInputPlaceholderText: translations.input.fiatPlaceholder
   })), /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-information-field"]
+    className: s$b["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: "semi-transparent"
   }, " ~ " + AmountUtils.fiat(transactionFee == null ? void 0 : transactionFee.fiat, fiatCurrencyCode)) : "") : !isLoading.current && (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$current3 = isFixedRate.current) != null ? _isFixedRate$current3 : 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"],
+    className: s$b["interactable"] + " " + s$b["red"],
     onClick: isLoading.current ? function () {} : function (e) {
       return callHandlingErrors(handleMaximumAmountClick, e);
     }
   }, AmountUtils.crypto((_maximumAmount$curren6 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren6.crypto, isLastEditedReceiving.current ? receivingAssetTickerPrintable : sendingAssetTickerPrintable)), ((_maximumAmount$curren7 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren7.fiat) != null && ((_maximumAmount$curren8 = maximumAmount.current) == null ? void 0 : _maximumAmount$curren8.fiat) !== "" ? /*#__PURE__*/React.createElement("span", {
     className: "semi-transparent"
   }, " ~ " + AmountUtils.fiat(maximumAmount.current.fiat, fiatCurrencyCode)) : "") : !minimalAmount.current ? "" : /*#__PURE__*/React.createElement(React.Fragment, null, translations.informationBlock.minimumAmount, /*#__PURE__*/React.createElement("span", {
-    className: s$9["interactable"] + " " + (!minimalAmountValid ? s$9["red"] : ""),
+    className: s$b["interactable"] + " " + (!minimalAmountValid ? s$b["red"] : ""),
     onClick: isLoading.current ? function () {} : function (e) {
       return callHandlingErrors(handleMinimalAmountClick, e);
     }
   }, AmountUtils.crypto(minimalAmount.current.crypto, isLastEditedReceiving.current ? receivingAssetTickerPrintable : sendingAssetTickerPrintable)), ((_minimalAmount$curren7 = minimalAmount.current) == null ? void 0 : _minimalAmount$curren7.fiat) != null && minimalAmount.current.fiat !== "" ? /*#__PURE__*/React.createElement("span", {
     className: "semi-transparent"
-  }, " ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)) : "") : isLoading.current ? sendAssetAmount.current || isSwapAll.current ? translations.informationBlock[formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"] : translations.informationBlock.loadingMinimalAmount : "")), isAddressFieldEnabled ? /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-address-field"]
+  }, " ~ " + AmountUtils.fiat(minimalAmount.current.fiat, fiatCurrencyCode)) : "") : isLoading.current ? sendAssetAmount.current || receiveAssetAmount.current || isSwapAll.current ? translations.informationBlock[formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"] : translations.informationBlock.loadingMinimalAmount : "")), isAddressFieldEnabled ? /*#__PURE__*/React.createElement("div", {
+    className: s$b["swap-form-address-field"]
   }, /*#__PURE__*/React.createElement(TitleBox, {
     title: translations.addressFields.addressTitle
   }, /*#__PURE__*/React.createElement(Textarea, {
@@ -5517,20 +5557,20 @@ var SwapForm = function SwapForm(_ref) {
     adaptiveHeight: true,
     placeholder: translations.addressFields.extraIdPlaceholder
   })) : null) : null) : null, validationContent ? /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-validation-text"]
+    className: s$b["swap-form-validation-text"]
   }, /*#__PURE__*/React.createElement(Validation, {
     text: validationContent
   })) : "", /*#__PURE__*/React.createElement("div", {
-    className: s$9["swap-form-button-container"]
+    className: s$b["swap-form-button-container"]
   }, !termsOfUseUrl || !privacyPolicyUrl ? null : /*#__PURE__*/React.createElement("p", {
-    className: s$9["swap-form-button-container-consent-text"]
+    className: s$b["swap-form-button-container-consent-text"]
   }, translations.consents.consentText + " ", /*#__PURE__*/React.createElement("a", {
     href: termsOfUseUrl,
-    className: s$9["swap-form-button-container-consent-text-link"],
+    className: s$b["swap-form-button-container-consent-text-link"],
     target: "_blank"
   }, translations.consents.termsOfUse), " " + translations.consents.and + " ", /*#__PURE__*/React.createElement("a", {
     href: privacyPolicyUrl,
-    className: s$9["swap-form-button-container-consent-text-link"],
+    className: s$b["swap-form-button-container-consent-text-link"],
     target: "_blank"
   }, translations.consents.privacyPolicy), "."), /*#__PURE__*/React.createElement(Button, {
     size: "lg",
@@ -5641,7 +5681,7 @@ SwapForm.defaultProps = {
  * @return {Promise<string>} xml string of generated svg image
  */
 
-function _catch$d(body, recover) {
+function _catch$e(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5654,7 +5694,7 @@ function _catch$d(body, recover) {
 }
 var generateQrAndShowInCanvas = function generateQrAndShowInCanvas(encodingString) {
   try {
-    return Promise.resolve(_catch$d(function () {
+    return Promise.resolve(_catch$e(function () {
       return Promise.resolve(QRCode.toString(encodingString, {
         type: "svg"
       }));
@@ -5666,7 +5706,7 @@ var generateQrAndShowInCanvas = function generateQrAndShowInCanvas(encodingStrin
   }
 };
 
-var s$6 = {"qr-code":"_VZ0dT","fill":"_hFE1l"};
+var s$8 = {"qr-code":"_VZ0dT","fill":"_hFE1l"};
 
 /**
  * QrCode component renders a QR code for a provided crypto address.
@@ -5679,7 +5719,7 @@ var s$6 = {"qr-code":"_VZ0dT","fill":"_hFE1l"};
  * @returns {JSX.Element} A div containing the generated QR code.
  */
 
-function _catch$c(body, recover) {
+function _catch$d(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5698,7 +5738,7 @@ var QrCode = function QrCode(_ref) {
   useEffect(function () {
     (function () {
       try {
-        return _catch$c(function () {
+        return _catch$d(function () {
           var _temp = function () {
             if (address) {
               return Promise.resolve(generateQrAndShowInCanvas(address)).then(function (_generateQrAndShowInC) {
@@ -5716,7 +5756,7 @@ var QrCode = function QrCode(_ref) {
     })();
   }, [address]);
   return /*#__PURE__*/React.createElement("div", {
-    className: s$6["qr-code"] + (fill ? " " + s$6["fill"] : ""),
+    className: s$8["qr-code"] + (fill ? " " + s$8["fill"] : ""),
     ref: canvasRef
   });
 };
@@ -5728,7 +5768,7 @@ QrCode.defaultProps = {
   fill: false
 };
 
-var s$5 = {"first-line-text":"_IGz2I","wrap":"_eKd8P","break":"_mT5i4","full-text":"_PVKxC","shorted":"_wB5qV","horizontal":"_lqJz-","line":"_MGRy0","second-line-text":"_hdF64"};
+var s$7 = {"first-line-text":"_IGz2I","wrap":"_eKd8P","break":"_mT5i4","full-text":"_PVKxC","shorted":"_wB5qV","horizontal":"_lqJz-","line":"_MGRy0","second-line-text":"_hdF64"};
 
 /**
  * Renders up to three lines of text with configurable options for horizontal layout, text wrapping, and breaking.
@@ -5766,19 +5806,19 @@ var LinesOfText = function LinesOfText(_ref) {
     _ref$breakFirstLine = _ref.breakFirstLine,
     breakFirstLine = _ref$breakFirstLine === void 0 ? false : _ref$breakFirstLine;
   return defaultTextContent ? /*#__PURE__*/React.createElement("div", {
-    className: s$5["centered-vertically"]
+    className: s$7["centered-vertically"]
   }, defaultTextContent) : /*#__PURE__*/React.createElement("div", {
-    className: isHorizontal ? s$5["horizontal"] : ""
+    className: isHorizontal ? s$7["horizontal"] : ""
   }, /*#__PURE__*/React.createElement("h5", {
-    className: s$5["first-line-text"]
+    className: s$7["first-line-text"]
   }, /*#__PURE__*/React.createElement("span", {
-    className: (isFirstLineTextReducible ? s$5["shorted"] : s$5["full-text"]) + " " + (wrapFirstLine ? " " + s$5["wrap"] : "") + " " + (breakFirstLine ? " " + s$5["break"] : "")
+    className: (isFirstLineTextReducible ? s$7["shorted"] : s$7["full-text"]) + " " + (wrapFirstLine ? " " + s$7["wrap"] : "") + " " + (breakFirstLine ? " " + s$7["break"] : "")
   }, firstLineText), "\xA0" + firstLineNotReducibleSuffix), isHorizontal ? /*#__PURE__*/React.createElement("div", {
     className: "line"
   }) : null, secondLineText ? /*#__PURE__*/React.createElement("p", {
-    className: s$5["second-line-text"]
+    className: s$7["second-line-text"]
   }, secondLineText) : null, thirdLineText ? /*#__PURE__*/React.createElement("p", {
-    className: s$5["second-line-text"]
+    className: s$7["second-line-text"]
   }, thirdLineText) : null);
 };
 LinesOfText.propTypes = {
@@ -5804,7 +5844,7 @@ LinesOfText.defaultProps = {
   breakFirstLine: false
 };
 
-var s$4 = {"line-with-icon-link-icon":"_8HT4K","line-with-icon-link":"_m8MBC","line-with-icon-link-text":"_M7e-R"};
+var s$6 = {"line-with-icon-link-icon":"_8HT4K","line-with-icon-link":"_m8MBC","line-with-icon-link-text":"_M7e-R"};
 
 /**
  * Renders a line with text and an accompanying icon that serves as a link.
@@ -5819,9 +5859,9 @@ var LineWithIconLink = function LineWithIconLink(_ref) {
     icon = _ref.icon,
     url = _ref.url;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$4["line-with-icon-link"]
+    className: s$6["line-with-icon-link"]
   }, /*#__PURE__*/React.createElement("h5", {
-    className: s$4["line-with-icon-link-text"]
+    className: s$6["line-with-icon-link-text"]
   }, text), /*#__PURE__*/React.createElement("a", {
     href: url,
     target: "_blank",
@@ -6063,7 +6103,7 @@ TitledLineWithIconLink.propTypes = {
 };
 TitledLineWithIconLink.defaultProps = {};
 
-var s$3 = {"radio-button-with-text-container":"_n8DcU","radio-button-with-text":"_BcSKE","selected":"_orWq2","disabled":"_2bALK","hide":"_-LxGT","radio-button-with-text-wrapper":"_cRkxm","radio-button-with-text-content":"_gUlt9","radio-button-with-text-dots":"_pyIax","show":"_EOvAZ"};
+var s$5 = {"radio-button-with-text-container":"_n8DcU","radio-button-with-text":"_BcSKE","selected":"_orWq2","disabled":"_2bALK","hide":"_-LxGT","radio-button-with-text-wrapper":"_cRkxm","radio-button-with-text-content":"_gUlt9","radio-button-with-text-dots":"_pyIax","show":"_EOvAZ"};
 
 /**
  * RadioButtonWithText component with a label and optional tooltip.
@@ -6123,10 +6163,10 @@ var RadioButtonWithText = function RadioButtonWithText(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: s$3["radio-button-with-text-container"]
+    className: s$5["radio-button-with-text-container"]
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "radio-button-with-text-" + id,
-    className: [s$3["radio-button-with-text"], isSwitchedOn ? s$3["selected"] : "", isLoading ? s$3["hide"] : "", isDisabled ? s$3["disabled"] : ""].join(" "),
+    className: [s$5["radio-button-with-text"], isSwitchedOn ? s$5["selected"] : "", isLoading ? s$5["hide"] : "", isDisabled ? s$5["disabled"] : ""].join(" "),
     onMouseEnter: function onMouseEnter(e) {
       return handleError(_onMouseEnter, e);
     },
@@ -6139,16 +6179,16 @@ var RadioButtonWithText = function RadioButtonWithText(_ref) {
       return setShowTooltip(false);
     }
   }, tooltipText)) : null, /*#__PURE__*/React.createElement("div", {
-    className: s$3["radio-button-with-text-dots"] + (isLoading ? s$3["show"] : "")
+    className: s$5["radio-button-with-text-dots"] + (isLoading ? s$5["show"] : "")
   }, /*#__PURE__*/React.createElement(LoadingDots, null)), /*#__PURE__*/React.createElement("div", {
-    className: s$3["radio-button-with-text-content"] + " " + ("")
+    className: s$5["radio-button-with-text-content"] + " " + ("")
   }, /*#__PURE__*/React.createElement("input", {
     id: "radio-button-with-text-" + id,
     type: "checkbox",
     value: isSwitchedOn,
     onChange: handleChange
   }), /*#__PURE__*/React.createElement("span", {
-    className: s$3["radio-button-with-text-wrapper"]
+    className: s$5["radio-button-with-text-wrapper"]
   }, text))));
 };
 RadioButtonWithText.propTypes = {
@@ -6167,7 +6207,7 @@ RadioButtonWithText.defaultProps = {
   id: ""
 };
 
-var s$2 = {"information-message":"_95-Ev","data-loaded":"_-kB8A","big-image":"_2LO1t","information-message-text":"_BiT68","white-text":"_-BraU"};
+var s$4 = {"information-message":"_95-Ev","data-loaded":"_-kB8A","big-image":"_2LO1t","information-message-text":"_BiT68","white-text":"_-BraU"};
 
 var InfoIcon = (function () {
   return /*#__PURE__*/React.createElement("svg", {
@@ -6210,13 +6250,13 @@ var InformationMessage = function InformationMessage(_ref) {
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
   return /*#__PURE__*/React.createElement("div", {
-    className: s$2["information-message"] + (bigImage ? " " + s$2["big-image"] : "")
+    className: s$4["information-message"] + (bigImage ? " " + s$4["big-image"] : "")
   }, icon ? /*#__PURE__*/React.createElement("img", {
     src: icon,
     alt: "info icon",
     loading: "lazy"
   }) : /*#__PURE__*/React.createElement(InfoIcon, null), /*#__PURE__*/React.createElement("p", {
-    className: s$2["information-message-text"] + (whiteText ? " " + s$2["white-text"] : "")
+    className: s$4["information-message-text"] + (whiteText ? " " + s$4["white-text"] : "")
   }, text, children));
 };
 InformationMessage.propTypes = {
@@ -6234,7 +6274,7 @@ InformationMessage.defaultProps = {
   children: null
 };
 
-var s$1 = {"input":"_ulRDR","big-height":"_F2P0V","small-height":"_-B-mJ","disabled":"_nGsPr","fill-width":"_5xJbH","error-encountered":"_zp1RY","input-clear-button":"_iqmlY","image-background":"_YK4ec","image-background-clear-button":"_VOvdT","input-label":"_bICe7"};
+var s$3 = {"input":"_ulRDR","big-height":"_F2P0V","small-height":"_-B-mJ","disabled":"_nGsPr","fill-width":"_5xJbH","error-encountered":"_zp1RY","input-clear-button":"_iqmlY","image-background":"_YK4ec","image-background-clear-button":"_VOvdT","input-label":"_bICe7"};
 
 /**
  * Input component for forms.
@@ -6317,12 +6357,12 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: [s$1["input"], isBigHeight ? s$1["big-height"] : "", isSmallHeight ? s$1["small-height"] : "", disabled ? s$1["disabled"] : "", fillWidth ? s$1["fill-width"] : "", imageBackground ? s$1["image-background"] : ""].join(" ")
+    className: [s$3["input"], isBigHeight ? s$3["big-height"] : "", isSmallHeight ? s$3["small-height"] : "", disabled ? s$3["disabled"] : "", fillWidth ? s$3["fill-width"] : "", imageBackground ? s$3["image-background"] : ""].join(" ")
   }, label ? /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
-    className: s$1["input-label"]
+    className: s$3["input-label"]
   }, label) : null, clearButton ? /*#__PURE__*/React.createElement("div", {
-    className: s$1["input-clear-button"]
+    className: s$3["input-clear-button"]
   }, /*#__PURE__*/React.createElement(Close, {
     onClick: handleClearButtonClick,
     color: "dark-invert"
@@ -6334,7 +6374,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return handleError(_onChange, e);
     },
     placeholder: placeholder,
-    className: className + (errorEncountered ? " " + s$1["error-encountered"] : ""),
+    className: className + (errorEncountered ? " " + s$3["error-encountered"] : ""),
     defaultValue: defaultValue,
     disabled: disabled,
     onKeyUp: function onKeyUp(event) {
@@ -6350,7 +6390,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return handleError(_onChange, e);
     },
     placeholder: placeholder,
-    className: className + (errorEncountered ? " " + s$1["error-encountered"] : ""),
+    className: className + (errorEncountered ? " " + s$3["error-encountered"] : ""),
     value: value,
     disabled: disabled,
     onKeyUp: function onKeyUp(event) {
@@ -6407,12 +6447,290 @@ Input.defaultProps = {
   errorEncountered: false
 };
 
-var s = {"coin-picker":"_mvuzQ","loading":"_18kIX","item":"_fSxCX","link":"_rOS3q","content":"_ONDTD","name":"_GlPf1","amount":"_kiTZB","icon":"_jrdDI","coin-picker-search":"_9BFcQ","coin-picker-wrapper":"_6Melc","fixed-height":"_pSvdH","reached-top":"_SQFMD","reached-bottom":"_CTcCE","coin-picker-wrapper-content":"_uK6LL","coin-picker-wrapper-content-bottom-message":"_TxE8d","coin-picker-wrapper-content-bottom-message-link":"_jX5uW","coin-picker-wrapper-content-assets":"_YA-nb","outline":"_665-T","disabled":"_hBmLs","toggle-container":"_KZMGR","arrow":"_dgQQJ","coin-picker-wrapper-content-load-more-button":"_DjR6l","coin-picker-wrapper-content-asset-not-found":"_0PUY9"};
+var s$2 = {"coin-picker":"_mvuzQ","loading":"_18kIX","item":"_fSxCX","link":"_rOS3q","content":"_ONDTD","name":"_GlPf1","amount":"_kiTZB","icon":"_jrdDI","coin-picker-search":"_9BFcQ","coin-picker-wrapper":"_6Melc","fixed-height":"_pSvdH","reached-top":"_SQFMD","reached-bottom":"_CTcCE","coin-picker-wrapper-content":"_uK6LL","coin-picker-wrapper-content-bottom-message":"_TxE8d","coin-picker-wrapper-content-bottom-message-link":"_jX5uW","coin-picker-wrapper-content-assets":"_YA-nb","outline":"_665-T","disabled":"_hBmLs","toggle-container":"_KZMGR","arrow":"_dgQQJ","coin-picker-wrapper-content-load-more-button":"_DjR6l","coin-picker-wrapper-content-asset-not-found":"_0PUY9"};
 
 var FALLBACK_ASSET_ICON_URL = "https://rabbit.io/asset-icons/fallback.svg";
 var DEFAULT_CRYPTO_DECIMAL_COUNT = 8;
 
-function _catch$b(body, recover) {
+/**
+ * The model for cryptocurrency coins.
+ *
+ * WARNING: this class should not be instantiated directly. Use only predefined singleton Coin (or descendants) instances.
+ */
+var Coin = /*#__PURE__*/function () {
+  /**
+   * Creates new coin
+   *
+   * @param latinName {string} the coin name in latin symbols like "Bitcoin"
+   * @param ticker {string} the coin symbol/ticker/code like 'BTC'. Always upper case. A unique coin identifier
+   * @param tickerPrintable {string} ticker but in printable format. Useful for tokens based on external blockchains
+   *        like ERC20 or TRC20. It is not friendly to display USDTERC20 or BUSDTRC20 - more neat options are just
+   *        USDT and BUSD. Note that you should always care about user's understanding of what coin he/she is working
+   *        with as printable ticker for USDTERC20 and USDTTRC20 are the same.
+   * @param digitsCountAfterComma {number} count of digits after the comma. E.g. 8 for bitcoin
+   * @param maxValue {number|null} max possible value for cryptocurrency. Null means that the currency has no max possible value
+   * @param atomName {string} name of the coin's atomic value. Like 'satoshi' for bitcoin
+   * @param mainnet {Network} main network for this coin
+   * @param testnet {Network} test network for this coin
+   * @param minConfirmations {number} min confirmations count to treat the coin's transaction confirmed
+   * @param payableEntityStringForFeeRate {string|null} the payable fee entity like byte for bitcoin or gas for ether if present
+   * @param feeOptionsTimeStringsSortedDesc {string[]} array of 4 strings for fee options when sending coins. Should be sorted from the highest time to the smallest
+   * @param feeRatesExpirationTimeMs {number} number of milliseconds to treat the fee rates as expired
+   * @param blockchain {Blockchain} blockchain object
+   * @param [protocol] {Protocol|null} token/coin protocol if relevant
+   * @param [tokenAddress] {string|null} address of contract of this token (if the coin is token)
+   * @param [doesUseLowerCaseAddresses] {boolean} flag to clarify whether we can use lower case addresses to ensure more robust comparisons
+   * @param [doesUseOutputs=false] {boolean} true if this coin uses inputs/outputs concept and false if it uses just balances
+   */
+  function Coin(latinName, ticker, tickerPrintable, digitsCountAfterComma, maxValue, atomName, mainnet, testnet, minConfirmations, payableEntityStringForFeeRate, feeOptionsTimeStringsSortedDesc, feeRatesExpirationTimeMs, blockchain, protocol, tokenAddress, doesUseLowerCaseAddresses, doesUseOutputs) {
+    if (protocol === void 0) {
+      protocol = null;
+    }
+    if (tokenAddress === void 0) {
+      tokenAddress = null;
+    }
+    if (doesUseLowerCaseAddresses === void 0) {
+      doesUseLowerCaseAddresses = true;
+    }
+    if (doesUseOutputs === void 0) {
+      doesUseOutputs = false;
+    }
+    this.latinName = latinName;
+    this.ticker = ticker;
+    this.tickerPrintable = tickerPrintable;
+    this.digits = digitsCountAfterComma;
+    this.maxValue = maxValue;
+    this.atomName = atomName;
+    this.mainnet = mainnet;
+    this.testnet = testnet;
+    this.minConfirmations = minConfirmations;
+    this.payableEntityStringForFeeRate = payableEntityStringForFeeRate;
+    this.feeOptionsTimeStringsSortedDesc = feeOptionsTimeStringsSortedDesc;
+    this.feeRatesExpirationTimeMs = feeRatesExpirationTimeMs;
+    this.protocol = protocol;
+    this.blockchain = blockchain;
+    // TODO: [bug, critical] use testnet property for testnet contract address as it blocks the app work in testnets
+    this.tokenAddress = tokenAddress;
+    this.feeCoin = this;
+    this._significantDigits = 8;
+    this.doesUseLowerCaseAddresses = doesUseLowerCaseAddresses;
+    this.doesUseOutputs = doesUseOutputs;
+  }
+
+  /**
+   * Sets fee coin
+   *
+   * @param feeCoin {Coin} some tokens use another coin to charge transaction fee as they work on top of some external
+   *        blockchain. So pass here the coin the token uses for fee charging. Like for ERC20 token the fee coin is ETH.
+   *        By default, the creating coin will be set as a value for this field.
+   */
+  var _proto = Coin.prototype;
+  _proto.setFeeCoin = function setFeeCoin(feeCoin) {
+    this.feeCoin = feeCoin;
+  }
+
+  /**
+   * Checks whether this coin uses another coin (blockchain) to charge fee for transactions (means works on base of
+   * some external blockchain).
+   *
+   * @return {boolean} true if this coin uses external blockchain to perform transactions and charge fee
+   */;
+  _proto.doesUseDifferentCoinFee = function doesUseDifferentCoinFee() {
+    return this.feeCoin !== this;
+  }
+
+  /**
+   * Converts the given atoms string/number to string representing the same amount in coin itself - floating point number
+   *
+   * @param atoms {string} atoms positive integer amount
+   * @return {string} coin amount floating point number as a string
+   */;
+  _proto.atomsToCoinAmount = function atomsToCoinAmount(atoms) {
+    throw new Error("Not implemented in base Coin");
+  }
+
+  /**
+   * Converts the given coins amount string/number to string representing the same amount in coin atoms - integer number
+   *
+   * @param coinsAmount {string} coins positive floating point amount
+   * @return {string} coin atoms amount integer number as a string
+   */;
+  _proto.coinAmountToAtoms = function coinAmountToAtoms(coinsAmount) {
+    throw new Error("Not implemented in base Coin");
+  }
+
+  /**
+   * Composes URL to view the tx with given id in the external blockchain explorer
+   *
+   * @param txId {string} id of transaction
+   * @return {string} URL string
+   */;
+  _proto.composeUrlToTransactionExplorer = function composeUrlToTransactionExplorer(txId) {
+    throw new Error("Not implemented in base Coin");
+  }
+
+  /**
+   * Most of the cryptocurrencies has specific fee rate or fee price metric. This value usually has specific measure
+   * like satoshi/byte or gWei/gas. This function adds the described denomination string to the given amount
+   * as a suffix and returns the result string ready to be show to a user.
+   *
+   * @param coinAtomsString {string} coin atoms positive integer amount
+   * @return {string} string of coin amount and fee rate units
+   */;
+  _proto.coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString = function coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString(coinAtomsString) {
+    throw new Error("Not implemented in base Coin");
+  }
+
+  /**
+   * Check whether this coin support transaction prioritisation during the sending process.
+   *
+   * @return {boolean} true if support transaction prioritisation and false otherwise
+   */;
+  _proto.doesSupportTransactionPrioritisation = function doesSupportTransactionPrioritisation() {
+    return Array.isArray(this.feeOptionsTimeStringsSortedDesc);
+  };
+  _proto.tickerAndProtocol = function tickerAndProtocol() {
+    try {
+      var _ref;
+      return "" + this.tickerPrintable + (this.protocol ? (_ref = " " + this.protocol.protocol) != null ? _ref : "" : "");
+    } catch (e) {
+      improveAndRethrow(e, "tickerAndProtocol");
+    }
+  };
+  return Coin;
+}();
+
+/**
+ * A component that displays a list of coins that can be searched and filtered.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Coin[]} props.coinsList - The list of all available coins.
+ * @param {Array<{coin: Coin, component: React.Component}>} props.coinsBundle - The bundle of coin components to be displayed.
+ * @param {string} props.searchQuery - The search query to filter coins.
+ * @param {boolean} props.partialLoadingEnabled - Determines if partial loading is enabled.
+ * @param {number} props.partialLoadingIncrement - The increment of coins to load when loading more.
+ * @param {Function} props.onListUpdated - Callback when the list of displayed coins is updated.
+ * @param {Function} props.setIsListFull - Callback to set if the list is fully displayed.
+ * @param {Function} props.setIsSearchResultEmpty - Callback to set if the search result is empty.
+ * @param {number} props.triggerLoadMoreCoins - Triggers loading more coins.
+ */
+var SearchableCoinsList = function SearchableCoinsList(_ref) {
+  var coinsList = _ref.coinsList,
+    coinsBundle = _ref.coinsBundle,
+    searchQuery = _ref.searchQuery,
+    _ref$partialLoadingEn = _ref.partialLoadingEnabled,
+    partialLoadingEnabled = _ref$partialLoadingEn === void 0 ? true : _ref$partialLoadingEn,
+    _ref$partialLoadingIn = _ref.partialLoadingIncrement,
+    partialLoadingIncrement = _ref$partialLoadingIn === void 0 ? 100 : _ref$partialLoadingIn,
+    _ref$onListUpdated = _ref.onListUpdated,
+    onListUpdated = _ref$onListUpdated === void 0 ? function () {} : _ref$onListUpdated,
+    _ref$setIsListFull = _ref.setIsListFull,
+    setIsListFull = _ref$setIsListFull === void 0 ? function () {} : _ref$setIsListFull,
+    _ref$setIsSearchResul = _ref.setIsSearchResultEmpty,
+    setIsSearchResultEmpty = _ref$setIsSearchResul === void 0 ? function () {} : _ref$setIsSearchResul,
+    triggerLoadMoreCoins = _ref.triggerLoadMoreCoins;
+  var _useState = useState([]),
+    filteredCoins = _useState[0],
+    setFilteredCoins = _useState[1];
+  var _useReferredState = useReferredState(0),
+    limitedCoinsNumber = _useReferredState[0],
+    setLimitedCoinsNumber = _useReferredState[1];
+  var _useState2 = useState([]),
+    displayedCoins = _useState2[0],
+    setDisplayedCoins = _useState2[1];
+  var handleSearchAsset = function handleSearchAsset(value) {
+    var searchTerm = value.trim().toLowerCase();
+    if (searchTerm !== "") {
+      var searchWords = searchTerm.split(/\s+/); // Split search terms on whitespace
+
+      var filteredAndSortedCoins = coinsList.filter(function (coin) {
+        // Check if all search words are found in any of the given properties
+        return searchWords.every(function (word) {
+          var _coin$latinName, _coin$ticker, _coin$tickerPrintable;
+          return (coin == null || (_coin$latinName = coin.latinName) == null ? void 0 : _coin$latinName.toLowerCase().includes(word)) || (coin == null || (_coin$ticker = coin.ticker) == null ? void 0 : _coin$ticker.toLowerCase().includes(word)) || (coin == null || (_coin$tickerPrintable = coin.tickerPrintable) == null ? void 0 : _coin$tickerPrintable.toLowerCase().includes(word));
+        });
+      }).sort(function (a, b) {
+        // Check for exact matches
+        var aMatch = a.latinName.toLowerCase() === searchTerm || a.ticker.toLowerCase() === searchTerm || a.tickerPrintable.toLowerCase() === searchTerm ? 1 : 0;
+        var bMatch = b.latinName.toLowerCase() === searchTerm || b.ticker.toLowerCase() === searchTerm || b.tickerPrintable.toLowerCase() === searchTerm ? 1 : 0;
+        if (bMatch - aMatch !== 0) {
+          // Prioritize exact matches to the top
+          return bMatch - aMatch;
+        } else {
+          // Sort remaining items alphabetically by latinName
+          return a.latinName.toLowerCase().localeCompare(b.latinName.toLowerCase());
+        }
+      });
+      setFilteredCoins(filteredAndSortedCoins);
+    } else {
+      setFilteredCoins(coinsList); // Reset to original list if search term is empty
+    }
+  };
+  var updateDisplayedCoins = function updateDisplayedCoins() {
+    var fullList = limitedCoinsNumber.current >= filteredCoins.length;
+    setDisplayedCoins(fullList ? filteredCoins : filteredCoins.slice(0, limitedCoinsNumber.current));
+    setIsListFull(fullList);
+  };
+  var displayMoreCoins = function displayMoreCoins() {
+    setLimitedCoinsNumber(function (prev) {
+      return prev + partialLoadingIncrement;
+    });
+    updateDisplayedCoins();
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(function () {
+    return onListUpdated();
+  }, [displayedCoins]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(function () {
+    return displayMoreCoins();
+  }, [triggerLoadMoreCoins]);
+  useEffect(function () {
+    if ((filteredCoins == null ? void 0 : filteredCoins.length) > partialLoadingIncrement && partialLoadingEnabled) {
+      setLimitedCoinsNumber(partialLoadingIncrement);
+      updateDisplayedCoins();
+    } else {
+      setLimitedCoinsNumber(0);
+      setDisplayedCoins(filteredCoins);
+      setIsListFull(true);
+    }
+    setIsSearchResultEmpty((filteredCoins == null ? void 0 : filteredCoins.length) === 0 && searchQuery !== "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filteredCoins]);
+  useEffect(function () {
+    if (coinsBundle != null) handleSearchAsset(searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [coinsList, searchQuery]);
+  return displayedCoins.map(function (coin) {
+    return coinsBundle.find(function (bundleItem) {
+      return bundleItem.coin.ticker === coin.ticker;
+    }).component;
+  }).map(function (Item) {
+    return /*#__PURE__*/React.createElement(Item, null);
+  });
+};
+SearchableCoinsList.propTypes = {
+  coinsList: PropTypes.array.isRequired,
+  coinsBundle: PropTypes.array.isRequired,
+  searchQuery: PropTypes.string.isRequired,
+  partialLoadingEnabled: PropTypes.bool,
+  partialLoadingIncrement: PropTypes.number,
+  onListUpdated: PropTypes.func,
+  setIsListFull: PropTypes.func,
+  setIsSearchResultEmpty: PropTypes.func,
+  triggerLoadMoreCoins: PropTypes.number
+};
+SearchableCoinsList.defaultProps = {
+  partialLoadingEnabled: true,
+  partialLoadingIncrement: 100,
+  onListUpdated: function onListUpdated() {},
+  setIsListFull: function setIsListFull() {},
+  setIsSearchResultEmpty: function setIsSearchResultEmpty() {}
+};
+
+function _catch$c(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -6513,39 +6831,36 @@ var CoinPicker = function CoinPicker(_ref) {
   var _useState = useState(null),
     coins = _useState[0],
     setCoins = _useState[1];
-  var _useState2 = useState([]),
-    filteredCoins = _useState2[0],
-    setFilteredCoins = _useState2[1];
   var _useReferredState = useReferredState({}),
     initiallyEnabledCoins = _useReferredState[0],
     setInitiallyEnabledCoins = _useReferredState[1];
   var _useReferredState2 = useReferredState({}),
     currentlyEnabledCoins = _useReferredState2[0],
     setCurrentlyEnabledCoins = _useReferredState2[1];
+  var _useState2 = useState(""),
+    searchFieldValue = _useState2[0],
+    setSearchFieldValue = _useState2[1];
   var _useState3 = useState(""),
-    searchFieldValue = _useState3[0],
-    setSearchFieldValue = _useState3[1];
-  var _useState4 = useState(""),
-    scrollWrapperClass = _useState4[0],
-    setScrollWrapperClass = _useState4[1];
-  var _useState5 = useState(false),
-    searchEnabled = _useState5[0],
-    setSearchEnabled = _useState5[1];
-  var _useState6 = useState(null),
-    coinsContent = _useState6[0],
-    setCoinsContent = _useState6[1];
-  var _useState7 = useState(false),
-    isCoinsDataReloadable = _useState7[0],
-    setIsCoinsDataReloadable = _useState7[1];
-  var _useState8 = useState(0),
-    limitedCoinsNumber = _useState8[0],
-    setLimitedCoinsNumber = _useState8[1];
-  var _useState9 = useState([]),
-    displayedCoins = _useState9[0],
-    setDisplayedCoins = _useState9[1];
-  var _useState10 = useState(true),
-    isListFull = _useState10[0],
-    setIsListFull = _useState10[1];
+    scrollWrapperClass = _useState3[0],
+    setScrollWrapperClass = _useState3[1];
+  var _useState4 = useState(false),
+    searchEnabled = _useState4[0],
+    setSearchEnabled = _useState4[1];
+  var _useState5 = useState(null),
+    coinsContent = _useState5[0],
+    setCoinsContent = _useState5[1];
+  var _useState6 = useState(false),
+    isCoinsDataReloadable = _useState6[0],
+    setIsCoinsDataReloadable = _useState6[1];
+  var _useState7 = useState(true),
+    isListFull = _useState7[0],
+    setIsListFull = _useState7[1];
+  var _useState8 = useState(false),
+    isSearchResultEmpty = _useState8[0],
+    setIsSearchResultEmpty = _useState8[1];
+  var _useState9 = useState(0),
+    triggerLoadMoreCoins = _useState9[0],
+    setTriggerLoadMoreCoins = _useState9[1];
   var searchRef = useRef();
   var scrollContainerRef = useRef();
   var skeletonItemsCount = (initiallyEnabledCoinsList == null ? void 0 : initiallyEnabledCoinsList.length) || (partialLoadingEnabled ? partialLoadingIncrement : 6);
@@ -6603,43 +6918,12 @@ var CoinPicker = function CoinPicker(_ref) {
     if (mode === COIN_PICKER_MODES.CHECKBOX) handleToggleClick(coin.ticker);
     handleClick(coin.ticker);
   };
-  var handleSearchAsset = function handleSearchAsset(value) {
-    // TODO: [refactoring, high] use unified search function. task_id=be0475316f374dd4a926c948d969e704
-    setSearchFieldValue(value); // Trim the input to handle leading/trailing spaces
-    var searchTerm = value.trim().toLowerCase();
-    if (searchTerm !== "") {
-      var searchWords = searchTerm.split(/\s+/); // Split search terms on whitespace
-
-      var filteredAndSortedCoins = coins.filter(function (coin) {
-        // Check if all search words are found in any of the given properties
-        return searchWords.every(function (word) {
-          var _coin$latinName, _coin$ticker, _coin$tickerPrintable;
-          return (coin == null || (_coin$latinName = coin.latinName) == null ? void 0 : _coin$latinName.toLowerCase().includes(word)) || (coin == null || (_coin$ticker = coin.ticker) == null ? void 0 : _coin$ticker.toLowerCase().includes(word)) || (coin == null || (_coin$tickerPrintable = coin.tickerPrintable) == null ? void 0 : _coin$tickerPrintable.toLowerCase().includes(word));
-        });
-      }).sort(function (a, b) {
-        // Check for exact matches
-        var aMatch = a.latinName.toLowerCase() === searchTerm || a.ticker.toLowerCase() === searchTerm || a.tickerPrintable.toLowerCase() === searchTerm ? 1 : 0;
-        var bMatch = b.latinName.toLowerCase() === searchTerm || b.ticker.toLowerCase() === searchTerm || b.tickerPrintable.toLowerCase() === searchTerm ? 1 : 0;
-        if (bMatch - aMatch !== 0) {
-          // Prioritize exact matches to the top
-          return bMatch - aMatch;
-        } else {
-          // Sort remaining items alphabetically by latinName
-          return a.latinName.toLowerCase().localeCompare(b.latinName.toLowerCase());
-        }
-      });
-      setFilteredCoins(filteredAndSortedCoins);
-    } else {
-      setFilteredCoins(coins); // Reset to original list if search term is empty
-    }
-  };
   var loadCoinsAndSaveToState = function loadCoinsAndSaveToState() {
     (function () {
       try {
-        var _temp = _catch$b(function () {
+        var _temp = _catch$c(function () {
           return Promise.resolve(loadCoinsAndContent ? loadCoinsAndContent() : defaultLoadCoinsAndContent()).then(function (data) {
             setCoins(data.coins);
-            setFilteredCoins(data.coins);
             setCoinsContent(data.content);
             setIsCoinsDataReloadable(!!data.isCoinsDataReloadable);
           });
@@ -6687,45 +6971,22 @@ var CoinPicker = function CoinPicker(_ref) {
     setSearchEnabled(search ? true : searchAdaptive && initiallyEnabledCoinsList ? initiallyEnabledCoinsList.length > 6 : false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search, searchAdaptive, coins]);
-  useEffect(function () {
-    if ((filteredCoins == null ? void 0 : filteredCoins.length) > partialLoadingIncrement && partialLoadingEnabled) {
-      setLimitedCoinsNumber(partialLoadingIncrement);
-    } else {
-      setLimitedCoinsNumber(0);
-      setDisplayedCoins(filteredCoins);
-      setIsListFull(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filteredCoins]);
-  useEffect(function () {
-    if (limitedCoinsNumber > 0) {
-      var coinsToDisplay = filteredCoins.slice(0, limitedCoinsNumber);
-      setDisplayedCoins(coinsToDisplay);
-      setIsListFull(coinsToDisplay.length === filteredCoins.length);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [limitedCoinsNumber]);
-  var displayMoreCoins = function displayMoreCoins() {
-    setLimitedCoinsNumber(function (prev) {
-      return prev + partialLoadingIncrement;
-    });
-  };
   var skeleton = function skeleton() {
     var skeletonItems = [];
     for (var i = 0; i < skeletonItemsCount; i++) {
       skeletonItems.push( /*#__PURE__*/React.createElement("div", {
-        className: s["item"],
+        className: s$2["item"],
         key: "coin-picker-skeleton-" + i
       }, /*#__PURE__*/React.createElement("div", {
-        className: s["link"] + " " + s["loading"]
+        className: s$2["link"] + " " + s$2["loading"]
       }, /*#__PURE__*/React.createElement("div", {
-        className: s["icon"] + " " + "skeleton-dark"
+        className: s$2["icon"] + " " + "skeleton-dark"
       }), /*#__PURE__*/React.createElement("div", {
-        className: s["content"]
+        className: s$2["content"]
       }, /*#__PURE__*/React.createElement("div", {
-        className: s["name"] + " " + "skeleton-dark"
+        className: s$2["name"] + " " + "skeleton-dark"
       }), /*#__PURE__*/React.createElement("div", {
-        className: s["amount"] + " " + "skeleton-dark"
+        className: s$2["amount"] + " " + "skeleton-dark"
       })))));
     }
     return skeletonItems;
@@ -6733,24 +6994,27 @@ var CoinPicker = function CoinPicker(_ref) {
   var handleScroll = function handleScroll() {
     var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
     if (scrollWrapperClass !== "") setScrollWrapperClass("");
-    if (((_scrollContainerRef$c = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c.scrollTop) === 0) setScrollWrapperClass(s["reached-top"] + (((_scrollContainerRef$c2 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c2.scrollHeight) - ((_scrollContainerRef$c3 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c3.clientHeight) === 0 ? " " + s["reached-bottom"] : ""));
-    if (((_scrollContainerRef$c4 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c4.scrollTop) > 0 && ((_scrollContainerRef$c5 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c5.scrollTop) === ((_scrollContainerRef$c6 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c6.scrollHeight) - ((_scrollContainerRef$c7 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c7.clientHeight)) setScrollWrapperClass(s["reached-bottom"]);
+    if (((_scrollContainerRef$c = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c.scrollTop) === 0) setScrollWrapperClass(s$2["reached-top"] + (((_scrollContainerRef$c2 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c2.scrollHeight) - ((_scrollContainerRef$c3 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c3.clientHeight) === 0 ? " " + s$2["reached-bottom"] : ""));
+    if (((_scrollContainerRef$c4 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c4.scrollTop) > 0 && ((_scrollContainerRef$c5 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c5.scrollTop) === ((_scrollContainerRef$c6 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c6.scrollHeight) - ((_scrollContainerRef$c7 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c7.clientHeight)) setScrollWrapperClass(s$2["reached-bottom"]);
+  };
+  var displayMoreCoins = function displayMoreCoins() {
+    return setTriggerLoadMoreCoins(function (prev) {
+      return prev + 1;
+    });
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(handleScroll, []);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(handleScroll, [filteredCoins]);
   var shouldShowSkeleton = coins == null;
   return coins ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker"] + (shouldShowSkeleton ? " " + s["loading"] : "")
+    className: s$2["coin-picker"] + (shouldShowSkeleton ? " " + s$2["loading"] : "")
   }, searchEnabled ? /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-search"]
+    className: s$2["coin-picker-search"]
   }, /*#__PURE__*/React.createElement(Input, {
     value: searchFieldValue,
     onChange: function onChange(e) {
-      return handleSearchAsset(e.target.value);
+      setSearchFieldValue(e.target.value);
+      handleScroll();
     },
     placeholder: texts.searchPlaceholder,
     isSmallHeight: true,
@@ -6758,71 +7022,88 @@ var CoinPicker = function CoinPicker(_ref) {
     ref: searchRef,
     disabled: shouldShowSkeleton
   })) : "", /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper"] + " " + scrollWrapperClass + (searchEnabled ? " " + s["fixed-height"] : "")
+    className: s$2["coin-picker-wrapper"] + " " + scrollWrapperClass + (searchEnabled ? " " + s$2["fixed-height"] : "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper-content"] + (searchEnabled ? " " + s["fixed-height"] : ""),
+    className: s$2["coin-picker-wrapper-content"] + (searchEnabled ? " " + s$2["fixed-height"] : ""),
     ref: scrollContainerRef,
     onScroll: handleScroll
   }, /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper-content-assets"]
-  }, shouldShowSkeleton ? skeleton() : displayedCoins.map(function (coin, index) {
-    var _coinsContent$find$su, _coinsContent$find;
-    var _coinToIconPaths = coinToIconPaths(coin),
-      assetIconSrc = _coinToIconPaths.assetIconSrc,
-      assetIconProtocolSrc = _coinToIconPaths.assetIconProtocolSrc;
-    return /*#__PURE__*/React.createElement("div", {
-      className: s["item"],
-      key: "picker-" + coin.ticker + "-" + index,
-      onClick: function onClick(e) {
-        return handleError(function () {
-          return handleCoinClick(coin);
-        }, e);
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: s["link"] + (currentlyEnabledCoins.current[coin.ticker] !== initiallyEnabledCoins.current[coin.ticker] ? " " + s["outline"] : "")
-    }, /*#__PURE__*/React.createElement(AssetIcon, {
-      assetIconSrc: assetIconSrc,
-      assetIconProtocolSrc: assetIconProtocolSrc,
-      fallbackSrc: FALLBACK_ASSET_ICON_URL
-    }), /*#__PURE__*/React.createElement("div", {
-      className: s["content"],
-      key: coin.ticker
-    }, /*#__PURE__*/React.createElement("p", {
-      className: s["name"]
-    }, coin.latinName), /*#__PURE__*/React.createElement("p", {
-      className: s["amount"]
-    }, (_coinsContent$find$su = coinsContent == null || (_coinsContent$find = coinsContent.find(function (i) {
-      return i.coin === coin;
-    })) == null ? void 0 : _coinsContent$find.subtitle) != null ? _coinsContent$find$su : "")), mode === COIN_PICKER_MODES.BUTTON ? /*#__PURE__*/React.createElement("div", {
-      className: s["arrow"]
-    }, /*#__PURE__*/React.createElement(ArrowIcon, null)) : mode === COIN_PICKER_MODES.CHECKBOX ? /*#__PURE__*/React.createElement("div", {
-      className: s["toggle-container"]
-    }, /*#__PURE__*/React.createElement(RadioButtonWithText, {
-      onStateChange: function onStateChange(resetButtonLoader) {
-        return handleToggleClick(coin.ticker, resetButtonLoader);
-      },
-      isSwitchedOn: currentlyEnabledCoins.current[coin.ticker],
-      id: index
-    })) : ""));
-  })), (filteredCoins == null ? void 0 : filteredCoins.length) === 0 && searchFieldValue !== "" ? /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper-content-asset-not-found"]
+    className: s$2["coin-picker-wrapper-content-assets"]
+  }, shouldShowSkeleton ? skeleton() : /*#__PURE__*/React.createElement(SearchableCoinsList, {
+    searchQuery: searchFieldValue,
+    onListUpdated: function onListUpdated() {
+      return handleScroll();
+    },
+    setIsListFull: setIsListFull,
+    setIsSearchResultEmpty: setIsSearchResultEmpty,
+    triggerLoadMoreCoins: triggerLoadMoreCoins,
+    coinsList: coins,
+    coinsBundle: coins == null ? void 0 : coins.map(function (coin, index) {
+      return {
+        coin: coin,
+        component: function component() {
+          var _coinsContent$find$su, _coinsContent$find;
+          var _coinToIconPaths = coinToIconPaths(coin),
+            assetIconSrc = _coinToIconPaths.assetIconSrc,
+            assetIconProtocolSrc = _coinToIconPaths.assetIconProtocolSrc;
+          return /*#__PURE__*/React.createElement("div", {
+            className: s$2["item"],
+            key: "picker-" + coin.ticker + "-" + index,
+            onClick: function onClick(e) {
+              return handleError(function () {
+                return handleCoinClick(coin);
+              }, e);
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: s$2["link"] + (currentlyEnabledCoins.current[coin.ticker] !== initiallyEnabledCoins.current[coin.ticker] ? " " + s$2["outline"] : "")
+          }, /*#__PURE__*/React.createElement(AssetIcon, {
+            assetIconSrc: assetIconSrc,
+            assetIconProtocolSrc: assetIconProtocolSrc,
+            fallbackSrc: FALLBACK_ASSET_ICON_URL
+          }), /*#__PURE__*/React.createElement("div", {
+            className: s$2["content"],
+            key: coin.ticker
+          }, /*#__PURE__*/React.createElement("p", {
+            className: s$2["name"]
+          }, coin.latinName), /*#__PURE__*/React.createElement("p", {
+            className: s$2["amount"]
+          }, (_coinsContent$find$su = coinsContent == null || (_coinsContent$find = coinsContent.find(function (i) {
+            return i.coin === coin;
+          })) == null ? void 0 : _coinsContent$find.subtitle) != null ? _coinsContent$find$su : "")), mode === COIN_PICKER_MODES.BUTTON ? /*#__PURE__*/React.createElement("div", {
+            className: s$2["arrow"]
+          }, /*#__PURE__*/React.createElement(ArrowIcon, null)) : mode === COIN_PICKER_MODES.CHECKBOX ? /*#__PURE__*/React.createElement("div", {
+            className: s$2["toggle-container"]
+          }, /*#__PURE__*/React.createElement(RadioButtonWithText, {
+            onStateChange: function onStateChange(resetButtonLoader) {
+              return handleToggleClick(coin.ticker, resetButtonLoader);
+            },
+            isSwitchedOn: currentlyEnabledCoins.current[coin.ticker],
+            id: index
+          })) : ""));
+        }
+      };
+    })
+  })), isSearchResultEmpty ? /*#__PURE__*/React.createElement("div", {
+    className: s$2["coin-picker-wrapper-content-asset-not-found"]
   }, /*#__PURE__*/React.createElement("h6", null, texts.noAssetsMessage)) : "", partialLoadingEnabled && !isListFull ? /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper-content-load-more-button"]
+    className: s$2["coin-picker-wrapper-content-load-more-button"]
   }, /*#__PURE__*/React.createElement(Button, {
     mode: "primary-transparent",
     size: "sm",
     loader: false,
     content: texts.loadMoreButton,
-    onClick: displayMoreCoins,
+    onClick: function onClick() {
+      return displayMoreCoins();
+    },
     handleError: handleError
   })) : "", searchEnabled && showRequestMissingCoinsInfoMessage ? /*#__PURE__*/React.createElement("div", {
-    className: s["coin-picker-wrapper-content-bottom-message"]
+    className: s$2["coin-picker-wrapper-content-bottom-message"]
   }, /*#__PURE__*/React.createElement(InformationMessage, {
     text: /*#__PURE__*/React.createElement(React.Fragment, null, texts.assetSuggestionMessage.part1, /*#__PURE__*/React.createElement("a", {
       target: "_blank",
       rel: "noreferrer",
       href: supportUrl,
-      className: s["coin-picker-wrapper-content-bottom-message-link"]
+      className: s$2["coin-picker-wrapper-content-bottom-message-link"]
     }, " " + texts.assetSuggestionMessage.part2 + " "), texts.assetSuggestionMessage.part3)
   })) : "")))) : /*#__PURE__*/React.createElement(LoadingDots, null);
 };
@@ -6907,34 +7188,463 @@ var CoinPickerDialogStep = function CoinPickerDialogStep(_ref) {
     texts = _ref.texts;
   return /*#__PURE__*/React.createElement(DialogStep, {
     controls: controls,
-    stepName: stepName,
-    title: title,
-    subtitle: subtitle,
-    cornerBackButtonTitle: cornerBackButtonTitle,
-    cornerBackButtonClick: cornerBackButtonClick,
-    confirmButtonText: confirmButtonText,
-    confirmButtonClick: confirmButtonClick,
-    showCornerBackButton: showCornerBackButton,
-    headerTitleLeft: true,
+    stepName: stepName,
+    title: title,
+    subtitle: subtitle,
+    cornerBackButtonTitle: cornerBackButtonTitle,
+    cornerBackButtonClick: cornerBackButtonClick,
+    confirmButtonText: confirmButtonText,
+    confirmButtonClick: confirmButtonClick,
+    showCornerBackButton: showCornerBackButton,
+    headerTitleLeft: true,
+    subtitleSmallMargin: true,
+    width: controls ? DIALOG_SIZES.largePlus.width : null
+  }, /*#__PURE__*/React.createElement(CoinPicker, {
+    mode: mode,
+    allCoins: allCoins,
+    initiallyEnabledCoinsList: initiallyEnabledCoinsList,
+    handleClick: function handleClick(ticker) {
+      return handleCoinSelection(ticker);
+    },
+    triggerToReloadData: triggerToReloadData,
+    search: search,
+    searchAdaptive: searchAdaptive,
+    loadCoinsAndContent: loadCoinsAndContent,
+    showRequestMissingCoinsInfoMessage: showRequestMissingCoinsInfoMessage,
+    coinToIconPaths: coinToIconPaths,
+    supportUrl: supportUrl,
+    texts: texts
+  }));
+};
+
+var s$1 = {"colored-notice":"_ZE1ju","colored-notice-text":"_aN0LH"};
+
+/**
+ * ColoredNotice component displays a notice with optional text and a button.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} [props.text] - The text to be displayed in the notice.
+ * @param {string} [props.buttonTitle] - The title of the button.
+ * @param {function} [props.onButtonClick] - Callback function to be called when the button is clicked.
+ * @returns {JSX.Element} The ColoredNotice component.
+ */
+var ColoredNotice = function ColoredNotice(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor." : _ref$text,
+    buttonTitle = _ref.buttonTitle,
+    _ref$onButtonClick = _ref.onButtonClick,
+    onButtonClick = _ref$onButtonClick === void 0 ? function () {} : _ref$onButtonClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: s$1["colored-notice"]
+  }, /*#__PURE__*/React.createElement("p", {
+    className: s$1["colored-notice-text"]
+  }, text), buttonTitle ? /*#__PURE__*/React.createElement(Button, {
+    mode: "primary",
+    size: "sm",
+    content: buttonTitle,
+    loader: false,
+    onClick: onButtonClick
+  }) : null);
+};
+ColoredNotice.propTypes = {
+  text: PropTypes.string,
+  buttonTitle: PropTypes.string,
+  onButtonClick: PropTypes.func
+};
+ColoredNotice.defaultProps = {
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+  onButtonClick: function onButtonClick() {}
+};
+
+var messageIcon = (function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "130",
+    height: "130",
+    viewBox: "0 0 130 130",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z",
+    fill: "#2294F0"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "130",
+    height: "130"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    opacity: "0.3",
+    x: "3.25",
+    y: "150.776",
+    width: "227.136",
+    height: "25.2373",
+    transform: "rotate(-45 3.25 150.776)",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("rect", {
+    opacity: "0.3",
+    x: "-48.4546",
+    y: "126.52",
+    width: "227.136",
+    height: "25.2373",
+    transform: "rotate(-45 -48.4546 126.52)",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "27.75",
+    y: "29.5",
+    width: "74.5",
+    height: "81.5",
+    rx: "12",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M27.75 41.5C27.75 34.8726 33.1226 29.5 39.75 29.5H90.25C96.8774 29.5 102.25 34.8726 102.25 41.5V118C102.25 124.627 96.8774 130 90.25 130H39.75C33.1226 130 27.75 124.627 27.75 118V41.5Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M51.5 63.5C58.1274 63.5 63.5 58.1274 63.5 51.5C63.5 44.8726 58.1274 39.5 51.5 39.5C44.8726 39.5 39.5 44.8726 39.5 51.5C39.5 58.1274 44.8726 63.5 51.5 63.5Z",
+    fill: "#2294F0"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M50.072 49.088H52.03V54.5H50.072V49.088ZM52.074 46.382V48.153H50.028V46.382H52.074Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.2",
+    d: "M41 74.5H63",
+    stroke: "#2294F0",
+    "stroke-width": "4",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.2",
+    d: "M41 84.6157H84.1426",
+    stroke: "#2294F0",
+    "stroke-width": "4",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.2",
+    d: "M41 94.7314H84.1426",
+    stroke: "#2294F0",
+    "stroke-width": "4",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.2",
+    d: "M41 104.731H84.1426",
+    stroke: "#2294F0",
+    "stroke-width": "4",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })));
+});
+
+var supportDialogImage = (function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "130",
+    height: "130",
+    viewBox: "0 0 130 130",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z",
+    fill: "#AFEBC3"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0",
+    "mask-type": "alpha",
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "130",
+    height: "130"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    opacity: "0.3",
+    x: "3.25",
+    y: "150.776",
+    width: "227.136",
+    height: "25.2373",
+    transform: "rotate(-45 3.25 150.776)",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("rect", {
+    opacity: "0.3",
+    x: "-48.4545",
+    y: "126.52",
+    width: "227.136",
+    height: "25.2373",
+    transform: "rotate(-45 -48.4545 126.52)",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.69092 69.153C9.69092 66.0864 11.2523 63.2309 13.8339 61.576L55.8257 34.6583C61.4168 31.0742 68.5832 31.0742 74.1743 34.6583L116.166 61.576C118.748 63.2309 120.309 66.0864 120.309 69.153V126.495C120.309 131.466 116.28 135.495 111.309 135.495H18.6909C13.7204 135.495 9.69092 131.466 9.69092 126.495V69.153Z",
+    fill: "#14A957"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M30.9045 51.8818H97.9136V117.118H30.9045V51.8818Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.1",
+    d: "M63.8182 107.167C76.8722 107.167 87.4545 96.5849 87.4545 83.5308C87.4545 70.4768 76.8722 59.8945 63.8182 59.8945C50.7642 59.8945 40.1818 70.4768 40.1818 83.5308C40.1818 96.5849 50.7642 107.167 63.8182 107.167Z",
+    fill: "#24BE6A"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M58.2093 83.4849L63.0246 88.3002L71.3036 79.047",
+    stroke: "#24BE6A",
+    "stroke-width": "3.76358",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.69092 70.2531C9.69092 68.672 11.4391 67.7161 12.7703 68.5694L65 102.05L117.23 68.5694C118.561 67.7161 120.309 68.672 120.309 70.2531V128.859C120.309 133.83 116.28 137.859 111.309 137.859H18.6909C13.7204 137.859 9.69092 133.83 9.69092 128.859V70.2531Z",
+    fill: "#24BE6A"
+  })));
+});
+
+/**
+ * Saves a user's subscription to receive notifications about a specific coin.
+ * This function sends an email to subscribe the user to notifications for the specified coin.
+ *
+ * @function
+ * @name saveSubscription
+ * @param {Coin} coin - The coin object containing information about the coin, including its ticker symbol.
+ * @param {string} address - The email address of the user who wishes to subscribe.
+ * @returns {Promise<boolean>} A promise that resolves to `true` if the subscription email was sent successfully, or `false` if an error occurred during the process.
+ */
+
+/**
+ * WaitlistSubscription component handles user subscription to a waitlist for coin notifications.
+ * It displays a notice with a button to open a dialog where the user can enter their email to subscribe.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Coin} props.coin - The coin object containing information about the coin.
+ * @param {Object} props.translations - The text translations for the component.
+ * @param {saveSubscription} props.saveSubscription - Function to handle/save the subscription.
+ * @returns {JSX.Element} The WaitlistSubscription component.
+ */
+
+function _catch$b(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+  return result;
+}
+var WaitlistSubscription = function WaitlistSubscription(_ref) {
+  var coin = _ref.coin,
+    translations = _ref.translations,
+    saveSubscription = _ref.saveSubscription;
+  var _useState = useState(),
+    controls = _useState[0],
+    _initControls = _useState[1];
+  var _useState2 = useState(false),
+    showDialog = _useState2[0],
+    setShowDialog = _useState2[1];
+  var _useState3 = useState(""),
+    inputValue = _useState3[0],
+    setInputValue = _useState3[1];
+  var _useState4 = useState(false),
+    isEmailValid = _useState4[0],
+    setIsEmailValid = _useState4[1];
+  var _useState5 = useState(false),
+    errorEncountered = _useState5[0],
+    setErrorEncountered = _useState5[1];
+  var defaultTranslations = {
+    coloredNotice: {
+      text: "This is a pre-listed coin, meaning that the swap is not yet available. As soon as this coin allows exchanges, it will be automatically enabled. If you want to get a notification as soon as this coin becomes available for swap - sign up for the waitlist below!",
+      buttonTitle: "Subscribe for updates"
+    },
+    signUpStep: {
+      title: coin.latinName + " (" + coin.ticker + ") listing notification",
+      subtitle: "To be notified as soon as " + coin.latinName + " becomes available for swaps, please provide your email address. We’ll send you a single notification when it’s listed.",
+      actionButtonTitle: "Subscribe",
+      inputTitle: "Your email address:",
+      error: "Something went wrong. Please try again later."
+    },
+    successStep: {
+      title: "Subscribed successfully!",
+      subtitle: "We’ll notify you as soon as " + coin.latinName + " becomes available for swaps. Keep an eye on your inbox for the update.",
+      actionButtonTitle: "Close"
+    }
+  };
+  var t = translations != null ? translations : defaultTranslations;
+  var STEPS = {
+    signUp: "signUp",
+    success: "success"
+  };
+  var subscribe = function subscribe(resetButtonLoader) {
+    try {
+      var _temp = _catch$b(function () {
+        setErrorEncountered(false);
+        return Promise.resolve(saveSubscription(coin, inputValue)).then(function (result) {
+          if (result) {
+            controls == null || controls.goToStep(STEPS.success);
+          } else {
+            setErrorEncountered(true);
+          }
+          resetButtonLoader();
+        });
+      }, function (e) {
+        resetButtonLoader();
+        logErrorOrOutputToConsole(e);
+        setShowDialog(false);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var openDialog = function openDialog() {
+    setErrorEncountered(false);
+    setInputValue("");
+    setIsEmailValid(false);
+    controls == null || controls.toFirstStep(false);
+    setShowDialog(true);
+  };
+  useEffect(function () {
+    setIsEmailValid(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(inputValue));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
+    initControls: function initControls(controls) {
+      return _initControls(controls);
+    },
+    showDialog: showDialog,
+    onClose: function onClose() {
+      return setShowDialog(false);
+    }
+  }, /*#__PURE__*/React.createElement(DialogStep, {
+    stepName: STEPS.signUp,
+    controls: controls,
+    title: t.signUpStep.title,
+    subtitle: t.signUpStep.subtitle,
+    confirmButtonClick: subscribe,
+    confirmButtonEnabled: isEmailValid,
+    confirmButtonText: t.signUpStep.actionButtonTitle,
+    primaryButtonLoader: true,
     subtitleSmallMargin: true,
-    width: controls ? DIALOG_SIZES.largePlus.width : null
-  }, /*#__PURE__*/React.createElement(CoinPicker, {
-    mode: mode,
-    allCoins: allCoins,
-    initiallyEnabledCoinsList: initiallyEnabledCoinsList,
-    handleClick: function handleClick(ticker) {
-      return handleCoinSelection(ticker);
+    showBackgroundTitle: false,
+    ImageRaw: messageIcon
+  }, /*#__PURE__*/React.createElement(TitleBox, {
+    title: t.signUpStep.inputTitle
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    onChange: function onChange(e) {
+      return setInputValue(e.target.value);
     },
-    triggerToReloadData: triggerToReloadData,
-    search: search,
-    searchAdaptive: searchAdaptive,
-    loadCoinsAndContent: loadCoinsAndContent,
-    showRequestMissingCoinsInfoMessage: showRequestMissingCoinsInfoMessage,
-    coinToIconPaths: coinToIconPaths,
-    supportUrl: supportUrl,
-    texts: texts
+    value: inputValue
+  }), errorEncountered ? /*#__PURE__*/React.createElement(Validation, {
+    text: t.signUpStep.error
+  }) : null)), /*#__PURE__*/React.createElement(DialogStep, {
+    stepName: STEPS.success,
+    controls: controls,
+    title: t.successStep.title,
+    subtitle: t.successStep.subtitle,
+    confirmButtonClick: function confirmButtonClick() {
+      return setShowDialog(false);
+    },
+    confirmButtonText: t.successStep.actionButtonTitle,
+    showBackgroundTitle: false,
+    ImageRaw: supportDialogImage,
+    showCornerBackButton: false,
+    subtitleSmallMargin: true
+  })), /*#__PURE__*/React.createElement(ColoredNotice, {
+    text: t.coloredNotice.text,
+    buttonTitle: t.coloredNotice.buttonTitle,
+    onButtonClick: openDialog
   }));
 };
+WaitlistSubscription.propTypes = {
+  coin: PropTypes.object.isRequired,
+  translations: PropTypes.object
+};
+
+var s = {"logo-carousel":"_CgRBd","logo-carousel-wrapper":"_cVsiX","slide":"_Gu7XN","logo-carousel-slide":"_hIh2D","clickable":"_VuuGX","easeIn":"_i56By"};
+
+/**
+ * LogoCarousel component renders a set of logos in a sliding carousel.
+ *
+ * @component
+ *
+ * @param {Object} props - The props object for this component.
+ * @param {Array<{logo: string, url: string}>} props.logos - Array of objects representing logos and their corresponding URLs.
+ */
+var LogoCarousel = function LogoCarousel(_ref) {
+  var _wrapperRef$current;
+  var logos = _ref.logos;
+  var _useState = useState(),
+    multiplier = _useState[0],
+    setMultiplier = _useState[1];
+  var _useState2 = useState(0),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var wrapperRef = useRef();
+  useEffect(function () {
+    var resizeObserver = new ResizeObserver(function (entries) {
+      return entries.map(function (entry) {
+        return setWidth(entry.contentRect.width);
+      });
+    });
+    if (wrapperRef.current) resizeObserver.observe(wrapperRef.current);
+    return function () {
+      if (wrapperRef.current) resizeObserver.unobserve(wrapperRef.current);
+    };
+  }, []);
+  useEffect(function () {
+    setMultiplier(wrapperRef.current.clientWidth / 120);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef, wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.clientWidth, logos, width]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: s["logo-carousel"]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: s["logo-carousel-wrapper"],
+    ref: wrapperRef,
+    style: {
+      animationDuration: multiplier + "s"
+    }
+  }, [].concat(Array(2)).map(function (z, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: s["logo-carousel-slide"],
+      key: "logo-carousel-slide-" + i
+    }, logos.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("a", {
+        key: "logo-carousel-slide-" + i + "-" + index,
+        className: item != null && item.url ? s["clickable"] : null,
+        href: item == null ? void 0 : item.url,
+        target: "_blank"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: item.logo,
+        alt: "logo"
+      }));
+    }));
+  })));
+};
+LogoCarousel.propTypes = {
+  logos: PropTypes.arrayOf(PropTypes.shape({
+    logo: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  })).isRequired
+};
 
 var PARAMETER_VALUES_SEPARATOR = "|*|"; // Sting that with high probability will not be in the user's data
 
@@ -7028,154 +7738,6 @@ var Protocol = function Protocol(protocolName) {
   this.protocol = protocolName;
 };
 
-/**
- * The model for cryptocurrency coins.
- *
- * WARNING: this class should not be instantiated directly. Use only predefined singleton Coin (or descendants) instances.
- */
-var Coin = /*#__PURE__*/function () {
-  /**
-   * Creates new coin
-   *
-   * @param latinName {string} the coin name in latin symbols like "Bitcoin"
-   * @param ticker {string} the coin symbol/ticker/code like 'BTC'. Always upper case. A unique coin identifier
-   * @param tickerPrintable {string} ticker but in printable format. Useful for tokens based on external blockchains
-   *        like ERC20 or TRC20. It is not friendly to display USDTERC20 or BUSDTRC20 - more neat options are just
-   *        USDT and BUSD. Note that you should always care about user's understanding of what coin he/she is working
-   *        with as printable ticker for USDTERC20 and USDTTRC20 are the same.
-   * @param digitsCountAfterComma {number} count of digits after the comma. E.g. 8 for bitcoin
-   * @param maxValue {number|null} max possible value for cryptocurrency. Null means that the currency has no max possible value
-   * @param atomName {string} name of the coin's atomic value. Like 'satoshi' for bitcoin
-   * @param mainnet {Network} main network for this coin
-   * @param testnet {Network} test network for this coin
-   * @param minConfirmations {number} min confirmations count to treat the coin's transaction confirmed
-   * @param payableEntityStringForFeeRate {string|null} the payable fee entity like byte for bitcoin or gas for ether if present
-   * @param feeOptionsTimeStringsSortedDesc {string[]} array of 4 strings for fee options when sending coins. Should be sorted from the highest time to the smallest
-   * @param feeRatesExpirationTimeMs {number} number of milliseconds to treat the fee rates as expired
-   * @param blockchain {Blockchain} blockchain object
-   * @param [protocol] {Protocol|null} token/coin protocol if relevant
-   * @param [tokenAddress] {string|null} address of contract of this token (if the coin is token)
-   * @param [doesUseLowerCaseAddresses] {boolean} flag to clarify whether we can use lower case addresses to ensure more robust comparisons
-   * @param [doesUseOutputs=false] {boolean} true if this coin uses inputs/outputs concept and false if it uses just balances
-   */
-  function Coin(latinName, ticker, tickerPrintable, digitsCountAfterComma, maxValue, atomName, mainnet, testnet, minConfirmations, payableEntityStringForFeeRate, feeOptionsTimeStringsSortedDesc, feeRatesExpirationTimeMs, blockchain, protocol, tokenAddress, doesUseLowerCaseAddresses, doesUseOutputs) {
-    if (protocol === void 0) {
-      protocol = null;
-    }
-    if (tokenAddress === void 0) {
-      tokenAddress = null;
-    }
-    if (doesUseLowerCaseAddresses === void 0) {
-      doesUseLowerCaseAddresses = true;
-    }
-    if (doesUseOutputs === void 0) {
-      doesUseOutputs = false;
-    }
-    this.latinName = latinName;
-    this.ticker = ticker;
-    this.tickerPrintable = tickerPrintable;
-    this.digits = digitsCountAfterComma;
-    this.maxValue = maxValue;
-    this.atomName = atomName;
-    this.mainnet = mainnet;
-    this.testnet = testnet;
-    this.minConfirmations = minConfirmations;
-    this.payableEntityStringForFeeRate = payableEntityStringForFeeRate;
-    this.feeOptionsTimeStringsSortedDesc = feeOptionsTimeStringsSortedDesc;
-    this.feeRatesExpirationTimeMs = feeRatesExpirationTimeMs;
-    this.protocol = protocol;
-    this.blockchain = blockchain;
-    // TODO: [bug, critical] use testnet property for testnet contract address as it blocks the app work in testnets
-    this.tokenAddress = tokenAddress;
-    this.feeCoin = this;
-    this._significantDigits = 8;
-    this.doesUseLowerCaseAddresses = doesUseLowerCaseAddresses;
-    this.doesUseOutputs = doesUseOutputs;
-  }
-
-  /**
-   * Sets fee coin
-   *
-   * @param feeCoin {Coin} some tokens use another coin to charge transaction fee as they work on top of some external
-   *        blockchain. So pass here the coin the token uses for fee charging. Like for ERC20 token the fee coin is ETH.
-   *        By default, the creating coin will be set as a value for this field.
-   */
-  var _proto = Coin.prototype;
-  _proto.setFeeCoin = function setFeeCoin(feeCoin) {
-    this.feeCoin = feeCoin;
-  }
-
-  /**
-   * Checks whether this coin uses another coin (blockchain) to charge fee for transactions (means works on base of
-   * some external blockchain).
-   *
-   * @return {boolean} true if this coin uses external blockchain to perform transactions and charge fee
-   */;
-  _proto.doesUseDifferentCoinFee = function doesUseDifferentCoinFee() {
-    return this.feeCoin !== this;
-  }
-
-  /**
-   * Converts the given atoms string/number to string representing the same amount in coin itself - floating point number
-   *
-   * @param atoms {string} atoms positive integer amount
-   * @return {string} coin amount floating point number as a string
-   */;
-  _proto.atomsToCoinAmount = function atomsToCoinAmount(atoms) {
-    throw new Error("Not implemented in base Coin");
-  }
-
-  /**
-   * Converts the given coins amount string/number to string representing the same amount in coin atoms - integer number
-   *
-   * @param coinsAmount {string} coins positive floating point amount
-   * @return {string} coin atoms amount integer number as a string
-   */;
-  _proto.coinAmountToAtoms = function coinAmountToAtoms(coinsAmount) {
-    throw new Error("Not implemented in base Coin");
-  }
-
-  /**
-   * Composes URL to view the tx with given id in the external blockchain explorer
-   *
-   * @param txId {string} id of transaction
-   * @return {string} URL string
-   */;
-  _proto.composeUrlToTransactionExplorer = function composeUrlToTransactionExplorer(txId) {
-    throw new Error("Not implemented in base Coin");
-  }
-
-  /**
-   * Most of the cryptocurrencies has specific fee rate or fee price metric. This value usually has specific measure
-   * like satoshi/byte or gWei/gas. This function adds the described denomination string to the given amount
-   * as a suffix and returns the result string ready to be show to a user.
-   *
-   * @param coinAtomsString {string} coin atoms positive integer amount
-   * @return {string} string of coin amount and fee rate units
-   */;
-  _proto.coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString = function coinAtomsFeeRateToCommonlyUsedAmountFormatWithDenominationString(coinAtomsString) {
-    throw new Error("Not implemented in base Coin");
-  }
-
-  /**
-   * Check whether this coin support transaction prioritisation during the sending process.
-   *
-   * @return {boolean} true if support transaction prioritisation and false otherwise
-   */;
-  _proto.doesSupportTransactionPrioritisation = function doesSupportTransactionPrioritisation() {
-    return Array.isArray(this.feeOptionsTimeStringsSortedDesc);
-  };
-  _proto.tickerAndProtocol = function tickerAndProtocol() {
-    try {
-      var _ref;
-      return "" + this.tickerPrintable + (this.protocol ? (_ref = " " + this.protocol.protocol) != null ? _ref : "" : "");
-    } catch (e) {
-      improveAndRethrow(e, "tickerAndProtocol");
-    }
-  };
-  return Coin;
-}();
-
 /**
  * TODO: [tests, critical] Ued by payments logic
  *
@@ -10277,6 +10839,13 @@ var SwapProvider = /*#__PURE__*/function () {
       }
     }
     return coinName;
+  }
+
+  /**
+   * @return {Promise<Partner[]>}
+   */;
+  _proto.getPartnersList = function getPartnersList() {
+    return Promise.resolve([]);
   };
   return SwapProvider;
 }();
@@ -10297,6 +10866,7 @@ SwapProvider.SWAP_STATUSES = {
   WAITING_FOR_PAYMENT: "waiting_for_payment",
   CONFIRMING: "confirming",
   PAYMENT_RECEIVED: "payment_received",
+  VERIFYING: "verifying",
   EXCHANGING: "exchanging",
   COMPLETED: "completed",
   REFUNDED: "refunded",
@@ -10304,6 +10874,12 @@ SwapProvider.SWAP_STATUSES = {
   FAILED: "failed"
 };
 
+var Partner = function Partner(name, url, logoUrl) {
+  this.name = name;
+  this.url = url;
+  this.logoUrl = logoUrl;
+};
+
 function _catch$3(body, recover) {
   try {
     var result = body();
@@ -10713,7 +11289,7 @@ var SwapspaceSwapProvider = /*#__PURE__*/function (_SwapProvider) {
       case "finished":
         return SwapProvider.SWAP_STATUSES.COMPLETED;
       case "verifying":
-        return SwapProvider.SWAP_STATUSES.EXCHANGING;
+        return SwapProvider.SWAP_STATUSES.VERIFYING;
       case "refunded":
         return SwapProvider.SWAP_STATUSES.REFUNDED;
       case "expired":
@@ -10805,6 +11381,29 @@ var SwapspaceSwapProvider = /*#__PURE__*/function (_SwapProvider) {
       return Promise.reject(e);
     }
   };
+  _proto.getPartnersList = function getPartnersList() {
+    try {
+      var _this7 = this;
+      return Promise.resolve(_catch$3(function () {
+        return Promise.resolve(_this7._fetchPartnersListIfNeeded()).then(function () {
+          return _this7._partners.filter(function (p) {
+            return !BANNED_PARTNERS.find(function (banned) {
+              return banned === p.path;
+            });
+          }).map(function (p) {
+            var _p$image;
+            return new Partner(p.name, null,
+            // No data in swapspace
+            p != null && (_p$image = p.image) != null && _p$image["default"] ? "https://storage.swapspace.co" + p.image["default"] : null);
+          });
+        });
+      }, function (e) {
+        improveAndRethrow(e, "swapspace.getPartnersList");
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return SwapspaceSwapProvider;
 }(SwapProvider);
 
@@ -11585,6 +12184,13 @@ var LetsExchangeSwapProvider = /*#__PURE__*/function (_SwapProvider) {
         throw new Error("Unknown LetsExchange status: " + status);
     }
   };
+  _proto.getPartnersList = function getPartnersList() {
+    try {
+      return Promise.resolve([new Partner("LetsExchange", "https://letsexchange.io/", "https://letsexchange.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F02e45813-b375-49d8-b2b0-092ce1847fff%2F55ebbc3c-4ee6-4fa7-847b-f673e82594f3%2Flets-logo-basic__on-light.svg?table=block&id=bec5952a-2f9c-47fb-8cc0-86e1391a7f60&spaceId=02e45813-b375-49d8-b2b0-092ce1847fff&userId=&cache=v2")]);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return LetsExchangeSwapProvider;
 }(SwapProvider);
 LetsExchangeSwapProvider.AFFILIATE_ID = "0zbj9hf7xg7jgdgv";
@@ -12290,6 +12896,39 @@ var PublicSwapService = /*#__PURE__*/function () {
       improveAndRethrow(e, "getExtraIdNameIfPresentForAsset");
     }
   };
+  _proto.getPartnersList = function getPartnersList() {
+    try {
+      var _temp17 = function _temp17(_result15) {
+        return _exit4 ? _result15 : [];
+      };
+      var _exit4;
+      var _this13 = this;
+      var _temp16 = _catch(function () {
+        var allPartners = [_this13._swapProvider, _this13._fixedSwapProvider].map(function (provider) {
+          return provider.getPartnersList();
+        });
+        return Promise.resolve(Promise.all(allPartners)).then(function (_Promise$all) {
+          allPartners = _Promise$all;
+          allPartners = allPartners.flat().flat();
+          var _allPartners$reduce = allPartners.reduce(function (prev, cur) {
+            if (!prev.find(function (partner) {
+              return partner.name.toLowerCase() === cur.name.toLowerCase();
+            })) {
+              prev.push(cur);
+            }
+            return prev;
+          }, []);
+          _exit4 = 1;
+          return _allPartners$reduce;
+        });
+      }, function (e) {
+        Logger.logError(e, "getPartnersList");
+      });
+      return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(_temp17) : _temp17(_temp16));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return PublicSwapService;
 }();
 PublicSwapService.PUBLIC_SWAP_CREATED_ANALYTICS_EVENT = "public_swap_created_event";
@@ -12306,5 +12945,5 @@ PublicSwapService.PUBLIC_SWAP_DETAILS_FAIL_REASONS = {
 };
 PublicSwapService._fiatDecimalsCount = FiatCurrenciesService.getCurrencyDecimalCountByCode("USD");
 
-export { AmountInput, AmountUtils, ApiGroup, ApiGroups, AssetIcon, AssetSelection, AxiosAdapter, BackgroundTitle, BaseSwapCreationInfo, Blockchain, Button, CLOSE_COLORS, COIN_PICKER_MODES, Cache, CacheAndConcurrentRequestsResolver, CachedRobustExternalApiCallerService, CancelProcessing, Close, Coin, CoinPicker, CoinPickerDialogStep, ConcurrentCalculationsMetadataHolder, DEFAULT_CRYPTO_DECIMAL_COUNT, DIALOG_SIZES, DIALOG_STEP_CLASS, DIALOG_TRANSITION_STEP_DURATION, DeterminedErrorDialogStep, Dialog, DialogButtons, DialogStep, EmailsApi, ExistingSwap, ExistingSwapWithFiatData, ExternalApiProvider, FALLBACK_ASSET_ICON_URL, FiatCurrenciesService, GoogleAnalyticsAdapter, ICON_ROTATE_OPTIONS, InformationMessage, Input, InputValuesProviders, IpAddressProvider, LineWithIconLink, LinesOfText, LinkButton, LoadingDots, Logger, LogsStorage, MixpanelAdapter, NoticeIcon, Protocol, PublicSwapService, QrCode, RadioButtonWithText, RobustExternalAPICallerService, SupportChat, SwapForm, SwapProvider, SwapUtils, SwapspaceSwapProvider, TOOLTIP_POSITIONS, Textarea, TitleBox, TitledLineWithIconLink, Tooltip, Validation, copyBrowserTextToClipboard, getQueryParameterSingleValue, getQueryParameterValues, handleClickOutside, improveAndRethrow, logErrorOrOutputToConsole, postponeExecution, removeQueryParameterAndValues, safeStringify, saveQueryParameterAndValues, useCallHandlingErrors, useIsHydrated, useReferredState };
+export { AmountInput, AmountUtils, ApiGroup, ApiGroups, AssetIcon, AssetSelection, AxiosAdapter, BackgroundTitle, BaseSwapCreationInfo, Blockchain, Button, CLOSE_COLORS, COIN_PICKER_MODES, Cache, CacheAndConcurrentRequestsResolver, CachedRobustExternalApiCallerService, CancelProcessing, Close, Coin, CoinPicker, CoinPickerDialogStep, ColoredNotice, ConcurrentCalculationsMetadataHolder, DEFAULT_CRYPTO_DECIMAL_COUNT, DIALOG_SIZES, DIALOG_STEP_CLASS, DIALOG_TRANSITION_STEP_DURATION, DeterminedErrorDialogStep, Dialog, DialogButtons, DialogStep, EmailsApi, ExistingSwap, ExistingSwapWithFiatData, ExternalApiProvider, FALLBACK_ASSET_ICON_URL, FiatCurrenciesService, GoogleAnalyticsAdapter, ICON_ROTATE_OPTIONS, InformationMessage, Input, InputValuesProviders, IpAddressProvider, LineWithIconLink, LinesOfText, LinkButton, LoadingDots, Logger, LogoCarousel, LogsStorage, MixpanelAdapter, NoticeIcon, Protocol, PublicSwapService, QrCode, RadioButtonWithText, RobustExternalAPICallerService, SearchableCoinsList, SupportChat, SwapForm, SwapProvider, SwapUtils, SwapspaceSwapProvider, TOOLTIP_POSITIONS, Textarea, TitleBox, TitledLineWithIconLink, Tooltip, Validation, WaitlistSubscription, copyBrowserTextToClipboard, getQueryParameterSingleValue, getQueryParameterValues, handleClickOutside, improveAndRethrow, logErrorOrOutputToConsole, postponeExecution, removeQueryParameterAndValues, safeStringify, saveQueryParameterAndValues, useCallHandlingErrors, useIsHydrated, useReferredState };
 //# sourceMappingURL=index.module.js.map