fix: frontend component refactors, dead code cleanup, and docs update (#580, #581, #582, #583)

README.md

@@ -62,7 +62,7 @@ docker compose up --build
 
 This starts:
 
-- **Postgres** database on port `5432`
+- **Postgres** database on port `5433`
 - **Backend** API on port `3001`
 
 To run in detached mode:

backend/.env.example

@@ -1,5 +1,5 @@
 # Database
-DATABASE_URL="postgresql://user:password@localhost:5432/flowfi?schema=public"
+DATABASE_URL="postgresql://user:password@localhost:5433/flowfi?schema=public"
 
 # Server
 PORT=3001
@@ -17,7 +17,7 @@ SANDBOX_MODE_ENABLED=true
 
 # Optional: Use a separate database for sandbox
 # If not set, it will use {DATABASE_URL}_sandbox
-SANDBOX_DATABASE_URL="postgresql://user:password@localhost:5432/flowfi_sandbox?schema=public"
+SANDBOX_DATABASE_URL="postgresql://user:password@localhost:5433/flowfi_sandbox?schema=public"
 
 # ─── Soroban Event Indexer ────────────────────────────────────────────────────
 # Soroban RPC endpoint (testnet default shown)

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

@@ -1,12 +1,13 @@
 "use client";
 import React, { useMemo, useRef, useEffect } from "react";
 import { hasValidPrecision } from "@/lib/amount";
+import { SECONDS_PER_UNIT, DurationUnit } from "@/lib/soroban";
 
 interface ScheduleStepProps {
   duration: string;
-  durationUnit: "seconds" | "minutes" | "hours" | "days" | "weeks" | "months";
+  durationUnit: DurationUnit;
   onDurationChange: (value: string) => void;
-  onUnitChange: (value: "seconds" | "minutes" | "hours" | "days" | "weeks" | "months") => void;
+  onUnitChange: (value: DurationUnit) => void;
   error?: string;
   amount?: string;
   token?: string;
@@ -42,29 +43,10 @@ export const ScheduleStep: React.FC<ScheduleStepProps> = ({
       return null;
     }
 
-    let seconds = parseFloat(duration);
-
-    switch (durationUnit) {
-      case "seconds":
-        break;
-      case "minutes":
-        seconds *= 60;
-        break;
-      case "hours":
-        seconds *= 3600;
-        break;
-      case "days":
-        seconds *= 86400;
-        break;
-      case "weeks":
-        seconds *= 604800;
-        break;
-      case "months":
-        seconds *= 2592000; // 30 days
-        break;
-    }
+    const seconds = parseFloat(duration);
+    const multiplier = Number(SECONDS_PER_UNIT[durationUnit]);
 
-    return seconds;
+    return seconds * multiplier;
   }, [duration, durationUnit]);
 
   const ratePerSecond = useMemo(() => {
@@ -154,7 +136,7 @@ export const ScheduleStep: React.FC<ScheduleStepProps> = ({
             value={durationUnit}
             onChange={(e) =>
               onUnitChange(
-                e.target.value as "seconds" | "minutes" | "hours" | "days" | "weeks" | "months"
+                e.target.value as DurationUnit
               )
             }
             className="w-full px-4 py-3 rounded-lg bg-glass border border-glass-border focus:border-accent focus:ring-accent focus:outline-none focus:ring-2 focus:ring-opacity-50 transition-colors text-foreground"

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

@@ -112,7 +112,7 @@ export const StreamCreationWizard: React.FC<StreamCreationWizardProps> = ({
   // Tracking & Polling state (Issue #378)
   const [txHash, setTxHash] = useState<string | null>(null);
   const [isPolling, setIsPolling] = useState(false);
-  const [timeout, setTimeoutError] = useState(false);
+  const [timeoutError, setTimeoutError] = useState(false);
 
   const router = useRouter();
 
@@ -492,10 +492,10 @@ export const StreamCreationWizard: React.FC<StreamCreationWizardProps> = ({
           {isPolling ? (
             <div className="flex flex-col items-center justify-center py-10">
               <h3 className="text-xl font-bold mb-8">
-                {timeout ? "Confirmation Timeout" : "Waiting for confirmation..."}
+                {timeoutError ? "Confirmation Timeout" : "Waiting for confirmation..."}
               </h3>
 
-              {!timeout ? (
+              {!timeoutError ? (
                 <>
                   <TransactionTracker 
                     steps={[

frontend/src/components/wallet/WalletButton.tsx

@@ -78,7 +78,7 @@ export function WalletButton() {
   }
 
   if (status === "connected" && session) {
-    // const networkLabel = formatNetwork(session.network);
+
     const networkOk = isExpectedNetwork(session.network);
 
     return (
@@ -91,14 +91,7 @@ export function WalletButton() {
           title={session.publicKey}
           onClick={() => setDropdownOpen((o) => !o)}
         >
-          {/* <span className="wallet-chip__name">{session.walletName}</span> */}
-          {/* <span
-            className="wallet-chip__network"
-            data-mainnet={networkLabel === "Mainnet" ? "true" : undefined}
-            data-mismatch={!networkOk ? "true" : undefined}
-          >
-            {networkLabel}
-          </span> */}
+
           <strong className="wallet-chip__key">
             {shortenPublicKey(session.publicKey)}
           </strong>

frontend/src/lib/soroban.ts

@@ -65,9 +65,9 @@ export class SorobanCallError extends Error {
   }
 }
 
-type DurationUnit = "seconds" | "minutes" | "hours" | "days" | "weeks" | "months";
+export type DurationUnit = "seconds" | "minutes" | "hours" | "days" | "weeks" | "months";
 
-const SECONDS_PER_UNIT: Record<DurationUnit, bigint> = {
+export const SECONDS_PER_UNIT: Record<DurationUnit, bigint> = {
   seconds: BigInt(1),
   minutes: BigInt(60),
   hours:   BigInt(3600),