Round off USD value while displaying

src/components/PaymentModal.tsx

@@ -50,7 +50,7 @@ export default function PaymentModal({
 
   // Fetch payment amount based on USD price for both payment methods
   useEffect(() => {
-    if (!isOpen || deploymentCost === null || !paymentMethod) return;
+    if (!isOpen || !deploymentCost || !paymentMethod) return;
 
     const fetchPaymentAmount = async () => {
       setLoadingPrice(true);
@@ -86,7 +86,7 @@ export default function PaymentModal({
   useEffect(() => {
     if (isOpen) {
       setError('');
-      setTokenAmount(-1);
+      setTokenAmount(0);
     }
   }, [isOpen]);
 
@@ -95,7 +95,7 @@ export default function PaymentModal({
       return;
     }
 
-    if (tokenAmount === -1 || loadingPrice) {
+    if (tokenAmount === 0 || loadingPrice) {
       setError('Payment amount not ready. Please wait.');
       return;
     }
@@ -192,7 +192,7 @@ export default function PaymentModal({
               <div className="relative">
                 <input
                   type="text"
-                  value={`$${deploymentCost}`}
+                  value={`$${deploymentCost ? deploymentCost.toPrecision(2) : null}`}
                   disabled={true}
                   className="w-full p-3 pr-12 rounded-md"
                   style={{

src/services/registry.ts

@@ -87,8 +87,5 @@ export const getCostOfDeployment = async (): Promise<number> => {
   const deploymentCostAlnt = parseFloat(deploymentCostRecord.amount); // ALNT required
 
   // Calculate deployment cost in USD: (ALNT required) * (USD per ALNT)
-  const deploymentCostUsd = deploymentCostAlnt * alntPriceUsd;
-
-  // Return with 6 decimal precision
-  return parseFloat(deploymentCostUsd.toFixed(2));
+  return deploymentCostAlnt * alntPriceUsd;
 }