@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

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

@@ -0,0 +1,463 @@
+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-apis/utils/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 "../../../../common-apis/globalConstants.jsx";
+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",
+    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
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.mode] - One-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES.
+ * @param {Coin[]} [props.allCoins] - All coins despite their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function.
+ * @param {Coin[]} [props.initiallyEnabledCoinsList] - Pass this when using CHECKBOX mode.
+ * @param {function} [props.handleClick] - Handler function for the event when an asset is clicked.
+ * @param {number|undefined} [props.triggerToReloadData] - Trigger to reload the component when some related data changes.
+ * @param {boolean} [props.search=false] - Whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height.
+ * @param {boolean} [props.searchAdaptive=true] - Show search bar only after six assets in the list.
+ * @param {function} [props.setCoinPickerValue] - Called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.setCoinPickerListChanged] - Called with the only parameter (flag signaling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.loadCoinsAndContent] - Optional, you can provide it if you need custom logic for coins list composing or custom subtitles. Expected return format:
+ *                               {
+ *                                   coins: Coin[],
+ *                                   content: { coin: Coin, subtitle: string }[],
+ *                                   isCoinsDataReloadable: boolean
+ *                               }
+ * @param {boolean} [props.showRequestMissingCoinsInfoMessage=true] - Whether to show message about advising missing coins.
+ * @param {string} [props.supportUrl] - Needed when showRequestMissingCoinsInfoMessage=true.
+ * @param {function} props.coinToIconPaths - Function to map coins to their icon paths.
+ * @param {boolean} [props.partialLoadingEnabled=true] - Enables only partialLoadingIncrement items to be shown by default, with the user able to show more by clicking the load-more button.
+ * @param {number} [props.partialLoadingIncrement=100] - The number of items to incrementally load when partial loading is enabled.
+ * @param {object} [props.texts] - Texts translated to the 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 [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 [isListFull, setIsListFull] = useState(true);
+    const [isSearchResultEmpty, setIsSearchResultEmpty] = useState(false);
+    const [triggerLoadMoreCoins, setTriggerLoadMoreCoins] = useState(0);
+
+    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 loadCoinsAndSaveToState = () => {
+        (async () => {
+            try {
+                const data = loadCoinsAndContent ? await loadCoinsAndContent() : await defaultLoadCoinsAndContent();
+                setCoins(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]);
+
+    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"] + " " + "skeleton-dark"}></div>
+                        <div className={s["content"]}>
+                            <div className={s["name"] + " " + "skeleton-dark"}></div>
+                            <div className={s["amount"] + " " + "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"]);
+    };
+
+    const displayMoreCoins = () => setTriggerLoadMoreCoins(prev => prev + 1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(handleScroll, []);
+
+    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 => {
+                                setSearchFieldValue(e.target.value);
+                                handleScroll();
+                            }}
+                            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()
+                            ) : (
+                                <SearchableCoinsList
+                                    searchQuery={searchFieldValue}
+                                    onListUpdated={() => handleScroll()}
+                                    setIsListFull={setIsListFull}
+                                    setIsSearchResultEmpty={setIsSearchResultEmpty}
+                                    triggerLoadMoreCoins={triggerLoadMoreCoins}
+                                    coinsList={coins}
+                                    coinsBundle={coins?.map((coin, index) => {
+                                        return {
+                                            ticker: coin.ticker,
+                                            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>
+
+                        {isSearchResultEmpty ? (
+                            <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,
+};

package/src/ui-kit/components/molecules/CoinPicker/coin-picker.module.scss

@@ -0,0 +1,207 @@
+@use "../../../assets/styles/index" as *;
+
+.coin-picker {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    @media (max-width: $phone-width) {
+        max-width: none;
+    }
+
+    &-search {
+        width: 100%;
+        margin-bottom: Margin("2");
+    }
+
+    &-wrapper {
+        width: 100%;
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+
+        &.fixed-height {
+            @media (min-width: $tablet-width) {
+                height: 370px;
+
+                &::after,
+                &::before {
+                    content: "";
+                    position: absolute;
+                    width: 100%;
+                    height: 20px;
+                    background: linear-gradient(rgba(SolidColor("dark"), 0.05), rgba(255, 255, 255, 0));
+                    left: 0;
+                    z-index: 1;
+                    transition: 0.2s opacity ease;
+                    pointer-events: none;
+                }
+
+                &.reached-top::after,
+                &.reached-bottom::before {
+                    opacity: 0;
+                    transition: 0.2s opacity ease;
+                }
+
+                &::after {
+                    top: 0;
+                }
+
+                &::before {
+                    bottom: 0;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        &-content {
+            &.fixed-height {
+                @media (min-width: $tablet-width) {
+                    overflow: auto;
+                    height: 100%;
+                }
+            }
+
+            &-bottom-message {
+                margin: Margin("5") 0;
+                &-link {
+                    color: SolidColor("tosca");
+                }
+            }
+
+            &-assets {
+                display: grid;
+                // TODO: Fix the limitation of 300px width on mobile devices below
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: Margin("2");
+                &:has(*) {
+                    margin-bottom: Margin("5");
+                }
+
+                .item {
+                    position: relative;
+                    display: flex;
+                    align-items: stretch;
+                    cursor: pointer;
+                    width: 100%;
+
+                    .link {
+                        background: SolidColor("lightsmoke");
+                        display: flex;
+                        align-items: center;
+                        text-decoration: none;
+                        width: 100%;
+                        padding: Padding("4") Padding("5");
+                        border-radius: 8px;
+
+                        transition: 0.2s all ease;
+                        box-shadow: $shadowOutlineStatic;
+
+                        &.outline {
+                            box-shadow: $shadowOutlineActive;
+                        }
+
+                        @media (hover: hover) {
+                            &:hover {
+                                &:not(.outline):not(.disabled):not(.loading) {
+                                    box-shadow: $shadowOutlineHover;
+                                    transition: 0.02s all ease;
+                                }
+                            }
+                        }
+
+                        .icon {
+                            height: 34px;
+                        }
+                        .toggle-container {
+                            margin-left: auto;
+                            padding-left: Padding("2");
+                        }
+                        .content {
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: flex-start;
+                            margin-left: Margin("4");
+                            color: SolidColor("dark");
+                            min-width: 0;
+                            line-height: 20px;
+
+                            .name,
+                            .amount {
+                                color: inherit;
+                                line-height: inherit;
+                                user-select: none;
+                                text-align: left;
+                            }
+
+                            .name {
+                                font-weight: $bold;
+                            }
+
+                            .amount {
+                                font-weight: $semi-bold;
+                                opacity: 0.5;
+                            }
+                        }
+
+                        .arrow {
+                            height: 20px;
+                            transform: rotate(-90deg);
+                            margin-left: auto;
+                        }
+                    }
+                }
+            }
+
+            &-load-more-button {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+            }
+
+            &-asset-not-found {
+                height: 72px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: SolidColor("lightsmoke");
+                border-radius: 8px;
+
+                h6 {
+                    color: SolidColor("grey");
+                    font-weight: $semi-bold;
+                }
+            }
+        }
+    }
+}
+
+.coin-picker.loading {
+    .item {
+        .link {
+            &:hover {
+                opacity: 1;
+                cursor: default;
+            }
+            .icon {
+                @extend %skeleton-icon;
+                height: 34px;
+                width: 34px;
+            }
+            .content {
+                .name {
+                    @extend %skeleton-text;
+                    width: 65px;
+                    margin-bottom: Margin("2");
+                }
+                .amount {
+                    @extend %skeleton-text;
+                    width: 110px;
+                }
+            }
+        }
+    }
+}