@rabbitio/ui-kit 1.0.0-beta.6 → 1.0.0-beta.61

package/src/components/molecules/CoinPicker/CoinPicker.jsx

@@ -0,0 +1,642 @@
+import React, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+
+import s from "./coin-picker.module.scss";
+import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
+
+import { useReferredState } from "../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+
+import { RadioButtonWithText } from "../../atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx";
+import { Input } from "../../atoms/Input/Input.jsx";
+import { InformationMessage } from "../../atoms/InformationMessage/InformationMessage.jsx";
+import { FALLBACK_ASSET_ICON_URL } from "../../../constants/globalConstants.jsx";
+import { AssetIcon } from "../../atoms/AssetIcon/AssetIcon.jsx";
+import { Button } from "../../atoms/buttons/Button/Button.jsx";
+import { LoadingDots } from "../../atoms/LoadingDots/LoadingDots.jsx";
+
+export const COIN_PICKER_MODES = {
+    BUTTON: "BUTTON",
+    CHECKBOX: "CHECKBOX",
+};
+
+const defaultTexts = {
+    searchPlaceholder: "Search..",
+    noAssetsMessage: "No matching assets found",
+    loadMoreButton: "Load more",
+    assetSuggestionMessage: {
+        part1: "Need more?",
+        part2: "Let us know",
+        part3: "which coin to add next.",
+    },
+};
+
+/**
+ * Component that can be used either for one-time selection of an asset, or
+ * for a multi-selection in a CHECKBOX format.
+ * CoinPicker can show all assets with a subtitle.
+ *
+ * Usage rules:
+ * 1. for CHECKBOX mode
+ *   - you MUST pass allCoins, initiallyEnabledCoinsList and setCoinPickerValue
+ * 2. for BUTTON mode
+ *   - you MUST NOT pass setCoinPickerValue (it will be ignored)
+ *   - if you don't pass loadCoinsAndContent function, you MUST pass allCoins
+ *
+ * @param [mode] {string} one-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES
+ * @param [allCoins] {Coin[]} all coins despite on their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function
+ * @param [initiallyEnabledCoinsList] {Coin[]} - pass this when using CHECKBOX mode
+ * @param [handleClick] {function} handler function for the event when an asset is clicked
+ * @param [triggerToReloadData] {number|undefined} trigger to reload the component when some related data changes
+ * @param [search=false] {boolean} whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height
+ * @param [searchAdaptive=true] {boolean} show search bar only after six assets in the list
+ * @param [setCoinPickerValue] {function} is called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode
+ * @param [setCoinPickerListChanged] {function} is called with the only parameter (flag signalling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode
+ * @param [loadCoinsAndContent] {function} optional, you can provide it if you need custom logic for coins list composing or custom subtitles
+ *                              {
+ *                                  coins: Coin[],
+ *                                  content: { coin: Coin, subtitle: string }[],
+ *                                  isCoinsDataReloadable: boolean
+ *                              }
+ * @param [showRequestMissingCoinsInfoMessage=true] {boolean} whether to show message about advising missing coins
+ * @param [supportUrl] {string} needed when showRequestMissingCoinsInfoMessage=true
+ * @param coinToIconPaths {function}
+ * @param [partialLoadingEnabled=true] {boolean} enables only partialLoadingIncrement items are shown by default and user can show more clicking the load-more button
+ * @param [partialLoadingIncrement=100]
+ * @param [texts] {object} texts translated to desired locale, default texts use english locale
+ */
+export const CoinPicker = ({
+    mode = COIN_PICKER_MODES.BUTTON,
+    allCoins,
+    initiallyEnabledCoinsList,
+    handleClick = (ticker) => {},
+    triggerToReloadData,
+    search = false,
+    searchAdaptive = true,
+    setCoinPickerValue = () => {},
+    setCoinPickerListChanged = () => {},
+    loadCoinsAndContent = null,
+    showRequestMissingCoinsInfoMessage = true,
+    supportUrl = null,
+    coinToIconPaths = (coin) => ({
+        assetIconSrc: undefined,
+        assetIconProtocolSrc: undefined,
+    }),
+    partialLoadingEnabled = true,
+    partialLoadingIncrement = 100,
+    texts = defaultTexts,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    const [coins, setCoins] = useState(null);
+    const [filteredCoins, setFilteredCoins] = useState([]);
+    const [initiallyEnabledCoins, setInitiallyEnabledCoins] = useReferredState(
+        {}
+    );
+    const [currentlyEnabledCoins, setCurrentlyEnabledCoins] = useReferredState(
+        {}
+    );
+    const [searchFieldValue, setSearchFieldValue] = useState("");
+    const [scrollWrapperClass, setScrollWrapperClass] = useState("");
+
+    const [searchEnabled, setSearchEnabled] = useState(false);
+    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 searchRef = useRef();
+    const scrollContainerRef = useRef();
+    const skeletonItemsCount =
+        initiallyEnabledCoinsList?.length ||
+        (partialLoadingEnabled ? partialLoadingIncrement : 6);
+
+    const defaultLoadCoinsAndContent = async () => {
+        const allCoinsSorted = sortCoinsArrayByAlphabet(
+            allCoins,
+            composeEnabledCoinsObject(allCoins)
+        );
+        return {
+            coins: allCoinsSorted,
+            content: allCoinsSorted.map((c) => ({
+                coin: c,
+                subtitle: c.blockchain?.name,
+            })),
+            isCoinsDataReloadable: false,
+        };
+    };
+
+    const sortCoinsArrayByAlphabet = (coinsToSort, enabledCoinsObject) => {
+        return [
+            ...coinsToSort
+                .filter((coin) => enabledCoinsObject[coin.ticker])
+                .sort(
+                    (a, b) =>
+                        a.latinName.toUpperCase() > b.latinName.toUpperCase()
+                ),
+            ...coinsToSort
+                .filter((coin) => !enabledCoinsObject[coin.ticker])
+                .sort(
+                    (a, b) =>
+                        a.latinName.toUpperCase() > b.latinName.toUpperCase()
+                ),
+        ];
+    };
+
+    const composeEnabledCoinsObject = (coins) => {
+        if (mode === COIN_PICKER_MODES.CHECKBOX) {
+            return coins.reduce((prev, coin) => {
+                return {
+                    ...prev,
+                    [coin.ticker]: !!initiallyEnabledCoinsList.find(
+                        (enabledCoin) => enabledCoin.ticker === coin.ticker
+                    ),
+                };
+            }, {});
+        }
+        return {};
+    };
+
+    const handleToggleClick = (ticker, resetButtonLoader = () => {}) => {
+        resetButtonLoader && resetButtonLoader();
+        setCurrentlyEnabledCoins((prev) => {
+            return { ...prev, [ticker]: !prev[ticker] };
+        });
+    };
+
+    const handleCoinClick = (coin) => {
+        if (mode === COIN_PICKER_MODES.CHECKBOX) handleToggleClick(coin.ticker);
+        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) {
+                logErrorOrOutputToConsole(e);
+            }
+        })();
+    };
+
+    // Initializes enabled coins logic if the mode is CHECKBOX
+    useEffect(() => {
+        if (mode === COIN_PICKER_MODES.CHECKBOX) {
+            const enabledCoinsObject = composeEnabledCoinsObject(allCoins);
+            setInitiallyEnabledCoins(enabledCoinsObject);
+            setCurrentlyEnabledCoins(enabledCoinsObject);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]);
+
+    useEffect(() => {
+        loadCoinsAndSaveToState();
+        if (isCoinsDataReloadable) {
+            const intervalId = setInterval(loadCoinsAndSaveToState, 60000);
+            return () => clearInterval(intervalId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [triggerToReloadData]);
+
+    useEffect(() => {
+        const enabled = currentlyEnabledCoins.current;
+        if (enabled) {
+            const enabledCoinsTickers = Object.keys(enabled).filter(
+                (ticker) => enabled[ticker]
+            );
+            setCoinPickerValue(enabledCoinsTickers);
+            setCoinPickerListChanged(
+                JSON.stringify(initiallyEnabledCoins.current) !==
+                    JSON.stringify(currentlyEnabledCoins.current)
+            );
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentlyEnabledCoins.current]);
+
+    useEffect(() => {
+        setSearchEnabled(
+            search
+                ? true
+                : searchAdaptive && initiallyEnabledCoinsList
+                  ? initiallyEnabledCoinsList.length > 6
+                  : false
+        );
+        // 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++) {
+            skeletonItems.push(
+                <div className={s["item"]} key={"coin-picker-skeleton-" + i}>
+                    <div className={s["link"] + " " + s["loading"]}>
+                        <div
+                            className={s["icon"] + " " + s["skeleton-dark"]}
+                        ></div>
+                        <div className={s["content"]}>
+                            <div
+                                className={s["name"] + " " + s["skeleton-dark"]}
+                            ></div>
+                            <div
+                                className={
+                                    s["amount"] + " " + s["skeleton-dark"]
+                                }
+                            ></div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        return skeletonItems;
+    };
+
+    const handleScroll = () => {
+        if (scrollWrapperClass !== "") setScrollWrapperClass("");
+
+        if (scrollContainerRef.current?.scrollTop === 0)
+            setScrollWrapperClass(
+                s["reached-top"] +
+                    (scrollContainerRef.current?.scrollHeight -
+                        scrollContainerRef.current?.clientHeight ===
+                    0
+                        ? " " + s["reached-bottom"]
+                        : "")
+            );
+
+        if (
+            scrollContainerRef.current?.scrollTop > 0 &&
+            scrollContainerRef.current?.scrollTop ===
+                scrollContainerRef.current?.scrollHeight -
+                    scrollContainerRef.current?.clientHeight
+        )
+            setScrollWrapperClass(s["reached-bottom"]);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(handleScroll, []);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(handleScroll, [filteredCoins]);
+
+    const shouldShowSkeleton = coins == null;
+
+    return coins ? (
+        <>
+            <div
+                className={
+                    s["coin-picker"] +
+                    (shouldShowSkeleton ? " " + s["loading"] : "")
+                }
+            >
+                {searchEnabled ? (
+                    <div className={s["coin-picker-search"]}>
+                        <Input
+                            value={searchFieldValue}
+                            onChange={(e) => handleSearchAsset(e.target.value)}
+                            placeholder={texts.searchPlaceholder}
+                            isSmallHeight={true}
+                            clearButton
+                            ref={searchRef}
+                            disabled={shouldShowSkeleton}
+                        />
+                    </div>
+                ) : (
+                    ""
+                )}
+                <div
+                    className={
+                        s["coin-picker-wrapper"] +
+                        " " +
+                        scrollWrapperClass +
+                        (searchEnabled ? " " + s["fixed-height"] : "")
+                    }
+                >
+                    <div
+                        className={
+                            s["coin-picker-wrapper-content"] +
+                            (searchEnabled ? " " + s["fixed-height"] : "")
+                        }
+                        ref={scrollContainerRef}
+                        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>
+                                      );
+                                  })}
+                        </div>
+
+                        {filteredCoins?.length === 0 &&
+                        searchFieldValue !== "" ? (
+                            <div
+                                className={
+                                    s[
+                                        "coin-picker-wrapper-content-asset-not-found"
+                                    ]
+                                }
+                            >
+                                <h6>{texts.noAssetsMessage}</h6>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        {partialLoadingEnabled && !isListFull ? (
+                            <div
+                                className={
+                                    s[
+                                        "coin-picker-wrapper-content-load-more-button"
+                                    ]
+                                }
+                            >
+                                <Button
+                                    mode="primary-transparent"
+                                    size="sm"
+                                    loader={false}
+                                    content={texts.loadMoreButton}
+                                    onClick={displayMoreCoins}
+                                    handleError={handleError}
+                                />
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        {searchEnabled && showRequestMissingCoinsInfoMessage ? (
+                            <div
+                                className={
+                                    s[
+                                        "coin-picker-wrapper-content-bottom-message"
+                                    ]
+                                }
+                            >
+                                <InformationMessage
+                                    text={
+                                        <>
+                                            {texts.assetSuggestionMessage.part1}
+                                            <a
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                href={supportUrl}
+                                                className={
+                                                    s[
+                                                        "coin-picker-wrapper-content-bottom-message-link"
+                                                    ]
+                                                }
+                                            >
+                                                {" " +
+                                                    texts.assetSuggestionMessage
+                                                        .part2 +
+                                                    " "}
+                                            </a>
+                                            {texts.assetSuggestionMessage.part3}
+                                        </>
+                                    }
+                                />
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    ) : (
+        <LoadingDots />
+    );
+};
+
+CoinPicker.propTypes = {
+    mode: PropTypes.oneOf([
+        COIN_PICKER_MODES.BUTTON,
+        COIN_PICKER_MODES.CHECKBOX,
+    ]),
+    allCoins: PropTypes.array,
+    initiallyEnabledCoinsList: PropTypes.array,
+    handleClick: PropTypes.func,
+    triggerToReloadData: PropTypes.number,
+    search: PropTypes.bool,
+    searchAdaptive: PropTypes.bool,
+    setCoinPickerValue: PropTypes.func,
+    setCoinPickerListChanged: PropTypes.func,
+    loadCoinsAndContent: PropTypes.func,
+    showRequestMissingCoinsInfoMessage: PropTypes.bool,
+    supportUrl: PropTypes.string,
+    coinToIconPaths: PropTypes.func,
+    partialLoadingEnabled: PropTypes.bool,
+    partialLoadingIncrement: PropTypes.number,
+    texts: PropTypes.shape({
+        searchPlaceholder: PropTypes.string,
+        noAssetsMessage: PropTypes.string,
+        loadMoreButton: PropTypes.string,
+        assetSuggestionMessage: PropTypes.shape({
+            part1: PropTypes.string,
+            part2: PropTypes.string,
+            part3: PropTypes.string,
+        }),
+    }),
+};
+
+CoinPicker.defaultProps = {
+    mode: COIN_PICKER_MODES.BUTTON,
+    handleClick: (ticker) => {},
+    search: false,
+    searchAdaptive: true,
+    setCoinPickerValue: () => {},
+    setCoinPickerListChanged: () => {},
+    loadCoinsAndContent: null,
+    showRequestMissingCoinsInfoMessage: true,
+    supportUrl: null,
+    coinToIconPaths: (coin) => ({
+        assetIconSrc: undefined,
+        assetIconProtocolSrc: undefined,
+    }),
+    partialLoadingEnabled: true,
+    partialLoadingIncrement: 100,
+    texts: defaultTexts,
+};