Replace window.reload with proper state refresh after funding

[0xdevcollins]

Problem

After a successful pledge in `funding-modal.tsx`, the page does `window.location.reload()` to reflect the new funding state. This breaks the SPA experience, loses scroll position, and causes a jarring full-page refresh.

Current Code

// After successful pledge
window.location.reload();

Expected Behavior

• Use React state management to refresh funding data after pledge
• Invalidate relevant queries (e.g., campaign data, funding progress, backers list)
• Show updated funding progress bar immediately
• Maintain scroll position and UI state
• Consider optimistic update: show new amount immediately, reconcile with server

Implementation

• If using React Query / SWR: invalidate campaign and contributions queries
• If using local state: re-fetch via `getCampaignOnChain()` and update sidebar
• Add `onSuccess` callback prop to `FundingModal` to notify parent

Acceptance Criteria

• No full page reload after pledge
• Funding progress updates immediately
• Backers list refreshes
• Scroll position maintained

Priority

Low — Functional but poor UX.

Labels

crowdfunding, ui, ux

[linear]

BOU-173

[ryzen-xp]

Hi maintainers 👋
I’m a blockchain developer with strong expertise in Stellar, Rust,TS and Stellar SDK integrations. I’ve worked on multiple Stellar-based smart contract and backend systems.

I understand the scope of this issue and can deliver a reliable, production-quality solution with proper tests and documentation.
Plz assign me !!

ETA: 40 hours

[barry01-hash]

I will love to handle this issue

[Obiajulu-gif]

my chief, i will love to work on this issue

[jshaofa-ui]

Implementation Proposal for #524

Analysis

Reviewed the current funding-modal.tsx code. The modal already has an onSuccess callback pattern, but the parent component may not be using it to refresh campaign data. The issue is that after a successful pledge, the campaign page doesn't update its funding progress without a full page reload.

Proposed Fix

File: components/project-details/funding-modal.tsx

The modal already has proper state management (setIsOpen(false), onSuccess?.()). The fix needs to be in the parent component that uses FundingModal to ensure it:

1. Passes an onSuccess callback that invalidates/refetches campaign queries
2. Uses React Query's invalidateQueries for campaign data after pledge

File: Parent component using FundingModal

// After successful pledge, refresh campaign data
const queryClient = useQueryClient();

const handlePledgeSuccess = useCallback(() => {
  queryClient.invalidateQueries({ queryKey: ['campaign', campaignSlug] });
  queryClient.invalidateQueries({ queryKey: ['funding', campaignSlug] });
}, [queryClient, campaignSlug]);

<FundingModal 
  isOpen={isModalOpen} 
  onOpenChange={setIsModalOpen}
  onSuccess={handlePledgeSuccess}
/>

Why This Works

• No full page reload needed
• Campaign data updates immediately
• Scroll position preserved
• Follows React Query best practices

Files to Modify

• Parent component that renders FundingModal (add onSuccess with query invalidation)
• Optionally: Add refetchOnMount: true to campaign query options