refining mintModal

packages/nextjs/app/cdp/components/modals/MintModal.tsx

@@ -4,7 +4,8 @@ import useMint from "@/hooks/useMint";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Address } from "viem";
-import { useChainId } from "wagmi";
+import { useAccount, useChainId, useReadContract } from "wagmi";
+import { houseOfCoinABI } from "~~/app/components/abis/houseofcoin";
 import { getBlockExplorerUrl } from "~~/app/utils/utils";
 
 interface MintModalProps {
@@ -24,16 +25,34 @@ const MintModal: React.FC<MintModalProps> = ({
   houseOfReserveContract,
   assetContract,
   houseOfCoinContract,
-  assetsAccountantContract,
 }) => {
   const chainId = useChainId();
+  const { address } = useAccount();
   const [amount, setAmount] = useState("");
   const [isValid, setIsValid] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [data, setData] = useState<any>(null);
   const [isError, setIsError] = useState(false);
   const [showSuccessIcon, setShowSuccessIcon] = useState(false);
 
+  const { data: mintingPower } = useReadContract({
+    address: houseOfCoinContract,
+    abi: houseOfCoinABI,
+    functionName: "checkRemainingMintingPower",
+    args: [address, houseOfReserveContract],
+  });
+
+  const formattedMintingPower = mintingPower ? (Number(mintingPower) / 10 ** 18).toFixed(2) : "0.00";
+
+  const { data: userHealthRatio } = useReadContract({
+    address: houseOfCoinContract,
+    abi: houseOfCoinABI,
+    functionName: "computeUserHealthRatio",
+    args: [address, houseOfReserveContract],
+  });
+
+  const formattedUserHealthRatio = userHealthRatio ? (Number(userHealthRatio) / 10 ** 18).toFixed(2) : "0.00";
+
   const { handleMint, isError: mintError, error, mintingHash } = useMint();
 
   useEffect(() => {
@@ -105,6 +124,33 @@ const MintModal: React.FC<MintModalProps> = ({
 
   const blockExplorerUrl = `${getBlockExplorerUrl(chainId)}${mintingHash}`;
 
+  const getProgressClass = () => {
+    const ratio = parseFloat(formattedUserHealthRatio);
+
+    if (ratio >= 5) {
+      return "progress-success";
+    } else if (ratio >= 2) {
+      return "progress-warning";
+    } else {
+      return "progress-error";
+    }
+  };
+
+  const getProgressBarValue = () => {
+    const healthRatio = parseFloat(formattedUserHealthRatio);
+    if (healthRatio < 2) {
+      return healthRatio * 5; // Maps health ratio to 0-100
+    } else if (healthRatio >= 2 && healthRatio <= 5) {
+      return healthRatio + 20; // Maps health ratio to 0-100 in the 2-5 range
+    } else if (healthRatio >= 5 && healthRatio <= 10) {
+      return healthRatio + 50;
+    } else if (healthRatio > 10 && healthRatio <= 20) {
+      return healthRatio + 70;
+    } else {
+      return 100; // Fully covered for health ratio > 5
+    }
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -150,21 +196,18 @@ const MintModal: React.FC<MintModalProps> = ({
             <div className="container-gray-borders flex flex-col gap-2">
               <label className="font-bold text-sm sm:text-base">Transaction Overview</label>
               <div className="flex justify-between items-center text-xs sm:text-sm">
-                <span>Mint Amount</span>
-                <span className="font-bold">{amount ? amount : 0} $XOC</span>
-              </div>
-              <div className="flex justify-between items-center text-xs sm:text-sm">
-                <span>House Of Reserve Address:</span>
-                <span className="break-all">{houseOfReserveContract}</span>
-              </div>
-              <div className="flex justify-between items-center text-xs sm:text-sm">
-                <span>House Of Coin Address:</span>
-                <span className="break-all">{houseOfCoinContract}</span>
+                <span>Minting Power:</span>
+                <span className="font-bold">{formattedMintingPower}</span>
               </div>
               <div className="flex justify-between items-center text-xs sm:text-sm">
-                <span>Assets Accountant Address:</span>
-                <span className="break-all">{assetsAccountantContract}</span>
+                <span>User Health Ratio:</span>
+                <span className="font-bold">{formattedUserHealthRatio}</span>
               </div>
+              <progress
+                className={`progress w-full ${getProgressClass()}`}
+                value={getProgressBarValue()}
+                max="100"
+              ></progress>
             </div>
 
             <div className="flex flex-col sm:flex-row justify-between gap-4">

packages/nextjs/app/cdp/components/tables/YourDeposits.tsx

@@ -207,6 +207,8 @@ const YourDeposits = () => {
     houseOfCoinContract: Address;
     assetsAccountantContract: Address;
     backedTokenID?: bigint | number;
+    formattedMintingPower?: number[];
+    formattedUserHealthRatio?: number[];
   }
 
   const [selectedAsset, setSelectedAsset] = useState<SelectedAsset | null>(null);
@@ -225,6 +227,8 @@ const YourDeposits = () => {
       assetContract,
       houseOfCoinContract,
       assetsAccountantContract,
+      formattedMintingPower,
+      formattedUserHealthRatio,
     });
     setIsMintModalOpen(true);
   };

packages/nextjs/app/components/About/index.tsx

@@ -118,7 +118,13 @@ const About = () => {
                 <div className="timeline-middle">{/* SVG icon */}</div>
                 <div className="timeline-end mb-10">
                   <time className="font-mono italic">{t("timelineDate4")}</time>
-                  <div className="text-lg font-black">{t("timelineTitle4")}</div>
+                  <div className="text-lg font-black">
+                    {t("timelineTitle4")}{" "}
+                    <Link href="https://devfolio.co/projects/credittalent-42f6" className="underline">
+                      - CrediTalent.
+                    </Link>{" "}
+                  </div>
+
                   {t("timelineDesc4")}
                 </div>
                 <hr />

packages/nextjs/app/locales/en/common.json

@@ -52,8 +52,8 @@
   "timelineTitle3": "Xocolatl is released on Base",
   "timelineDesc3": "Thanks to the hard work from the community, and funding from the Optimism Foundation, Xocolatl is released on Coinbase’s Base Layer 2 network with complete support for the Base native assets, along with a new innovative dual peg system to enable liquid staking of the ETH that is held in reserve by the network.",
   "timelineDate4": "October 30th, 2024",
-  "timelineTitle4": "La DAO team wins Based Latam Hackathon - CrediTalent is born",
-  "timelineDesc4": "the team of La DAO came together during this hackathon to create a new protocol that extends credit based solely on on-chain reputation using the Talent Protocol and XOC to disburse funds.",
+  "timelineTitle4": "La DAO team wins Based Latam Hackathon",
+  "timelineDesc4": "La DAO came together during this hackathon to create a new protocol that extends credit based solely on on-chain reputation using the Talent Protocol and XOC to disburse funds.",
   "timelineDate5": "November 21st, 2024",
   "timelineTitle5": "The Optimism Grants Council Approves $OP grant to La DAO",
   "timelineDesc5": "The Optimism Grants Council has approved a grant to La DAO to build increase liquidity in OP Mainnet, foster builders using $XOC and to encourage word-of-mouth to increase adoption of the protocol.",

packages/nextjs/app/locales/mx/common.json

@@ -69,7 +69,7 @@
   "timelineTitle3": "Xocolatl se lanza en Base",
   "timelineDesc3": "Gracias al arduo trabajo de la comunidad y al financiamiento de la Fundación Optimism, Xocolatl se lanza en la red Base Layer 2 de Coinbase con soporte completo para los activos nativos de Base, junto con un nuevo sistema de doble paridad innovador para habilitar la participación líquida del ETH que se mantiene en reserva por la red.",
   "timelineDate4": "30 de octubre de 2024",
-  "timelineTitle4": "El equipo de La DAO gana el Hackathon Based Latam - Nace CrediTalent",
+  "timelineTitle4": "El equipo de La DAO gana el Hackathon Based Latam",
   "timelineDesc4": "El equipo de La DAO se unió durante este hackathon para crear un nuevo protocolo que extiende crédito basado únicamente en la reputación en cadena utilizando el Talent Protocol y XOC para desembolsar fondos.",
   "timelineDate5": "21 de noviembre de 2024",
   "timelineTitle5": "El Consejo de Becas de Optimism aprueba una beca de $OP a La DAO",