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()}