How saheeldev/taptostream works
TapToStream is a video-on-demand application in which viewers browse a catalog, connect an Algorand wallet, pay per video, and receive a signed stream URL. The frontend requests video metadata and opens a watch flow; its payment hook responds to the server’s 402 challenge by signing an ASA transfer and retrying. The server verifies payment, calls the Algorand contract to distribute creator/platform shares, then authorizes stream delivery. The main entry points and payment path are supported by sampled source; some UI and stream implementation details are inferred only from the file tree.
Main entry points: index.js HTTP API · useX402.ts x402 client · x402.js Payment verification · Home.tsx Video home
Components 17
Viewer app
- App shell
projects/taptostream-frontend/src/App.tsx - Video home
projects/taptostream-frontend/src/Home.tsx - Video card
projects/taptostream-frontend/src/components/VideoCard.tsx - Watch modal
projects/taptostream-frontend/src/components/WatchModal.tsx - Wallet controls
projects/taptostream-frontend/src/components/ConnectWallet.tsx - Wallet provider
projects/taptostream-frontend/src/App.tsx - Video playback
projects/taptostream-frontend/src/components/WatchModal.tsx
API and streaming
- HTTP API
server/index.js - Video catalog
server/videos.json - Stream URLs
server/stream.js
Payment flow
- x402 client
projects/taptostream-frontend/src/hooks/useX402.ts - Payment verification
server/x402.js - x402 facilitator
Algorand contract
- Algorand node
- TapToStream
projects/taptostream-contracts/smart_contracts/tap_to_stream/contract.py - Contract artifacts
projects/taptostream-contracts/smart_contracts/artifacts/tap_to_stream/TapToStream.arc56.json
Other components
- Viewer
Connections 24
- Viewer → App shell: opens app
- App shell → Wallet provider: configures wallet
- App shell → Video home: renders
- Viewer → Wallet controls: connects wallet
- Video home → HTTP API: requests catalog
- HTTP API → Video catalog: reads catalog
- HTTP API → Video home: returns catalog
- Video home → Video card: shows videos
- Video card → Watch modal: opens watch
- Watch modal → x402 client: requests access
- x402 client → Wallet provider: signs transfer
- x402 client → HTTP API: requests watch
- HTTP API → Payment verification: dispatches payment
- Payment verification → Algorand node: broadcasts transfer
- Payment verification → x402 facilitator: verifies payment
- Payment verification → TapToStream: calls payment method
- TapToStream → Algorand node: submits transfers
- TapToStream → Contract artifacts: described by
- HTTP API → Stream URLs: gets signed URL
- Stream URLs → HTTP API: returns stream URL
- HTTP API → x402 client: returns stream URL
- x402 client → Watch modal: returns playback data
- Watch modal → Video playback: loads stream
- Viewer → Video playback: watches video