[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(function ({ id, title, description, action, ...props }) { return (

{title && {title}} {description && ( {description} )}

{action} ) })} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" 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]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.9.3" } } [V0_FILE]typescript:file="contexts/pi-auth-context.tsx" type="code-project" isLocked="true" isMerged="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" isMerged="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" isMerged="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="lib/api.ts" type="code-project" isLocked="true" isMerged="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" isMerged="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; [V0_FILE]typescriptreact:file="components/PaymentPage.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Send, Download, ArrowLeftRight, Copy, CheckCircle, Clock, TrendingUp, TrendingDown, QrCode, ChevronDown, AlertCircle, } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface CoinBalance { symbol: string name: string balance: number walletType: "test" | "main" } interface Transaction { id: string type: "send" | "receive" | "swap" coin: string amount: number address: string status: "completed" | "pending" | "failed" timestamp: Date fee: number } interface PaymentPageProps { skcBalance: number kktBalance: number walletType: "test" | "main" } const MOCK_TRANSACTIONS: Transaction[] = [ { id: "tx001", type: "receive", coin: "SKC", amount: 12.5, address: "SKC1xA9...f3Qz", status: "completed", timestamp: new Date(Date.now() - 1000 * 60 * 30), fee: 0.001, }, { id: "tx002", type: "send", coin: "KKT", amount: 5.0, address: "KKT2bB8...m7Rw", status: "completed", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), fee: 0.002, }, { id: "tx003", type: "swap", coin: "SKC→KKT", amount: 20.0, address: "Internal swap", status: "completed", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5), fee: 0.005, }, { id: "tx004", type: "send", coin: "SKC", amount: 3.2, address: "SKC9pL3...k1Nv", status: "pending", timestamp: new Date(Date.now() - 1000 * 60 * 5), fee: 0.001, }, { id: "tx005", type: "receive", coin: "KKT", amount: 8.75, address: "KKT4cD7...j9Ux", status: "completed", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), fee: 0, }, ] const SKC_ADDRESS = "SKC1xA9mN3pQ7rT2vY6bC4dE8fG5hJ0kL" const KKT_ADDRESS = "KKT2bB8nP4qR1sU5wX9aD6eF3gH7iK2mM" export default function PaymentPage({ skcBalance, kktBalance, walletType }: PaymentPageProps) { const { toast } = useToast() const [sendCoin, setSendCoin] = useState("SKC") const [sendAmount, setSendAmount] = useState("") const [sendAddress, setSendAddress] = useState("") const [swapFrom, setSwapFrom] = useState("SKC") const [swapAmount, setSwapAmount] = useState("") const [copiedAddress, setCopiedAddress] = useState(null) const [transactions, setTransactions] = useState(MOCK_TRANSACTIONS) const [isSending, setIsSending] = useState(false) const [isSwapping, setIsSwapping] = useState(false) const getBalance = (symbol: string) => { const raw = symbol === "SKC" ? skcBalance : kktBalance return walletType === "test" ? raw * 0.1 : raw } const formatNumber = (num: number) => { if (num >= 1_000_000_000) return (num / 1_000_000_000).toFixed(4) + "B" if (num >= 1_000_000) return (num / 1_000_000).toFixed(4) + "M" if (num >= 1_000) return (num / 1_000).toFixed(4) + "K" return num.toFixed(4) } const formatTime = (date: Date) => { const diff = Date.now() - date.getTime() const mins = Math.floor(diff / 60000) const hours = Math.floor(diff / 3600000) const days = Math.floor(diff / 86400000) if (days > 0) return `${days}d ago` if (hours > 0) return `${hours}h ago` return `${mins}m ago` } const copyAddress = (address: string, label: string) => { navigator.clipboard.writeText(address) setCopiedAddress(label) toast({ title: "Copied!", description: `${label} address copied to clipboard` }) setTimeout(() => setCopiedAddress(null), 2000) } const handleSend = (e: React.FormEvent) => { e.preventDefault() const amount = parseFloat(sendAmount) if (!sendAddress || !amount || amount <= 0) { toast({ title: "Invalid Input", description: "Please fill in all fields correctly", variant: "destructive" }) return } const currentBalance = getBalance(sendCoin) if (amount > currentBalance) { toast({ title: "Insufficient Balance", description: `You don't have enough ${sendCoin}`, variant: "destructive" }) return } setIsSending(true) setTimeout(() => { const newTx: Transaction = { id: "tx" + Date.now(), type: "send", coin: sendCoin, amount, address: sendAddress.slice(0, 8) + "..." + sendAddress.slice(-4), status: "pending", timestamp: new Date(), fee: 0.001, } setTransactions((prev) => [newTx, ...prev]) setIsSending(false) setSendAmount("") setSendAddress("") toast({ title: "Transaction Sent!", description: `${amount} ${sendCoin} sent successfully` }) }, 1500) } const handleSwap = (e: React.FormEvent) => { e.preventDefault() const amount = parseFloat(swapAmount) if (!amount || amount <= 0) { toast({ title: "Invalid Amount", description: "Please enter a valid swap amount", variant: "destructive" }) return } const fromBalance = getBalance(swapFrom) if (amount > fromBalance) { toast({ title: "Insufficient Balance", description: `Not enough ${swapFrom} to swap`, variant: "destructive" }) return } setIsSwapping(true) const swapTo = swapFrom === "SKC" ? "KKT" : "SKC" setTimeout(() => { const newTx: Transaction = { id: "tx" + Date.now(), type: "swap", coin: `${swapFrom}→${swapTo}`, amount, address: "Internal swap", status: "completed", timestamp: new Date(), fee: 0.005, } setTransactions((prev) => [newTx, ...prev]) setIsSwapping(false) setSwapAmount("") toast({ title: "Swap Complete!", description: `${amount} ${swapFrom} swapped to ${swapTo}` }) }, 2000) } const statusIcon = (status: Transaction["status"]) => { if (status === "completed") return if (status === "pending") return return } const txIcon = (type: Transaction["type"]) => { if (type === "send") return if (type === "receive") return return } return (

{/* Balance Overview */}

SKC

{formatNumber(getBalance("SKC"))}

SoKhumCoin

KKT

{formatNumber(getBalance("KKT"))}

KhmerKromToken

{/* Wallet Badge */}

Active: {walletType} Wallet

{walletType === "test" ? "Testnet" : "Mainnet"}

{/* Main Tabs */} Send Receive Swap {/* SEND */} Send Coins

Select Coin

Amount

setSendAmount(e.target.value)} className="pr-16" /> {sendCoin}

Available: {formatNumber(getBalance(sendCoin))} {sendCoin}

Recipient Address setSendAddress(e.target.value)} />

Network fee ~0.001 {sendCoin}

You will send {sendAmount ? (parseFloat(sendAmount) || 0).toFixed(4) : "0.0000"} {sendCoin}

{/* RECEIVE */} {/* SKC Receive */}

Receive SKC

QR Code

Your SKC Address

{SKC_ADDRESS}

{/* KKT Receive */}

Receive KKT

QR Code

Your KKT Address

{KKT_ADDRESS}

{/* SWAP */} Swap Coins

From

{swapFrom} {swapFrom === "SKC" ? "KKT" : "SKC"}

Amount to Swap

setSwapAmount(e.target.value)} className="pr-16" /> {swapFrom}

Available: {formatNumber(getBalance(swapFrom))} {swapFrom}

Exchange rate 1 {swapFrom} = 1 {swapFrom === "SKC" ? "KKT" : "SKC"}

Swap fee 0.005 {swapFrom}

You will receive {swapAmount ? Math.max(0, (parseFloat(swapAmount) || 0) - 0.005).toFixed(4) : "0.0000"}{" "} {swapFrom === "SKC" ? "KKT" : "SKC"}

{/* Transaction History */}

Transaction History {transactions.length} txns

{transactions.length === 0 ? (

No transactions yet

) : ( transactions.map((tx) => (

{txIcon(tx.type)}

{tx.type}

• {tx.coin}

{tx.address}

{tx.type === "send" ? "-" : tx.type === "receive" ? "+" : "~"}{formatNumber(tx.amount)}

{statusIcon(tx.status)} {formatTime(tx.timestamp)}

)) )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Coins, Zap, TrendingUp, Wallet, Play, Pause, Settings, Copy, Eye, EyeOff, RefreshCw, Upload, CheckCircle, UserPlus, Send, Home, CreditCard } from 'lucide-react' import { useToast } from "@/hooks/use-toast" import PaymentPage from "@/components/PaymentPage" interface CoinData { symbol: string name: string balance: number miningRate: number totalSupply: number isActive: boolean progress: number hashRate: number lightning24h: boolean lightningEndTime: number | null } type WalletType = "test" | "main" interface RegistrationData { firstName: string middleName: string lastName: string phone: string email: string identityDocument: File | null isVerified: boolean isRegistered: boolean } type ActivePage = "mine" | "payment" export default function SKCoinApp() { const [activePage, setActivePage] = useState("mine") const [registration, setRegistration] = useState({ firstName: "", middleName: "", lastName: "", phone: "", email: "", identityDocument: null, isVerified: false, isRegistered: false, }) const [showRegistration, setShowRegistration] = useState(true) const [mnemonic, setMnemonic] = useState([]) const [showMnemonic, setShowMnemonic] = useState(false) const [walletType, setWalletType] = useState("test") const { toast } = useToast() const [coins, setCoins] = useState>({ SKC: { symbol: "SKC", name: "SoKhumCoin", balance: 0, miningRate: 0.1, totalSupply: 100000000000, isActive: false, progress: 0, hashRate: 0, lightning24h: false, lightningEndTime: null, }, KKT: { symbol: "KKT", name: "KhmerKromToken", balance: 0, miningRate: 0.08, totalSupply: 100000000000, isActive: false, progress: 0, hashRate: 0, lightning24h: false, lightningEndTime: null, }, }) const [totalHashRate, setTotalHashRate] = useState(0) useEffect(() => { if (mnemonic.length === 0) { generateMnemonic() } }, []) const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { setRegistration(prev => ({ ...prev, identityDocument: file })) toast({ title: "Document Uploaded", description: `${file.name} has been uploaded successfully`, }) } } const handleRegistrationSubmit = async (e: React.FormEvent) => { e.preventDefault() // Validate all fields if (!registration.firstName || !registration.lastName || !registration.phone || !registration.email || !registration.identityDocument) { toast({ title: "Incomplete Form", description: "Please fill in all required fields", variant: "destructive", }) return } // Simulate email verification toast({ title: "Verification Email Sent", description: `A verification email has been sent to ${registration.email} from sokhumcoin@gmail.com`, }) // Simulate verification process setTimeout(() => { setRegistration(prev => ({ ...prev, isVerified: true, isRegistered: true })) setShowRegistration(false) toast({ title: "Account Verified!", description: "Your account has been successfully verified. You can now start mining!", }) }, 2000) } const generateMnemonic = () => { const words = [ "abandon", "ability", "able", "about", "above", "absent", "absorb", "abstract", "absurd", "abuse", "access", "accident", "account", "accuse", "achieve", "acid", "acoustic", "acquire", "across", "act", "action", "actor", "actress", "actual", "adapt", "add", "addict", "address", "adjust", "admit", "adult", "advance", "advice", "aerobic", "affair", "afford", "afraid", "again", "age", "agent", "agree", "ahead", "aim", "air", "airport", "aisle", "alarm", "album", "alcohol", "alert", "alien", "all", "alley", "allow", "almost", "alone", "alpha", "already", "also", "alter", "always", "amateur", "amazing", "among", "amount", "amused", "analyst", "anchor", "ancient", "anger", "angle", "angry", "animal", "ankle", "announce", "annual", "another", "answer", "antenna", "antique", "anxiety", "any", "apart", "apology", "appear", "apple", "approve", "april", "arch", "arctic", "area", "arena", "argue", "arm", "armed", "armor", "army", "around", "arrange", "arrest", "arrive", "arrow", "art", "artefact", "artist", "artwork", "ask", "aspect", "assault", "asset", "assist", "assume", "asthma", "athlete", "atom", "attack", "attend", "attitude", "attract", "auction", "audit", "august", "aunt", "author", "auto", "autumn", "average", "avocado", "avoid", "awake", "aware", "away", "awesome", "awful", "awkward", "axis" ] const phrase: string[] = [] for (let i = 0; i < 24; i++) { phrase.push(words[Math.floor(Math.random() * words.length)]) } setMnemonic(phrase) } const copyMnemonic = () => { navigator.clipboard.writeText(mnemonic.join(" ")) toast({ title: "Copied!", description: "Mnemonic phrase copied to clipboard", }) } useEffect(() => { const interval = setInterval(() => { setCoins((prevCoins) => { const updatedCoins = { ...prevCoins } let totalHash = 0 Object.keys(updatedCoins).forEach((key) => { const coin = updatedCoins[key] if (coin.lightning24h && coin.lightningEndTime) { if (Date.now() < coin.lightningEndTime) { coin.balance += coin.miningRate * 2 coin.progress = (coin.progress + 2) % 100 coin.hashRate = Math.random() * 100 + 50 totalHash += coin.hashRate } else { coin.lightning24h = false coin.lightningEndTime = null coin.hashRate = 0 } } else if (coin.isActive) { coin.balance += coin.miningRate coin.progress = (coin.progress + 2) % 100 coin.hashRate = Math.random() * 50 + 25 totalHash += coin.hashRate } else { coin.hashRate = 0 } }) setTotalHashRate(totalHash) return updatedCoins }) }, 1000) return () => clearInterval(interval) }, []) const toggleMining = (coinSymbol: string) => { setCoins((prev) => ({ ...prev, [coinSymbol]: { ...prev[coinSymbol], isActive: !prev[coinSymbol].isActive, progress: prev[coinSymbol].isActive ? 0 : prev[coinSymbol].progress, }, })) } const startLightningMining = (coinSymbol: string) => { setCoins((prev) => ({ ...prev, [coinSymbol]: { ...prev[coinSymbol], lightning24h: true, lightningEndTime: Date.now() + 24 * 60 * 60 * 1000, isActive: false, }, })) toast({ title: "Lightning Mining Started!", description: `${coinSymbol} will mine for 24 hours at double speed`, }) } const formatNumber = (num: number) => { if (num >= 1000000000) return (num / 1000000000).toFixed(2) + "B" if (num >= 1000000) return (num / 1000000).toFixed(2) + "M" if (num >= 1000) return (num / 1000).toFixed(2) + "K" return num.toFixed(4) } const getBalance = (coin: CoinData) => { if (walletType === "test") { return coin.balance * 0.1 } return coin.balance } const CoinMiningCard = ({ coin }: { coin: CoinData }) => (

{coin.symbol}

{coin.name}

{coin.lightning24h ? "Lightning 24h" : coin.isActive ? "Mining" : "Stopped"}

Balance

{formatNumber(getBalance(coin))}

{walletType === "test" ? "Test" : "Main"}

Hash Rate

{coin.hashRate.toFixed(1)} H/s

Mining Progress {coin.progress.toFixed(0)}%

Mining Rate: {coin.miningRate} {coin.symbol}/s Supply: {formatNumber(coin.totalSupply)}

) if (showRegistration && !registration.isRegistered) { return (

SKCoin Registration

Account Registration

Please provide your information to verify your account

First Name * setRegistration(prev => ({ ...prev, firstName: e.target.value }))} required />

Middle Name setRegistration(prev => ({ ...prev, middleName: e.target.value }))} />

Last Name * setRegistration(prev => ({ ...prev, lastName: e.target.value }))} required />

Phone Number * setRegistration(prev => ({ ...prev, phone: e.target.value }))} required />

Email Address * setRegistration(prev => ({ ...prev, email: e.target.value }))} required />

Verification email will be sent from sokhumcoin@gmail.com

Identity Document *

{registration.identityDocument && ( )}

Upload ID card, passport, or driver's license

Your information is encrypted and secure

SKCoin Mining Platform

) } return (

{/* Header */}

SKCoin

{registration.isVerified && ( Verified )}

{registration.isRegistered && ( Account Information

Name: {registration.firstName} {registration.middleName} {registration.lastName}

Email: {registration.email}

Phone: {registration.phone}

)} Wallet Type

Recovery Phrase (24 words)

{showMnemonic ? (

{mnemonic.map((word, index) => (

{index + 1}. {word}

))}

) : (

Click the eye icon to reveal your recovery phrase

Keep it safe and never share it with anyone

)} {/* Overview Stats */}

Total Balance

{formatNumber(getBalance(coins.SKC) + getBalance(coins.KKT))}

Hash Rate

{totalHashRate.toFixed(1)} H/s

{/* Mining Tabs */} SKC KKT {/* Quick Actions */} Quick Actions {/* Footer Info */}

SKCoin Mining Platform

Secure • Decentralized • Efficient

{/* Payment Page Overlay */} {activePage === "payment" && (

Payments

{registration.isVerified && ( Verified )}

)} {/* Bottom Navigation */}

) }