Significantly Monetized Features

Now I have a complete picture of all current prices in the app. Let me build the comprehensive monetization audit screen and update all data constants with properly calibrated GCV-based fees.

GCV framework used: The Pi community's internal reference is $314,159/Pi. Current market price is ~$0.23/Pi. I'll calculate fees at both the GCV rate (for Pioneer ecosystem use) and a practical market rate bracket, clearly labelled, and update all data constants to properly reflect the calibrated values.

Fee logic (GCV = $314,159 / Pi):

• $1 USD = 0.00000318 Pi at GCV
• $5 USD = 0.0000159 Pi
• $10 USD = 0.0000318 Pi

Let me now update all data constants with corrected prices and build the Monetization Audit screen:

Now update challenge rewards and Socker Coins coin pack data with GCV-calibrated Pi values, and add the Monetization Audit screen into the DiscoverTab hub:

Now add the full Monetization Audit as a dedicated section inside DiscoverTab:

Now insert the full Monetization Audit section screen before the accessibility closing block:

Now add the Monetization Audit tile to the hub grid and the missing AlertCircle icon import:

All 11 features are now audited and live. Here's the complete summary of what was done:

Monetization Audit + Pi GCV Fee Calibration

GCV Basis used: $1 \text{ Pi} = \$314{,}159$ (Pi Network's internal purchasing-power reference), so $\$1 = 0.00000318 \text{ Pi}$

All fees recalibrated across the app:

Overlooked features flagged as missing/partial:

• Profile Customisation (badges, frames, kit skins) — $1–$5 per item, high-margin, zero COGS
• Rewards Points Boosters — $2–$10 XP packs, proven gaming model
• Affiliate Referral — $2–$5 per converted friend, viral growth driver via Pi micro-payment

The new Monetization Audit screen (amber tile in the Discover hub) shows every feature with health status, USD range, Pi @ GCV amount, and an improvement note — plus a summary ARPU estimate of 0.0000637 Pi (~$20/month) for a typical Pro user.

Now I have a complete picture. The Pi SDK is already loaded and authenticated via PiAuthProvider + AppWrapper + system-config.ts. The missing piece is a Pi SDK payment service that calls window.Pi.createPayment() and wires every purchase trigger in the app (lessons, membership, events, coaching, marketplace, challenges, UGC, exclusive features, Socker Coins) through it. I'll create a dedicated lib/pi-payments.ts service and a hooks/use-pi-payment.ts hook, then wire them into the relevant purchase points in page.tsx.

Now write the payments status/history route:

Now read all the specific purchase locations in page.tsx to wire them precisely:

Now I have every purchase point. I'll add the usePiPayment hook import and wire all purchase buttons through the real SDK in one targeted edit to page.tsx:

Now replace the StoreTab state block and addToCart with the SDK-wired version:

Now wire each buy button. Start with training lessons:

Wire bundle buy buttons:

Wire membership subscribe button:

Wire event registration, coaching booking, exclusive unlock, UGC submit, and coin pack purchase:

Now wire the UGC content submission and Socker Coins coin pack purchase:

Now wire the Socker Coins pack purchase:

Now add the payment feedback toast to the StoreTab render area, and add the marketplace buy button SDK wiring:

Now add the payment feedback toast overlay inside StoreTab's return body, and wire the DiscoverTab challenges entry fee. First add the toast:

Now check if AlertCircle is imported:

AlertCircle is already imported. Now wire the DiscoverTab challenge entry (the Join Challenge button):

DiscoverTab is a separate component from StoreTab, so it has its own state and no access to usePiPayment yet. I need to add the hook there too:

The Pi SDK is now fully integrated for all transactions in Socker. Here is a summary of every file created or changed:

New files:

• lib/pi-payments.ts — Core payment service wrapping window.Pi.createPayment(). Handles the full lifecycle: onReadyForServerApproval → POSTs to backend /approve, onReadyForServerCompletion → POSTs txid to backend /complete. Exports typed PiPayments helpers for every Socker monetization category (lessons, bundles, membership, events, coaching, marketplace, coins, exclusives, challenges, UGC, rewards boost).
• hooks/use-pi-payment.ts — React hook exposing pay(), payDirect(), isPaying, state, result, and error so components get consistent loading/feedback state without boilerplate.
• app/api/payments/approve/route.ts and complete/route.ts — Server-side Next.js route handlers that proxy approval and completion to the Socker backend, forwarding the Pi access token as the Authorization header.
• app/api/payments/history/route.ts — Authenticated GET route to retrieve payment history per user.

Modified: app/page.tsx — Every purchase button (training lessons, lesson bundles, memberships, event registrations, coaching sessions, marketplace items, Socker Coins packs, exclusive feature unlocks, UGC submission fees, and challenge entries) now calls the real Pi SDK via piPurchase() / challengePay(). Buttons show a "Processing..." state while the Pi sheet is open and lock to prevent double-spending. A payment feedback toast confirms success, cancellation, or errors.