Issue: 97 98 99 102

[Guddy0101]

Summary

This PR implements four focused improvements to the contract detail experience and alert history management, enhancing UX and maintainability.

Changes

#97: Extract Metadata Section Component

• Created reusable MetadataSection.tsx component to eliminate repeated display blocks
• Refactored contract detail page to use the new component for Webhook URL, Registered date, and Total Alerts metadata
• Improves maintainability and reduces code duplication

#98: Responsive Header Action Buttons

• Updated header layout to use responsive flexbox (flex-col sm:flex-row)
• Edit Rules and Delete buttons now stack vertically on mobile, display inline on larger screens
• Improved button container width handling for better mobile UX
• Buttons now stretch to full width on small screens for better touch targets

#99: Add Rule Badge Tooltips with Descriptions

• Enhanced AlertRuleBadge component with hover tooltips
• Added descriptions for each alert rule type:
  • LargeTransfer: "Alert when a transfer exceeds the specified XLM threshold"
  • AdminFunctionCalled: "Alert when admin-level functions are invoked"
  • AnyTransaction: "Alert on any transaction involving this contract"
  • FunctionCalled: "Alert when specific functions are called"
  • TransactionFailed: "Alert when a transaction fails"
• Improves readability for new users unfamiliar with rule types

#102: Add Rule-Type Filtering to Alert History

• Added filter buttons to WebhookLog component for each alert rule type
• Users can filter alerts by rule type or view all alerts
• Displays count of filtered vs total alerts
• CSV export respects the current filter selection
• Integrated AlertRuleBadge component in alert table for consistent styling

Testing

• All changes compile successfully
• Existing tests pass (18 tests)
• No breaking changes to existing functionality

Closes

Closes #97
Closes #98
Closes #99
Closes #102

[drips-wave]

@Guddy0101 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits