Integrate Escrow UI for Bounty Fund Management

[0xdevcollins]

Feature: Integrate Escrow UI for Bounty Fund Management

Overview

The Core Escrow contract manages all fund pools, deposits, releases, and refunds. The main web (boundless/lib/api/escrow.ts) has escrow API helpers, but the bounty frontend has none. Contributors and creators need visibility into escrow state for trust and transparency.

Depends on: #139 (TypeScript contract bindings)

---

Goals

• Display escrow status on bounty detail pages
• Show locked funds, release slots, and fee breakdowns
• Enable creators to see pool state and fund release history
• Show contributors their pending payouts

---

Contract Methods Used

CoreEscrow.get_pool(pool_id) → Pool details
CoreEscrow.get_slot(pool_id, index) → Slot recipient and amount
CoreEscrow.is_pool_locked(pool_id) → bool
CoreEscrow.calculate_fee(amount, sub_type) → (net, fee)

---

Implementation Details

1. Escrow Status Badge

Create: components/bounty/escrow-status.tsx

• Show on bounty cards and detail pages
• States: "Funds Escrowed", "Partially Released", "Fully Released", "Refunded"
• Amount locked vs released

2. Escrow Detail Panel

Create: components/bounty/escrow-detail-panel.tsx

• Pool info: total amount, asset, locked status, expiry
• Release slots: recipient, amount, status (pending/released)
• Fee breakdown: gross amount, platform fee, insurance, net payout
• Transaction history links (Stellar explorer)

3. Fee Calculator Widget

Create: components/bounty/fee-calculator.tsx

• For creators: show fee breakdown before funding
• Input: bounty amount + type
• Output: net amount to contributor, platform fee, insurance fee
• Uses calculate_fee() contract method

4. Create Hook

Create: hooks/use-escrow.ts

• useEscrowPool(poolId) — read pool state
• useEscrowSlots(poolId) — list release slots
• useFeeCalculation(amount, subType) — calculate fees

---

Files Affected

Created

• hooks/use-escrow.ts
• components/bounty/escrow-status.tsx
• components/bounty/escrow-detail-panel.tsx
• components/bounty/fee-calculator.tsx

Modified

• app/bounty/[bountyId]/page.tsx (add escrow panel)
• components/bounty/bounty-card.tsx (add escrow badge)

---

Acceptance Criteria

• Escrow status visible on bounty cards and detail pages
• Pool details (locked amount, asset, expiry) displayed
• Release slots show recipient and amount
• Fee breakdown shown before funding
• Links to Stellar explorer for on-chain verification

[linear]

BOU-153

[coderabbitai]

🔗 Related PRs

#17 - feat: Built BountyCard component with shadcn composition [merged]
#34 - feat: Implement API-driven bounty fetching and display with dedicated loading, empty, and error UI components. [merged]
#55 - feat-Implement Bounty Status Logic & Anti-Squatting [merged]
#89 - feat: add public transparency page (#86) [merged]
#111 - Feat: implementation logic for single claim model [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[zhaog100]

/attempt

[zhaog100]

Hi! I'd like to work on this bounty.

My Plan:

• Analyze the requirements
• Implement the solution
• Submit PR within 24-48 hours

Payment Address:

• Platform: OKX
• Token: USDT (TRC20)
• Address: TGu4W5T6q4KvLAbmXmZSRpUBNRCxr2aFTP

Let's get this done! 🚀

[zhaog100]

/attempt

[zhaog100]

Hi! I'd like to work on this bounty.

My Plan:

• Analyze the requirements
• Implement the solution
• Submit PR within 24-48 hours

Payment Address:

• Platform: OKX
• Token: USDT (TRC20)
• Address: TGu4W5T6q4KvLAbmXmZSRpUBNRCxr2aFTP

Let's get this done! 🚀

[Franklivania]

@Franklivania has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I am Franklin. I have built blockchain-integrated UIs that surface escrow states, payout structures, and fee breakdowns with real-time contract reads. I’ve implemented hooks-based data layers and modular components for financial transparency features.

For this issue, I would:

• Create use-escrow hooks to fetch pool, slots, and fee calculations from contract bindings.
• Build escrow status badge and detail panel with pool state, slots, and transaction links.
• Implement fee calculator widget using contract fee logic.
• Integrate components into bounty pages and cards with clean state handling.

ETA: 8–12 hours.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Franklivania to this issue.

[drips-wave]

Congratulations, @Franklivania! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Franklivania: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊