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

package/dist/index.module.js

@@ -4060,7 +4060,51 @@ AmountUtils.defaultCryptoParams = {
   numberPartsSeparator: true // Whether we add separators e.g. for 1000000 -> 1,000,000
 };
 
-// TODO: [dev] add JSDoc
+/**
+ * AmountInput component is used for inputting an amount in both cryptocurrency and fiat formats.
+ * It supports converting between the two based on the provided exchange rate.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label displayed above the input.
+ * @param {Function} props.handleCoinAmountChange - Callback function called when the coin amount changes.
+ * @param {Function} props.handleFiatAmountChange - Callback function called when the fiat amount changes.
+ * @param {Function} props.handleChangeAssetClick - Callback function called when the asset change button is clicked.
+ * @param {Function} props.handleBalanceValidationChange - Callback function called when balance validation changes.
+ * @param {boolean} props.disabled - Disables the input fields when true.
+ * @param {boolean} props.locked - Locks the input fields when true.
+ * @param {string} props.alertText - Text to be displayed as an alert below the input.
+ * @param {string} props.predefinedValue - Predefined value to be set in the input.
+ * @param {React.ReactNode} props.children - Any additional elements to be rendered inside the component.
+ * @param {string} props.ticker - The ticker code of the asset.
+ * @param {string} props.tickerPrintable - The printable version of the ticker code.
+ * @param {number} props.assetDecimalPlaces - The number of decimal places allowed for the asset.
+ * @param {Object} props.assetBalance - The balance of the asset in both fiat and crypto formats.
+ * @param {string} props.assetIconSrc - The source URL of the asset icon.
+ * @param {string} props.assetIconProtocolSrc - The source URL of the asset protocol icon.
+ * @param {string} props.fallbackAssetIconSrc - The source URL of the fallback asset icon.
+ * @param {boolean} props.isSendAll - Determines if the "Send All" button is shown.
+ * @param {Function} props.handleSendAllClick - Callback function called when the "Send All" button is clicked.
+ * @param {boolean} props.showBalance - Determines if the balance should be displayed.
+ * @param {boolean} props.showBalanceValidation - Determines if the balance validation should be shown.
+ * @param {boolean} props.showChangeAssetButton - Determines if the change asset button should be displayed.
+ * @param {string} props.changeAssetButtonProtocol - The protocol name to be displayed on the change asset button.
+ * @param {boolean} props.changeAssetButtonDisabled - Disables the change asset button when true.
+ * @param {boolean} props.upperFormPosition - Applies a style for the upper form position.
+ * @param {boolean} props.lowerFormPosition - Applies a style for the lower form position.
+ * @param {boolean} props.errorEncountered - Indicates if an error was encountered.
+ * @param {string} props.updateAssetInputTo - The value to update the asset input to.
+ * @param {boolean} props.estimateAmount - Indicates if the amount is estimated.
+ * @param {boolean} props.isLoading - Indicates if the component is in a loading state.
+ * @param {string} props.cryptoAssetToFiatRate - The conversion rate from crypto asset to fiat.
+ * @param {string} props.fiatCurrencyCode - The fiat currency code.
+ * @param {number} props.fiatCurrencyDecimals - The number of decimal places allowed for the fiat currency.
+ * @param {string} props.linkButtonActiveText - The text for the active state of the link button.
+ * @param {string} props.linkButtonInactiveText - The text for the inactive state of the link button.
+ * @param {string} props.balanceLoaderText - The text to display while the balance is loading.
+ * @param {string} props.fiatInputPlaceholderText - The placeholder text for the fiat input.
+ * @param {React.Ref} buttonForwardRef - A ref passed to the change asset button.
+ */
 var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -4161,25 +4205,28 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
     if (handlerEnabled === void 0) {
       handlerEnabled = true;
     }
-    try {
+    (function () {
       try {
-        var correctedAmount = InputValuesProviders.provideFormatOfFloatValueByInputString(newAmountString, assetDecimalPlaces);
-        setCoinAmountValue(correctedAmount);
-        if (handlerEnabled) handleCoinAmountChange(correctedAmount);
-        if (correctedAmount !== "" && cryptoAssetToFiatRate != null) {
-          var fiatAmount = BigNumber(correctedAmount).times(cryptoAssetToFiatRate).toFixed(fiatCurrencyDecimals);
-          setFiatAmountValue(fiatAmount);
-          handleFiatAmountChange(fiatAmount);
-        } else {
-          setFiatAmountValue("");
+        try {
+          var correctedAmount = InputValuesProviders.provideFormatOfFloatValueByInputString(newAmountString, assetDecimalPlaces);
+          if (correctedAmount !== newAmountString) return;
+          setCoinAmountValue(correctedAmount);
+          if (handlerEnabled) handleCoinAmountChange(correctedAmount);
+          if (correctedAmount !== "" && cryptoAssetToFiatRate != null) {
+            var fiatAmount = BigNumber(correctedAmount).times(cryptoAssetToFiatRate).toFixed(fiatCurrencyDecimals);
+            setFiatAmountValue(fiatAmount);
+            handleFiatAmountChange(fiatAmount);
+          } else {
+            setFiatAmountValue("");
+          }
+        } catch (e) {
+          setFiatAmountValue(null);
+          logErrorOrOutputToConsole(e);
         }
       } catch (e) {
-        setFiatAmountValue(null);
-        logErrorOrOutputToConsole(e);
+        Promise.reject(e);
       }
-    } catch (e) {
-      Promise.reject(e);
-    }
+    })();
     setInteractedWith(true);
   };
   var handleChangeAmountFiat = function handleChangeAmountFiat(newAmountString) {
@@ -4341,6 +4388,76 @@ var AmountInput = /*#__PURE__*/React.forwardRef(function (_ref, buttonForwardRef
     text: alertText
   }) : null);
 });
+AmountInput.propTypes = {
+  label: PropTypes.string,
+  handleCoinAmountChange: PropTypes.func,
+  handleFiatAmountChange: PropTypes.func,
+  handleChangeAssetClick: PropTypes.func,
+  handleBalanceValidationChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  locked: PropTypes.bool,
+  alertText: PropTypes.string,
+  predefinedValue: PropTypes.string,
+  children: PropTypes.node,
+  ticker: PropTypes.string,
+  tickerPrintable: PropTypes.string,
+  assetDecimalPlaces: PropTypes.number,
+  assetBalance: PropTypes.shape({
+    fiatAmount: PropTypes.string,
+    assetAmount: PropTypes.string
+  }),
+  assetIconSrc: PropTypes.string,
+  assetIconProtocolSrc: PropTypes.string,
+  fallbackAssetIconSrc: PropTypes.string,
+  isSendAll: PropTypes.bool,
+  handleSendAllClick: PropTypes.func,
+  showBalance: PropTypes.bool,
+  showBalanceValidation: PropTypes.bool,
+  showChangeAssetButton: PropTypes.bool,
+  changeAssetButtonProtocol: PropTypes.string,
+  changeAssetButtonDisabled: PropTypes.bool,
+  upperFormPosition: PropTypes.bool,
+  lowerFormPosition: PropTypes.bool,
+  errorEncountered: PropTypes.bool,
+  updateAssetInputTo: PropTypes.string,
+  estimateAmount: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  cryptoAssetToFiatRate: PropTypes.string,
+  fiatCurrencyCode: PropTypes.string,
+  fiatCurrencyDecimals: PropTypes.number,
+  linkButtonActiveText: PropTypes.string,
+  linkButtonInactiveText: PropTypes.string,
+  balanceLoaderText: PropTypes.string,
+  fiatInputPlaceholderText: PropTypes.string,
+  buttonForwardRef: PropTypes.object
+};
+AmountInput.defaultProps = {
+  label: "",
+  handleCoinAmountChange: function handleCoinAmountChange() {},
+  handleFiatAmountChange: function handleFiatAmountChange() {},
+  handleChangeAssetClick: function handleChangeAssetClick() {},
+  handleBalanceValidationChange: function handleBalanceValidationChange() {},
+  assetBalance: {
+    fiatAmount: null,
+    assetAmount: null
+  },
+  isSendAll: null,
+  handleSendAllClick: function handleSendAllClick() {},
+  showBalance: false,
+  showBalanceValidation: false,
+  showChangeAssetButton: false,
+  changeAssetButtonDisabled: false,
+  updateAssetInputTo: null,
+  estimateAmount: false,
+  isLoading: false,
+  cryptoAssetToFiatRate: null,
+  fiatCurrencyCode: null,
+  fiatCurrencyDecimals: null,
+  linkButtonActiveText: null,
+  linkButtonInactiveText: null,
+  balanceLoaderText: null,
+  fiatInputPlaceholderText: null
+};
 
 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"};
 
@@ -7579,7 +7696,7 @@ WaitlistSubscription.propTypes = {
   translations: PropTypes.object
 };
 
-var s = {"logo-carousel":"_CgRBd","logo-carousel-wrapper":"_cVsiX","slide":"_Gu7XN","logo-carousel-slide":"_hIh2D","clickable":"_VuuGX","easeIn":"_i56By"};
+var s = {"logo-carousel":"_CgRBd","logo-carousel-wrapper":"_cVsiX","slide":"_Gu7XN","logo-carousel-slide":"_hIh2D","clickable":"_VuuGX","grayscale":"_P9ByJ","easeIn":"_i56By"};
 
 /**
  * LogoCarousel component renders a set of logos in a sliding carousel.
@@ -7588,10 +7705,13 @@ var s = {"logo-carousel":"_CgRBd","logo-carousel-wrapper":"_cVsiX","slide":"_Gu7
  *
  * @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.
+ * @param {boolean} props.grayscale - Enable the grayscale mode for the logos.
  */
 var LogoCarousel = function LogoCarousel(_ref) {
   var _wrapperRef$current;
-  var logos = _ref.logos;
+  var logos = _ref.logos,
+    _ref$grayscale = _ref.grayscale,
+    grayscale = _ref$grayscale === void 0 ? false : _ref$grayscale;
   var _useState = useState(),
     multiplier = _useState[0],
     setMultiplier = _useState[1];
@@ -7629,7 +7749,7 @@ var LogoCarousel = function LogoCarousel(_ref) {
     }, logos.map(function (item, index) {
       return /*#__PURE__*/React.createElement("a", {
         key: "logo-carousel-slide-" + i + "-" + index,
-        className: item != null && item.url ? s["clickable"] : null,
+        className: [item != null && item.url ? s["clickable"] : null, grayscale ? s["grayscale"] : null].join(" "),
         href: item == null ? void 0 : item.url,
         target: "_blank"
       }, /*#__PURE__*/React.createElement("img", {
@@ -7642,8 +7762,12 @@ var LogoCarousel = function LogoCarousel(_ref) {
 LogoCarousel.propTypes = {
   logos: PropTypes.arrayOf(PropTypes.shape({
     logo: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired
-  })).isRequired
+    url: PropTypes.string
+  })).isRequired,
+  grayscale: PropTypes.bool
+};
+LogoCarousel.defaultProps = {
+  grayscale: false
 };
 
 var PARAMETER_VALUES_SEPARATOR = "|*|"; // Sting that with high probability will not be in the user's data
@@ -10166,6 +10290,36 @@ var MixpanelAdapter = /*#__PURE__*/function () {
   return MixpanelAdapter;
 }();
 
+var MetrikaAdapter = /*#__PURE__*/function () {
+  function MetrikaAdapter() {}
+  /**
+   * Sends reachGoal to Metrika
+   *
+   * @param METRIKA_ID {string}
+   * @param goalName {string}
+   * @param [usdPrice] {string|number}
+   */
+  MetrikaAdapter.callMetrikaReachGoal = function callMetrikaReachGoal(METRIKA_ID, goalName, usdPrice) {
+    if (usdPrice === void 0) {
+      usdPrice = null;
+    }
+    try {
+      if (window.ym) {
+        console.log("Sending metrika goal reached: ", goalName, String(usdPrice));
+        window.ym(METRIKA_ID, "reachGoal", goalName, usdPrice != null ? {
+          order_price: usdPrice,
+          currency: "USD"
+        } : {});
+      } else {
+        Logger.logError(null, "callMetrikaReachGoal", "No metrika found");
+      }
+    } catch (e) {
+      Logger.logError(e, "callMetrikaReachGoal", "Failed to call metrika: " + goalName + " " + usdPrice);
+    }
+  };
+  return MetrikaAdapter;
+}();
+
 /**
  * Utils class needed to perform cancelling of axios request inside some process.
  * Provides cancel state and axios token for HTTP requests
@@ -10874,9 +11028,8 @@ SwapProvider.SWAP_STATUSES = {
   FAILED: "failed"
 };
 
-var Partner = function Partner(name, url, logoUrl) {
+var Partner = function Partner(name, logoUrl) {
   this.name = name;
-  this.url = url;
   this.logoUrl = logoUrl;
 };
 
@@ -11386,16 +11539,16 @@ var SwapspaceSwapProvider = /*#__PURE__*/function (_SwapProvider) {
       var _this7 = this;
       return Promise.resolve(_catch$3(function () {
         return Promise.resolve(_this7._fetchPartnersListIfNeeded()).then(function () {
-          return _this7._partners.filter(function (p) {
+          var swapspacePartners = _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);
+            return new Partner(p.name, p != null && (_p$image = p.image) != null && _p$image["default"] ? "https://storage.swapspace.co" + p.image["default"] : null);
           });
+          var swapspaceItself = new Partner("Swapspace", "https://storage.swapspace.co/static/logo-vertical-black.svg");
+          return [swapspaceItself].concat(swapspacePartners);
         });
       }, function (e) {
         improveAndRethrow(e, "swapspace.getPartnersList");
@@ -12186,7 +12339,7 @@ var LetsExchangeSwapProvider = /*#__PURE__*/function (_SwapProvider) {
   };
   _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")]);
+      return Promise.resolve([new Partner("LetsExchange", "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);
     }
@@ -12945,5 +13098,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, 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 };
+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, MetrikaAdapter, 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