@rabbitio/ui-kit 1.0.0-beta.64 → 1.0.0-beta.66

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

@@ -70,7 +70,7 @@ export const CoinPicker = ({
     mode = COIN_PICKER_MODES.BUTTON,
     allCoins,
     initiallyEnabledCoinsList,
-    handleClick = (ticker) => {},
+    handleClick = ticker => {},
     triggerToReloadData,
     search = false,
     searchAdaptive = true,
@@ -79,7 +79,7 @@ export const CoinPicker = ({
     loadCoinsAndContent = null,
     showRequestMissingCoinsInfoMessage = true,
     supportUrl = null,
-    coinToIconPaths = (coin) => ({
+    coinToIconPaths = coin => ({
         assetIconSrc: undefined,
         assetIconProtocolSrc: undefined,
     }),
@@ -91,12 +91,8 @@ export const CoinPicker = ({
 
     const [coins, setCoins] = useState(null);
     const [filteredCoins, setFilteredCoins] = useState([]);
-    const [initiallyEnabledCoins, setInitiallyEnabledCoins] = useReferredState(
-        {}
-    );
-    const [currentlyEnabledCoins, setCurrentlyEnabledCoins] = useReferredState(
-        {}
-    );
+    const [initiallyEnabledCoins, setInitiallyEnabledCoins] = useReferredState({});
+    const [currentlyEnabledCoins, setCurrentlyEnabledCoins] = useReferredState({});
     const [searchFieldValue, setSearchFieldValue] = useState("");
     const [scrollWrapperClass, setScrollWrapperClass] = useState("");
 
@@ -111,17 +107,13 @@ export const CoinPicker = ({
     const searchRef = useRef();
     const scrollContainerRef = useRef();
     const skeletonItemsCount =
-        initiallyEnabledCoinsList?.length ||
-        (partialLoadingEnabled ? partialLoadingIncrement : 6);
+        initiallyEnabledCoinsList?.length || (partialLoadingEnabled ? partialLoadingIncrement : 6);
 
     const defaultLoadCoinsAndContent = async () => {
-        const allCoinsSorted = sortCoinsArrayByAlphabet(
-            allCoins,
-            composeEnabledCoinsObject(allCoins)
-        );
+        const allCoinsSorted = sortCoinsArrayByAlphabet(allCoins, composeEnabledCoinsObject(allCoins));
         return {
             coins: allCoinsSorted,
-            content: allCoinsSorted.map((c) => ({
+            content: allCoinsSorted.map(c => ({
                 coin: c,
                 subtitle: c.blockchain?.name,
             })),
@@ -132,28 +124,20 @@ export const CoinPicker = ({
     const sortCoinsArrayByAlphabet = (coinsToSort, enabledCoinsObject) => {
         return [
             ...coinsToSort
-                .filter((coin) => enabledCoinsObject[coin.ticker])
-                .sort(
-                    (a, b) =>
-                        a.latinName.toUpperCase() > b.latinName.toUpperCase()
-                ),
+                .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()
-                ),
+                .filter(coin => !enabledCoinsObject[coin.ticker])
+                .sort((a, b) => a.latinName.toUpperCase() > b.latinName.toUpperCase()),
         ];
     };
 
-    const composeEnabledCoinsObject = (coins) => {
+    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
-                    ),
+                    [coin.ticker]: !!initiallyEnabledCoinsList.find(enabledCoin => enabledCoin.ticker === coin.ticker),
                 };
             }, {});
         }
@@ -162,17 +146,17 @@ export const CoinPicker = ({
 
     const handleToggleClick = (ticker, resetButtonLoader = () => {}) => {
         resetButtonLoader && resetButtonLoader();
-        setCurrentlyEnabledCoins((prev) => {
+        setCurrentlyEnabledCoins(prev => {
             return { ...prev, [ticker]: !prev[ticker] };
         });
     };
 
-    const handleCoinClick = (coin) => {
+    const handleCoinClick = coin => {
         if (mode === COIN_PICKER_MODES.CHECKBOX) handleToggleClick(coin.ticker);
         handleClick(coin.ticker);
     };
 
-    const handleSearchAsset = (value) => {
+    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();
@@ -180,10 +164,10 @@ export const CoinPicker = ({
             const searchWords = searchTerm.split(/\s+/); // Split search terms on whitespace
 
             const filteredAndSortedCoins = coins
-                .filter((coin) => {
+                .filter(coin => {
                     // Check if all search words are found in any of the given properties
                     return searchWords.every(
-                        (word) =>
+                        word =>
                             coin?.latinName?.toLowerCase().includes(word) ||
                             coin?.ticker?.toLowerCase().includes(word) ||
                             coin?.tickerPrintable?.toLowerCase().includes(word)
@@ -208,9 +192,7 @@ export const CoinPicker = ({
                         return bMatch - aMatch;
                     } else {
                         // Sort remaining items alphabetically by latinName
-                        return a.latinName
-                            .toLowerCase()
-                            .localeCompare(b.latinName.toLowerCase());
+                        return a.latinName.toLowerCase().localeCompare(b.latinName.toLowerCase());
                     }
                 });
 
@@ -223,9 +205,7 @@ export const CoinPicker = ({
     const loadCoinsAndSaveToState = () => {
         (async () => {
             try {
-                const data = loadCoinsAndContent
-                    ? await loadCoinsAndContent()
-                    : await defaultLoadCoinsAndContent();
+                const data = loadCoinsAndContent ? await loadCoinsAndContent() : await defaultLoadCoinsAndContent();
                 setCoins(data.coins);
                 setFilteredCoins(data.coins);
                 setCoinsContent(data.content);
@@ -258,13 +238,10 @@ export const CoinPicker = ({
     useEffect(() => {
         const enabled = currentlyEnabledCoins.current;
         if (enabled) {
-            const enabledCoinsTickers = Object.keys(enabled).filter(
-                (ticker) => enabled[ticker]
-            );
+            const enabledCoinsTickers = Object.keys(enabled).filter(ticker => enabled[ticker]);
             setCoinPickerValue(enabledCoinsTickers);
             setCoinPickerListChanged(
-                JSON.stringify(initiallyEnabledCoins.current) !==
-                    JSON.stringify(currentlyEnabledCoins.current)
+                JSON.stringify(initiallyEnabledCoins.current) !== JSON.stringify(currentlyEnabledCoins.current)
             );
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -272,20 +249,13 @@ export const CoinPicker = ({
 
     useEffect(() => {
         setSearchEnabled(
-            search
-                ? true
-                : searchAdaptive && initiallyEnabledCoinsList
-                  ? initiallyEnabledCoinsList.length > 6
-                  : false
+            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
-        ) {
+        if (filteredCoins?.length > partialLoadingIncrement && partialLoadingEnabled) {
             setLimitedCoinsNumber(partialLoadingIncrement);
         } else {
             setLimitedCoinsNumber(0);
@@ -305,7 +275,7 @@ export const CoinPicker = ({
     }, [limitedCoinsNumber]);
 
     const displayMoreCoins = () => {
-        setLimitedCoinsNumber((prev) => prev + partialLoadingIncrement);
+        setLimitedCoinsNumber(prev => prev + partialLoadingIncrement);
     };
 
     const skeleton = () => {
@@ -314,18 +284,10 @@ export const CoinPicker = ({
             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["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 className={s["name"] + " " + s["skeleton-dark"]}></div>
+                            <div className={s["amount"] + " " + s["skeleton-dark"]}></div>
                         </div>
                     </div>
                 </div>
@@ -340,9 +302,7 @@ export const CoinPicker = ({
         if (scrollContainerRef.current?.scrollTop === 0)
             setScrollWrapperClass(
                 s["reached-top"] +
-                    (scrollContainerRef.current?.scrollHeight -
-                        scrollContainerRef.current?.clientHeight ===
-                    0
+                    (scrollContainerRef.current?.scrollHeight - scrollContainerRef.current?.clientHeight === 0
                         ? " " + s["reached-bottom"]
                         : "")
             );
@@ -350,8 +310,7 @@ export const CoinPicker = ({
         if (
             scrollContainerRef.current?.scrollTop > 0 &&
             scrollContainerRef.current?.scrollTop ===
-                scrollContainerRef.current?.scrollHeight -
-                    scrollContainerRef.current?.clientHeight
+                scrollContainerRef.current?.scrollHeight - scrollContainerRef.current?.clientHeight
         )
             setScrollWrapperClass(s["reached-bottom"]);
     };
@@ -366,17 +325,12 @@ export const CoinPicker = ({
 
     return coins ? (
         <>
-            <div
-                className={
-                    s["coin-picker"] +
-                    (shouldShowSkeleton ? " " + s["loading"] : "")
-                }
-            >
+            <div className={s["coin-picker"] + (shouldShowSkeleton ? " " + s["loading"] : "")}>
                 {searchEnabled ? (
                     <div className={s["coin-picker-search"]}>
                         <Input
                             value={searchFieldValue}
-                            onChange={(e) => handleSearchAsset(e.target.value)}
+                            onChange={e => handleSearchAsset(e.target.value)}
                             placeholder={texts.searchPlaceholder}
                             isSmallHeight={true}
                             clearButton
@@ -396,111 +350,53 @@ export const CoinPicker = ({
                     }
                 >
                     <div
-                        className={
-                            s["coin-picker-wrapper-content"] +
-                            (searchEnabled ? " " + s["fixed-height"] : "")
-                        }
+                        className={s["coin-picker-wrapper-content"] + (searchEnabled ? " " + s["fixed-height"] : "")}
                         ref={scrollContainerRef}
                         onScroll={handleScroll}
                     >
-                        <div
-                            className={s["coin-picker-wrapper-content-assets"]}
-                        >
+                        <div className={s["coin-picker-wrapper-content-assets"]}>
                             {shouldShowSkeleton
                                 ? skeleton()
                                 : displayedCoins.map((coin, index) => {
-                                      const {
-                                          assetIconSrc,
-                                          assetIconProtocolSrc,
-                                      } = coinToIconPaths(coin);
+                                      const { assetIconSrc, assetIconProtocolSrc } = coinToIconPaths(coin);
 
                                       return (
                                           <div
                                               className={s["item"]}
                                               key={`picker-${coin.ticker}-${index}`}
-                                              onClick={(e) =>
-                                                  handleError(
-                                                      () =>
-                                                          handleCoinClick(coin),
-                                                      e
-                                                  )
-                                              }
+                                              onClick={e => handleError(() => handleCoinClick(coin), e)}
                                           >
                                               <div
                                                   className={
                                                       s["link"] +
-                                                      (currentlyEnabledCoins
-                                                          .current[
-                                                          coin.ticker
-                                                      ] !==
-                                                      initiallyEnabledCoins
-                                                          .current[coin.ticker]
+                                                      (currentlyEnabledCoins.current[coin.ticker] !==
+                                                      initiallyEnabledCoins.current[coin.ticker]
                                                           ? " " + s["outline"]
                                                           : "")
                                                   }
                                               >
                                                   <AssetIcon
-                                                      assetIconSrc={
-                                                          assetIconSrc
-                                                      }
-                                                      assetIconProtocolSrc={
-                                                          assetIconProtocolSrc
-                                                      }
-                                                      fallbackSrc={
-                                                          FALLBACK_ASSET_ICON_URL
-                                                      }
+                                                      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 ?? ""}
+                                                  <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"]}
-                                                      >
+                                                  {mode === COIN_PICKER_MODES.BUTTON ? (
+                                                      <div className={s["arrow"]}>
                                                           <ArrowIcon />
                                                       </div>
-                                                  ) : mode ===
-                                                    COIN_PICKER_MODES.CHECKBOX ? (
-                                                      <div
-                                                          className={
-                                                              s[
-                                                                  "toggle-container"
-                                                              ]
-                                                          }
-                                                      >
+                                                  ) : mode === COIN_PICKER_MODES.CHECKBOX ? (
+                                                      <div className={s["toggle-container"]}>
                                                           <RadioButtonWithText
-                                                              onStateChange={(
-                                                                  resetButtonLoader
-                                                              ) =>
-                                                                  handleToggleClick(
-                                                                      coin.ticker,
-                                                                      resetButtonLoader
-                                                                  )
-                                                              }
-                                                              isSwitchedOn={
-                                                                  currentlyEnabledCoins
-                                                                      .current[
-                                                                      coin
-                                                                          .ticker
-                                                                  ]
+                                                              onStateChange={resetButtonLoader =>
+                                                                  handleToggleClick(coin.ticker, resetButtonLoader)
                                                               }
+                                                              isSwitchedOn={currentlyEnabledCoins.current[coin.ticker]}
                                                               id={index}
                                                           />
                                                       </div>
@@ -513,28 +409,15 @@ export const CoinPicker = ({
                                   })}
                         </div>
 
-                        {filteredCoins?.length === 0 &&
-                        searchFieldValue !== "" ? (
-                            <div
-                                className={
-                                    s[
-                                        "coin-picker-wrapper-content-asset-not-found"
-                                    ]
-                                }
-                            >
+                        {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"
-                                    ]
-                                }
-                            >
+                            <div className={s["coin-picker-wrapper-content-load-more-button"]}>
                                 <Button
                                     mode="primary-transparent"
                                     size="sm"
@@ -548,13 +431,7 @@ export const CoinPicker = ({
                             ""
                         )}
                         {searchEnabled && showRequestMissingCoinsInfoMessage ? (
-                            <div
-                                className={
-                                    s[
-                                        "coin-picker-wrapper-content-bottom-message"
-                                    ]
-                                }
-                            >
+                            <div className={s["coin-picker-wrapper-content-bottom-message"]}>
                                 <InformationMessage
                                     text={
                                         <>
@@ -563,16 +440,9 @@ export const CoinPicker = ({
                                                 target="_blank"
                                                 rel="noreferrer"
                                                 href={supportUrl}
-                                                className={
-                                                    s[
-                                                        "coin-picker-wrapper-content-bottom-message-link"
-                                                    ]
-                                                }
+                                                className={s["coin-picker-wrapper-content-bottom-message-link"]}
                                             >
-                                                {" " +
-                                                    texts.assetSuggestionMessage
-                                                        .part2 +
-                                                    " "}
+                                                {" " + texts.assetSuggestionMessage.part2 + " "}
                                             </a>
                                             {texts.assetSuggestionMessage.part3}
                                         </>
@@ -592,10 +462,7 @@ export const CoinPicker = ({
 };
 
 CoinPicker.propTypes = {
-    mode: PropTypes.oneOf([
-        COIN_PICKER_MODES.BUTTON,
-        COIN_PICKER_MODES.CHECKBOX,
-    ]),
+    mode: PropTypes.oneOf([COIN_PICKER_MODES.BUTTON, COIN_PICKER_MODES.CHECKBOX]),
     allCoins: PropTypes.array,
     initiallyEnabledCoinsList: PropTypes.array,
     handleClick: PropTypes.func,
@@ -624,7 +491,7 @@ CoinPicker.propTypes = {
 
 CoinPicker.defaultProps = {
     mode: COIN_PICKER_MODES.BUTTON,
-    handleClick: (ticker) => {},
+    handleClick: ticker => {},
     search: false,
     searchAdaptive: true,
     setCoinPickerValue: () => {},
@@ -632,7 +499,7 @@ CoinPicker.defaultProps = {
     loadCoinsAndContent: null,
     showRequestMissingCoinsInfoMessage: true,
     supportUrl: null,
-    coinToIconPaths: (coin) => ({
+    coinToIconPaths: coin => ({
         assetIconSrc: undefined,
         assetIconProtocolSrc: undefined,
     }),

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

@@ -32,10 +32,7 @@
                     position: absolute;
                     width: 100%;
                     height: 20px;
-                    background: linear-gradient(
-                        rgba(SolidColor("dark"), 0.05),
-                        rgba(255, 255, 255, 0)
-                    );
+                    background: linear-gradient(rgba(SolidColor("dark"), 0.05), rgba(255, 255, 255, 0));
                     left: 0;
                     z-index: 1;
                     transition: 0.2s opacity ease;

package/src/components/molecules/LineWithIconLink/LineWithIconLink.jsx

@@ -15,12 +15,7 @@ export const LineWithIconLink = ({ text, icon, url }) => {
     return (
         <div className={s["line-with-icon-link"]}>
             <h5 className={s["line-with-icon-link-text"]}>{text}</h5>
-            <a
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={"line-with-icon-link-icon"}
-            >
+            <a href={url} target="_blank" rel="noopener noreferrer" className={"line-with-icon-link-icon"}>
                 <img src={icon} alt="Link Icon" />
             </a>
         </div>

package/src/components/organisms/CoinPickerDialogStep/CoinPickerDialogStep.jsx

@@ -23,7 +23,7 @@ export const CoinPickerDialogStep = ({
     searchAdaptive,
     loadCoinsAndContent,
     showRequestMissingCoinsInfoMessage,
-    coinToIconPaths = (coin) => ({
+    coinToIconPaths = coin => ({
         assetIconSrc: undefined,
         assetIconProtocolSrc: undefined,
     }),
@@ -49,14 +49,12 @@ export const CoinPickerDialogStep = ({
                 mode={mode}
                 allCoins={allCoins}
                 initiallyEnabledCoinsList={initiallyEnabledCoinsList}
-                handleClick={(ticker) => handleCoinSelection(ticker)}
+                handleClick={ticker => handleCoinSelection(ticker)}
                 triggerToReloadData={triggerToReloadData}
                 search={search}
                 searchAdaptive={searchAdaptive}
                 loadCoinsAndContent={loadCoinsAndContent}
-                showRequestMissingCoinsInfoMessage={
-                    showRequestMissingCoinsInfoMessage
-                }
+                showRequestMissingCoinsInfoMessage={showRequestMissingCoinsInfoMessage}
                 coinToIconPaths={coinToIconPaths}
                 supportUrl={supportUrl}
                 texts={texts}