diff --git a/packages/nextjs/app/cdp/components/modals/MintModal.tsx b/packages/nextjs/app/cdp/components/modals/MintModal.tsx
index 10d3227..0c3edcb 100644
--- a/packages/nextjs/app/cdp/components/modals/MintModal.tsx
+++ b/packages/nextjs/app/cdp/components/modals/MintModal.tsx
@@ -5,6 +5,7 @@ import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Address } from "viem";
import { useAccount, useChainId, useReadContract } from "wagmi";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
import { houseOfCoinABI } from "~~/app/components/abis/houseofcoin";
import { getBlockExplorerUrl } from "~~/app/utils/utils";
@@ -42,7 +43,9 @@ const MintModal: React.FC = ({
args: [address, houseOfReserveContract],
});
- const formattedMintingPower = mintingPower ? (Number(mintingPower) / 10 ** 18).toFixed(2) : "0.00";
+ const formattedMintingPower = mintingPower
+ ? new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(Number(mintingPower) / 10 ** 18)
+ : "$0.00";
const { data: userHealthRatio } = useReadContract({
address: houseOfCoinContract,
@@ -151,6 +154,22 @@ const MintModal: React.FC = ({
}
};
+ const getProgressEmoji = () => {
+ const ratio = parseFloat(formattedUserHealthRatio);
+
+ if (ratio < 2) {
+ return "👎 Not looking too good, are we? Time to get back on track and repay some $XOC!";
+ } else if (ratio >= 2 && ratio < 5) {
+ return "🤔 Hmm, you're on the edge. Maybe a little less debt?";
+ } else if (ratio >= 5 && ratio < 10) {
+ return "👍 You're doing alright, but keep an eye on your position when the market gets volatile!";
+ } else if (ratio >= 10 && ratio < 20) {
+ return "😄 You're cruising! Keep it up, nothing to worry!";
+ } else {
+ return "🤩 You're fitter than a double-shot espresso on Monday morning!";
+ }
+ };
+
if (!isOpen) return null;
return (
@@ -173,7 +192,10 @@ const MintModal: React.FC = ({
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
>
- Here I can warn you about an important fact about minting $XOC
+
+ Unlock the power of digital MXN pesos with XOC! Experience the future of mexican finance and help us build a
+ more inclusive and fair financial system for everyone.
+
{!data && !isError && (
@@ -191,23 +213,54 @@ const MintModal: React.FC = ({
$XOC
{errorMessage && {errorMessage}
}
+
+ Minted Amount (including 1.5% fee)
+
+
+
+
+
+
+ {amount ? (parseFloat(amount) * 1.015).toFixed(2) : "0.00"}
+
+
$XOC
+
-
-
+
Minting Power:
-
{formattedMintingPower}
+
+
+
+
+ {formattedMintingPower}
+
User Health Ratio:
-
{formattedUserHealthRatio}
+
+
+
+
+ {formattedUserHealthRatio}
+
+
{getProgressEmoji()}