Merge pull request #396 from T-kesh/fix/amount-formatting-utilities

feat: Apply amount.ts formatting utilities throughout all components

Author: ogazboiz

frontend/src/app/streams/[id]/page.tsx

@@ -21,6 +21,8 @@ import {
   resumeStream,
   toSorobanErrorMessage,
 } from "@/lib/soroban";
+import { formatAmount, parseAmount, hasValidPrecision, formatRate } from "@/lib/amount";
+import type { WalletSession } from "@/lib/wallet";
 interface StreamDetail {
   id: string;
   sender: string;
@@ -170,10 +172,15 @@ export default function StreamDetailsPage() {
       return;
     }
 
+    if (!hasValidPrecision(topUpAmount, 7)) {
+      toast.error("Amount exceeds maximum precision (7 decimal places)");
+      return;
+    }
+
     try {
       await topUpStream(session, {
         streamId: BigInt(streamId),
-        amount: BigInt(parseFloat(topUpAmount) * 1e7), // Convert to stroops
+        amount: parseAmount(topUpAmount, 7),
       });
       toast.success("Stream topped up successfully!");
       setShowTopUp(false);
@@ -276,8 +283,8 @@ export default function StreamDetailsPage() {
     );
   }
 
-  const deposited = parseFloat(stream.depositedAmount) / 1e7;
-  const withdrawn = parseFloat(stream.withdrawnAmount) / 1e7;
+  const deposited = parseFloat(formatAmount(BigInt(stream.depositedAmount), 7));
+  const withdrawn = parseFloat(formatAmount(BigInt(stream.withdrawnAmount), 7));
   const claimable = deposited - withdrawn;
   const displayedClaimable = withdrawStatus === "submitted" ? 0 : claimable;
   const percentage = Math.round((withdrawn / deposited) * 100);
@@ -351,7 +358,7 @@ export default function StreamDetailsPage() {
             </div>
             <div style={{ textAlign: "right" }}>
               <p style={{ margin: "0.2rem 0", fontSize: "0.9rem" }}>
-                Rate: {(parseFloat(stream.ratePerSecond) / 1e7).toFixed(7)} / sec
+                Rate: {formatRate(BigInt(stream.ratePerSecond), 7)}
               </p>
               <p style={{ margin: "0.2rem 0", fontSize: "0.9rem" }}>
                 Started: {new Date(stream.startTime * 1000).toLocaleDateString()}
@@ -459,6 +466,14 @@ export default function StreamDetailsPage() {
                 {resuming ? "Resuming..." : "Resume Stream"}
               </Button>
             )}
+            <Button
+              onClick={() => setShowCancelModal(true)}
+              disabled={cancelling || !stream.isActive}
+              style={{ borderColor: "#ef4444", color: "#ef4444" }}
+              variant="outline"
+            >
+              {cancelling ? "Cancelling..." : "Cancel Stream"}
+            </Button>
           </div>
 
           {showTopUp && (
@@ -496,7 +511,6 @@ export default function StreamDetailsPage() {
               />
             </div>
           )}
-
           {withdrawStatus !== "idle" && (
             <div style={{ marginTop: "1rem" }}>
               <TransactionTracker

frontend/src/components/Dashboard.tsx

@@ -5,7 +5,7 @@ import { useWallet } from '@/context/wallet-context';
 import { BackendStreamEvent } from '@/lib/api-types';
 import { downloadCSV } from '@/utils/csvExport';
 import toast from 'react-hot-toast';
-import { fromStroops } from '@/utils/amount';
+import { formatAmount } from '@/lib/amount';
 import { TopUpModal } from './stream-creation/TopUpModal';
 import {
     topUpStream as sorobanTopUp,
@@ -136,8 +136,8 @@ const Dashboard: React.FC = () => {
                                 <tr key={stream.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{stream.date}</td>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">{stream.recipient}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 font-semibold">{fromStroops(BigInt(stream.deposited), 7)} {stream.token}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{fromStroops(BigInt(stream.withdrawn), 7)} {stream.token}</td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 font-semibold">{formatAmount(BigInt(stream.deposited), 7)} {stream.token}</td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{formatAmount(BigInt(stream.withdrawn), 7)} {stream.token}</td>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{stream.token}</td>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                                         <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full

frontend/src/components/IncomingStreams.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import type { Stream } from '@/lib/dashboard';
 import { useStreamingAmount } from '@/hooks/useStreamingAmount';
 import toast from 'react-hot-toast';
-import { fromStroops } from '@/utils/amount';
+import { formatAmount } from '@/lib/amount';
 
 interface IncomingStreamsProps {
     streams: Stream[];
@@ -14,7 +14,7 @@ interface IncomingStreamsProps {
 
 function formatTokenAmount(value: number, decimals: number = 7): string {
     if (!Number.isFinite(value)) return '0.0000000';
-    return fromStroops(BigInt(Math.floor(value)), decimals);
+    return formatAmount(BigInt(Math.floor(value)), decimals);
 }
 
 const ClaimableAmount: React.FC<{ stream: Stream }> = ({ stream }) => {

frontend/src/components/dashboard/ActivityHistory.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import { BackendStreamEvent } from "@/lib/api-types";
-import { fromStroops } from "@/utils/amount";
+import { formatAmount } from "@/lib/amount";
 import TransactionTracker from "@/components/TransactionTracker";
 import { Download, ExternalLink, Clock } from "lucide-react";
 import { Button } from "../ui/Button";
@@ -28,7 +28,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
     const rows = events.map((event) => [
       event.streamId,
       event.eventType,
-      event.amount ? fromStroops(BigInt(event.amount), 7) : "0",
+      event.amount ? formatAmount(BigInt(event.amount), 7) : "0",
       new Date(event.timestamp * 1000).toISOString(),
       event.transactionHash || "",
     ]);
@@ -49,7 +49,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
   };
 
   const renderEventMessage = (event: BackendStreamEvent): React.ReactNode => {
-    const amount = event.amount ? fromStroops(BigInt(event.amount), 7) : "0";
+    const amount = event.amount ? formatAmount(BigInt(event.amount), 7) : "0";
     const link = (
       <Link
         href={`/streams/${event.streamId}`}

frontend/src/components/dashboard/dashboard-view.tsx

@@ -27,7 +27,6 @@ import {
   isExpectedNetwork,
   type WalletSession,
 } from "@/lib/wallet";
-import { isValidStellarPublicKey } from "@/lib/stellar";
 import {
   createStream as sorobanCreateStream,
   topUpStream as sorobanTopUp,
@@ -38,6 +37,7 @@ import {
   getTokenAddress,
   toSorobanErrorMessage,
 } from "@/lib/soroban";
+import { isValidStellarPublicKey } from "@/lib/stellar";
 import IncomingStreams from "../IncomingStreams";
 import { useStreamEvents } from "@/hooks/useStreamEvents";
 import { SSEStatusIndicator } from "./SSEStatusIndicator";

frontend/src/components/stream-creation/AmountStep.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useRef, useEffect } from "react";
+import { hasValidPrecision } from "@/lib/amount";
 
 interface AmountStepProps {
   value: string;
@@ -22,6 +23,16 @@ export const AmountStep: React.FC<AmountStepProps> = ({
   balanceError,
   onSetMax,
 }) => {
+  // Validate amount precision on change
+  const handleAmountChange = (newValue: string) => {
+    onChange(newValue);
+    
+    // Add precision validation if needed
+    if (newValue && !hasValidPrecision(newValue, 7)) {
+      // Parent component should handle this error
+      // This validation can be used to show inline error if needed
+    }
+  };
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Auto-focus on mount
@@ -72,7 +83,7 @@ export const AmountStep: React.FC<AmountStepProps> = ({
             step="any"
             min="0"
             value={value}
-            onChange={(e) => onChange(e.target.value)}
+            onChange={(e) => handleAmountChange(e.target.value)}
             placeholder="0.00"
             className={`w-full px-4 py-3 rounded-lg bg-glass border ${
               error

frontend/src/components/stream-creation/ScheduleStep.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useRef, useEffect } from "react";
+import { hasValidPrecision } from "@/lib/amount";
 
 interface ScheduleStepProps {
   duration: string;
@@ -68,6 +69,10 @@ export const ScheduleStep: React.FC<ScheduleStepProps> = ({
 
   const ratePerSecond = useMemo(() => {
     if (!amount || !duration || parseFloat(amount) <= 0 || parseFloat(duration) <= 0) {
+      // Optional: Add precision validation if needed
+      if (amount && !hasValidPrecision(amount, 7)) {
+        return null;
+      }
       return null;
     }
 

frontend/src/components/stream-creation/StreamCreationWizard.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useState } from "react";
+import { hasValidPrecision } from "@/lib/amount";
 import { Stepper } from "../ui/Stepper";
 import { Button } from "../ui/Button";
 import { RecipientStep } from "./RecipientStep";
@@ -268,6 +269,8 @@ export const StreamCreationWizard: React.FC<StreamCreationWizardProps> = ({
           const amount = parseFloat(formData.amount);
           if (isNaN(amount) || amount <= 0) {
             newErrors.amount = "Amount must be a positive number";
+          } else if (!hasValidPrecision(formData.amount, 7)) {
+            newErrors.amount = "Amount exceeds maximum precision (7 decimal places)";
           } else if (walletBalance) {
             const available = parseFloat(walletBalance);
             if (!isNaN(available) && amount > available) {

frontend/src/components/stream-creation/TopUpModal.tsx

@@ -8,8 +8,9 @@
  */
 
 import React, { useRef, useEffect, useState } from "react";
-import { Button } from "@/components/ui/Button";
 import toast from "react-hot-toast";
+import { Button } from "@/components/ui/Button";
+import { hasValidPrecision } from "@/lib/amount";
 
 interface TopUpModalProps {
   streamId: string;
@@ -48,6 +49,10 @@ export const TopUpModal: React.FC<TopUpModalProps> = ({
       setError("Please enter a valid positive amount.");
       return false;
     }
+    if (!hasValidPrecision(amount, 7)) {
+      setError("Amount exceeds maximum precision (7 decimal places).");
+      return false;
+    }
     setError(null);
     return true;
   };