From 2e97ede794fe44cb3d9ef63f765000ecb948e361 Mon Sep 17 00:00:00 2001
From: JaiBo <65864145+iafhurtado@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:15:50 +0100
Subject: [PATCH] Added reading component on index

---
 packages/nextjs/components/index/mxnFetch.tsx | 45 +++++++++++++++++++
 .../components/index/protocolNumbers.tsx      | 26 ++++++-----
 .../nextjs/components/index/xocMinted.tsx     | 43 ++++++++++++++++++
 packages/nextjs/pages/index.tsx               | 41 +++++++++--------
 4 files changed, 125 insertions(+), 30 deletions(-)
 create mode 100644 packages/nextjs/components/index/mxnFetch.tsx
 create mode 100644 packages/nextjs/components/index/xocMinted.tsx

diff --git a/packages/nextjs/components/index/mxnFetch.tsx b/packages/nextjs/components/index/mxnFetch.tsx
new file mode 100644
index 0000000..1e2c5ea
--- /dev/null
+++ b/packages/nextjs/components/index/mxnFetch.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { houseOfReserveABI } from "../xoc-dapp/abis/xocabis";
+import { formatEther } from "viem";
+import { useContractRead } from "wagmi";
+
+const MXNFetch: React.FC = () => {
+  const [latestPrice, setLatestPrice] = useState<any>(null);
+  const [latestPriceNumber, setLatestPriceNumber] = useState<number | bigint | any>(null);
+  const { data: latestPriceData } = useContractRead({
+    address: "0xd411BE9A105Ea7701FabBe58C2834b7033EBC203", // House of Reserve (WETH)
+    abi: houseOfReserveABI,
+    functionName: "getLatestPrice",
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (latestPriceData) {
+      setLatestPrice(latestPriceData);
+    }
+  }, [latestPriceData]);
+
+  useEffect(() => {
+    if (latestPrice) {
+      setLatestPriceNumber(parseFloat(formatEther(BigInt(latestPrice?.toString() + "1000000000"))).toFixed(2));
+    }
+  }, [latestPrice]);
+
+  // Render the latest price data
+  return (
+    <>
+      <div className="stats shadow">
+        <div className="stat">
+          <div className="stat-title">Precio de 1 Ether</div>
+          <div className="stat-value">
+            {latestPriceNumber &&
+              new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(latestPriceNumber)}
+          </div>
+          <div className="stat-desc text-base">En pesos $MXN</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MXNFetch;
diff --git a/packages/nextjs/components/index/protocolNumbers.tsx b/packages/nextjs/components/index/protocolNumbers.tsx
index 8426bf4..4cf5f22 100644
--- a/packages/nextjs/components/index/protocolNumbers.tsx
+++ b/packages/nextjs/components/index/protocolNumbers.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { quoterABI } from "./abis/uniabis";
 import { formatEther } from "viem";
 import { useContractRead } from "wagmi";
@@ -10,11 +10,6 @@ enum FEE_BIPS {
   HUNDRED = 10000,
 }
 
-/**
- * @param path array of token addresses
- * @param fees array from FEE_BIPS enum
- * @returns hexbytes string `encodePacked` per solidity
- */
 export function encodePath(path: string[], fees: FEE_BIPS[]) {
   if (path.length != fees.length + 1) {
     throw new Error("path/fee lengths do not match");
@@ -25,7 +20,6 @@ export function encodePath(path: string[], fees: FEE_BIPS[]) {
     encoded += String(path[i]).slice(2);
     encoded += hexStringFees[i];
   }
-  // encode the path token
   encoded += path[path.length - 1].slice(2);
   return encoded.toLowerCase();
 }
@@ -50,21 +44,29 @@ const ProtocolNumbers = () => {
     abi: quoterABI,
     functionName: "quoteExactInput",
     args: [path, BigInt(1e18).toString()],
+    watch: true,
   });
 
+  const [latestPriceNumber, setLatestPriceNumber] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (quotedAmountOut) {
+      const amount = parseFloat(formatEther(BigInt(quotedAmountOut.toString())));
+      setLatestPriceNumber(amount);
+    }
+  }, [quotedAmountOut]);
+
   return (
     <>
       <div className="stats shadow">
         <div className="stat">
           <div className="stat-title">Precio de 1 Ether</div>
           <div className="stat-value">
-            {quotedAmountOut
-              ? new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(
-                  parseFloat(formatEther(BigInt(quotedAmountOut.toString()))),
-                )
+            {latestPriceNumber
+              ? new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(latestPriceNumber)
               : "MXN0.00"}
           </div>
-          <div className="stat-desc text-base">En $XOC Mexicanos</div>
+          <div className="stat-desc text-base">En pesos $XOC</div>
         </div>
       </div>
     </>
diff --git a/packages/nextjs/components/index/xocMinted.tsx b/packages/nextjs/components/index/xocMinted.tsx
new file mode 100644
index 0000000..146c6fd
--- /dev/null
+++ b/packages/nextjs/components/index/xocMinted.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import { approveABI } from "../xoc-dapp/abis/xocabis";
+import { formatEther } from "viem";
+import { useContractRead } from "wagmi";
+
+const XOCMinted: React.FC = () => {
+  const [latestMinted, setLatestMinted] = useState<any>(null);
+  const [latestMintedNumber, setLatestMintedNumber] = useState<number | bigint | any>(null);
+  const { data: latestMintedData } = useContractRead({
+    address: "0xa411c9Aa00E020e4f88Bc19996d29c5B7ADB4ACf", // House of Reserve (WETH)
+    abi: approveABI,
+    functionName: "totalSupply",
+    watch: true,
+  });
+
+  useEffect(() => {
+    if (latestMintedData) {
+      setLatestMinted(latestMintedData);
+    }
+  }, [latestMintedData]);
+
+  useEffect(() => {
+    if (latestMinted) {
+      const formattedNumber = parseFloat(formatEther(BigInt(latestMinted?.toString()))).toFixed(2);
+      const formattedString = parseFloat(formattedNumber).toLocaleString("en-US");
+      setLatestMintedNumber(formattedString);
+    }
+  }, [latestMinted]);
+  // Render the latest price data
+  return (
+    <>
+      <div className="stats shadow">
+        <div className="stat">
+          <div className="stat-title">$XOC Minted</div>
+          <div className="stat-value">{latestMintedNumber}</div>
+          <div className="stat-desc text-base">in Polygon</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default XOCMinted;
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index bdf8f05..d4d6dc6 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -1,16 +1,16 @@
 import Image from "next/image";
-import Link from "next/link";
 import { benefitOne, benefitTwo } from "../components/index/data";
 import type { NextPage } from "next";
-import { MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
 import { MetaHeader } from "~~/components/MetaHeader";
 import Benefits from "~~/components/index/benefits";
 import Cta from "~~/components/index/cta";
 import Faq from "~~/components/index/faq";
 import Hero from "~~/components/index/hero";
+import MXNFetch from "~~/components/index/mxnFetch";
 import ProtocolNumbers from "~~/components/index/protocolNumbers";
 import SectionTitle from "~~/components/index/sectionTitle";
 import Testimonials from "~~/components/index/testimonials";
+import XOCMinted from "~~/components/index/xocMinted";
 import grow from "~~/public/grow.png";
 
 const Home: NextPage = () => {
@@ -47,24 +47,29 @@ const Home: NextPage = () => {
             </div>
           </div>
           <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-            <SparklesIcon className="h-8 w-8 fill-secondary" />
-            <p>
-              Experiment with{" "}
-              <Link href="/example-ui" passHref className="link">
-                Example UI
-              </Link>{" "}
-              to build your own UI.
-            </p>
+            <MXNFetch />
+            <div className="text-xl font-semibold">
+              <p>
+                Fuente:{" "}
+                <span className=" text-blue-400 decoration-base-300 decoration-8 font-extrabold">ChainLink </span>
+              </p>
+            </div>
           </div>
           <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-            <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-            <p>
-              Explore your local transactions with the{" "}
-              <Link href="/blockexplorer" passHref className="link">
-                Block Explorer
-              </Link>{" "}
-              tab.
-            </p>
+            <XOCMinted />
+            <div className="text-xl font-semibold">
+              <p>
+                Fuente:{" "}
+                <a
+                  href="https://polygonscan.com/token/0xa411c9aa00e020e4f88bc19996d29c5b7adb4acf"
+                  target="_blank" // Add this attribute
+                  rel="noopener noreferrer" // Add these attributes for security reasons
+                  className="text-purple-400 decoration-base-300 decoration-8 font-extrabold"
+                >
+                  Polygonscan
+                </a>
+              </p>
+            </div>
           </div>
         </div>
       </div>