diff --git a/packages/nextjs/app/lending/components/AssetsToBorrow.tsx b/packages/nextjs/app/lending/components/AssetsToBorrow.tsx index 2ae60ab..cddf482 100644 --- a/packages/nextjs/app/lending/components/AssetsToBorrow.tsx +++ b/packages/nextjs/app/lending/components/AssetsToBorrow.tsx @@ -1,36 +1,21 @@ -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>({}); const [isModalOpen, setIsModalOpen] = useState(false); const [selectedReserve, setSelectedReserve] = useState(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); @@ -38,28 +23,50 @@ const AssetsToBorrow: React.FC = () => { 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

Loading...

; + } + + if (isErrorReserveData || isErrorUserReserves) { + return

Error fetching data.

; + } + return (
- {/* Display loading message while fetching reserve data */} - {isLoadingReserveData &&

Loading...

} - {/* Display error message if there is an error fetching reserve data */} - {isErrorReserveData &&

Error fetching data.

} - - {/* Display the assets table if wallet address is available and there is data */} - {walletAddress && filteredReserveData.length > 0 && ( + {walletAddress && (assetsToBorrow ?? []).length > 0 && (
- {/* Table headers */}
{t("LendingAssetsToBorrowColumn1")}
{t("LendingAssetsToBorrowColumn2")}
{t("LendingAssetsToBorrowColumn3")}
{t("LendingAssetsToBorrowColumn4")}
+
{t("LendingAssetsToBorrowColumn5")}
- {/* 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 (
@@ -75,19 +82,32 @@ const AssetsToBorrow: React.FC = () => {
+
+

+ {canBorrow ? ( + "✔️" + ) : ( +

+ ❌ +
+ )} +

+
); })}
)} - {/* Modal for borrow transaction */} setIsModalOpen(false)} diff --git a/packages/nextjs/app/lending/components/YourSupplies.tsx b/packages/nextjs/app/lending/components/YourSupplies.tsx index e2efd9a..e171f99 100644 --- a/packages/nextjs/app/lending/components/YourSupplies.tsx +++ b/packages/nextjs/app/lending/components/YourSupplies.tsx @@ -79,6 +79,10 @@ const YourSupplies: React.FC = ({ setAllBalancesZero, setSupp setIsModalOpen(true); }; + console.log("reservesData", reservesData); + console.log("userReservesData", userReservesData); + console.log("reservesWithBalances", reservesWithBalances); + return (
diff --git a/packages/nextjs/app/lending/components/modals/BorrowTransactionModal.tsx b/packages/nextjs/app/lending/components/modals/BorrowTransactionModal.tsx index 0fad3f0..0a2f79e 100644 --- a/packages/nextjs/app/lending/components/modals/BorrowTransactionModal.tsx +++ b/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 = ({ isOpen, onClose, reserve, balance }) => {