fix(tangle-cloud): QA improvements for cloud earnings and rewards

[vutuanlinh2k2]

Summary

• Improve earnings page with richer asset display, pagination, and exact payout ledger usage
• Polish rewards page with better claim UX, explorer action links, and claim history
• Fix typecheck error for undefined showExplorerActions in rewards page

Test plan

• Verify earnings page displays correct asset metadata and pagination works
• Verify rewards claim flow works end-to-end
• Verify claim history table renders with explorer links when available
• Confirm tangle-cloud:typecheck passes cleanly

🤖 Generated with Claude Code

[claude]

Claude finished @vutuanlinh2k2's task —— View job

---

PR Review: fix(tangle-cloud): QA improvements for cloud earnings and rewards

I've completed my review of this substantial PR that improves the earnings and rewards pages in Tangle Cloud. Here's my comprehensive feedback:

✅ Strengths

Architecture & Code Quality

• Excellent separation of concerns: New useDeveloperPayments hook properly separates exact payout ledger data from the legacy earnings hook
• Clean data flow: Well-structured GraphQL queries with proper error handling and type safety
• Consistent patterns: All components follow established React patterns and use proper TypeScript typing
• Reusable components: Good abstraction with EarningsAssetCell, PendingAssetCell, etc.

User Experience Improvements

• Rich asset display: Enhanced token metadata with proper icons, names, and explorer links
• Pagination: Proper pagination implementation for payout events
• Explorer integration: Consistent explorer links for transactions and addresses
• Better error handling: Comprehensive error states and loading indicators

⚠️ Issues & Recommendations

Performance Concerns

1. Multiple API calls in table rows (apps/tangle-cloud/src/pages/earnings/page.tsx:68, apps/tangle-cloud/src/pages/rewards/page.tsx:554)

   // This creates N API calls for N rows - could be expensive
   const { data: metadata, isLoading } = useTokenMetadata(token);

   Recommendation: Consider batching token metadata requests or implementing a token metadata cache.

2. Synchronous formatting in render (libs/tangle-shared-ui/src/data/graphql/useDeveloperPayments.ts:291-302)

   const formatEarningsAmount = (amount: bigint, decimals = 18): string => {
     // Complex calculation happens in render...

   Recommendation: Memoize formatting results for identical inputs.

Code Quality Issues

3. Duplicated utility functions

   • shortenAddress, shortenTxHash, formatTimestamp appear in multiple files
   • resolveTokenIconSymbol and isFallbackSymbol are duplicated
     Recommendation: Extract to shared utilities in libs/tangle-shared-ui/src/utils/

4. Complex conditional rendering (apps/tangle-cloud/src/pages/earnings/page.tsx:326-492)

   • 166-line conditional rendering block is hard to maintain
     Recommendation: Break into smaller sub-components

5. Magic numbers without constants

   const PAYOUT_EVENTS_PAGE_SIZE = 10; // Good
   staleTime: 60_000, // Should use named constants

Potential Bugs

6. Explorer URL construction (apps/tangle-cloud/src/utils/explorer.ts:20-36)

   • No validation of constructed URLs
   • Potential issues with malformed explorer URLs
     Recommendation: Add URL validation or fallback handling

7. BigInt comparison edge cases (libs/tangle-shared-ui/src/data/graphql/useDeveloperPayments.ts:142-147)

   return a.totalPaid > b.totalPaid ? -1 : 1; // Could be problematic with very large numbers

   Recommendation: Use .toString() for consistent comparison

Security Considerations

8. External link handling - ✅ Good: Proper use of target="_blank" with rel="noreferrer"

9. Input validation - ✅ Good: Proper address validation and lowercasing

10. XSS prevention - ✅ Good: No dangerous HTML injection patterns found

TypeScript & Type Safety

11. Type assertions could be improved (libs/tangle-shared-ui/src/data/graphql/useDeveloperPayments.ts:131)

    recipient: entry.recipient as Address, // Type assertion without validation

    Recommendation: Add runtime validation for address formats

📋 Minor Improvements

12. Loading states: Consider skeleton loaders that match the actual content structure more closely

13. Accessibility: Add more descriptive aria-label attributes for screen readers

14. Error messages: Could be more user-friendly (less technical)

🔍 Testing Recommendations

• Test with large datasets to verify pagination performance
• Test token metadata fallback scenarios
• Verify explorer link generation across different chain configurations
• Test error handling when GraphQL endpoints are unavailable

📊 Overall Assessment

This is a well-implemented improvement that significantly enhances the user experience. The code follows good practices and the architecture is sound. The main concerns are around performance optimization and code deduplication.

Recommendation: ✅ Approve with minor improvements

The issues identified are mostly optimization opportunities rather than blocking problems. The core functionality is solid and the UX improvements are valuable.

---

[vutuanlinh2k2]

Follow-up plan after reviewing Claude feedback and current code:\n\n- [x] Verified duplicate helper logic and large earnings render block are worth fixing.\n- [x] Verified unsafe GraphQL address casts are worth fixing with runtime validation.\n- [x] Confirmed BigInt comparator concern is not a bug ( comparisons are safe); no comparator rewrite planned.\n\nPlanned fix buckets in this pass:\n1. Deduplicate cloud formatting/token-presentation helpers.\n2. Split earnings page into focused subcomponents (no UX behavior changes).\n3. Add runtime address validation in GraphQL mappers + focused tests.\n\nDeferred intentionally for a later pass: metadata batching optimization, staleTime constant normalization, broad a11y/copy polish, explorer URL hardening.

[vutuanlinh2k2]

Follow-up plan after reviewing Claude feedback and current code:

• Verified duplicate helper logic and large earnings render block are worth fixing.
• Verified unsafe GraphQL address casts are worth fixing with runtime validation.
• Confirmed BigInt comparator concern is not a bug (bigint comparisons are safe); no comparator rewrite planned.

Planned fix buckets in this pass:

1. Deduplicate cloud formatting/token-presentation helpers.
2. Split earnings page into focused subcomponents (no UX behavior changes).
3. Add runtime address validation in GraphQL mappers + focused tests.

Deferred intentionally for a later pass: metadata batching optimization, staleTime constant normalization, broad a11y/copy polish, explorer URL hardening.