Hot fixes

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<any>(null);
   const [latestMintedNumber, setLatestMintedNumber] = useState<string | null>(null);
-  //const [totalWETHDeposits, setTotalWETHDeposits] = useState<any>(null);
-  //const [totalCBETHDeposits, setTotalCBETHDeposits] = useState<any>(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 = () => {
               <ArrowTopRightOnSquareIcon className="h-6 w-6 text-accent cursor-pointer" onClick={handleProofClick} />
             </div>
           </div>
+          {/* Dynamically Generated House of Reserve Data */}
+          <div className="flex flex-wrap space-x-8">
+            {formattedHouseOfReserveData.map((data, index) => (
+              <div key={index} className="text">
+                <div className="text-sm text-gray-400">{`${assetNames[index]} Deposits`}</div>
+                <div className="text-lg text-accent font-semibold">
+                  {data !== 0 ? ` ${data.toFixed(4)}` : "Loading..."}
+                </div>
+              </div>
+            ))}
+          </div>
           {/* You can add more data points here if needed */}
         </div>
       </div>

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
                   <div
                     className="tooltip tooltip-primary"
-                    data-tip="The Health of your position, which tells you how much you still can leverage your asset's worth."
+                    data-tip="The Health of your position, which tells you how much you still can leverage your asset's worth. The closer to 1 it gets, the riskier your position becomes, when it gets under 1 the position can get liquidated."
                   >
                     <InformationCircleIcon className="h-5 w-5 inline" />
                   </div>

packages/nextjs/app/components/hero.tsx

@@ -24,8 +24,16 @@ const Hero = () => {
               <h2 className="text-2xl text-primary font-bold dark:text-inherit">About the name</h2>
               <p className="text-lg leading-normal dark:text-inherit">
                 The word &rsquo;Xocolatl&rsquo; 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{" "}
+                <Link
+                  href="https://chocolateclass.wordpress.com/2020/03/24/cacao-currency-ancient-civilizations-used-chocolate-as-cash/#:~:text=The%20civilizations%20at%20the%20time,from%20the%20Codex%20Mendoza%20(c."
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary dark:text-warning underline"
+                >
+                  form of currency
+                </Link>
+                .
               </p>
             </div>
 

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.",
 });
 

packages/nextjs/components/Header.tsx

@@ -51,6 +51,8 @@ export const HeaderMenuLinks = () => {
             <Link
               href={href}
               passHref
+              target="_blank" // Add target="_blank" to open link in a new tab
+              rel="noopener noreferrer" // Add rel="noopener noreferrer" for security reasons
               className={`${
                 isActive ? "bg-inherit shadow-md" : ""
               } hover:bg-neutral hover:text-base-100 hover:shadow-md focus:!bg-base-200 active:!text-neutral-content py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
@@ -107,7 +109,7 @@ export const Header = () => {
           </div>
           <div className="flex flex-col">
             <span className="font-bold leading-tight">Xocolatl-XOC</span>
-            <span className="text-xs">Decentralized app for Mexico</span>
+            <span className="text-xs">Decentralized Finances for Mexico</span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">