diff --git a/packages/nextjs/app/cdp/components/CDPStats.tsx b/packages/nextjs/app/cdp/components/CDPStats.tsx index 1823b5a..2dec599 100644 --- a/packages/nextjs/app/cdp/components/CDPStats.tsx +++ b/packages/nextjs/app/cdp/components/CDPStats.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from "react"; import Image from "next/image"; +import { houseOfReserveABI } from "../../../app/components/abis/houseofreserve"; import { XOCABI } from "../../../app/components/abis/xocabis"; import BaseLogo from "@/public/Base-Logo.jpg"; import BinanceLogo from "@/public/BinanceLogo.png"; import PolygonLogo from "@/public/PolygonLogo.png"; -import { formatEther } from "viem"; -import { useChainId, useReadContract } from "wagmi"; +import { Address, formatEther } from "viem"; +import { useChainId, useReadContract, useReadContracts } from "wagmi"; import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid"; const CDPStats: React.FC = () => { @@ -19,9 +20,6 @@ const CDPStats: React.FC = () => { const [latestMinted, setLatestMinted] = useState(null); const [latestMintedNumber, setLatestMintedNumber] = useState(null); - //const [totalWETHDeposits, setTotalWETHDeposits] = useState(null); - //const [totalCBETHDeposits, setTotalCBETHDeposits] = useState(null); - const { data: latestMintedData, isLoading: latestMintedLoading, @@ -46,41 +44,90 @@ const CDPStats: React.FC = () => { } }, [latestMinted]); - /* const { - data: wethDepositsData, - isLoading: wethDepositsLoading, - error: wethDepositsError, - } = useReadContract({ - address: "0xfF69E183A863151B4152055974aa648b3165014D", - abi: houseOfReserveABI, - functionName: "totalDeposits", - }); + // Define the contract addresses for each chain + let houseOfReserveContracts: { address: Address; abi: any; functionName: string }[] = []; + let assetNames: string[] = []; - useEffect(() => { - if (wethDepositsData) { - setTotalWETHDeposits(wethDepositsData); - } - }, [wethDepositsData]); + if (chainId === 56) { + houseOfReserveContracts = [ + { + address: "0xd411BE9A105Ea7701FabBe58C2834b7033EBC203", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0x070ccE6887E70b75015F948b12601D1E759D2024", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + ]; + assetNames = ["WETH", "WBNB"]; + } else if (chainId === 137) { + houseOfReserveContracts = [ + { + address: "0xd411BE9A105Ea7701FabBe58C2834b7033EBC203", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0x28C7DF27e5bC7Cb004c8D4bb2C2D91f246D0A2C9", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0x102dda5f4621a08dafD327f29f9c815f851846dC", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0xdB9Dd25660240415d95144C6CE4f21f00Edf8168", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0x983A0eC44bf1BB11592a8bD5F91f05adE4F44D81", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + ]; + assetNames = ["WETH", "WSTETH", "MATICX", "WMATIC", "WBTC"]; + } else if (chainId === 8453) { + houseOfReserveContracts = [ + { + address: "0xfF69E183A863151B4152055974aa648b3165014D", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + { + address: "0x5c4a154690AE52844F151bcF3aA44885db3c8A58", + abi: houseOfReserveABI, + functionName: "totalDeposits", + }, + ]; + assetNames = ["WETH", "cbETH"]; + } - const { - data: cbethDepositsData, - isLoading: cbethDepositsLoading, - error: cbethDepositsError, - } = useReadContract({ - address: "0x5c4a154690AE52844F151bcF3aA44885db3c8A58", - abi: houseOfReserveABI, - functionName: "totalDeposits", + // Call to fetch data from the House of Reserve contracts + const { data: houseOfReserveData, isError: houseOfReserveError } = useReadContracts({ + contracts: houseOfReserveContracts.map(contract => ({ + address: contract.address, + abi: contract.abi, + functionName: contract.functionName, + })), }); useEffect(() => { - if (cbethDepositsData) { - setTotalCBETHDeposits(cbethDepositsData); + if (houseOfReserveData) { + console.log("House of Reserve Data:", houseOfReserveData); } - }, [cbethDepositsData]); + if (houseOfReserveError) { + console.error("Error fetching house of reserve data:", houseOfReserveError); + } + }, [houseOfReserveData, houseOfReserveError]); - const formattedWETHDeposits = totalWETHDeposits ? formatEther(totalWETHDeposits) : "0.00"; - const formattedCBETHDeposits = totalCBETHDeposits ? parseFloat(formatEther(totalCBETHDeposits)).toFixed(4) : "0.00"; - */ + const formattedHouseOfReserveData: any[] = houseOfReserveData + ? houseOfReserveData.map(({ result }) => Number(result) / 10 ** 18) + : Array(houseOfReserveContracts.length).fill(0); let logoSrc = BaseLogo; if (chainId === 137) { @@ -122,6 +169,17 @@ const CDPStats: React.FC = () => { + {/* Dynamically Generated House of Reserve Data */} +
+ {formattedHouseOfReserveData.map((data, index) => ( +
+
{`${assetNames[index]} Deposits`}
+
+ {data !== 0 ? ` ${data.toFixed(4)}` : "Loading..."} +
+
+ ))} +
{/* You can add more data points here if needed */} diff --git a/packages/nextjs/app/cdp/components/tables/YourDeposits.tsx b/packages/nextjs/app/cdp/components/tables/YourDeposits.tsx index aa8b57d..8f61f07 100644 --- a/packages/nextjs/app/cdp/components/tables/YourDeposits.tsx +++ b/packages/nextjs/app/cdp/components/tables/YourDeposits.tsx @@ -398,7 +398,7 @@ const YourDeposits = () => { assetContract: "0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270", houseOfCoinContract: "0x7ed1acd46de3a4e63f2d3b0f4fb5532e113a520b", assetsAccountantContract: "0xB90996A70C957a1496e349434CF0E030A9f693A4", - userHealthRatio: parseFloat(formattedUserHealthRatio[5]), + userHealthRatio: parseFloat(formattedUserHealthRatio[5].toFixed(2)), backedTokenID: "91100958396429013258976897630183527246789787972219101872512970882812448345098", }, { @@ -410,7 +410,7 @@ const YourDeposits = () => { assetContract: "0x1bfd67037b42cf73acf2047067bd4f2c47d9bfd6", houseOfCoinContract: "0x7ed1acd46de3a4e63f2d3b0f4fb5532e113a520b", assetsAccountantContract: "0xB90996A70C957a1496e349434CF0E030A9f693A4", - userHealthRatio: parseFloat(formattedUserHealthRatio[6]), + userHealthRatio: parseFloat(formattedUserHealthRatio[6].toFixed(2)), backedTokenID: "57342654198272734872890350495888597817619885438410899681268349930674170869034", }, ], @@ -419,24 +419,24 @@ const YourDeposits = () => { symbol: "WETH", amount: parseFloat(formattedBalances[0].toFixed(6)), minted: parseFloat(formattedMints[0].toFixed(6)), - mintingPower: parseFloat(formattedMintingPower[7]), + mintingPower: parseFloat(formattedMintingPower[7].toFixed(2)), houseofReserveContract: "0xfF69E183A863151B4152055974aa648b3165014D", assetContract: "0x4200000000000000000000000000000000000006", houseOfCoinContract: "0x02c531Cd9791dD3A31428B2987A82361D72F9b13", assetsAccountantContract: "0xB93EcD005B6053c6F8428645aAA879e7028408C7", - userHealthRatio: parseFloat(formattedUserHealthRatio[7]), + userHealthRatio: parseFloat(formattedUserHealthRatio[7].toFixed(2)), backedTokenID: "8845051240560412557863425425586194836306989955683227883233854819693793989434", }, { symbol: "cbETH", amount: parseFloat(formattedBalances[1].toFixed(6)), minted: parseFloat(formattedMints[1].toFixed(6)), - mintingPower: parseFloat(formattedMintingPower[8]), + mintingPower: parseFloat(formattedMintingPower[8].toFixed(2)), houseofReserveContract: "0x070ccE6887E70b75015F948b12601D1E759D2024", assetContract: "0x2Ae3F1Ec7F1F5012CFEab0185bfc7aa3cf0DEc22", houseOfCoinContract: "0x02c531Cd9791dD3A31428B2987A82361D72F9b13", assetsAccountantContract: "0xB93EcD005B6053c6F8428645aAA879e7028408C7", - userHealthRatio: parseFloat(formattedUserHealthRatio[8]), + userHealthRatio: parseFloat(formattedUserHealthRatio[8].toFixed(2)), backedTokenID: "8845051240560412557863425425586194836306989955683227883233854819693793989434", }, ], @@ -475,7 +475,7 @@ const YourDeposits = () => { Health Factor
diff --git a/packages/nextjs/app/components/hero.tsx b/packages/nextjs/app/components/hero.tsx index b1bbf83..18ba592 100644 --- a/packages/nextjs/app/components/hero.tsx +++ b/packages/nextjs/app/components/hero.tsx @@ -24,8 +24,16 @@ const Hero = () => {

About the name

The word ’Xocolatl’ comes from the Nahuatl, a Pre-Hispanic word, refers to cacao beans. It - is well documented that cocoa beans were used by Mayans, Olmecs and primarily Aztecs as a form of - currency. + is well documented that cocoa beans were used by Mayans and Aztecs as a{" "} + + form of currency + + .

diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index 330cfbd..0164559 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -5,7 +5,7 @@ import "~~/styles/globals.css"; import { getMetadata } from "~~/utils/scaffold-eth/getMetadata"; export const metadata = getMetadata({ - title: "Xocolatl CDP & Lending App", + title: "Xocolatl Finance", description: "Construyendo el DeFi Mexicano.", }); diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 3b7821b..0bbfbf2 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -51,6 +51,8 @@ export const HeaderMenuLinks = () => { {
Xocolatl-XOC - Decentralized app for Mexico + Decentralized Finances for Mexico