feat: live stream tipping via chat (quick-tip buttons)

[davedumto]

Overview

Add quick-tip buttons directly inside the stream chat sidebar so viewers can tip without leaving the stream. The highest-intent tipping moment is during a live stream — friction must be minimal.

Foundation already in place

• components/tipping/TipModal.tsx — full tip flow with Stellar payments
• components/tipping/TipButton.tsx — existing tip trigger button
• components/stream/chat-section.tsx — target integration file
• hooks/useTipModal.ts — tip modal state management
• components/wallet/AddFundsButton.tsx — on-ramp fallback

What to build

Quick-tip bar in chat

Add a row of preset tip buttons just above the chat input:

[ 1 XLM ] [ 5 XLM ] [ 10 XLM ] [ Custom... ]

• Tapping a preset skips amount selection and goes straight to Stellar payment + confirmation
• "Custom..." opens the full TipModal
• Only shown when viewer is logged in and wallet is connected
• Hidden on mobile when keyboard is open (toggle on input focus/blur events)

Tip notification in chat

When a tip lands, post a system message into the chat stream:

💜 @username tipped 10 XLM

• Highlighted briefly at top of chat for 3 seconds, then joins normal flow
• Uses highlight/purple colour consistent with design system

Streamer tip alert overlay

• Toast-style overlay on the video player area (bottom-left corner)
• Shows for 5 seconds: "💜 @username sent 10 XLM!"
• Multiple simultaneous tips stack vertically

Chat input layout changes (components/stream/chat-section.tsx)

• Add QuickTipBar component above the message input
• QuickTipBar receives streamerPublicKey and senderPublicKey as props
• On preset click: calls buildTipTransaction + submitTransaction directly
• On success: posts tip notification message to /api/streams/chat

Props to thread through

chat-section.tsx needs to receive from view-stream.tsx:

• streamerUsername: string
• streamerPublicKey: string
• viewerPublicKey: string | null

New components

• components/stream/QuickTipBar.tsx — preset tip buttons row
• components/stream/TipAlertOverlay.tsx — stacked tip toasts on video

Acceptance criteria

• Quick-tip bar visible above chat input when viewer wallet is connected
• Preset tap triggers immediate Stellar XLM payment without a modal
• "Custom..." opens TipModal with streamer pre-filled
• Successful tip posts a highlighted message to chat for all viewers
• Tip alert overlay shows on stream video area for 5 seconds
• AddFundsButton shown inline when XLM balance is insufficient
• Bar hidden/collapsed on mobile when keyboard is visible
• Works for both Privy custodial and external wallet users