better price formatting

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>

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>

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]
   )