[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Metal SDK Demo", description: "A demo app for Metal SDK token management", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export const createClient = () => { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export function createClient() { const cookieStore = cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { get(name: string) { return cookieStore.get(name)?.value }, set(name: string, value: string, options: any) { cookieStore.set({ name, value, ...options }) }, remove(name: string, options: any) { cookieStore.set({ name, value: "", ...options }) }, }, }) } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } // Get the holder's address const holderResponse = await fetch( `https://api.metal.build/holder/${holderId}?publicKey=${process.env.NEXT_PUBLIC_METAL_API_KEY}`, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }, ) if (!holderResponse.ok) { if (holderResponse.status === 404) { return NextResponse.json({ error: "Holder not found" }, { status: 404 }) } const errorData = await holderResponse.json() console.error("Error fetching holder:", errorData) return NextResponse.json({ error: "Failed to fetch holder" }, { status: holderResponse.status }) } const holderData = await holderResponse.json() return NextResponse.json(holderData) } catch (error) { console.error("Error in /api/holders/[holderId]:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { return (

Metal SDK Demo Create a wallet and manage your tokens

This demo app allows you to:

Create a wallet when you sign up
Receive 10 tokens automatically
Spend tokens on actions
Withdraw your tokens

) } [V0_FILE]typescriptreact:file="app/auth-error/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle } from "lucide-react" export default function AuthErrorPage() { return (

Authentication Error

There was a problem with your authentication

We couldn't complete the authentication process. This could be due to:

An expired or invalid authentication link
A network error during the authentication process
The account may have been deleted or disabled

) } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/spend/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const { amount } = await request.json() if (!amount || amount <= 0) { return NextResponse.json({ error: "Valid amount is required" }, { status: 400 }) } // Spend tokens using Metal API const spendResponse = await fetch(`https://api.metal.build/holder/${holderId}/spend`, { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": process.env.METAL_API_SECRET_KEY!, }, body: JSON.stringify({ tokenAddress: process.env.TOKEN_ADDRESS, amount: Number(amount), // Ensure amount is a number, not a string }), }) if (!spendResponse.ok) { const errorData = await spendResponse.json() console.error("Error spending tokens:", errorData) return NextResponse.json({ error: "Failed to spend tokens" }, { status: spendResponse.status }) } const spendData = await spendResponse.json() return NextResponse.json({ success: true, message: "🎉 You spent a token! Here's a fun message: 'You're awesome!'", transaction: spendData, }) } catch (error) { console.error("Error in /api/holders/[holderId]/spend:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/reward/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const { amount } = await request.json() if (!amount || amount <= 0) { return NextResponse.json({ error: "Valid amount is required" }, { status: 400 }) } // First, get the holder's address const holderResponse = await fetch( `https://api.metal.build/holder/${holderId}?publicKey=${process.env.NEXT_PUBLIC_METAL_API_KEY}`, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }, ) if (!holderResponse.ok) { const errorData = await holderResponse.json() console.error("Error fetching holder:", errorData) return NextResponse.json({ error: "Failed to fetch holder" }, { status: holderResponse.status }) } const holderData = await holderResponse.json() // Distribute tokens to the holder const distributeResponse = await fetch(`https://api.metal.build/token/${process.env.TOKEN_ADDRESS}/distribute`, { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": process.env.METAL_API_SECRET_KEY!, }, body: JSON.stringify({ sendToAddress: holderData.address, amount: Number(amount), // Ensure amount is a number, not a string }), }) if (!distributeResponse.ok) { const errorData = await distributeResponse.json() console.error("Error distributing tokens:", errorData) return NextResponse.json({ error: "Failed to distribute tokens" }, { status: distributeResponse.status }) } const distributeData = await distributeResponse.json() return NextResponse.json({ success: true, message: "🎁 You've been rewarded with a token!", transaction: distributeData, }) } catch (error) { console.error("Error in /api/holders/[holderId]/reward:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/withdraw/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const { toAddress, amount } = await request.json() if (!toAddress) { return NextResponse.json({ error: "Withdrawal address is required" }, { status: 400 }) } if (!amount || amount <= 0) { return NextResponse.json({ error: "Valid amount is required" }, { status: 400 }) } // Call the Metal API withdraw endpoint directly const withdrawResponse = await fetch(`https://api.metal.build/holder/${holderId}/withdraw`, { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": process.env.METAL_API_SECRET_KEY!, }, body: JSON.stringify({ tokenAddress: process.env.TOKEN_ADDRESS, amount: Number(amount), // Ensure amount is a number, not a string toAddress: toAddress, }), }) if (!withdrawResponse.ok) { const errorData = await withdrawResponse.json() console.error("Error withdrawing tokens:", errorData) return NextResponse.json({ error: "Failed to withdraw tokens" }, { status: withdrawResponse.status }) } const withdrawData = await withdrawResponse.json() return NextResponse.json({ success: true, transaction: withdrawData, }) } catch (error) { console.error("Error in /api/holders/[holderId]/withdraw:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "metal-token-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@supabase/ssr": "^0.1.0", "@supabase/supabase-js": "^2.39.0", "next": "14.0.4", "react": "^18", "react-dom": "^18", "lucide-react": "^0.294.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function middleware(request: NextRequest) { // Check if this is an auth confirmation link const { pathname, searchParams } = new URL(request.url) const code = searchParams.get("code") // If there's a code parameter at the root, redirect to the auth callback route if (pathname === "/" && code) { return NextResponse.redirect(new URL(`/auth/callback?code=${code}`, request.url)) } let response = NextResponse.next({ request: { headers: request.headers, }, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { get(name: string) { return request.cookies.get(name)?.value }, set(name: string, value: string, options: any) { request.cookies.set({ name, value, ...options, }) response = NextResponse.next({ request: { headers: request.headers, }, }) response.cookies.set({ name, value, ...options, }) }, remove(name: string, options: any) { request.cookies.set({ name, value: "", ...options, }) response = NextResponse.next({ request: { headers: request.headers, }, }) response.cookies.set({ name, value: "", ...options, }) }, }, }, ) const { data: { session }, } = await supabase.auth.getSession() // If no session and trying to access protected routes if (!session && request.nextUrl.pathname.startsWith("/dashboard")) { return NextResponse.redirect(new URL("/login", request.url)) } // If session and trying to access auth routes if (session && (request.nextUrl.pathname.startsWith("/login") || request.nextUrl.pathname.startsWith("/signup"))) { return NextResponse.redirect(new URL("/dashboard", request.url)) } return response } export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescriptreact:file="app/auth/callback/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { createClient } from "@/lib/supabase" import { Loader2 } from "lucide-react" export default function AuthCallbackPage() { const router = useRouter() const searchParams = useSearchParams() const code = searchParams.get("code") const [error, setError] = useState(null) useEffect(() => { const handleCallback = async () => { if (!code) { setError("No code provided") return } try { const supabase = createClient() const { error } = await supabase.auth.exchangeCodeForSession(code) if (error) { setError(error.message) return } // Redirect to dashboard on success router.push("/dashboard") router.refresh() } catch (err) { console.error("Error during auth callback:", err) setError("An unexpected error occurred") } } handleCallback() }, [code, router]) return (

{error ? (

Authentication Error

{error}

) : (

Completing authentication, please wait...

)}

) } [V0_FILE]typescriptreact:file="app/auth/callback/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/auth/callback/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" // This route is now handled by the page component export async function GET() { // The actual logic is in the page component return NextResponse.next() } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/balance/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } // First, get the holder's address const holderResponse = await fetch( `https://api.metal.build/holder/${holderId}?publicKey=${process.env.NEXT_PUBLIC_METAL_API_KEY}`, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }, ) if (!holderResponse.ok) { // If holder doesn't exist, return 0 balance if (holderResponse.status === 404) { return NextResponse.json({ balance: 0 }) } const errorData = await holderResponse.json() console.error("Error fetching holder:", errorData) return NextResponse.json({ error: "Failed to fetch holder" }, { status: holderResponse.status }) } const holderData = await holderResponse.json() // Then, get the holder's token balance const balanceResponse = await fetch( `https://api.metal.build/holder/${holderData.address}/token/${process.env.TOKEN_ADDRESS}`, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }, ) if (!balanceResponse.ok) { // If the holder doesn't have any tokens yet, return 0 balance if (balanceResponse.status === 404) { return NextResponse.json({ balance: 0 }) } const errorData = await balanceResponse.json() console.error("Error fetching balance:", errorData) return NextResponse.json({ error: "Failed to fetch balance" }, { status: balanceResponse.status }) } const balanceData = await balanceResponse.json() return NextResponse.json({ balance: balanceData.balance }) } catch (error) { console.error("Error in /api/holders/[holderId]/balance:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/holders/[holderId]/welcome-tokens/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: { holderId: string } }) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Check if user is authenticated if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const holderId = params.holderId // Check if the user is requesting their own data if (session.user.id !== holderId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } // First, get the holder's address const holderResponse = await fetch( `https://api.metal.build/holder/${holderId}?publicKey=${process.env.NEXT_PUBLIC_METAL_API_KEY}`, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }, ) if (!holderResponse.ok) { const errorData = await holderResponse.json() console.error("Error fetching holder:", errorData) return NextResponse.json({ error: "Failed to fetch holder" }, { status: holderResponse.status }) } const holderData = await holderResponse.json() // Distribute welcome tokens to the holder const distributeResponse = await fetch(`https://api.metal.build/token/${process.env.TOKEN_ADDRESS}/distribute`, { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": process.env.METAL_API_SECRET_KEY!, }, body: JSON.stringify({ sendToAddress: holderData.address, amount: 10, // Welcome bonus of 10 tokens }), }) if (!distributeResponse.ok) { const errorData = await distributeResponse.json() console.error("Error distributing welcome tokens:", errorData) return NextResponse.json({ error: "Failed to distribute welcome tokens" }, { status: distributeResponse.status }) } const distributeData = await distributeResponse.json() return NextResponse.json({ success: true, message: "🎉 Welcome! You've received 10 tokens as a welcome bonus!", transaction: distributeData, }) } catch (error) { console.error("Error in /api/holders/[holderId]/welcome-tokens:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" import { Loader2 } from "lucide-react" import { createClient } from "@/lib/supabase" export default function SignupPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [errorMessage, setErrorMessage] = useState("") const [siteUrl, setSiteUrl] = useState("") const [isSignupComplete, setIsSignupComplete] = useState(false) const router = useRouter() const { toast } = useToast() const supabase = createClient() useEffect(() => { // Get the current site URL for the redirect setSiteUrl(window.location.origin) }, []) const handleSignup = async (e: React.FormEvent) => { e.preventDefault() setErrorMessage("") if (!email || !password) { toast({ title: "Error", description: "Please enter your email and password", variant: "destructive", }) return } setIsLoading(true) try { // Sign up with Supabase Auth const { data, error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: `${siteUrl}/auth/callback`, }, }) if (error) { throw error } if (data.user) { // After successful signup, create a Metal holder for the user const response = await fetch("/api/holders/create", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ holderId: data.user.id }), }) if (!response.ok) { const errorData = await response.json() console.error("API error:", errorData) // We'll continue even if holder creation fails, as we can retry later } setIsSignupComplete(true) } } catch (error: any) { console.error("Signup error:", error) setErrorMessage(error.message || "Failed to create your account. Please try again.") toast({ title: "Error", description: error.message || "Failed to create your account", variant: "destructive", }) } finally { setIsLoading(false) } } if (isSignupComplete) { return (

Check Your Email We've sent you a confirmation link

Please check your email ({email}) for a confirmation link. After confirming your email, you'll receive 10 tokens as a welcome bonus when you log in!

) } return (

Email setEmail(e.target.value)} required />

Password setPassword(e.target.value)} required />

{errorMessage && (

{errorMessage}

)}

After confirming your email, you'll receive 10 tokens as a welcome bonus!

Already have an account?{" "} Log in

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" import { Loader2 } from "lucide-react" import { createClient } from "@/lib/supabase" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [errorMessage, setErrorMessage] = useState("") const router = useRouter() const { toast } = useToast() const supabase = createClient() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setErrorMessage("") if (!email || !password) { toast({ title: "Error", description: "Please enter your email and password", variant: "destructive", }) return } // Set loading state immediately setIsLoading(true) try { // Sign in with Supabase Auth const { data, error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) { throw error } if (data.user) { toast({ title: "Success!", description: "You've successfully logged in.", }) // Redirect to dashboard (middleware will handle auth check) router.push("/dashboard") router.refresh() } } catch (error: any) { console.error("Login error:", error) setErrorMessage(error.message || "Failed to log in. Please check your credentials.") toast({ title: "Error", description: error.message || "Failed to log in", variant: "destructive", }) // Make sure to set loading to false on error setIsLoading(false) } // Note: We don't set isLoading to false on success because we're redirecting } return (

) } [V0_FILE]typescriptreact:file="app/api/holders/create/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request) { try { const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // Get the holderId from the request body const { holderId } = await request.json() // Use the authenticated user's ID if available, otherwise use the provided holderId const effectiveHolderId = session ? session.user.id : holderId if (!effectiveHolderId) { return NextResponse.json({ error: "Holder ID is required" }, { status: 400 }) } console.log("Checking/creating holder for ID:", effectiveHolderId) // First, explicitly check if the holder already exists const checkHolderUrl = `https://api.metal.build/holder/${effectiveHolderId}?publicKey=${process.env.NEXT_PUBLIC_METAL_API_KEY}` console.log( "Checking if holder exists:", checkHolderUrl.replace(process.env.NEXT_PUBLIC_METAL_API_KEY || "", "[REDACTED]"), ) const checkHolderResponse = await fetch(checkHolderUrl, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }) // If the holder exists, return the existing holder data if (checkHolderResponse.ok) { const existingHolderData = await checkHolderResponse.json() console.log("Existing holder found:", existingHolderData.address) return NextResponse.json({ ...existingHolderData, isExisting: true, }) } // If the holder doesn't exist (404), create a new one if (checkHolderResponse.status === 404) { console.log("Holder not found, creating new holder") // Create a new holder const holderUrl = `https://api.metal.build/holder/${effectiveHolderId}` console.log("Creating holder URL:", holderUrl) const holderResponse = await fetch(holderUrl, { method: "PUT", headers: { "Content-Type": "application/json", "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }) console.log("Create holder response status:", holderResponse.status) if (!holderResponse.ok) { // If we get a 409 Conflict, it means the holder already exists // This can happen if there's a race condition or if the check above failed for some reason if (holderResponse.status === 409) { console.log("Holder already exists (409 Conflict), fetching existing holder") // Get the existing holder data const getExistingResponse = await fetch(checkHolderUrl, { headers: { "x-api-key": process.env.METAL_API_SECRET_KEY!, }, }) if (getExistingResponse.ok) { const existingHolderData = await getExistingResponse.json() console.log("Retrieved existing holder:", existingHolderData.address) return NextResponse.json({ ...existingHolderData, isExisting: true, }) } } const errorText = await holderResponse.text() try { const errorJson = JSON.parse(errorText) console.error("Error creating holder:", errorJson) } catch { console.error("Error creating holder (raw):", errorText) } return NextResponse.json({ error: "Failed to create holder" }, { status: holderResponse.status }) } const holderData = await holderResponse.json() console.log("New holder created:", holderData.address) return NextResponse.json({ ...holderData, isNew: true, }) } // If we get here, there was some other error checking the holder console.error("Unexpected error checking holder:", checkHolderResponse.status) return NextResponse.json({ error: "Failed to check if holder exists" }, { status: checkHolderResponse.status }) } catch (error) { console.error("Error in /api/holders/create:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" import { Loader2, RefreshCw, LogOut, ExternalLink } from "lucide-react" import { createClient } from "@/lib/supabase" interface User { id: string email: string holderAddress: string } // Key for tracking welcome tokens in localStorage const WELCOME_TOKENS_KEY = "welcomeTokensReceived" // Maximum number of balance polling attempts const MAX_BALANCE_POLL_ATTEMPTS = 5 export default function DashboardPage() { // Set loading to true immediately on component mount const [user, setUser] = useState(null) const [balance, setBalance] = useState(null) const [isLoading, setIsLoading] = useState(true) const [isSpending, setIsSpending] = useState(false) const [isWithdrawing, setIsWithdrawing] = useState(false) const [withdrawAddress, setWithdrawAddress] = useState("") const [isRewarding, setIsRewarding] = useState(false) const [isCreatingHolder, setIsCreatingHolder] = useState(false) const [isDistributingWelcomeTokens, setIsDistributingWelcomeTokens] = useState(false) const [isPollingBalance, setIsPollingBalance] = useState(false) const [isNewWallet, setIsNewWallet] = useState(false) const router = useRouter() const { toast } = useToast() const supabase = createClient() // This effect runs once on component mount useEffect(() => { // Immediately show loading state setIsLoading(true) const fetchUserData = async () => { try { // Get the current user from Supabase const { data: { user: authUser }, error, } = await supabase.auth.getUser() if (error || !authUser) { throw new Error("Not authenticated") } console.log("Auth user:", authUser.id) // Create or get the holder for this user setIsCreatingHolder(true) setIsNewWallet(false) // Default to false const createResponse = await fetch("/api/holders/create", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ holderId: authUser.id }), }) if (!createResponse.ok) { const errorData = await createResponse.json() console.error("Error creating/getting holder:", errorData) throw new Error("Failed to create or get holder") } const holderData = await createResponse.json() console.log("Holder data:", holderData) // Set isNewWallet based on the response setIsNewWallet(holderData.isNew === true) setUser({ id: authUser.id, email: authUser.email || "", holderAddress: holderData.address, }) setIsCreatingHolder(false) // Check if this is the first confirmed login (email verified) // and if welcome tokens have not been distributed yet const hasReceivedWelcomeTokens = localStorage.getItem(WELCOME_TOKENS_KEY) === "true" const isEmailVerified = authUser.email_confirmed_at != null // First fetch the initial balance await fetchBalance(authUser.id) // Only distribute welcome tokens if: // 1. Email is verified // 2. User hasn't received welcome tokens before (according to localStorage) // 3. This is a new holder (not an existing one) if (isEmailVerified && !hasReceivedWelcomeTokens && holderData.isNew) { await distributeWelcomeTokens(authUser.id) } } catch (error) { console.error("Error fetching user data:", error) toast({ title: "Error", description: "Failed to load user data. Please try again.", variant: "destructive", }) // Redirect to login if not authenticated router.push("/login") } finally { setIsLoading(false) } } fetchUserData() }, [router, supabase, toast]) const pollBalance = async (userId: string, attempts = 0) => { if (attempts >= MAX_BALANCE_POLL_ATTEMPTS) { setIsPollingBalance(false) return } try { const response = await fetch(`/api/holders/${userId}/balance`) if (!response.ok) { throw new Error("Failed to fetch balance") } const data = await response.json() // If balance is greater than 0, stop polling if (data.balance > 0) { setBalance(data.balance) setIsPollingBalance(false) return } // Otherwise, wait and try again setTimeout(() => pollBalance(userId, attempts + 1), 2000) } catch (error) { console.error("Error polling balance:", error) setIsPollingBalance(false) } } const distributeWelcomeTokens = async (userId: string) => { setIsDistributingWelcomeTokens(true) try { const response = await fetch(`/api/holders/${userId}/welcome-tokens`, { method: "POST", headers: { "Content-Type": "application/json", }, }) if (!response.ok) { const errorData = await response.json() console.error("Error distributing welcome tokens:", errorData) return } const data = await response.json() // Mark welcome tokens as received localStorage.setItem(WELCOME_TOKENS_KEY, "true") toast({ title: "Welcome!", description: "You've received 10 tokens as a welcome bonus!", }) // Start polling for balance updates setIsPollingBalance(true) pollBalance(userId) } catch (error) { console.error("Error distributing welcome tokens:", error) } finally { setIsDistributingWelcomeTokens(false) } } const fetchBalance = async (holderId: string) => { try { const response = await fetch(`/api/holders/${holderId}/balance`) if (!response.ok) { const errorData = await response.json() console.error("Error fetching balance:", errorData) throw new Error("Failed to fetch balance") } const data = await response.json() setBalance(data.balance) return data.balance } catch (error) { console.error("Error fetching balance:", error) toast({ title: "Error", description: "Failed to fetch your token balance", variant: "destructive", }) setBalance(0) // Default to 0 on error return 0 } } const handleSpendToken = async () => { if (!user) return setIsSpending(true) try { const response = await fetch(`/api/holders/${user.id}/spend`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ amount: 1 }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to spend token") } // Optimistically update the balance if (balance !== null) { setBalance(Math.max(0, balance - 1)) } // Refresh balance to ensure accuracy await fetchBalance(user.id) toast({ title: "Success!", description: "You spent 1 token successfully!", }) } catch (error) { console.error("Error spending token:", error) toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to spend token. Do you have enough balance?", variant: "destructive", }) // Refresh balance to ensure accuracy after error if (user) { await fetchBalance(user.id) } } finally { setIsSpending(false) } } const handleRewardToken = async () => { if (!user) return setIsRewarding(true) try { const response = await fetch(`/api/holders/${user.id}/reward`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ amount: 1 }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to reward token") } // Optimistically update the balance by adding 1 token if (balance !== null) { setBalance(balance + 1) } toast({ title: "Success!", description: "You received 1 token as a reward!", }) // Fetch the actual balance after a short delay to ensure consistency setTimeout(async () => { if (user) { await fetchBalance(user.id) } }, 2000) } catch (error) { console.error("Error rewarding token:", error) toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to reward token.", variant: "destructive", }) // Refresh balance to ensure accuracy after error if (user) { await fetchBalance(user.id) } } finally { setIsRewarding(false) } } const handleWithdraw = async () => { if (!user || !withdrawAddress || balance === 0) return setIsWithdrawing(true) try { const response = await fetch(`/api/holders/${user.id}/withdraw`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ toAddress: withdrawAddress, amount: balance, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to withdraw tokens") } // Optimistically update the balance to 0 after withdrawal setBalance(0) toast({ title: "Success!", description: `You withdrew ${balance} tokens to ${withdrawAddress}`, }) setWithdrawAddress("") // Fetch the actual balance after a short delay to ensure consistency setTimeout(async () => { if (user) { await fetchBalance(user.id) } }, 2000) } catch (error) { console.error("Error withdrawing tokens:", error) toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to withdraw tokens", variant: "destructive", }) // Refresh balance to ensure accuracy after error if (user) { await fetchBalance(user.id) } } finally { setIsWithdrawing(false) } } const handleLogout = async () => { await supabase.auth.signOut() router.push("/") router.refresh() } // Function to open the wallet address on Basescan const openOnBasescan = (address: string) => { window.open(`https://basescan.org/address/${address}`, "_blank") } // Function to truncate wallet address const truncateAddress = (address: string) => { if (!address) return "" return `${address.substring(0, 6)}...${address.substring(address.length - 4)}` } // Show loading state for any async operation if (isLoading || isCreatingHolder || isDistributingWelcomeTokens) { return (

{isCreatingHolder ? isNewWallet ? "Setting up your wallet..." : "Retrieving your wallet..." : isDistributingWelcomeTokens ? "Distributing your welcome tokens..." : "Loading..."}

) } return (

Token Dashboard

Your Wallet View your wallet details and balance

{user?.email}

Wallet Address

{user?.holderAddress ? truncateAddress(user.holderAddress) : "Loading..."}

{user?.holderAddress && ( )}

Token Balance

{isPollingBalance ? ( Updating... ) : ( balance )}

Token Actions Spend or withdraw your tokens

Spend tokens for fun or reward yourself with more tokens!

Withdraw Address setWithdrawAddress(e.target.value)} disabled={isPollingBalance} />

) }