[praizeD10]

closes #1205

Summary

Builds a tipping panel on the key detail page allowing key holders to send direct XLM tips to creators with an optional message, and adds a public tip feed showing the latest contributions.

Scope of Changes

• Tip Creator Panel (src/components/common/TipCreatorPanel.tsx):
  • Amount input with quick-select presets (+5, +10, +25, +50 XLM) and positive amount validation.
  • Optional message textarea with live character counter (0/280).
  • Blocks submission and displays warning state if message exceeds 280 characters.
  • Breakdown summary showing total tip amount, 2% protocol fee deduction, and net amount to creator.
  • Key holder gating: restricts tipping to key holders with non-holder badges and disabled controls.
• Tip Service & Contract Action (src/services/tip.service.ts, src/hooks/useTips.ts, src/services/creatorKeysContract.service.ts):
  • IPFS message pinning: uploads messages via /ipfs/pin to pass content hash on-chain.
  • Contract execution: triggers send_tip on-chain with creatorId, amount, and messageHash.
• Public Tip Feed (src/components/common/RecentTipsFeed.tsx):
  • Displays directly below the tipping panel.
  • Shows the last 10 tips with truncated tipper addresses, formatted amounts, net values, optional message quotes, and relative timestamps.
  • Includes loading skeleton and empty states.
• TipSent Confirmation Toast (src/components/common/TipSentToast.tsx, src/utils/tipToast.tsx):
  • Fires custom toast upon successful transaction confirmation with tip details.
• Key Detail Integration (src/pages/CreatorDetailPage.tsx):
  • Integrates the tipping panel and tip feed under an isolated error boundary.

Acceptance Criteria Checklist

• Fee deduction computed and displayed correctly in summary (2% fee deduction, net to creator)
• Send Tip submits correct contract call (send_tip) with amount and IPFS message hash
• Character counter updates live and blocks submit above 280 characters
• Recent tips feed renders accurate last 10 tips
• TipSent toast fires on confirmation

Tests & Verification

• src/utils/__tests__/tip.utils.test.ts (10 tests): fee calculations, 2% deduction, precision handling, 280-char boundaries.
• src/components/common/__tests__/TipCreatorPanel.test.tsx (6 tests): live character counter, fee summary display, 280-char limit enforcement, contract dispatch with IPFS hash, toast confirmation, holder validation.
• src/components/common/__tests__/RecentTipsFeed.test.tsx (3 tests): 10-item cap, accurate rendering of tipper and amounts, empty/loading states.
• src/components/common/__tests__/TipSentToast.test.tsx (2 tests): toast metadata display and manual dismissal.
• Full project checks

[drips-wave]

@praizeD10 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