Escrow detail page

[shamoo53]

✨ Build Escrow Detail Page

Closes #13

🧩 Overview

This PR introduces a comprehensive Escrow Detail Page that gives users full visibility into an individual escrow agreement and serves as the central place for escrow-related actions.

The page improves transparency, trust, and usability by clearly displaying escrow terms, participant statuses, transaction history, and a real-time timeline of events — all in a responsive, user-friendly layout.

🚩 Problem Statement

Before this change:

❌ No dedicated view for individual escrow agreements

❌ Users could not see counterparty roles or confirmation status

❌ Escrow timelines and on-chain transaction history were hidden

❌ Actions like confirm, dispute, or release lacked proper context

This made it difficult for users to make informed decisions and reduced confidence in the escrow process.

🎯 Solution

A new Escrow Detail Page available at:

/escrow/[id]

This page provides a complete, structured view of an escrow agreement and dynamically adapts based on user role and escrow state.

🧱 Page Structure & Features
🧾 Header Section

Escrow title / identifier

Status badge (Pending, Funded, Released, Disputed, etc.)

Quick action buttons (role-aware)

👥 Parties Section

Escrow participants’ wallet addresses

Clearly defined roles (Initiator, Counterparty)

Confirmation status indicators per party

📜 Terms Section

Escrow amount (properly formatted)

Conditions / description

Deadline with real-time countdown timer

🕒 Timeline Section

Chronological display of escrow events:

Creation

Deposits

Confirmations

Disputes

Releases

🔗 Transaction History

List of on-chain transactions

Direct links to the Stellar Explorer

External links open in new tabs

⚡ Conditional Actions

Action buttons rendered dynamically based on:

Current user role

Escrow state

Includes:

✅ Confirm

⚠️ Dispute

🚀 Release

🔁 Additional UX Enhancements

📋 Share / copy escrow link (clipboard support)

📱 Fully mobile-responsive layout

🚫 404 handling for invalid or non-existent escrow IDs

⏳ Loading and error states

🛠️ Implementation Details
📁 New Page
src/app/escrow/[id]/page.tsx

🧩 Components
src/components/escrow/detail/
├── EscrowHeader.tsx
├── PartiesSection.tsx
├── TermsSection.tsx
├── TimelineSection.tsx
├── TransactionHistory.tsx

🔘 Action Components

ConfirmButton

DisputeButton

ReleaseButton

🔌 Hooks & Utilities

useEscrow.ts for data fetching

Deadline countdown component

Clipboard-based share utility

🧪 Testing & Validation

The following scenarios were tested and verified:

✅ Correct escrow loads by ID

🚫 Invalid escrow ID returns a 404 page

🔐 Action buttons show/hide based on role and state

🕒 Timeline renders events in correct chronological order

🔗 Transaction links open Stellar Explorer correctly

⏱ Countdown timer updates in real time

📋 Share button copies escrow URL to clipboard

📱 Responsive behavior on mobile screens

Closes #13

[Cedarich]

@shamoo53 please run npm run lint, and address the few lint errors. Thank you for this solid implementation