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

package/src/common-apis/adapters/analyticsAdapters/metrikaAdapter.js

@@ -0,0 +1,28 @@
+import { Logger } from "../../utils/logging/logger.js";
+
+export class MetrikaAdapter {
+    /**
+     * Sends reachGoal to Metrika
+     *
+     * @param METRIKA_ID {string}
+     * @param goalName {string}
+     * @param [usdPrice] {string|number}
+     */
+    static callMetrikaReachGoal(METRIKA_ID, goalName, 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);
+        }
+    }
+}

package/src/index.js

@@ -69,6 +69,7 @@ export { IpAddressProvider } from "./common-apis/external-apis/ipAddressProvider
 
 export { GoogleAnalyticsAdapter } from "./common-apis/adapters/analyticsAdapters/googleAnalyticsAdapter.js";
 export { MixpanelAdapter } from "./common-apis/adapters/analyticsAdapters/mixpanelAdapter.js";
+export { MetrikaAdapter } from "./common-apis/adapters/analyticsAdapters/metrikaAdapter.js";
 
 // Robust data retriever service and related APIs (to be extracted later to dedicated lib)
 export { CacheAndConcurrentRequestsResolver } from "./robust-api-caller/cacheAndConcurrentRequestsResolver.js";

package/src/swaps-lib/external-apis/letsExchangeSwapProvider.js

@@ -478,7 +478,6 @@ export class LetsExchangeSwapProvider extends SwapProvider {
         return [
             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"
             ),
         ];

package/src/swaps-lib/external-apis/swapspaceSwapProvider.js

@@ -555,16 +555,17 @@ export class SwapspaceSwapProvider extends SwapProvider {
     async getPartnersList() {
         try {
             await this._fetchPartnersListIfNeeded();
-            return this._partners
+            const swapspacePartners = this._partners
                 .filter(p => !BANNED_PARTNERS.find(banned => banned === p.path))
                 .map(
                     p =>
-                        new Partner(
-                            p.name,
-                            null, // No data in swapspace
-                            p?.image?.default ? "https://storage.swapspace.co" + p.image.default : null
-                        )
+                        new Partner(p.name, p?.image?.default ? "https://storage.swapspace.co" + p.image.default : null)
                 );
+            const swapspaceItself = new Partner(
+                "Swapspace",
+                "https://storage.swapspace.co/static/logo-vertical-black.svg"
+            );
+            return [swapspaceItself, ...swapspacePartners];
         } catch (e) {
             improveAndRethrow(e, "swapspace.getPartnersList");
         }

package/src/swaps-lib/models/partner.js

@@ -1,7 +1,6 @@
 export class Partner {
-    constructor(name, url, logoUrl) {
+    constructor(name, logoUrl) {
         this.name = name;
-        this.url = url;
         this.logoUrl = logoUrl;
     }
 }

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { BigNumber } from "bignumber.js";
 import { CSSTransition } from "react-transition-group";
+import PropTypes from "prop-types";
 
 import s from "./amount-input.module.scss";
 import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
@@ -14,7 +15,51 @@ import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 
-// 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.
+ */
 export const AmountInput = React.forwardRef(
     (
         {
@@ -86,6 +131,7 @@ export const AmountInput = React.forwardRef(
                         newAmountString,
                         assetDecimalPlaces
                     );
+                    if (correctedAmount !== newAmountString) return;
                     setCoinAmountValue(correctedAmount);
                     if (handlerEnabled) handleCoinAmountChange(correctedAmount);
 
@@ -332,3 +378,72 @@ export const AmountInput = React.forwardRef(
         );
     }
 );
+
+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: () => {},
+    handleFiatAmountChange: () => {},
+    handleChangeAssetClick: () => {},
+    handleBalanceValidationChange: () => {},
+    assetBalance: { fiatAmount: null, assetAmount: null },
+    isSendAll: null,
+    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,
+};

package/src/ui-kit/components/molecules/LogoCarousel/LogoCarousel.jsx

@@ -10,8 +10,9 @@ import s from "./logo-carousel.module.scss";
  *
  * @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.
  */
-export const LogoCarousel = ({ logos }) => {
+export const LogoCarousel = ({ logos, grayscale = false }) => {
     const [multiplier, setMultiplier] = useState();
     const [width, setWidth] = useState(0);
 
@@ -42,7 +43,9 @@ export const LogoCarousel = ({ logos }) => {
                         {logos.map((item, index) => (
                             <a
                                 key={"logo-carousel-slide-" + i + "-" + index}
-                                className={item?.url ? s["clickable"] : null}
+                                className={[item?.url ? s["clickable"] : null, grayscale ? s["grayscale"] : null].join(
+                                    " "
+                                )}
                                 href={item?.url}
                                 target="_blank"
                             >
@@ -60,7 +63,12 @@ LogoCarousel.propTypes = {
     logos: PropTypes.arrayOf(
         PropTypes.shape({
             logo: PropTypes.string.isRequired,
-            url: PropTypes.string.isRequired,
+            url: PropTypes.string,
         })
     ).isRequired,
+    grayscale: PropTypes.bool,
+};
+
+LogoCarousel.defaultProps = {
+    grayscale: false,
 };

package/src/ui-kit/components/molecules/LogoCarousel/logo-carousel.module.scss

@@ -62,7 +62,7 @@
             align-items: center;
 
             &.clickable {
-                transition: 0.1s $transitionEaseOut;
+                transition: 0.2s $transitionEaseOut;
                 transform: scale(1);
 
                 @media (hover: hover) {
@@ -77,6 +77,25 @@
                 }
             }
 
+            &.grayscale {
+                transition: 0.2s all $transitionEaseOut;
+                filter: grayscale(1) brightness(1.5) contrast(0.1) sepia(1) hue-rotate(160deg) grayscale(0.5);
+                opacity: 0.3;
+
+                @media (hover: hover) {
+                    &:hover {
+                        filter: grayscale(0) contrast(1);
+                        opacity: 1;
+                    }
+                }
+
+                &:active {
+                    transition: 0.02s $transitionEaseOut;
+                    filter: grayscale(0) contrast(1);
+                    opacity: 1;
+                }
+            }
+
             img {
                 height: $height;
                 animation: easeIn 1s $transitionEaseOut both;