feat(tangle-cloud): manage service requests with approval flow

[vutuanlinh2k2]

Summary

• Add service request management with approval/rejection flow
• Implement service request detail modal with security requirements, commitments, and payment terms
• Add auto-fetch blueprint config for deployment workflow
• Add time unit selector for instance duration (TTL)
• Fix service detail page for service ID 0 and operator access
• Update claim button text to "Claim All Rewards" in tangle-dapp

Video

CleanShot.2026-02-04.at.21.49.16.mp4

Test plan

• Verify service request approval flow works correctly
• Verify service request rejection flow works correctly
• Test blueprint deployment with auto-fetched config
• Verify TTL time unit conversions work properly
• Confirm service detail page loads for all service IDs including 0

🤖 Generated with Claude Code

[vutuanlinh2k2]

@claude review this PR

[claude]

Claude finished @vutuanlinh2k2's task —— View job

---

PR Review Complete ✅

I've conducted a comprehensive review of this service request management PR with approval flow implementation. Here are my findings:

Review Progress:

• Examine new service request detail components
• Review data hooks and API integration
• Check approval/rejection transaction logic
• Analyze security requirements implementation
• Review blueprint deployment workflow changes
• Check TypeScript types and interfaces
• Verify error handling and edge cases
• Overall code quality and best practices assessment

---

Overall Assessment: ✅ Excellent Implementation

This is a well-architected PR that successfully implements a comprehensive service request management system. The code quality is high and follows React/TypeScript best practices.

Strengths 💪

1. Excellent Component Architecture

• ServiceRequestDetailModal.tsx:479: Well-structured modal with clear separation between details and approval views
• Modular components: Clean separation of concerns with dedicated components for different sections (BlueprintInfoCard, SecurityRequirementsSection, etc.)
• Proper state management: Uses react-hook-form effectively with proper validation

2. Robust Data Layer

• useServiceRequestDetails.ts:171: Comprehensive hook with proper error handling and type safety
• useServiceRequestSecurityRequirements.ts:233: Smart logic for handling simple vs custom security requirements
• useBlueprintConfig.ts:124: Auto-fetch functionality properly implemented

3. Strong TypeScript Implementation

• Excellent type definitions: Clear interfaces and enums (MembershipModel, AssetKind, etc.)
• Type safety: Proper use of Address types and bigint handling
• serviceRequest.ts:61: Well-defined utility functions for formatting

4. Smart Security Requirements Logic

• Line 197-218 in useServiceRequestSecurityRequirements.ts: Intelligent detection of simple vs custom requirements
• Proper basis points handling: Consistent use of basis points (0-10000) throughout
• Asset kind abstraction: Clean handling of native vs ERC20 tokens

5. Good Error Handling Patterns

• Graceful degradation: Components handle loading and error states properly
• Try-catch blocks: Appropriate error handling in data hooks with console.warn for debugging
• Null safety: Proper handling of undefined/null values throughout components

Areas for Improvement 🔧

1. Minor: Magic Numbers

// In useServiceRequestSecurityRequirements.ts:16-17
const DEFAULT_TNT_MIN_EXPOSURE_BPS = 1000; // 10%
const DEFAULT_TNT_MAX_EXPOSURE_BPS = 10000; // 100%

Suggestion: Consider moving these to a shared constants file if used elsewhere.

2. Minor: Error Message Consistency

ServiceRequestDetailModal.tsx:360: Form validation errors could use more consistent messaging patterns across all inputs.

3. Minor: Component Size

ServiceRequestDetailModal.tsx is quite large (479 lines). Consider extracting the approval form logic into a separate component.

Security Considerations ✅

• Proper input validation: Form validation with min/max constraints for security commitments
• Type-safe address handling: Consistent use of Address type from viem
• Safe bigint operations: Proper handling of large numbers without overflow concerns
• No hardcoded credentials: All configuration properly externalized

Technical Debt Assessment ✅

• Code follows established patterns in the codebase
• Consistent with existing architecture
• No major technical debt introduced
• Good separation of concerns maintained

Test Coverage Recommendations 📋

While I didn't see test files in this PR, consider adding tests for:

1. Service request approval/rejection flows
2. Security requirements validation logic
3. Edge cases like zero amounts and invalid addresses
4. Error state handling in components

Conclusion 🎯

This is a high-quality implementation that successfully adds comprehensive service request management functionality. The code is well-structured, type-safe, and follows React best practices. The approval flow logic is robust and handles both simple and complex security requirement scenarios effectively.

Recommendation: ✅ Approve - This PR is ready for merge after addressing any minor feedback.

---