diff --git a/packages/nextjs/app/lending/components/Borrows.tsx b/packages/nextjs/app/lending/components/Borrows.tsx index be8abab..e6b5482 100644 --- a/packages/nextjs/app/lending/components/Borrows.tsx +++ b/packages/nextjs/app/lending/components/Borrows.tsx @@ -1,37 +1,26 @@ "use client"; -import React from "react"; +import React, { useEffect, useState } from "react"; import AssetModal from "./modals/AssetModal"; import BorrowTable from "./tables/BorrowTable"; -import borrowsDataRaw from "@/data/assetsToBorrow.json"; -import yourBorrowDataRaw from "@/data/yourBorrows.json"; import useApy from "@/hooks/useApy"; import useAssetOperations from "@/hooks/useAssetOperations"; -import useBalance from "@/hooks/useBalance"; import useBorrowPower from "@/hooks/useBorrowPower"; import { Asset } from "@/types/assets/assets"; -/** - * Component representing the borrows section, displaying user's current borrows - * and available assets to borrow, with modal functionality for borrowing actions. - */ -const assetsData: Asset[] = borrowsDataRaw.map((asset: any) => ({ - ...asset, - amount: Number(asset.amount), - apy: Number(asset.apy), -})); +// Define the interface for Borrows component props +interface BorrowsProps { + assetsData: Asset[]; + yourBorrowData: Asset[]; + setBalance: (balance: number) => void; +} -const yourBorrowData: Asset[] = yourBorrowDataRaw.map((asset: any) => ({ - ...asset, - amount: Number(asset.amount), - apy: Number(asset.apy), -})); +// Borrows component for displaying user's borrowed assets and available assets to borrow +const Borrows: React.FC = ({ assetsData, yourBorrowData, setBalance }) => { + // Local state to keep track of the user's borrow balance + const [localBalance, setLocalBalance] = useState(0); -/** - * Borrows component manages and displays the user's borrowed assets and available assets to borrow. - * It provides a modal for performing borrow actions and shows relevant financial data. - */ -const Borrows: React.FC = () => { + // Destructure the return values from the custom hook for asset operations const { assets: assetsToBorrow, yourAssets: yourBorrow, @@ -45,18 +34,30 @@ const Borrows: React.FC = () => { setTransferAmount: setBorrowAmount, } = useAssetOperations(assetsData, yourBorrowData); - const balance = useBalance(yourBorrow); + // Calculate the average APY for the user's borrowed assets const averageApy = useApy(yourBorrow); + + // Calculate the user's borrow power based on their borrowed assets const borrowPower = useBorrowPower(yourBorrow); + // useEffect hook to update the local and parent component's balance whenever the user's borrowed assets change + useEffect(() => { + const newBalance = yourBorrow.reduce((acc, asset) => acc + (asset.amount ?? 0), 0); + setLocalBalance(newBalance); + setBalance(newBalance); + }, [yourBorrow, setBalance]); + + // Render the Borrows component return (
+ {/* Section for displaying the user's borrowed assets */}

Your Borrows

{yourBorrow.length > 0 ? ( <> + {/* Display balance, average APY, and borrow power if the user has borrowed assets */}
- Balance ${balance} + Balance ${localBalance} Average APY {averageApy.toFixed(2)}% @@ -64,6 +65,7 @@ const Borrows: React.FC = () => { Borrow power used {borrowPower.toFixed(2)}
+ {/* Table for displaying borrowed assets */} openModal(asset, false)} /> ) : ( @@ -71,12 +73,15 @@ const Borrows: React.FC = () => { )}
+ {/* Section for displaying available assets to borrow */}

Assets to Borrow

Select the asset you want to borrow against your supplies

+ {/* Table for displaying available assets to borrow */} openModal(asset, true)} />
+ {/* Modal for confirming borrow actions */} { - // Simulated data +interface ProfileStatsProps { + balance: number; +} + +const ProfileStats: React.FC = ({ balance }) => { const data = { - netWorth: "106.04K", + netWorth: balance, netAPY: "-3.73%", healthFactor: 1.42, }; return ( -
-
+
+
Base Logo diff --git a/packages/nextjs/app/lending/components/Supplies.tsx b/packages/nextjs/app/lending/components/Supplies.tsx index 762e5a6..f56b50b 100644 --- a/packages/nextjs/app/lending/components/Supplies.tsx +++ b/packages/nextjs/app/lending/components/Supplies.tsx @@ -1,34 +1,26 @@ "use client"; -import React from "react"; +import React, { useEffect, useState } from "react"; import AssetModal from "./modals/AssetModal"; import SupplyTable from "./tables/SupplyTable"; -import assetsDataRaw from "@/data/assetsToSupply.json"; -import yourSupplyDataRaw from "@/data/yourSupplies.json"; import useApy from "@/hooks/useApy"; import useAssetOperations from "@/hooks/useAssetOperations"; -import useBalance from "@/hooks/useBalance"; import useCollateralBalance from "@/hooks/useCollateralBalance"; import { Asset } from "@/types/assets/assets"; -// Process raw data into typed assets -const assetsData: Asset[] = assetsDataRaw.map((asset: any) => ({ - ...asset, - walletBalance: Number(asset.walletBalance), - apy: Number(asset.apy), -})); +// Define the interface for Supplies component props +interface SuppliesProps { + assetsData: Asset[]; + yourSupplyData: Asset[]; + setBalance: (balance: number) => void; +} -const yourSupplyData: Asset[] = yourSupplyDataRaw.map((asset: any) => ({ - ...asset, - amount: Number(asset.walletBalance), // Ensure amount is initialized with walletBalance - apy: Number(asset.apy), -})); +// Supplies component for displaying user's supplied assets and available assets to supply +const Supplies: React.FC = ({ assetsData, yourSupplyData, setBalance }) => { + // Local state to keep track of the user's supply balance + const [localBalance, setLocalBalance] = useState(0); -/** - * Supplies component manages and displays the user's supplied assets and available assets to supply. - * It provides a modal for performing supply actions and shows relevant financial data. - */ -const Supplies: React.FC = () => { + // Destructure the return values from the custom hook for asset operations const { assets: assetsToSupply, yourAssets: yourSupply, @@ -43,10 +35,19 @@ const Supplies: React.FC = () => { updateYourAssets, } = useAssetOperations(assetsData, yourSupplyData); - const balance = useBalance(yourSupply); + // Calculate the average APY for the user's supplied assets const averageApy = useApy(yourSupply); + + // Calculate the user's collateral balance based on their supplied assets const collateralBalance = useCollateralBalance(yourSupply); + // useEffect hook to update the local and parent component's balance whenever the user's supplied assets change + useEffect(() => { + const newBalance = yourSupply.reduce((acc, asset) => acc + (asset.walletBalance ?? 0), 0); + setLocalBalance(newBalance); + setBalance(newBalance); + }, [yourSupply, setBalance]); + // Toggle collateral status for the asset const handleCollateralToggle = (asset: Asset) => { const updatedYourSupply = yourSupply.map(a => { @@ -59,14 +60,17 @@ const Supplies: React.FC = () => { updateYourAssets(updatedYourSupply); }; + // Render the Supplies component return (
+ {/* Section for displaying the user's supplied assets */}

Your Supplies

{yourSupply.length > 0 ? ( <> + {/* Display balance, average APY, and collateral balance if the user has supplied assets */}
- Balance ${balance} + Balance ${localBalance} Average APY {averageApy.toFixed(2)}% @@ -74,6 +78,7 @@ const Supplies: React.FC = () => { Collateral {collateralBalance.toFixed(2)}
+ {/* Table for displaying supplied assets */} { )}
+ {/* Section for displaying available assets to supply */}

Assets to Supply

Select the asset to deposit as collateral

+ {/* Table for displaying available assets to supply */} openModal(asset, true)} />
+ {/* Modal for confirming supply actions */} { + // State to manage supply and borrow balances + const [supplyBalance, setSupplyBalance] = useState(0); + const [borrowBalance, setBorrowBalance] = useState(0); + + // Process raw supply data into typed Asset objects + const assetsData: Asset[] = assetsDataRaw.map((asset: any) => ({ + ...asset, + walletBalance: Number(asset.walletBalance), + apy: Number(asset.apy), + })); + + // Process raw supply data for the user's assets + const yourSupplyData: Asset[] = yourSupplyDataRaw.map((asset: any) => ({ + ...asset, + amount: Number(asset.walletBalance), + apy: Number(asset.apy), + })); + + // Process raw borrow data into typed Asset objects + const borrowsData: Asset[] = borrowsDataRaw.map((asset: any) => ({ + ...asset, + amount: Number(asset.amount), + apy: Number(asset.apy), + })); + + // Process raw borrow data for the user's assets + const yourBorrowData: Asset[] = yourBorrowDataRaw.map((asset: any) => ({ + ...asset, + amount: Number(asset.amount), + apy: Number(asset.apy), + })); + + // Calculate net balance as the difference between supply and borrow balances + const netBalance = supplyBalance - borrowBalance; + return (
- +
- - + +
); diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx index 4dc20af..e0f2d01 100644 --- a/packages/nextjs/components/SwitchTheme.tsx +++ b/packages/nextjs/components/SwitchTheme.tsx @@ -1,5 +1,3 @@ -"use client"; - import { useEffect, useState } from "react"; import { useTheme } from "next-themes"; import { MoonIcon, SunIcon } from "@heroicons/react/24/outline"; @@ -13,9 +11,10 @@ export const SwitchTheme = ({ className }: { className?: string }) => { const handleToggle = () => { if (isDarkMode) { setTheme("light"); - return; + } else { + setTheme("dark"); } - setTheme("dark"); + console.log(`Tema cambiado a ${isDarkMode ? "light" : "dark"}`); }; useEffect(() => { diff --git a/packages/nextjs/hooks/useBalance.ts b/packages/nextjs/hooks/useBalance.ts index e1d3dd9..ab0a889 100644 --- a/packages/nextjs/hooks/useBalance.ts +++ b/packages/nextjs/hooks/useBalance.ts @@ -11,7 +11,7 @@ const useBalance = (assets: Asset[]) => { useEffect(() => { // Calculate the total balance by summing up the 'balance' property of each asset - const total = assets.reduce((sum, asset) => sum + (asset.balance || 0), 0); + const total = assets.reduce((sum, asset) => sum + (asset.balance || asset.amount || 0), 0); setBalance(total); }, [assets]);