@multiversx/sdk-dapp-liquidity 1.1.0-alpha.13 → 1.1.0-alpha.15

package/index.js

@@ -53,7 +53,7 @@ const reactjs_hooks_validation_useSecondAmountSchema = require("./reactjs/hooks/
 const reactjs_hooks_validation_useTestHasEnoughFunds = require("./reactjs/hooks/validation/useTestHasEnoughFunds.js");
 const reactjs_hooks_validation_useTestIsConnected = require("./reactjs/hooks/validation/useTestIsConnected.js");
 const reactjs_hooks_useAccount = require("./reactjs/hooks/useAccount.js");
-const reactjs_hooks_useBalances = require("./useBalances-QuJwkRzs.js");
+const reactjs_hooks_useBalances = require("./useBalances-Ds5d90Cc.js");
 const reactjs_hooks_useBridgeFormik = require("./reactjs/hooks/useBridgeFormik.js");
 const reactjs_hooks_useDebounce = require("./reactjs/hooks/useDebounce.js");
 const reactjs_hooks_useFetchBridgeData = require("./reactjs/hooks/useFetchBridgeData.js");

package/index.mjs

@@ -50,7 +50,7 @@ import { useSecondAmountSchema } from "./reactjs/hooks/validation/useSecondAmoun
 import { useTestHasEnoughFunds } from "./reactjs/hooks/validation/useTestHasEnoughFunds.mjs";
 import { useTestIsConnected } from "./reactjs/hooks/validation/useTestIsConnected.mjs";
 import { useAccount } from "./reactjs/hooks/useAccount.mjs";
-import { u } from "./useBalances-MNOkt0CT.mjs";
+import { u } from "./useBalances-CvRCOieR.mjs";
 import { BridgeFormikValuesEnum, useBridgeFormik } from "./reactjs/hooks/useBridgeFormik.mjs";
 import { useDebounce } from "./reactjs/hooks/useDebounce.mjs";
 import { useFetchBridgeData } from "./reactjs/hooks/useFetchBridgeData.mjs";

package/package.json

@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/multiversx/mx-sdk-dapp-liquidity#readme",
   "license": "MIT",
-  "version": "1.1.0-alpha.13",
+  "version": "1.1.0-alpha.15",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",

package/reactjs/components/BridgeForm/BridgeForm.js

@@ -9,6 +9,7 @@ const debounce = require("lodash/debounce");
 const React = require("react");
 const reactToastify = require("react-toastify");
 const helpers_getApiURL = require("../../../helpers/getApiURL.js");
+const types_chainType = require("../../../types/chainType.js");
 const reactjs_constants_index = require("../../constants/index.js");
 const reactjs_context_useWeb3App = require("../../context/useWeb3App.js");
 const reactjs_hooks_useAccount = require("../../hooks/useAccount.js");
@@ -43,7 +44,7 @@ const reactjs_components_Connect_MvxAccountDisplay = require("../Connect/MvxAcco
 const reactjs_components_TokenSelector_TokenSelector = require("../TokenSelector/TokenSelector.js");
 const viem = require("viem");
 const actions = require("viem/actions");
-const reactjs_hooks_useBalances = require("../../../useBalances-QuJwkRzs.js");
+const reactjs_hooks_useBalances = require("../../../useBalances-Ds5d90Cc.js");
 function deepEqual(a, b) {
   if (a === b)
     return true;
@@ -163,7 +164,7 @@ const BridgeForm = ({
       (chain) => chain.chainId.toString() === mvxChainId.toString()
     );
   }, [chainId, chains]);
-  const { signTransaction } = reactjs_hooks_useSignTransaction.useSignTransaction();
+  const { evm, solana } = reactjs_hooks_useSignTransaction.useSignTransaction();
   const sendTransactions = reactjs_hooks_useSendTransactions.useSendTransactions();
   const {
     mutate: getRate,
@@ -188,15 +189,30 @@ const BridgeForm = ({
     })) ?? [],
     [evmTokensWithBalances]
   );
+  const availableTokens = React.useMemo(() => {
+    if (!(firstToken == null ? void 0 : firstToken.availableTokens)) {
+      return [];
+    }
+    const foundTokens = [];
+    for (const availableToken of firstToken.availableTokens) {
+      const foundToken = mvxTokensWithBalances == null ? void 0 : mvxTokensWithBalances.find(
+        (mvxToken) => mvxToken.address === availableToken.address
+      );
+      if (foundToken) {
+        foundTokens.push(foundToken);
+      }
+    }
+    return foundTokens;
+  }, [mvxTokensWithBalances, firstToken == null ? void 0 : firstToken.availableTokens]);
   const toOptions = React.useMemo(
-    () => (mvxTokensWithBalances && mvxTokensWithBalances.map((token) => {
+    () => (availableTokens && availableTokens.map((token) => {
       return {
         ...token,
         identifier: token.address,
         ticker: token.symbol
       };
     })) ?? [],
-    [mvxTokensWithBalances]
+    [availableTokens]
   );
   const selectedChainOption = React.useMemo(
     () => (chains == null ? void 0 : chains.find(
@@ -204,13 +220,9 @@ const BridgeForm = ({
     )) ?? (chains == null ? void 0 : chains[0]),
     [activeChain == null ? void 0 : activeChain.id, chains]
   );
-  console.log({
-    chains,
-    selectedChainOption
-  });
   const defaultReceivingToken = React.useMemo(
-    () => toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
-    [toOptions]
+    () => (availableTokens == null ? void 0 : availableTokens[0]) ?? toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
+    [toOptions, availableTokens]
   );
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
   const fetchRateDebounced = React.useCallback(
@@ -354,15 +366,18 @@ const BridgeForm = ({
     if (hasOptionsSelected) {
       return;
     }
-    if (!firstOption || !secondOption) {
-      return;
+    if (firstOption) {
+      setFirstToken(firstOption);
+      updateUrlParams({
+        firstTokenId: firstOption == null ? void 0 : firstOption.address
+      });
+    }
+    if (secondOption) {
+      setSecondToken(secondOption);
+      updateUrlParams({
+        secondTokenId: secondOption == null ? void 0 : secondOption.address
+      });
     }
-    setFirstToken(firstOption);
-    setSecondToken(secondOption);
-    updateUrlParams({
-      firstTokenId: firstOption == null ? void 0 : firstOption.address,
-      secondTokenId: secondOption == null ? void 0 : secondOption.address
-    });
   };
   const onSubmit = React.useCallback(
     async ({
@@ -373,51 +388,82 @@ const BridgeForm = ({
       setPendingSigning(true);
       setSigningTransactionsCount(() => transactions.length);
       try {
-        let txIndex = -1;
-        for (const transaction of transactions) {
-          ++txIndex;
-          try {
-            const txHash = await signTransaction({
-              ...transaction,
-              value: BigInt(transaction.value),
-              gas: BigInt(transaction.gasLimit),
-              account: bridgeAddress
-            });
-            signedTransactions.push({
-              ...transaction,
-              txHash
-            });
-            setSigningTransactionsCount(
-              () => transactions.length - 1 - txIndex
-            );
-            if (txIndex === transactions.length - 1) {
-              continue;
+        switch (selectedChainOption == null ? void 0 : selectedChainOption.chainType) {
+          case types_chainType.ChainType.sol:
+            try {
+              for (const transaction of transactions) {
+                if (!transaction.instructions || !transaction.feePayer) {
+                  continue;
+                }
+                await solana.signTransaction({
+                  feePayer: transaction.feePayer,
+                  instructions: transaction.instructions
+                });
+              }
+              setPendingSigning(false);
+            } catch (e) {
+              reactToastify.toast.dismiss();
+              reactToastify.toast.error("Transaction aborted");
+              onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+              setPendingSigning(false);
+              return;
             }
-            const transactionReceipt = await waitForTransactionReceipt(config, {
-              confirmations: 1,
-              hash: txHash
-            });
-            console.info({
-              transactionReceipt,
-              hash: txHash
+            break;
+          case types_chainType.ChainType.evm:
+            let txIndex = -1;
+            for (const transaction of transactions) {
+              ++txIndex;
+              try {
+                const txHash = await evm.signTransaction({
+                  ...transaction,
+                  value: BigInt(transaction.value),
+                  gas: BigInt(transaction.gasLimit),
+                  account: bridgeAddress
+                });
+                signedTransactions.push({
+                  ...transaction,
+                  txHash
+                });
+                setSigningTransactionsCount(
+                  () => transactions.length - 1 - txIndex
+                );
+                if (txIndex === transactions.length - 1) {
+                  continue;
+                }
+                const transactionReceipt = await waitForTransactionReceipt(
+                  config,
+                  {
+                    confirmations: 1,
+                    hash: txHash
+                  }
+                );
+                console.info({
+                  transactionReceipt,
+                  hash: txHash
+                });
+              } catch (e) {
+                reactToastify.toast.dismiss();
+                reactToastify.toast.error("Transaction aborted");
+                onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+                setPendingSigning(false);
+                return;
+              }
+            }
+            await sendTransactions({
+              transactions: signedTransactions,
+              provider,
+              url: helpers_getApiURL.getApiURL() ?? "",
+              token: nativeAuthToken ?? ""
             });
-          } catch (e) {
-            reactToastify.toast.dismiss();
-            reactToastify.toast.error("Transaction aborted");
-            onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+            const txHashes = signedTransactions.map((tx) => tx.txHash);
+            onSuccess(txHashes);
+            setPendingSigning(false);
+            break;
+          default:
+            reactToastify.toast.error("Provider not supported");
             setPendingSigning(false);
             return;
-          }
         }
-        await sendTransactions({
-          transactions: signedTransactions,
-          provider,
-          url: helpers_getApiURL.getApiURL() ?? "",
-          token: nativeAuthToken ?? ""
-        });
-        const txHashes = signedTransactions.map((tx) => tx.txHash);
-        onSuccess(txHashes);
-        setPendingSigning(false);
       } catch (e) {
         console.error(e);
         reactToastify.toast.dismiss();
@@ -437,7 +483,7 @@ const BridgeForm = ({
       nativeAuthToken,
       onSuccess,
       sendTransactions,
-      signTransaction
+      evm.signTransaction
     ]
   );
   const {
@@ -491,7 +537,12 @@ const BridgeForm = ({
       setSecondAmount("0");
     }
   }, [rateValidationError]);
-  React.useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
+  React.useEffect(setInitialSelectedTokens, [
+    isTokensLoading,
+    fromOptions,
+    toOptions,
+    chainId
+  ]);
   React.useEffect(() => {
     const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
       (x) => x.address === (firstToken == null ? void 0 : firstToken.address)
@@ -577,6 +628,7 @@ const BridgeForm = ({
                     disabled: isPendingRate,
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -631,10 +683,11 @@ const BridgeForm = ({
                   reactjs_components_TokenSelector_TokenSelector.TokenSelector,
                   {
                     name: "secondToken",
-                    disabled: true,
+                    disabled: isPendingRate,
                     omitDisableClass: true,
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/BridgeForm/BridgeForm.mjs

@@ -6,6 +6,7 @@ import debounce from "lodash/debounce";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
 import { getApiURL } from "../../../helpers/getApiURL.mjs";
+import { ChainType } from "../../../types/chainType.mjs";
 import { safeWindow } from "../../constants/index.mjs";
 import { useWeb3App } from "../../context/useWeb3App.mjs";
 import { useAccount } from "../../hooks/useAccount.mjs";
@@ -40,7 +41,7 @@ import { MvxAccountDisplay } from "../Connect/MvxAccountDisplay.mjs";
 import { TokenSelector } from "../TokenSelector/TokenSelector.mjs";
 import { hexToString } from "viem";
 import { waitForTransactionReceipt as waitForTransactionReceipt$1, getTransaction, call } from "viem/actions";
-import { g as getAction } from "../../../useBalances-MNOkt0CT.mjs";
+import { g as getAction } from "../../../useBalances-CvRCOieR.mjs";
 function deepEqual(a, b) {
   if (a === b)
     return true;
@@ -160,7 +161,7 @@ const BridgeForm = ({
       (chain) => chain.chainId.toString() === mvxChainId.toString()
     );
   }, [chainId, chains]);
-  const { signTransaction } = useSignTransaction();
+  const { evm, solana } = useSignTransaction();
   const sendTransactions = useSendTransactions();
   const {
     mutate: getRate,
@@ -185,15 +186,30 @@ const BridgeForm = ({
     })) ?? [],
     [evmTokensWithBalances]
   );
+  const availableTokens = useMemo(() => {
+    if (!(firstToken == null ? void 0 : firstToken.availableTokens)) {
+      return [];
+    }
+    const foundTokens = [];
+    for (const availableToken of firstToken.availableTokens) {
+      const foundToken = mvxTokensWithBalances == null ? void 0 : mvxTokensWithBalances.find(
+        (mvxToken) => mvxToken.address === availableToken.address
+      );
+      if (foundToken) {
+        foundTokens.push(foundToken);
+      }
+    }
+    return foundTokens;
+  }, [mvxTokensWithBalances, firstToken == null ? void 0 : firstToken.availableTokens]);
   const toOptions = useMemo(
-    () => (mvxTokensWithBalances && mvxTokensWithBalances.map((token) => {
+    () => (availableTokens && availableTokens.map((token) => {
       return {
         ...token,
         identifier: token.address,
         ticker: token.symbol
       };
     })) ?? [],
-    [mvxTokensWithBalances]
+    [availableTokens]
   );
   const selectedChainOption = useMemo(
     () => (chains == null ? void 0 : chains.find(
@@ -201,13 +217,9 @@ const BridgeForm = ({
     )) ?? (chains == null ? void 0 : chains[0]),
     [activeChain == null ? void 0 : activeChain.id, chains]
   );
-  console.log({
-    chains,
-    selectedChainOption
-  });
   const defaultReceivingToken = useMemo(
-    () => toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
-    [toOptions]
+    () => (availableTokens == null ? void 0 : availableTokens[0]) ?? toOptions.find((x) => x.symbol.toLowerCase().includes("usdc")),
+    [toOptions, availableTokens]
   );
   const hasAmounts = firstAmount !== "" && secondAmount !== "";
   const fetchRateDebounced = useCallback(
@@ -351,15 +363,18 @@ const BridgeForm = ({
     if (hasOptionsSelected) {
       return;
     }
-    if (!firstOption || !secondOption) {
-      return;
+    if (firstOption) {
+      setFirstToken(firstOption);
+      updateUrlParams({
+        firstTokenId: firstOption == null ? void 0 : firstOption.address
+      });
+    }
+    if (secondOption) {
+      setSecondToken(secondOption);
+      updateUrlParams({
+        secondTokenId: secondOption == null ? void 0 : secondOption.address
+      });
     }
-    setFirstToken(firstOption);
-    setSecondToken(secondOption);
-    updateUrlParams({
-      firstTokenId: firstOption == null ? void 0 : firstOption.address,
-      secondTokenId: secondOption == null ? void 0 : secondOption.address
-    });
   };
   const onSubmit = useCallback(
     async ({
@@ -370,51 +385,82 @@ const BridgeForm = ({
       setPendingSigning(true);
       setSigningTransactionsCount(() => transactions.length);
       try {
-        let txIndex = -1;
-        for (const transaction of transactions) {
-          ++txIndex;
-          try {
-            const txHash = await signTransaction({
-              ...transaction,
-              value: BigInt(transaction.value),
-              gas: BigInt(transaction.gasLimit),
-              account: bridgeAddress
-            });
-            signedTransactions.push({
-              ...transaction,
-              txHash
-            });
-            setSigningTransactionsCount(
-              () => transactions.length - 1 - txIndex
-            );
-            if (txIndex === transactions.length - 1) {
-              continue;
+        switch (selectedChainOption == null ? void 0 : selectedChainOption.chainType) {
+          case ChainType.sol:
+            try {
+              for (const transaction of transactions) {
+                if (!transaction.instructions || !transaction.feePayer) {
+                  continue;
+                }
+                await solana.signTransaction({
+                  feePayer: transaction.feePayer,
+                  instructions: transaction.instructions
+                });
+              }
+              setPendingSigning(false);
+            } catch (e) {
+              toast.dismiss();
+              toast.error("Transaction aborted");
+              onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+              setPendingSigning(false);
+              return;
             }
-            const transactionReceipt = await waitForTransactionReceipt(config, {
-              confirmations: 1,
-              hash: txHash
-            });
-            console.info({
-              transactionReceipt,
-              hash: txHash
+            break;
+          case ChainType.evm:
+            let txIndex = -1;
+            for (const transaction of transactions) {
+              ++txIndex;
+              try {
+                const txHash = await evm.signTransaction({
+                  ...transaction,
+                  value: BigInt(transaction.value),
+                  gas: BigInt(transaction.gasLimit),
+                  account: bridgeAddress
+                });
+                signedTransactions.push({
+                  ...transaction,
+                  txHash
+                });
+                setSigningTransactionsCount(
+                  () => transactions.length - 1 - txIndex
+                );
+                if (txIndex === transactions.length - 1) {
+                  continue;
+                }
+                const transactionReceipt = await waitForTransactionReceipt(
+                  config,
+                  {
+                    confirmations: 1,
+                    hash: txHash
+                  }
+                );
+                console.info({
+                  transactionReceipt,
+                  hash: txHash
+                });
+              } catch (e) {
+                toast.dismiss();
+                toast.error("Transaction aborted");
+                onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+                setPendingSigning(false);
+                return;
+              }
+            }
+            await sendTransactions({
+              transactions: signedTransactions,
+              provider,
+              url: getApiURL() ?? "",
+              token: nativeAuthToken ?? ""
             });
-          } catch (e) {
-            toast.dismiss();
-            toast.error("Transaction aborted");
-            onFailedSentTransaction == null ? void 0 : onFailedSentTransaction("Transaction aborted");
+            const txHashes = signedTransactions.map((tx) => tx.txHash);
+            onSuccess(txHashes);
+            setPendingSigning(false);
+            break;
+          default:
+            toast.error("Provider not supported");
             setPendingSigning(false);
             return;
-          }
         }
-        await sendTransactions({
-          transactions: signedTransactions,
-          provider,
-          url: getApiURL() ?? "",
-          token: nativeAuthToken ?? ""
-        });
-        const txHashes = signedTransactions.map((tx) => tx.txHash);
-        onSuccess(txHashes);
-        setPendingSigning(false);
       } catch (e) {
         console.error(e);
         toast.dismiss();
@@ -434,7 +480,7 @@ const BridgeForm = ({
       nativeAuthToken,
       onSuccess,
       sendTransactions,
-      signTransaction
+      evm.signTransaction
     ]
   );
   const {
@@ -488,7 +534,12 @@ const BridgeForm = ({
       setSecondAmount("0");
     }
   }, [rateValidationError]);
-  useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
+  useEffect(setInitialSelectedTokens, [
+    isTokensLoading,
+    fromOptions,
+    toOptions,
+    chainId
+  ]);
   useEffect(() => {
     const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
       (x) => x.address === (firstToken == null ? void 0 : firstToken.address)
@@ -574,6 +625,7 @@ const BridgeForm = ({
                     disabled: isPendingRate,
                     options: fromOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: false,
                     color: "neutral-850",
                     onChange: onChangeFirstSelect,
                     onBlur: handleBlur,
@@ -628,10 +680,11 @@ const BridgeForm = ({
                   TokenSelector,
                   {
                     name: "secondToken",
-                    disabled: true,
+                    disabled: isPendingRate,
                     omitDisableClass: true,
                     options: toOptions,
                     areOptionsLoading: isTokensLoading,
+                    isMvxSelector: true,
                     color: "neutral-850",
                     onChange: onChangeSecondSelect,
                     onBlur: handleBlur,

package/reactjs/components/TokenSelector/TokenSelector.d.ts

@@ -1,11 +1,12 @@
 import { TokenType } from '../../../types/token';
 
-export declare const TokenSelector: ({ name, options, selectedOption, areOptionsLoading, className, disabled, omitDisableClass, color, onBlur, onChange, onMaxBtnClick, onTokenSelectorDisplay }: {
+export declare const TokenSelector: ({ name, options, selectedOption, areOptionsLoading, className, disabled, isMvxSelector, omitDisableClass, color, onBlur, onChange, onMaxBtnClick, onTokenSelectorDisplay }: {
     name: string;
     options: TokenType[];
     selectedOption?: TokenType;
     areOptionsLoading?: boolean;
     disabled?: boolean;
+    isMvxSelector?: boolean;
     omitDisableClass?: boolean;
     className?: string;
     color?: "neutral-750" | "neutral-850";

package/reactjs/components/TokenSelector/TokenSelector.js

@@ -22,6 +22,7 @@ const TokenSelector = ({
   areOptionsLoading = false,
   className = "",
   disabled = false,
+  isMvxSelector = false,
   omitDisableClass = false,
   color = "neutral-750",
   onBlur,
@@ -35,15 +36,16 @@ const TokenSelector = ({
     token: selectedOption
   });
   const chains = React.useMemo(() => {
+    if (isMvxSelector) {
+      return (data == null ? void 0 : data.filter(
+        (chain) => constants_index.MVX_CHAIN_IDS.includes(chain.chainId.toString())
+      )) ?? [];
+    }
     return (data == null ? void 0 : data.filter(
       (chain) => !constants_index.MVX_CHAIN_IDS.includes(chain.chainId.toString())
     )) ?? [];
   }, [data]);
-  console.log(`TokenSelector - ${name}`, {
-    chains,
-    options,
-    selectedOption
-  });
+  const isVisuallyDisabled = disabled || chains.length < 2;
   const handleOnClick = () => setShow(true);
   React.useEffect(() => {
     onTokenSelectorDisplay == null ? void 0 : onTokenSelectorDisplay(show);
@@ -77,6 +79,7 @@ const TokenSelector = ({
         },
         tokens: options,
         chains,
+        isMvxSelector,
         areChainsLoading,
         selectedToken: selectedOption
       }
@@ -98,19 +101,19 @@ const TokenSelector = ({
               "liq-bg-neutral-900/50 liq-outline liq-outline-1 liq-outline-neutral-700/20 hover:enabled:liq-bg-neutral-600/50 hover:enabled:liq-outline-neutral-600": color === "neutral-850"
             },
             {
-              "disabled:!liq-opacity-70": disabled && !omitDisableClass
+              "disabled:!liq-opacity-70": isVisuallyDisabled && !omitDisableClass
             },
             {
-              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": disabled
+              "!liq-cursor-not-allowed !liq-bg-transparent !liq-outline-transparent": isVisuallyDisabled
             },
             className
           ),
           onBlur,
           onClick: handleOnClick,
-          disabled,
+          disabled: isVisuallyDisabled,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_TokenSelector_components_SelectedOption.SelectedOption, { value: selectedOption }),
-            !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            !isVisuallyDisabled && /* @__PURE__ */ jsxRuntime.jsx(
               reactFontawesome.FontAwesomeIcon,
               {
                 icon: faChevronDown.faChevronDown,