Added Borrowable Column

packages/nextjs/app/lending/components/AssetsToBorrow.tsx

@@ -1,65 +1,72 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import BorrowTransactionModal from "./modals/BorrowTransactionModal";
 import useAccountAddress from "@/hooks/useAccount";
 import useGetReservesData from "@/hooks/useGetReservesData";
+import useGetUserReservesData from "@/hooks/useGetUserReservesData";
 import { ReserveData } from "@/types/types";
 import { useTranslation } from "~~/app/context/LanguageContext";
 
-// import { Address } from "viem";
-
 const AssetsToBorrow: React.FC = () => {
   const { t } = useTranslation();
-  // Fetch reserve data and wallet address using custom hooks
-  const {
-    reservesData: reserveData,
-    isLoading: isLoadingReserveData,
-    isError: isErrorReserveData,
-  } = useGetReservesData();
+  const { reservesData, isLoading: isLoadingReserveData, isError: isErrorReserveData } = useGetReservesData();
+  const { userReservesData, isLoading: isLoadingUserReserves, isError: isErrorUserReserves } = useGetUserReservesData();
   const { address: walletAddress } = useAccountAddress();
 
-  // State management for balances, modal visibility, and selected reserve/balance
-  // const [balances, setBalances] = useState<Record<string, string>>({});
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedReserve, setSelectedReserve] = useState<ReserveData | null>(null);
   const [selectedBalance, setSelectedBalance] = useState("");
 
-  // Callback for balance changes
-  /* const handleBalanceChange = useCallback((tokenAddress: Address, balance: string) => {
-    setBalances(prevBalances => ({ ...prevBalances, [tokenAddress]: balance }));
-  }, []); */
-
-  // Filter reserves data to show all assets
-  const filteredReserveData: ReserveData[] = Array.isArray(reserveData) ? reserveData.flat() : [];
-
   // Handle borrow button click
   const handleBorrowClick = (reserve: ReserveData, balance: string) => {
     setSelectedReserve(reserve);
     setSelectedBalance(balance);
     setIsModalOpen(true);
   };
 
+  // Dynamic borrowable logic
+  const assetsToBorrow = useMemo(() => {
+    const depositedAssets = new Set(
+      userReservesData
+        ?.filter(userReserve => userReserve.usageAsCollateralEnabledOnUser)
+        .map(userReserve => userReserve.underlyingAsset),
+    );
+
+    return reservesData?.map(reserve => {
+      const isDeposited = depositedAssets.has(reserve.underlyingAsset);
+      const canBorrow = !isDeposited && depositedAssets.size > 0;
+
+      return {
+        ...reserve,
+        canBorrow,
+        isDeposited,
+      };
+    });
+  }, [reservesData, userReservesData]);
+
+  if (isLoadingReserveData || isLoadingUserReserves) {
+    return <p className="text-amber-950">Loading...</p>;
+  }
+
+  if (isErrorReserveData || isErrorUserReserves) {
+    return <p className="text-error">Error fetching data.</p>;
+  }
+
   return (
     <div className="mt-4">
-      {/* Display loading message while fetching reserve data */}
-      {isLoadingReserveData && <p className="text-amber-950">Loading...</p>}
-      {/* Display error message if there is an error fetching reserve data */}
-      {isErrorReserveData && <p className="text-error">Error fetching data.</p>}
-
-      {/* Display the assets table if wallet address is available and there is data */}
-      {walletAddress && filteredReserveData.length > 0 && (
+      {walletAddress && (assetsToBorrow ?? []).length > 0 && (
         <div className="assets-container">
-          {/* Table headers */}
           <div className="table-header assets-header py-3 flex justify-between tracking-wider">
             <div className="assets-header-item w-24">{t("LendingAssetsToBorrowColumn1")}</div>
             <div className="assets-header-item w-24">{t("LendingAssetsToBorrowColumn2")}</div>
             <div className="assets-header-item w-24">{t("LendingAssetsToBorrowColumn3")}</div>
             <div className="assets-header-item w-24">{t("LendingAssetsToBorrowColumn4")}</div>
+            <div className="assets-header-item w-24">{t("LendingAssetsToBorrowColumn5")}</div>
           </div>
 
-          {/* Table rows */}
-          {filteredReserveData.map((reserve, index) => {
+          {(assetsToBorrow ?? []).map((reserve, index) => {
             const availableLiquidity = (Number(reserve.availableLiquidity) / 10 ** Number(reserve.decimals)).toFixed(5);
             const isButtonDisabled = !walletAddress;
+            const { canBorrow } = reserve;
 
             return (
               <div key={index} className="table-content table-border-top asset-row flex justify-between py-3">
@@ -75,19 +82,32 @@ const AssetsToBorrow: React.FC = () => {
                 <div className="asset-row-item w-24 h-fit">
                   <button
                     className={`${isButtonDisabled ? "disabled-btn" : "primary-btn"}`}
-                    disabled={isButtonDisabled}
+                    disabled={isButtonDisabled || !canBorrow}
                     onClick={() => handleBorrowClick(reserve, availableLiquidity)}
                   >
                     {t("LendingBorrowModalButton")}
                   </button>
                 </div>
+                <div className="asset-row-item w-24 h-fit relative">
+                  <p>
+                    {canBorrow ? (
+                      "✔️"
+                    ) : (
+                      <div
+                        className="tooltip tooltip-top tooltip-error"
+                        data-tip="You cannot borrow the same asset as you deposit"
+                      >
+                        ❌
+                      </div>
+                    )}
+                  </p>
+                </div>
               </div>
             );
           })}
         </div>
       )}
 
-      {/* Modal for borrow transaction */}
       <BorrowTransactionModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}

packages/nextjs/app/lending/components/YourSupplies.tsx

@@ -79,6 +79,10 @@ const YourSupplies: React.FC<YourSuppliesProps> = ({ setAllBalancesZero, setSupp
     setIsModalOpen(true);
   };
 
+  console.log("reservesData", reservesData);
+  console.log("userReservesData", userReservesData);
+  console.log("reservesWithBalances", reservesWithBalances);
+
   return (
     <div>
       <div className="flex mt-2 gap-2 text-xs">

packages/nextjs/app/lending/components/modals/BorrowTransactionModal.tsx

@@ -21,6 +21,7 @@ interface ModalProps {
  * @param {() => void} onClose - Function to call when the modal is closed.
  * @param {ReserveData | null} reserve - The reserve data to borrow from.
  * @param {string} balance - The available liquidity as a string.
+ * @param {boolean} canBorrow - Whether the user can borrow this asset.
  * @returns {JSX.Element | null} - The modal component or null if not open.
  */
 const BorrowTransactionModal: React.FC<ModalProps> = ({ isOpen, onClose, reserve, balance }) => {