From c897b45a85066d0ba5fe85fbb98b1e36bc91bcf2 Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Fri, 16 Jul 2021 18:07:37 +0200
Subject: [PATCH] better price formatting

---
 components/ContributionModal.tsx | 6 +++++-
 components/PoolInfoCards.tsx     | 8 +++++++-
 hooks/useVaults.tsx              | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index e43b948..fe38714 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -44,6 +44,10 @@ const ContributionModal = () => {
   const [maxButtonTransition, setMaxButtonTransition] = useState(false)
   const [errorMessage, setErrorMessage] = useState(null)
 
+  const priceFormat = new Intl.NumberFormat('en-US', {
+    maximumSignificantDigits: 4,
+  })
+
   useEffect(() => {
     console.log('refresh modal on balance change')
     setWalletAmount(usdcBalance)
@@ -291,7 +295,7 @@ const ContributionModal = () => {
               className={`mr-2`}
             />
             <div className="font-bold text-fgd-1 text-xl">
-              {vaults.estimatedPrice}
+              {priceFormat.format(vaults.estimatedPrice)}
             </div>
           </div>
         </div>
diff --git a/components/PoolInfoCards.tsx b/components/PoolInfoCards.tsx
index f8a8acc..69fe35a 100644
--- a/components/PoolInfoCards.tsx
+++ b/components/PoolInfoCards.tsx
@@ -18,6 +18,10 @@ const PoolInfoCards = () => {
   const { endIdo, endDeposits } = usePool()
   const vaults = useVaults()
 
+  const numberFormat = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 10,
+  })
+
   return (
     <div className="flex flex-row justify-center mb-12">
       <Card title="Deposits closing in">
@@ -62,7 +66,9 @@ const PoolInfoCards = () => {
             className={`mr-1`}
           />{' '}
           <div className="font-bold text-fgd-1 text-base">
-            {vaults.estimatedPrice.substring(0, 9)}
+            {vaults.estimatedPrice
+              ? numberFormat.format(vaults.estimatedPrice)
+              : 'N/A'}
           </div>
         </div>
       </Card>
diff --git a/hooks/useVaults.tsx b/hooks/useVaults.tsx
index 5d99c1d..54e8c03 100644
--- a/hooks/useVaults.tsx
+++ b/hooks/useVaults.tsx
@@ -32,7 +32,7 @@ export default function useVaults() {
   )
 
   const estimatedPrice = useMemo(
-    () => (usdc && mango ? `$${usdc.balance / mango.balance}` : 'N/A'),
+    () => (usdc && mango ? usdc.balance / mango.balance : undefined),
     [usdc, mango]
   )