Trustless Work - Escrow Data Viewer

A decentralized escrow viewer for Trustless Work, built with Next.js and TypeScript. This viewer allows users to input a Soroban contract ID on the Stellar blockchain and view escrow details such as roles, properties, milestone status, amount, and balance. It provides transparency without allowing interaction with the contract, featuring a user-friendly interface with tooltips to explain role permissions.

Features

• Fetch Escrow Details: Enter a Soroban contract ID to retrieve escrow data from the Stellar blockchain.
• Display Key Attributes: Shows roles (e.g., Milestone Approver, Service Provider), amount, balance, milestones, and properties in a structured format.
• Role Permission Tooltips: Hover over role names (e.g., Milestone Approver, Service Provider) to see their permissions.
• User-Friendly UI: Built with ShadCN components for a clean, responsive design.
• Error Handling: Displays clear error messages for invalid contract IDs or failed fetches.

Getting Started

Prerequisites

• Node.js: Ensure you have Node.js (version 18 or higher) installed.
• Stellar Testnet Access: This project connects to the Stellar testnet via Soroban. No additional configuration is needed unless you want to switch to mainnet.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd escrow-viewer

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open http://localhost:3000 in your browser to see the Escrow Data Viewer.

Usage

1. Enter a Contract ID:
   • On the homepage, you’ll see an input field labeled "Enter your escrow ID."
   • Input a valid Soroban contract ID (e.g., CABC123...) from the Stellar testnet.
2. Fetch Escrow Data:
   • Click the "Fetch" button to retrieve the escrow details.
   • The viewer will display the data, including roles, amount, balance, milestones, and properties.
3. View Role Permissions:
   • Hover over role names (e.g., Milestone Approver, Service Provider) to see their permissions via tooltips.

Example Output

//screenshot

Project Structure

• app/page.tsx: Main page component that renders the UI and handles data fetching.
• utils/ledgerkeycontract.ts: Contains the logic to fetch escrow data from the Stellar blockchain using Soroban.
• components/: Custom components like NavbarSimple for navigation.
• public/: Static assets, including the hexagonal logo (escrow-background.png).

Technical Details

• Framework: Next.js with TypeScript for a robust, type-safe frontend.
• Blockchain: Stellar (Soroban smart contracts) for decentralized escrow data.
• UI Library: ShadCN with Tailwind CSS for styling and components.
• Font: Uses Inter from Google Fonts, optimized with next/font.

Modifying the Code

• Start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
• To change the Stellar network (e.g., from testnet to mainnet), update the networkPassphrase and server in utils/ledgerkeycontract.ts.
• Role permissions are defined in app/page.tsx under ROLE_PERMISSIONS. Update them based on the latest "Roles in Trustless Work" documentation.

Learn More About Next.js

To learn more about Next.js, check out these resources:

• Next.js Documentation - Learn about Next.js features and API.
• Learn Next.js - An interactive Next.js tutorial.
• Next.js GitHub Repository - Your feedback and contributions are welcome!

Deployment

Deploy on Vercel

The easiest way to deploy this Next.js app is to use the Vercel Platform:

1. Push your code to a GitHub repository.
2. Import the repository into Vercel and deploy.
3. Vercel will automatically handle the build and deployment.

Check out the Next.js deployment documentation for more details.

Deploy on a Decentralized Platform

For a truly decentralized deployment:

1. Build the app:

   npm run build

2. Deploy to IPFS using a service like Fleek or Pinata:
   • Export the out directory (generated by npm run export) to IPFS.
   • Access the app via an IPFS gateway (e.g., https://ipfs.io/ipfs/<hash>).

Contributing

Contributions are welcome! Please:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes and commit (git commit -m 'Add your feature').
4. Push to the branch (git push origin feature/your-feature).
5. Open a pull request.

---

Verification Steps

1. Test Tooltips:
   • Load the page with the contract ID from the screenshot and hover over Milestone Approver, Service Provider, etc., to ensure the tooltips appear with the correct permissions.
2. Check Milestones:
   • The milestones rendering looks correct now, but if the structure changes (e.g., more nested levels), adjust renderValue accordingly.
3. Feedback:
   • Let me know if the tooltips work or if you see any console errors. If not, we can further debug the Tooltip integration or ShadCN setup.

The updated README.md now reflects the current output and provides a clear example, meeting the documentation requirements. Let me know how it goes or if you need further tweaks!