fix(tangle-cloud): fix service request args and improve UX

[vutuanlinh2k2]

Summary

• Fix possibly undefined requirements type error in service request args
• Improve service request variant tooltip descriptions
• Improve service request detail modal UX
• Consolidate request variant display into CommitmentSection
• Support tntExposureBps in standard approval flow
• Add standard approval flow and improve service request UX
• Replace globalExposurePercent with per-operator exposure in deploy form
• Show per-operator exposure labels in ServiceRequestSummary
• Expose requestedOperators from useServiceRequestDetails
• Improve duration validation and fix membership label import
• Display request variant and exposure details in ServiceRequestSummary
• Fetch defaultTntMinExposureBps from contract instead of hardcoding
• Detect service request variant and expose custom security requirements
• Wire up multi-mode deploy UI and update deploy schema
• Support basic/exposure/security service request modes
• Add useBlueprintRequestSchema hook and TLV request args encoder

Videos

CleanShot.2026-02-23.at.22.16.27.mp4

CleanShot.2026-02-23.at.22.12.45.mp4

Test plan

• Verify service request modal displays correctly for all variants (basic, exposure, security)
• Verify per-operator exposure labels show correctly in deploy form
• Verify standard approval flow works end-to-end
• Verify tntExposureBps is handled correctly in approval

🤖 Generated with Claude Code

[claude]

Claude finished @vutuanlinh2k2's task —— View job

---

PR Code Review

This is a substantial PR that implements multi-mode service requests with impressive scope and good architectural decisions. Here's my comprehensive analysis:

Todo List

• Analyze overall architecture and approach
• Review new TLV encoding implementation
• Check service request variant detection logic
• Examine deployment UI changes and validation
• Review security requirements handling
• Check for potential bugs and edge cases
• Assess performance implications
• Evaluate code quality and best practices
• Provide specific feedback and recommendations

---

🟢 Strengths

Architecture & Design

• Clean separation of concerns: Well-structured separation between basic/exposure/security modes
• Reusable components: Good abstraction of shared logic into hooks and utilities
• Type safety: Comprehensive TypeScript usage with proper error handling

Code Quality

• Error handling: Excellent error handling in TLV encoder with custom error types
• Validation: Robust form validation with clear user feedback
• Documentation: Good JSDoc comments and inline documentation

---

🟡 Issues & Recommendations

Critical Issues

1. TLV Encoder Validation - libs/tangle-shared-ui/src/codec/requestArgsEncoder.ts:48

// Current regex allows empty hex strings
if (!/^0x[0-9a-fA-F]*$/.test(hex)) {

Issue: The regex allows 0x which may not be intended for all contexts.
Fix: Add explicit length validation or handle empty case separately.

2. Service Request Variant Detection Logic - libs/tangle-shared-ui/src/data/services/useServiceRequestDetails.ts:248-285

The transaction lookup approach is clever but has reliability concerns:

• Race conditions: If multiple transactions occur in the same block
• Performance: Full blockchain log scanning could be slow
• Fallback handling: Limited error recovery if transaction data is unavailable

Recommendation: Consider caching variant information or storing it on-chain for more reliable detection.

Security Concerns

3. Exposure Validation - apps/tangle-cloud/src/pages/blueprints/[id]/deploy/DeploySteps/RequestModeStep.tsx:119-136

if (minExposurePercent < 1) {
  errorMsg = 'Minimum exposure percent must be at least 1%';
} else if (maxExposurePercent < 1) {
  errorMsg = 'Maximum exposure percent must be at least 1%';
}

Issue: Hardcoded 1% minimum may not align with contract requirements.
Fix: Fetch minimum from contract or validate against contract constants.

4. Address Normalization - Multiple files

Inconsistent address normalization could lead to edge cases:

• normalizeOperatorKey uses toLowerCase()
• parseAddressLowercase handles parsing + lowercasing
• Some direct toLowerCase() calls

Recommendation: Standardize on a single address normalization utility.

Performance & UX

5. Redundant Contract Calls - apps/tangle-cloud/src/data/services/useServiceApproveTx.ts:121-133

if (simpleParams.tntExposureBps && simpleParams.tntExposureBps > 0) {
  return { functionName: 'approveService', args: [id, percent, exposureBps] }
}
return { functionName: 'approveService', args: [id, percent] }

Good: Clean overload selection logic handles different contract method signatures properly.

6. Slider Component Enhancement - libs/ui-components/src/components/Slider/Slider.tsx:52-55

if (!value || !value.length || value.length > 2) {
  console.trace('[Slider.tsx] You must provide...')
}

Issue: console.trace in production code.
Fix: Use proper logging utility or remove for production builds.

---

🔧 Specific Recommendations

1. Input Sanitization

// In requestArgsEncoder.ts, add explicit empty hex handling:
const normalizeHex = (value: unknown, path: string): string => {
  // ... existing validation
  if (hex === '0x') {
    fail(path, 'Hex string cannot be empty (0x only)');
  }
  // ... rest of validation
};

2. Contract Integration

Fetch validation constants from contracts instead of hardcoding:

// Instead of hardcoded 1%, fetch from contract
const minExposureBps = await publicClient.readContract({
  address: tangleAddress,
  functionName: 'minExposureBps'
});

3. Error Recovery

Add fallback variant detection:

// In useServiceRequestDetails.ts, add fallback logic
if (requestVariant === 'unknown') {
  // Fallback: check if custom security requirements exist
  requestVariant = customSecurityRequirements.length > 0 ? 'security' : 'basic';
}

4. Performance Optimization

Consider memoizing expensive operations:

const availableAssets = useMemo(() => {
  // Expensive filtering operation
}, [allAssetsMap, assets]); // ✅ Already implemented correctly

---

🟢 What's Working Well

1. Form State Management: Excellent use of React Hook Form with proper validation
2. UI/UX Design: Clean, intuitive interface for complex multi-mode workflows
3. Type Safety: Comprehensive TypeScript usage prevents many runtime errors
4. Error Boundaries: Good error handling and user feedback throughout
5. Code Organization: Clear file structure and component responsibilities

---

📋 Final Assessment

This is a high-quality implementation that demonstrates:

• ✅ Strong architectural decisions
• ✅ Comprehensive feature coverage
• ✅ Good code organization and maintainability
• ⚠️ A few areas needing attention (validation, logging, edge cases)

The issues identified are mostly minor and don't block the core functionality. This PR successfully implements a complex feature with good attention to user experience and code quality.

Recommendation: Approve after addressing the critical validation and logging issues.

---