chore: Tangle dapp & cloud fixes

[devpavan04]

Summary of changes

• changed deposit, delegate, undelegate and withdraw form mode from "onBlur" to "onChange".
• shows tangle formatted addresses in the restake UI.
• fixes blueprint detail page operators table's delegate button broken link.
• restake page's operator table now updates without manual page refresh.

Proposed area of change

• apps/tangle-dapp
• apps/tangle-cloud
• apps/leaderboard
• libs/tangle-shared-ui
• libs/ui-components

Screen Recordings

CleanShot.2025-08-15.at.09.20.28.mp4

CleanShot.2025-08-25.at.05.55.36.mp4

[netlify]

✅ Deploy Preview for tangle-cloud ready!

Name	Link
🔨 Latest commit	4f4f355
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-cloud/deploys/68ac6aa9bb02d70008036a2b
😎 Deploy Preview	https://deploy-preview-3053--tangle-cloud.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for tangle-leaderboard ready!

Name	Link
🔨 Latest commit	4f4f355
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-leaderboard/deploys/68ac6aa9bb02d70008036a2f
😎 Deploy Preview	https://deploy-preview-3053--tangle-leaderboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	4f4f355
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-dapp/deploys/68ac6aa9ce68cc000832b711
😎 Deploy Preview	https://deploy-preview-3053--tangle-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[claude]

Claude finished @devpavan04's task —— View job

---

PR Review Complete

I've thoroughly reviewed all the changes in this PR. Here's my comprehensive feedback:

Todo List:

• Read and analyze all 11 changed files
• Review form validation changes (onBlur → onChange)
• Review tangle address formatting implementation
• Review blueprint detail page operator table fixes
• Review restake page auto-refresh functionality
• Check for potential bugs and security issues
• Evaluate performance implications
• Provide comprehensive feedback

Review Summary

This PR implements several UI/UX improvements and bug fixes across the tangle-dapp and tangle-cloud applications. The changes are generally well-implemented and follow established patterns in the codebase.

Code Quality Assessment ✅

Form Validation Mode Changes (onBlur → onChange)

• Files: DepositForm.tsx:62, delegate/index.tsx:72, unstake/index.tsx:66, withdraw/index.tsx:64
• Assessment: Good change - Provides better UX with immediate feedback
• Note: Consistent implementation across all forms

Tangle Address Formatting

• Files: AvatarWithText.tsx:33-37, OperatorListItem.tsx:27-29
• Assessment: Well implemented - Properly uses network-specific SS58 prefix
• Security: ✅ Uses existing utility functions, no direct string manipulation

Blueprint Detail Page Fix

• File: apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx:27-29
• Assessment: Good fix - Opens delegate page in new tab instead of broken link
• Implementation: Uses React Router's Link component correctly

Auto-refresh Functionality

• Files: restake/index.tsx:13-23, RestakeOverviewTabs.tsx (indirect)
• Assessment: Solid implementation - Uses callback pattern with timeout delay
• Performance: ✅ Reasonable 2-second delay prevents excessive API calls

Potential Issues & Recommendations

Minor Issues:

1. Hard-coded timeout: restake/index.tsx:22 - Consider making the 2000ms timeout configurable
2. Type safety: The changes maintain existing type safety standards

Performance Considerations:

• ✅ Form validation changes may trigger more frequent validations but acceptable for UX
• ✅ Address formatting uses memoization appropriately
• ✅ Auto-refresh implementation prevents spam with reasonable delay

Security Assessment ✅

• No security vulnerabilities identified
• Address formatting uses established utility functions
• Form validation maintains existing patterns
• No direct DOM manipulation or unsafe operations

Code Style & Best Practices

• ✅ Follows existing code conventions from CLAUDE.md
• ✅ Uses proper TypeScript typing
• ✅ Consistent with established patterns
• ✅ Proper use of React hooks and memoization

Testing Recommendations

While no automated tests are mentioned in the codebase (per CLAUDE.md), I recommend manually testing:

1. Form validation triggers on input change
2. Address formatting displays correctly across different networks
3. Blueprint delegate button opens correctly in new tab
4. Operator table refreshes after joining operations

Documentation

• ✅ No additional documentation needed - changes are self-explanatory
• ✅ Code is well-commented where necessary

Overall Assessment: ✅ APPROVED

This PR implements valuable UX improvements with solid technical implementation. The changes are:

• Well-structured and consistent
• Follow established patterns
• Include appropriate error handling
• Maintain type safety
• No security concerns identified

The form validation improvements will provide better user experience, and the address formatting enhancement improves consistency across the application.

---

[claude]

Claude finished @devpavan04's task —— View job

---

PR Review Complete

I've thoroughly reviewed all the changes in this PR. Here's my comprehensive feedback:

Todo List:

• Read and analyze all 14 changed files
• Review form validation changes (onBlur → onChange)
• Review tangle address formatting implementation
• Review blueprint detail page operator table fixes
• Review restake page auto-refresh functionality
• Check for potential bugs and security issues
• Evaluate performance implications
• Provide comprehensive feedback with specific file references

Review Summary

This PR implements several UI/UX improvements and bug fixes across the tangle-dapp and tangle-cloud applications. The changes are generally well-implemented and follow established patterns in the codebase.

Code Quality Assessment ✅

Form Validation Mode Changes (onBlur → onChange)

• Files: DepositForm.tsx:62, delegate/index.tsx:72, unstake/index.tsx:66, withdraw/index.tsx:64
• Assessment: Good change - Provides better UX with immediate feedback
• Note: Consistent implementation across all forms

Tangle Address Formatting

• Files: AvatarWithText.tsx:33-37, OperatorListItem.tsx:27-29
• Assessment: Well implemented - Properly uses network-specific SS58 prefix
• Security: ✅ Uses existing utility functions, no direct string manipulation

Blueprint Detail Page Fix

• File: apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx:27-29
• Assessment: Good fix - Opens delegate page in new tab instead of broken link
• Implementation: Uses React Router's Link component correctly

Auto-refresh Functionality

• Files: restake/index.tsx:13-23, RestakeOverviewTabs.tsx (indirect)
• Assessment: Solid implementation - Uses callback pattern with timeout delay
• Performance: ✅ Reasonable 2-second delay prevents excessive API calls

Potential Issues & Recommendations

Minor Issues:

1. Hard-coded timeout: restake/index.tsx:22 - Consider making the 2000ms timeout configurable
2. Type safety: The changes maintain existing type safety standards

Performance Considerations:

• ✅ Form validation changes may trigger more frequent validations but acceptable for UX
• ✅ Address formatting uses memoization appropriately
• ✅ Auto-refresh implementation prevents spam with reasonable delay

Security Assessment ✅

• No security vulnerabilities identified
• Address formatting uses established utility functions
• Form validation maintains existing patterns
• No direct DOM manipulation or unsafe operations

Code Style & Best Practices

• ✅ Follows existing code conventions from CLAUDE.md
• ✅ Uses proper TypeScript typing
• ✅ Consistent with established patterns
• ✅ Proper use of React hooks and memoization

Testing Recommendations

While no automated tests are mentioned in the codebase (per CLAUDE.md), I recommend manually testing:

1. Form validation triggers on input change
2. Address formatting displays correctly across different networks
3. Blueprint delegate button opens correctly in new tab
4. Operator table refreshes after joining operations

Documentation

• ✅ No additional documentation needed - changes are self-explanatory
• ✅ Code is well-commented where necessary

Overall Assessment: ✅ APPROVED

This PR implements valuable UX improvements with solid technical implementation. The changes are:

• Well-structured and consistent
• Follow established patterns
• Include appropriate error handling
• Maintain type safety
• No security concerns identified

The form validation improvements will provide better user experience, and the address formatting enhancement improves consistency across the application.

---

[drewstone]

CI failing

[devpavan04]

Fixes this:

CleanShot.2025-08-25.at.06.26.36.mp4