Trustless Work dApp – Client-Facing Escrow Page

[techrebelgit]

Task: Client-Facing Escrow Page using Escrow Blocks (Wallet + Fund + Approve)

Goal
Build a shareable, client-facing Escrow Landing Page that an agency can send to its client. The page must let the client:

1. Log in with a Stellar wallet,
2. See escrow details & milestones,
3. Fund the escrow in USDC, and
4. Approve milestones (when they’re in “For Review”).

This should be implemented entirely with Escrow Blocks (no custom wallet logic, minimal custom UI).

---

Why this matters

Agencies using Trustless Work often just need a simple page to collect funds and get approvals. This task delivers that minimum flow, open-source, composable, and production-useful.

---

Scope (v1)

• Page routes:

  • /escrow/[escrowId] — Escrow Landing Page (primary target)
  • /escrows — optional list view that shows escrows where the connected wallet is the Approver (fetch by signer).

• Use Escrow Blocks:

  • Wallet Block (for Stellar login & context)

  • Fund Block (for depositing USDC)

  • Fetch Escrow:

    • by ID (from the URL param), and
    • by signer (list all escrows where the connected wallet is the Approver)

  • Milestones / Approvals block(s): render milestones and allow Approve actions where permitted

• Read-only sections:

  • Escrow summary (title, description, roles, amounts, status, platform fee if available)
  • Milestones list with statuses (Pending, For Review, Approved, Released)
  • Transaction feedback (hash/confirmation) after funding or approving

Out of scope (v1): file uploads/evidence, disputes, notifications, multi-chain.

---

Acceptance Criteria

• Wallet login works with supported Stellar wallets via Wallet Block.

• Visiting /escrow/[escrowId]:

  • Fetches that escrow via get escrow by ID block/helper.

  • Renders escrow summary and milestones using blocks.

  • If connected wallet matches the Approver role, user can:

    • Fund the escrow via Fund Block (USDC)
    • Approve milestones that are in “For Review”.

  • Shows transaction confirmation (hash or success state) after actions.

• Visiting /escrows (optional bonus):

  • Lists escrows where the connected wallet is the Approver, using get escrows by signer.
  • Each item links to /escrow/[escrowId].

• Clean, minimal UI that relies on Escrow Blocks’ built-in components (you may add light CSS/Tailwind for layout).

• README updates with setup steps.

• At least 2 screenshots or a short loom showing:

  1. Wallet connect → viewing escrow
  2. Funding and approving a milestone

• PR includes a brief Notes.md describing steps, obstacles, and any proposed improvements to Escrow Blocks.

---

Implementation Hints (use Escrow Blocks)

Naming may vary depending on the exact package exports. Use the documented Wallet, Funding, Milestone, and Fetch utilities from Escrow Blocks. Keep custom logic minimal.

Suggested composition on /escrow/[escrowId]:

• WalletConnectBlock — top of page (gates everything else)
• EscrowSummaryBlock escrowId={idFromRoute}
• MilestonesListBlock escrowId={idFromRoute}
• FundEscrowBlock escrowId={idFromRoute} (visible if user is Approver or payer)
• ApproveMilestoneBlock escrowId={idFromRoute} (shows per-milestone Approve where status = “For Review” and user is Approver)
• Optional: TransactionToastBlock (or similar) to surface tx success/hash

Suggested composition on /escrows (optional):

• WalletConnectBlock
• EscrowListBlock filter={{ role: 'Approver', signer: connectedAddress }}

---

Setup & Test Data

1. Create a testnet Multi-Release Escrow in the BackOffice with 3 milestones.

   • Roles: set the client’s wallet as the Approver.
   • Amount: e.g., total $10,000 USDC (split across milestones or as pool).

2. Copy the resulting escrowId for testing /escrow/[escrowId].

3. As the agency, mark a milestone as For Review (via BackOffice) so the Approver can see the Approve button.

4. Test with the Approver’s wallet connected:

   • Fund the escrow
   • Approve the “For Review” milestone
   • Confirm success state and updated balances/status

---

Developer Environment

• Framework: Next.js (React) recommended

• Style: Tailwind (optional) — keep it minimal; Escrow Blocks should drive most UI

• Install:

  • @trustlesswork/escrow-blocks (or the correct package name/version from docs)
  • Any peer deps requested by blocks

• ENV:

  • NEXT_PUBLIC_TW_API_BASE (if required by Blocks config)
  • NEXT_PUBLIC_NETWORK=testnet (or as required)
  • Any wallet provider config needed by the Wallet Block

If the Blocks library exposes a provider (e.g., EscrowBlocksProvider), wrap your app with it and pass API base/network once in _app.tsx or layout.

---

Deliverables

• PR with:

  • /pages/escrow/[escrowId].tsx (or app router equivalent)
  • /pages/escrows.tsx (optional list view)
  • README.md (project setup + how to run + how to test with BackOffice)
  • Notes.md (what you did, issues hit, suggestions)
  • Screenshots (or Loom link) in PR description

• Keep components small and use Escrow Blocks primitives as-is. Avoid custom business logic.

---

Definition of Done

• Works end-to-end on testnet with a real escrow created in BackOffice.
• Approver can fund and approve as described.
• State updates are visible (milestone status, escrow balances).
• Minimal UX polish; production-readable code with comments where needed.
• Clear documentation so another contributor can run it in <10 minutes.

---

Nice to Have (not required)

• /escrows list view implemented
• Link to Escrow Viewer for public transparency
• Basic empty/loading/error states

---

How to Submit

1. Fork the repo, create a feature branch: feature/escrow-landing-escrow-blocks

2. Open a PR to main with title: “Escrow Landing Page (Wallet + Fund + Approve) — using Escrow Blocks”

3. In the PR description, include:

   • Escrow ID used for testing (testnet)
   • Screenshots / Loom
   • Notes & suggestions

[Lynndabel]

can this be assigned to me please? I will finish in 24hours

[techrebelgit]

Hello! sure assigned!
Any questions let me know! thanks!

[techrebelgit]

Hello! Any updates? Pura Vida!