@rabbitio/ui-kit 1.0.0-beta.82 → 1.0.0-beta.84

package/src/ui-kit/components/molecules/AmountInput/amount-input.module.scss

@@ -9,6 +9,7 @@
     gap: 10px;
     justify-content: space-between;
     transition: 0.2s box-shadow ease;
+    height: 86.5px;
 
     &.upper-form-position {
         border-bottom-left-radius: 4px;
@@ -152,6 +153,38 @@
             align-items: center;
             font-size: 14px;
 
+            &-enter {
+                opacity: 0;
+                margin-top: -19px;
+                transform: translateY(24px);
+            }
+
+            &-enter-active {
+                opacity: 1;
+                transition:
+                    opacity 0.2s $transitionEaseOut,
+                    margin-top 0.2s $transitionEaseOut,
+                    transform 0.2s $transitionEaseOut;
+                margin-top: 0;
+                transform: translateY(0);
+            }
+
+            &-exit {
+                opacity: 1;
+                margin-top: 0;
+                transform: translateY(0);
+            }
+
+            &-exit-active {
+                opacity: 0;
+                transition:
+                    opacity 0.1s $transitionEaseOut,
+                    margin-top 0.2s $transitionEaseOut,
+                    transform 0.2s $transitionEaseOut;
+                margin-top: -19px;
+                transform: translateY(24px);
+            }
+
             &-currency,
             &-input,
             &-placeholder {

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

@@ -15,6 +15,7 @@ import { FALLBACK_ASSET_ICON_URL } from "../../../../common-apis/globalConstants
 import { AssetIcon } from "../../atoms/AssetIcon/AssetIcon.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
 import { LoadingDots } from "../../atoms/LoadingDots/LoadingDots.jsx";
+import { SearchableCoinsList } from "../SearchableCoinsList/SearchableCoinsList.jsx";
 
 export const COIN_PICKER_MODES = {
     BUTTON: "BUTTON",
@@ -92,7 +93,6 @@ export const CoinPicker = ({
     const handleError = useCallHandlingErrors();
 
     const [coins, setCoins] = useState(null);
-    const [filteredCoins, setFilteredCoins] = useState([]);
     const [initiallyEnabledCoins, setInitiallyEnabledCoins] = useReferredState({});
     const [currentlyEnabledCoins, setCurrentlyEnabledCoins] = useReferredState({});
     const [searchFieldValue, setSearchFieldValue] = useState("");
@@ -102,9 +102,9 @@ export const CoinPicker = ({
     const [coinsContent, setCoinsContent] = useState(null);
     const [isCoinsDataReloadable, setIsCoinsDataReloadable] = useState(false);
 
-    const [limitedCoinsNumber, setLimitedCoinsNumber] = useState(0);
-    const [displayedCoins, setDisplayedCoins] = useState([]);
     const [isListFull, setIsListFull] = useState(true);
+    const [isSearchResultEmpty, setIsSearchResultEmpty] = useState(false);
+    const [triggerLoadMoreCoins, setTriggerLoadMoreCoins] = useState(0);
 
     const searchRef = useRef();
     const scrollContainerRef = useRef();
@@ -158,58 +158,11 @@ export const CoinPicker = ({
         handleClick(coin.ticker);
     };
 
-    const handleSearchAsset = value => {
-        // TODO: [refactoring, high] use unified search function. task_id=be0475316f374dd4a926c948d969e704
-        setSearchFieldValue(value); // Trim the input to handle leading/trailing spaces
-        const searchTerm = value.trim().toLowerCase();
-        if (searchTerm !== "") {
-            const searchWords = searchTerm.split(/\s+/); // Split search terms on whitespace
-
-            const filteredAndSortedCoins = coins
-                .filter(coin => {
-                    // Check if all search words are found in any of the given properties
-                    return searchWords.every(
-                        word =>
-                            coin?.latinName?.toLowerCase().includes(word) ||
-                            coin?.ticker?.toLowerCase().includes(word) ||
-                            coin?.tickerPrintable?.toLowerCase().includes(word)
-                    );
-                })
-                .sort((a, b) => {
-                    // Check for exact matches
-                    const aMatch =
-                        a.latinName.toLowerCase() === searchTerm ||
-                        a.ticker.toLowerCase() === searchTerm ||
-                        a.tickerPrintable.toLowerCase() === searchTerm
-                            ? 1
-                            : 0;
-                    const 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
-        }
-    };
-
     const loadCoinsAndSaveToState = () => {
         (async () => {
             try {
                 const data = loadCoinsAndContent ? await loadCoinsAndContent() : await defaultLoadCoinsAndContent();
                 setCoins(data.coins);
-                setFilteredCoins(data.coins);
                 setCoinsContent(data.content);
                 setIsCoinsDataReloadable(!!data.isCoinsDataReloadable);
             } catch (e) {
@@ -256,30 +209,6 @@ export const CoinPicker = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [search, searchAdaptive, coins]);
 
-    useEffect(() => {
-        if (filteredCoins?.length > partialLoadingIncrement && partialLoadingEnabled) {
-            setLimitedCoinsNumber(partialLoadingIncrement);
-        } else {
-            setLimitedCoinsNumber(0);
-            setDisplayedCoins(filteredCoins);
-            setIsListFull(true);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredCoins]);
-
-    useEffect(() => {
-        if (limitedCoinsNumber > 0) {
-            const coinsToDisplay = filteredCoins.slice(0, limitedCoinsNumber);
-            setDisplayedCoins(coinsToDisplay);
-            setIsListFull(coinsToDisplay.length === filteredCoins.length);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [limitedCoinsNumber]);
-
-    const displayMoreCoins = () => {
-        setLimitedCoinsNumber(prev => prev + partialLoadingIncrement);
-    };
-
     const skeleton = () => {
         let skeletonItems = [];
         for (let i = 0; i < skeletonItemsCount; i++) {
@@ -317,11 +246,10 @@ export const CoinPicker = ({
             setScrollWrapperClass(s["reached-bottom"]);
     };
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(handleScroll, []);
+    const displayMoreCoins = () => setTriggerLoadMoreCoins(prev => prev + 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(handleScroll, [filteredCoins]);
+    useEffect(handleScroll, []);
 
     const shouldShowSkeleton = coins == null;
 
@@ -332,7 +260,10 @@ export const CoinPicker = ({
                     <div className={s["coin-picker-search"]}>
                         <Input
                             value={searchFieldValue}
-                            onChange={e => handleSearchAsset(e.target.value)}
+                            onChange={e => {
+                                setSearchFieldValue(e.target.value);
+                                handleScroll();
+                            }}
                             placeholder={texts.searchPlaceholder}
                             isSmallHeight={true}
                             clearButton
@@ -357,61 +288,82 @@ export const CoinPicker = ({
                         onScroll={handleScroll}
                     >
                         <div className={s["coin-picker-wrapper-content-assets"]}>
-                            {shouldShowSkeleton
-                                ? skeleton()
-                                : displayedCoins.map((coin, index) => {
-                                      const { assetIconSrc, assetIconProtocolSrc } = coinToIconPaths(coin);
-
-                                      return (
-                                          <div
-                                              className={s["item"]}
-                                              key={`picker-${coin.ticker}-${index}`}
-                                              onClick={e => handleError(() => handleCoinClick(coin), e)}
-                                          >
-                                              <div
-                                                  className={
-                                                      s["link"] +
-                                                      (currentlyEnabledCoins.current[coin.ticker] !==
-                                                      initiallyEnabledCoins.current[coin.ticker]
-                                                          ? " " + s["outline"]
-                                                          : "")
-                                                  }
-                                              >
-                                                  <AssetIcon
-                                                      assetIconSrc={assetIconSrc}
-                                                      assetIconProtocolSrc={assetIconProtocolSrc}
-                                                      fallbackSrc={FALLBACK_ASSET_ICON_URL}
-                                                  />
-                                                  <div className={s["content"]} key={coin.ticker}>
-                                                      <p className={s["name"]}>{coin.latinName}</p>
-                                                      <p className={s["amount"]}>
-                                                          {coinsContent?.find(i => i.coin === coin)?.subtitle ?? ""}
-                                                      </p>
-                                                  </div>
-                                                  {mode === COIN_PICKER_MODES.BUTTON ? (
-                                                      <div className={s["arrow"]}>
-                                                          <ArrowIcon />
-                                                      </div>
-                                                  ) : mode === COIN_PICKER_MODES.CHECKBOX ? (
-                                                      <div className={s["toggle-container"]}>
-                                                          <RadioButtonWithText
-                                                              onStateChange={resetButtonLoader =>
-                                                                  handleToggleClick(coin.ticker, resetButtonLoader)
-                                                              }
-                                                              isSwitchedOn={currentlyEnabledCoins.current[coin.ticker]}
-                                                              id={index}
-                                                          />
-                                                      </div>
-                                                  ) : (
-                                                      ""
-                                                  )}
-                                              </div>
-                                          </div>
-                                      );
-                                  })}
+                            {shouldShowSkeleton ? (
+                                skeleton()
+                            ) : (
+                                <SearchableCoinsList
+                                    searchQuery={searchFieldValue}
+                                    onListUpdated={() => handleScroll()}
+                                    setIsListFull={setIsListFull}
+                                    setIsSearchResultEmpty={setIsSearchResultEmpty}
+                                    triggerLoadMoreCoins={triggerLoadMoreCoins}
+                                    coinsList={allCoins}
+                                    coinsBundle={allCoins.map((coin, index) => {
+                                        return {
+                                            coin: coin,
+                                            component: () => {
+                                                const { assetIconSrc, assetIconProtocolSrc } = coinToIconPaths(coin);
+
+                                                return (
+                                                    <div
+                                                        className={s["item"]}
+                                                        key={`picker-${coin.ticker}-${index}`}
+                                                        onClick={e => handleError(() => handleCoinClick(coin), e)}
+                                                    >
+                                                        <div
+                                                            className={
+                                                                s["link"] +
+                                                                (currentlyEnabledCoins.current[coin.ticker] !==
+                                                                initiallyEnabledCoins.current[coin.ticker]
+                                                                    ? " " + s["outline"]
+                                                                    : "")
+                                                            }
+                                                        >
+                                                            <AssetIcon
+                                                                assetIconSrc={assetIconSrc}
+                                                                assetIconProtocolSrc={assetIconProtocolSrc}
+                                                                fallbackSrc={FALLBACK_ASSET_ICON_URL}
+                                                            />
+                                                            <div className={s["content"]} key={coin.ticker}>
+                                                                <p className={s["name"]}>{coin.latinName}</p>
+                                                                <p className={s["amount"]}>
+                                                                    {coinsContent?.find(i => i.coin === coin)
+                                                                        ?.subtitle ?? ""}
+                                                                </p>
+                                                            </div>
+                                                            {mode === COIN_PICKER_MODES.BUTTON ? (
+                                                                <div className={s["arrow"]}>
+                                                                    <ArrowIcon />
+                                                                </div>
+                                                            ) : mode === COIN_PICKER_MODES.CHECKBOX ? (
+                                                                <div className={s["toggle-container"]}>
+                                                                    <RadioButtonWithText
+                                                                        onStateChange={resetButtonLoader =>
+                                                                            handleToggleClick(
+                                                                                coin.ticker,
+                                                                                resetButtonLoader
+                                                                            )
+                                                                        }
+                                                                        isSwitchedOn={
+                                                                            currentlyEnabledCoins.current[coin.ticker]
+                                                                        }
+                                                                        id={index}
+                                                                    />
+                                                                </div>
+                                                            ) : (
+                                                                ""
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            },
+                                        };
+                                    })}
+                                />
+                            )}
                         </div>
 
-                        {filteredCoins?.length === 0 && searchFieldValue !== "" ? (
+                        {isSearchResultEmpty ? (
                             <div className={s["coin-picker-wrapper-content-asset-not-found"]}>
                                 <h6>{texts.noAssetsMessage}</h6>
                             </div>
@@ -425,7 +377,7 @@ export const CoinPicker = ({
                                     size="sm"
                                     loader={false}
                                     content={texts.loadMoreButton}
-                                    onClick={displayMoreCoins}
+                                    onClick={() => displayMoreCoins()}
                                     handleError={handleError}
                                 />
                             </div>

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

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./colored-notice.module.scss";
+
+import { Button } from "../../atoms/buttons/Button/Button";
+
+/**
+ * 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.
+ */
+export const ColoredNotice = ({
+    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+    buttonTitle,
+    onButtonClick = () => {},
+}) => {
+    return (
+        <div className={s["colored-notice"]}>
+            <p className={s["colored-notice-text"]}>{text}</p>
+            {buttonTitle ? (
+                <Button mode="primary" size="sm" content={buttonTitle} loader={false} onClick={onButtonClick} />
+            ) : null}
+        </div>
+    );
+};
+
+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: () => {},
+};

package/src/ui-kit/components/molecules/ColoredNotice/colored-notice.module.scss

@@ -0,0 +1,20 @@
+@use "../../../assets/styles/index" as *;
+
+.colored-notice {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: Margin("3");
+    justify-content: space-between;
+    padding: Padding("5");
+    border-radius: $borderRadius;
+    background-color: LightColor(army-20);
+    width: 100%;
+    box-shadow: 0px 0px 0px 1px rgba(SolidColor("army"), 0.1) inset;
+
+    &-text {
+        color: SolidColor("tosca");
+        margin: 0;
+        text-align: left;
+    }
+}

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

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./logo-carousel.module.scss";
+
+/**
+ * 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.
+ */
+export const LogoCarousel = ({ logos }) => {
+    return (
+        <div className={s["logo-carousel"]}>
+            {[...Array(2)].map((z, i) => (
+                <div className={s["logo-carousel-slide"]} key={"logo-carousel-slide-" + i}>
+                    {logos.map((item, index) => (
+                        <a key={"logo-carousel-slide-" + i + "-" + index} href={item.url} target="_blank">
+                            <img src={item.logo} alt="logo" />
+                        </a>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+LogoCarousel.propTypes = {
+    logos: PropTypes.arrayOf(
+        PropTypes.shape({
+            logo: PropTypes.string.isRequired,
+            url: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+};

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

@@ -0,0 +1,64 @@
+@use "../../../assets/styles/index" as *;
+
+@keyframes slide {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+.logo-carousel {
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    gap: clamp(30px, 5vw, 40px);
+    box-sizing: border-box;
+    mask-image: linear-gradient(
+        90deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 1) 60px,
+        rgba(0, 0, 0, 1) calc(100% - 60px),
+        rgba(0, 0, 0, 0) 100%
+    );
+
+    &:hover &-slide {
+        animation-play-state: paused;
+    }
+
+    &-slide {
+        display: inline-block;
+        animation: 25s slide infinite linear;
+        display: inherit;
+        align-items: inherit;
+        justify-content: inherit;
+        gap: inherit;
+
+        a {
+            display: flex;
+            align-items: center;
+            transition: 0.1s $transitionEaseOut;
+            transform: scale(1);
+
+            @media (hover: hover) {
+                &:hover {
+                    transform: scale(1.02);
+                }
+            }
+
+            &:active {
+                transition: 0.02s $transitionEaseOut;
+                transform: scale(0.99);
+            }
+
+            img {
+                height: clamp(30px, 5vw, 35px);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import { useReferredState } from "../../../hooks/useReferredState";
+import PropTypes from "prop-types";
+import { Coin } from "../../../../common-apis/models/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.
+ */
+export const SearchableCoinsList = ({
+    coinsList,
+    coinsBundle,
+    searchQuery,
+    partialLoadingEnabled = true,
+    partialLoadingIncrement = 100,
+    onListUpdated = () => {},
+    setIsListFull = () => {},
+    setIsSearchResultEmpty = () => {},
+    triggerLoadMoreCoins,
+}) => {
+    const [filteredCoins, setFilteredCoins] = useState([]);
+    const [limitedCoinsNumber, setLimitedCoinsNumber] = useReferredState(0);
+    const [displayedCoins, setDisplayedCoins] = useState([]);
+
+    const handleSearchAsset = value => {
+        const searchTerm = value.trim().toLowerCase();
+        if (searchTerm !== "") {
+            const searchWords = searchTerm.split(/\s+/); // Split search terms on whitespace
+
+            const filteredAndSortedCoins = coinsList
+                .filter(coin => {
+                    // Check if all search words are found in any of the given properties
+                    return searchWords.every(
+                        word =>
+                            coin?.latinName?.toLowerCase().includes(word) ||
+                            coin?.ticker?.toLowerCase().includes(word) ||
+                            coin?.tickerPrintable?.toLowerCase().includes(word)
+                    );
+                })
+                .sort((a, b) => {
+                    // Check for exact matches
+                    const aMatch =
+                        a.latinName.toLowerCase() === searchTerm ||
+                        a.ticker.toLowerCase() === searchTerm ||
+                        a.tickerPrintable.toLowerCase() === searchTerm
+                            ? 1
+                            : 0;
+                    const 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
+        }
+    };
+
+    const updateDisplayedCoins = () => {
+        const fullList = limitedCoinsNumber.current >= filteredCoins.length;
+        setDisplayedCoins(fullList ? filteredCoins : filteredCoins.slice(0, limitedCoinsNumber.current));
+        setIsListFull(fullList);
+    };
+
+    const displayMoreCoins = () => {
+        setLimitedCoinsNumber(prev => prev + partialLoadingIncrement);
+        updateDisplayedCoins();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => onListUpdated(), [displayedCoins]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => displayMoreCoins(), [triggerLoadMoreCoins]);
+
+    useEffect(() => {
+        if (filteredCoins?.length > partialLoadingIncrement && partialLoadingEnabled) {
+            setLimitedCoinsNumber(partialLoadingIncrement);
+            updateDisplayedCoins();
+        } else {
+            setLimitedCoinsNumber(0);
+            setDisplayedCoins(filteredCoins);
+            setIsListFull(true);
+        }
+        setIsSearchResultEmpty(filteredCoins?.length === 0 && searchQuery !== "");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filteredCoins]);
+
+    useEffect(() => {
+        if (coinsBundle != null) handleSearchAsset(searchQuery);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [coinsList, searchQuery]);
+
+    return displayedCoins
+        .map(coin => coinsBundle.find(bundleItem => bundleItem.coin.ticker === coin.ticker).component)
+        .map(Item => <Item />);
+};
+
+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: () => {},
+    setIsListFull: () => {},
+    setIsSearchResultEmpty: () => {},
+};