[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { ArrowUpRight, ChevronRight, Coins, TrendingUp, Wallet, Settings, Home, BarChart3, Plus } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" export default function PistakeApp() { const [activeTab, setActiveTab] = useState("home") const stakingOptions = [ { name: "Bitcoin", symbol: "BTC", apy: "12.5%", minStake: "0.001", icon: "₿", color: "bg-orange-500", }, { name: "Ethereum", symbol: "ETH", apy: "15.2%", minStake: "0.01", icon: "Ξ", color: "bg-blue-500", }, { name: "Cardano", symbol: "ADA", apy: "18.7%", minStake: "100", icon: "₳", color: "bg-green-500", }, { name: "Solana", symbol: "SOL", apy: "14.8%", minStake: "1", icon: "◎", color: "bg-purple-500", }, ] const activeStakes = [ { crypto: "Bitcoin", symbol: "BTC", amount: "0.025", value: "$2,450", earned: "125.5", apy: "12.5%", days: 45, }, { crypto: "Ethereum", symbol: "ETH", amount: "0.8", value: "$3,200", earned: "89.2", apy: "15.2%", days: 32, }, ] const HomeContent = () => (

{/* Header */}

Welcome back!

Track your Pi farming progress

{/* Portfolio Overview */} Portfolio Overview

Total Staked

$5,650

Pi Earned

214.7 π

Monthly Goal 68%

{/* Quick Actions */}

{/* Active Stakes */} Active Stakes Your current staking positions {activeStakes.map((stake, index) => (

{stake.symbol[0]}

{stake.crypto}

{stake.amount} {stake.symbol}

+{stake.earned} π

{stake.apy} APY

))}

) const StakeContent = () => (

Stake Crypto

Choose a cryptocurrency to start farming Pi coins

{stakingOptions.map((option, index) => (

{option.icon}

{option.name}

Min: {option.minStake} {option.symbol}

{option.apy} APY

))}

Pi Boost

Earn 2x Pi rewards

Stake multiple cryptocurrencies to unlock bonus Pi farming rates

) const StatsContent = () => (

Statistics

Your Pi farming analytics

214.7

Total Pi Earned

15.2%

Avg APY

Earning History

{[ { date: "Today", amount: "2.4", crypto: "BTC" }, { date: "Yesterday", amount: "1.8", crypto: "ETH" }, { date: "2 days ago", amount: "3.1", crypto: "BTC" }, { date: "3 days ago", amount: "2.7", crypto: "ADA" }, ].map((earning, index) => (

+{earning.amount} π

{earning.date}

{earning.crypto}

))}

) const SettingsContent = () => (

Settings

Manage your account and preferences

Profile

John Doe

john.doe@example.com

{["Notifications", "Security", "Privacy", "Help & Support", "About Pistake"].map((item, index) => (

{item}

))}

) return (

{/* Main Content */}

{activeTab === "home" && } {activeTab === "stake" && } {activeTab === "stats" && } {activeTab === "settings" && }

{/* Bottom Navigation */}

{[ { id: "home", icon: Home, label: "Home" }, { id: "stake", icon: Coins, label: "Stake" }, { id: "stats", icon: BarChart3, label: "Stats" }, { id: "settings", icon: Settings, label: "Settings" }, ].map((tab) => ( ))}

) } [V0_FILE]typescript:file="contexts/pi-auth-context.tsx" type="code-project" isLocked="true" "use client"; import React, { createContext, useContext, useState, useEffect, type ReactNode, } from "react"; import { PI_NETWORK_CONFIG, BACKEND_URLS } from "@/lib/system-config"; import { api, setApiAuthToken } from "@/lib/api"; export type LoginDTO = { id: string; username: string; credits_balance: number; terms_accepted: boolean; }; interface PiAuthResult { accessToken: string; user: { uid: string; username: string; }; } declare global { interface Window { Pi: { init: (config: { version: string; sandbox?: boolean }) => Promise; authenticate: (scopes: string[], paymentCallback?: (payment: any) => Promise) => Promise; }; } } const COMMUNICATION_REQUEST_TYPE = '@pi:app:sdk:communication_information_request'; const DEFAULT_ERROR_MESSAGE = 'Failed to authenticate or login. Please refresh and try again.'; function isInIframe(): boolean { try { return window.self !== window.top; } catch (error) { // Cross-origin access may throw when in an iframe if ( error instanceof DOMException && (error.name === 'SecurityError' || error.code === DOMException.SECURITY_ERR || error.code === 18) ) { return true; } // Firefox may throw generic Permission denied errors if (error instanceof Error && /Permission denied/i.test(error.message)) { return true; } throw error; } } function parseJsonSafely(value: any): any { if (typeof value === 'string') { try { return JSON.parse(value); } catch (error) { return null; } } return typeof value === 'object' && value !== null ? value : null; } interface PiAuthContextType { isAuthenticated: boolean; authMessage: string; hasError: boolean; piAccessToken: string | null; userData: LoginDTO | null; error: string | null; reinitialize: () => Promise; } const PiAuthContext = createContext(undefined); const loadPiSDK = (): Promise => { return new Promise((resolve, reject) => { const script = document.createElement("script"); if (!PI_NETWORK_CONFIG.SDK_URL) { throw new Error("SDK URL is not set"); } script.src = PI_NETWORK_CONFIG.SDK_URL; script.async = true; script.onload = () => { console.log("✅ Pi SDK script loaded successfully"); resolve(); }; script.onerror = () => { console.error("❌ Failed to load Pi SDK script"); reject(new Error("Failed to load Pi SDK script")); }; document.head.appendChild(script); }); }; /** * Requests authentication credentials from the parent window (App Studio) via postMessage. * Returns null if not in iframe, timeout, or missing token (non-fatal check). * * @returns {Promise<{accessToken: string, appId: string}|null>} Resolves with credentials or null */ function requestParentCredentials(): Promise<{ accessToken: string; appId: string | null } | null> { // Early return if not in an iframe if (!isInIframe()) { return Promise.resolve(null); } const requestId = `${Date.now()}-${Math.random().toString(16).slice(2)}`; const timeoutMs = 1500; return new Promise((resolve) => { let timeoutId: ReturnType | null = null; // Cleanup function to remove listener and clear timeout const cleanup = (listener: (event: MessageEvent) => void) => { window.removeEventListener('message', listener); if (timeoutId !== null) { clearTimeout(timeoutId); } }; const messageListener = (event: MessageEvent) => { // Security: only accept messages from parent window if (event.source !== window.parent) { return; } // Validate message type and request ID match const data = parseJsonSafely(event.data); if (!data || data.type !== COMMUNICATION_REQUEST_TYPE || data.id !== requestId) { return; } cleanup(messageListener); // Extract credentials from response payload const payload = typeof data.payload === 'object' && data.payload !== null ? data.payload : {}; const accessToken = typeof payload.accessToken === 'string' ? payload.accessToken : null; const appId = typeof payload.appId === 'string' ? payload.appId : null; // Return credentials or null if missing token resolve(accessToken ? { accessToken, appId } : null); }; // Set timeout handler (resolve with null on timeout) timeoutId = setTimeout(() => { cleanup(messageListener); resolve(null); }, timeoutMs); // Register listener before sending request to avoid race condition window.addEventListener('message', messageListener); // Send request to parent window to get credentials window.parent.postMessage( JSON.stringify({ type: COMMUNICATION_REQUEST_TYPE, id: requestId }), '*' ); }); } export function PiAuthProvider({ children }: { children: ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false); const [authMessage, setAuthMessage] = useState("Initializing Pi Network..."); const [hasError, setHasError] = useState(false); const [piAccessToken, setPiAccessToken] = useState(null); const [userData, setUserData] = useState(null); const [error, setError] = useState(null); const authenticateAndLogin = async (accessToken: string, appId: string | null): Promise => { setAuthMessage("Logging in..."); let endpoint: string; let payload: { pi_auth_token: string; app_id?: string }; if (appId) { // Use /login/preview when appId is provided (App Studio iframe flow) endpoint = BACKEND_URLS.LOGIN_PREVIEW; payload = { pi_auth_token: accessToken, app_id: appId }; } else { // Use /login when appId is null (normal Pi app context) endpoint = BACKEND_URLS.LOGIN; payload = { pi_auth_token: accessToken }; } const loginRes = await api.post(endpoint, payload); if (accessToken) { setPiAccessToken(accessToken); setApiAuthToken(accessToken); } setUserData(loginRes.data); }; const getErrorMessage = (error: unknown): string => { if (!(error instanceof Error)) return "An unexpected error occurred. Please try again."; const errorMessage = error.message; if (errorMessage.includes("SDK failed to load")) return "Failed to load Pi Network SDK. Please check your internet connection."; if (errorMessage.includes("authenticate")) return "Pi Network authentication failed. Please try again."; if (errorMessage.includes("login")) return "Failed to connect to backend server. Please try again later."; return `Authentication error: ${errorMessage}`; }; const authenticateViaPiSdk = async (): Promise => { setAuthMessage("Initializing Pi Network..."); await window.Pi.init({ version: "2.0", sandbox: PI_NETWORK_CONFIG.SANDBOX, }); setAuthMessage("Authenticating with Pi Network..."); const piAuthResult = await window.Pi.authenticate(["username"]); if (!piAuthResult.accessToken) { throw new Error(DEFAULT_ERROR_MESSAGE); } await authenticateAndLogin(piAuthResult.accessToken, null); }; const initializePiAndAuthenticate = async () => { setError(null); setHasError(false); try { // Probe for parent credentials (App Studio iframe environment) const parentCredentials = await requestParentCredentials(); // If parent (App Studio) provides credentials, use iframe flow if (parentCredentials) { await authenticateAndLogin(parentCredentials.accessToken, parentCredentials.appId); } else { // Fallback to Pi SDK authentication setAuthMessage("Loading Pi Network SDK..."); // Only load if not already loaded if (typeof window.Pi === "undefined") { await loadPiSDK(); } if (typeof window.Pi === "undefined") { throw new Error("SDK failed to load: Pi object not available after script load"); } await authenticateViaPiSdk(); } setIsAuthenticated(true); setHasError(false); } catch (err) { console.error("❌ Pi Network initialization failed:", err); setHasError(true); const errorMessage = getErrorMessage(err); setAuthMessage(errorMessage); setError(errorMessage); } }; useEffect(() => { initializePiAndAuthenticate(); }, []); const value: PiAuthContextType = { isAuthenticated, authMessage, hasError, piAccessToken, userData, error, reinitialize: initializePiAndAuthenticate, }; return ( {children} ); } /** * Hook to access Pi Network authentication state and user data * * Must be used within a component wrapped by PiAuthProvider. * Provides read-only access to authentication state and user data. * * @returns {PiAuthContextType} Authentication state and methods * @throws {Error} If used outside of PiAuthProvider * * @example * const { piAccessToken, userData, isAuthenticated, reinitialize } = usePiAuth(); */ export function usePiAuth() { const context = useContext(PiAuthContext); if (context === undefined) { throw new Error("usePiAuth must be used within a PiAuthProvider"); } return context; } [V0_FILE]typescript:file="components/auth-loading-screen.tsx" type="code-project" isLocked="true" "use client"; import { usePiAuth } from "@/contexts/pi-auth-context"; export function AuthLoadingScreen() { const { authMessage, reinitialize } = usePiAuth(); const isError = authMessage.toLowerCase().includes("failed"); return (

Pi Network Authentication

{authMessage}

{isError && ( )}

); } [V0_FILE]typescript:file="components/app-wrapper.tsx" type="code-project" isLocked="true" "use client"; import type { ReactNode } from "react"; import { PiAuthProvider, usePiAuth } from "@/contexts/pi-auth-context"; import { AuthLoadingScreen } from "./auth-loading-screen"; function AppContent({ children }: { children: ReactNode }) { const { isAuthenticated } = usePiAuth(); if (!isAuthenticated) return ; return <>{children}; } export function AppWrapper({ children }: { children: ReactNode }) { return ( {children} ); } [V0_FILE]typescript:file="app/layout.tsx" type="code-project" isLocked="true" import type React from "react"; import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { GeistMono } from "geist/font/mono"; import { AppWrapper } from "@/components/app-wrapper"; import "./globals.css"; export const metadata: Metadata = { title: "Made with App Studio", description: "Pi Network app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescript:file="lib/api.ts" type="code-project" isLocked="true" /** * Global fetch-based client for making API requests. * * - Set auth with `setApiAuthToken(token)`; it injects the Authorization header. * - Parses JSON automatically; for 204 responses `data` is `null`. * - Returns `{ data, status, statusText, headers }`. * - On non-2xx, throws an Error with `status` and `data`. * * @example * import { api } from '@/lib/api'; * * const createThing = async () => { * const { data } = await api.post('/api/your-endpoint', { data: 'your data' }); * console.log(data); * }; * * await api.get('/api/users'); * await api.put('/api/user/123', { name: 'Updated' }); * await api.delete('/api/user/123'); */ type FetchResponse = { data: T; status: number; statusText: string; headers: Headers; }; export interface ApiError extends Error { status: number; data: T; } let authToken: string | null = null; const defaultHeaders: Record = { "Content-Type": "application/json", }; const request = async ( url: string, init: RequestInit = {} ): Promise> => { const headers: Record = { ...defaultHeaders, ...(init.headers as Record | undefined), }; if (authToken) headers["Authorization"] = authToken; const response = await fetch(url, { ...init, headers }); const contentType = response.headers.get("content-type") || ""; const isJson = contentType.includes("application/json"); const data = response.status === 204 ? null : isJson ? await response.json() : await response.text(); if (!response.ok) { const error = new Error( response.statusText || "Request failed" ) as ApiError; error.status = response.status; error.data = data as T; throw error; } return { data: data as T, status: response.status, statusText: response.statusText, headers: response.headers, }; }; export const api = { get: (url: string, init?: RequestInit) => request(url, { ...init, method: "GET" }), delete: (url: string, init?: RequestInit) => request(url, { ...init, method: "DELETE" }), post: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "POST", body: body === undefined ? init?.body : JSON.stringify(body), }), put: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "PUT", body: body === undefined ? init?.body : JSON.stringify(body), }), patch: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "PATCH", body: body === undefined ? init?.body : JSON.stringify(body), }), }; export const setApiAuthToken = (token: string) => { authToken = token; }; [V0_FILE]typescript:file="lib/system-config.ts" type="code-project" isLocked="true" export const PI_NETWORK_CONFIG = { SDK_URL: "https://sdk.minepi.com/pi-sdk.js", SANDBOX: false, } as const; export const BACKEND_CONFIG = { BASE_URL: "https://backend.appstudio-u7cm9zhmha0ruwv8.piappengine.com", BLOCKCHAIN_BASE_URL: "https://api.testnet.minepi.com", } as const; export const BACKEND_URLS = { LOGIN: `${BACKEND_CONFIG.BASE_URL}/v1/login`, LOGIN_PREVIEW: `${BACKEND_CONFIG.BASE_URL}/v1/login/preview`, GET_PRODUCTS: (appId: string) => `${BACKEND_CONFIG.BASE_URL}/v1/apps/${appId}/products`, GET_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}`, APPROVE_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}/approve`, COMPLETE_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}/complete`, } as const; export const PI_PLATFORM_URLS = {} as const; export const PI_BLOCKCHAIN_URLS = { GET_TRANSACTION: (txid: string) => `${BACKEND_CONFIG.BLOCKCHAIN_BASE_URL}/transactions/${txid}/effects`, } as const;