Merge pull request #41 from rehna-jp/feat/14-optimistic-pledge-ui

 Added optimistic pledge updates (#14) and fix backend TypeScript types

Author: ritik4ever

backend/package-lock.json

@@ -1,27 +1,28 @@
 {
-  "name": "stellar-goal-vault-backend",
+  "name": "stellar-goal-vault-backend",
   "version": "1.0.0",
-  "description": "Backend API for Stellar Goal Vault",
+  "description": "Backend API for Stellar Goal Vault",
   "main": "dist/index.js",
   "scripts": {
     "dev": "ts-node-dev --respawn src/index.ts",
     "build": "tsc",
     "start": "node dist/index.js",
     "test": "vitest"
   },
-  "dependencies": {
-    "better-sqlite3": "^12.6.2",
-    "cors": "^2.8.5",
-    "dotenv": "^17.3.1",
-    "express": "^4.21.2",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.14.1",
-    "ts-node-dev": "^2.0.0",
-    "typescript": "^5.2.2",
-    "vitest": "^1.0.0"
-  }
-}
+  "dependencies": {
+    "better-sqlite3": "^12.6.2",
+    "cors": "^2.8.5",
+    "dotenv": "^17.3.1",
+    "express": "^4.21.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.3",
+    "@types/node": "^22.14.1",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.2.2",
+    "vitest": "^1.0.0"
+  }
+}

backend/package.json

@@ -15,6 +15,51 @@ import {
 } from "./services/api";
 import { Campaign, CampaignEvent, OpenIssue } from "./types/campaign";
 
+function round(value: number): number {
+  return Number(value.toFixed(2));
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+function toOptimisticPledgedCampaign(campaign: Campaign, amount: number): Campaign {
+  const nowInSeconds = Math.floor(Date.now() / 1000);
+  const nextPledgedAmount = round(campaign.pledgedAmount + amount);
+  const deadlineReached = nowInSeconds >= campaign.deadline;
+  const status =
+    campaign.claimedAt !== undefined
+      ? "claimed"
+      : nextPledgedAmount >= campaign.targetAmount
+        ? "funded"
+        : deadlineReached
+          ? "failed"
+          : "open";
+
+  return {
+    ...campaign,
+    pledgedAmount: nextPledgedAmount,
+    progress: {
+      ...campaign.progress,
+      status,
+      percentFunded: round((nextPledgedAmount / campaign.targetAmount) * 100),
+      remainingAmount: round(Math.max(0, campaign.targetAmount - nextPledgedAmount)),
+      pledgeCount: campaign.progress.pledgeCount + 1,
+      canPledge: campaign.claimedAt === undefined && !deadlineReached,
+      canClaim:
+        campaign.claimedAt === undefined &&
+        deadlineReached &&
+        nextPledgedAmount >= campaign.targetAmount,
+      canRefund:
+        campaign.claimedAt === undefined &&
+        deadlineReached &&
+        nextPledgedAmount < campaign.targetAmount,
+    },
+  };
+}
+
 function App() {
   const [campaigns, setCampaigns] = useState<Campaign[]>([]);
   const [issues, setIssues] = useState<OpenIssue[]>([]);
@@ -23,6 +68,7 @@ function App() {
   const [createError, setCreateError] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [actionMessage, setActionMessage] = useState<string | null>(null);
+  const [pendingPledgeCampaignId, setPendingPledgeCampaignId] = useState<string | null>(null);
 
   async function refreshCampaigns(nextSelectedId?: string | null) {
     const data = await listCampaigns();
@@ -98,13 +144,55 @@ function App() {
     setActionError(null);
     setActionMessage(null);
 
+    const previousCampaigns = campaigns;
+    const previousHistory = history;
+    const optimisticTimestamp = Math.floor(Date.now() / 1000);
+    const optimisticEvent: CampaignEvent = {
+      id: -Date.now(),
+      campaignId,
+      eventType: "pledged",
+      timestamp: optimisticTimestamp,
+      actor: contributor,
+      amount,
+      metadata: { pending: true },
+    };
+
+    setCampaigns((currentCampaigns) =>
+      currentCampaigns.map((campaign) =>
+        campaign.id === campaignId ? toOptimisticPledgedCampaign(campaign, amount) : campaign,
+      ),
+    );
+    setPendingPledgeCampaignId(campaignId);
+    if (selectedCampaignId === campaignId) {
+      setHistory((currentHistory) => [optimisticEvent, ...currentHistory]);
+    }
+    setActionMessage("Submitting pledge...");
+
+    const pendingStartedAt = Date.now();
+    const minimumPendingMs = 800;
+
     try {
       await addPledge(campaignId, { contributor, amount });
+      const elapsedMs = Date.now() - pendingStartedAt;
+      if (elapsedMs < minimumPendingMs) {
+        await delay(minimumPendingMs - elapsedMs);
+      }
       await refreshCampaigns(campaignId);
       await refreshHistory(campaignId);
+      setPendingPledgeCampaignId(null);
       setActionMessage("Pledge recorded in the local goal vault.");
     } catch (error) {
+      const elapsedMs = Date.now() - pendingStartedAt;
+      if (elapsedMs < minimumPendingMs) {
+        await delay(minimumPendingMs - elapsedMs);
+      }
+      setCampaigns(previousCampaigns);
+      if (selectedCampaignId === campaignId) {
+        setHistory(previousHistory);
+      }
+      setPendingPledgeCampaignId(null);
       setActionError(error instanceof Error ? error.message : "Failed to add pledge.");
+      setActionMessage(null);
     }
   }
 
@@ -172,6 +260,7 @@ function App() {
           campaign={selectedCampaign}
           actionError={actionError}
           actionMessage={actionMessage}
+          isPledgePending={pendingPledgeCampaignId === selectedCampaignId}
           onPledge={handlePledge}
           onClaim={handleClaim}
           onRefund={handleRefund}

frontend/package-lock.json

@@ -5,6 +5,7 @@ interface CampaignDetailPanelProps {
   campaign: Campaign | null;
   actionError?: string | null;
   actionMessage?: string | null;
+  isPledgePending?: boolean;
   onPledge: (campaignId: string, contributor: string, amount: number) => Promise<void>;
   onClaim: (campaign: Campaign) => Promise<void>;
   onRefund: (campaignId: string, contributor: string) => Promise<void>;
@@ -14,6 +15,7 @@ export function CampaignDetailPanel({
   campaign,
   actionError,
   actionMessage,
+  isPledgePending = false,
   onPledge,
   onClaim,
   onRefund,
@@ -118,7 +120,7 @@ export function CampaignDetailPanel({
             type="submit"
             disabled={isSubmitting || !activeCampaign.progress.canPledge}
           >
-            Add pledge
+            {isPledgePending ? "Submitting..." : "Add pledge"}
           </button>
           <button
             className="btn-ghost"
@@ -139,6 +141,9 @@ export function CampaignDetailPanel({
         </div>
       </form>
 
+      {isPledgePending ? (
+        <p className="pending-note">Pledge is pending confirmation and will reconcile automatically.</p>
+      ) : null}
       {actionError ? <p className="form-error">{actionError}</p> : null}
       {actionMessage ? <p className="form-success">{actionMessage}</p> : null}
 

frontend/src/App.tsx

@@ -35,19 +35,25 @@ export function CampaignTimeline({ history }: CampaignTimelineProps) {
         <div className="empty-state">Select a campaign to see lifecycle events.</div>
       ) : (
         <div className="timeline">
-          {history.map((event) => (
-            <article key={event.id} className="timeline-item">
+          {history.map((event) => {
+            const isPending = event.metadata?.pending === true;
+            return (
+            <article key={event.id} className={`timeline-item ${isPending ? "pending" : ""}`}>
               <div className="timeline-dot" aria-hidden />
               <div className="timeline-copy">
-                <strong>{describeEvent(event)}</strong>
+                <strong>
+                  {describeEvent(event)}
+                  {isPending ? " (pending...)" : ""}
+                </strong>
                 <span className="muted">{formatTimestamp(event.timestamp)}</span>
                 <span className="muted">
                   {event.actor ? `Actor: ${event.actor.slice(0, 10)}...` : "System event"}
                   {typeof event.amount === "number" ? ` | Amount: ${event.amount}` : ""}
                 </span>
               </div>
             </article>
-          ))}
+            );
+          })}
         </div>
       )}
     </section>