"use client"; import * as React from "react"; import { useEffect, useState } from "react"; import { useAccount, useReadContract } from "wagmi"; import { useSession } from "next-auth/react"; import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogClose } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Terminal, X } from "lucide-react"; import carvIdAbiData from "@/lib/ModularCarvID_ABI.json"; import { bscTestnet, localhost } from "wagmi/chains"; import { useWeb2Achievements } from "@/hooks/use-web2-achievements"; import { ethers } from "ethers"; // Ensure the contract address is properly typed const contractAddress = (process.env.NEXT_PUBLIC_CONTRACT_ADDRESS || "0x59C3fed3153866A139e8efBA185da2BD083fF034") as `0x${string}`; const carvIdAbi = carvIdAbiData.abi; // Use just the ABI array // Debug environment variable console.log('🔍 CarvIdPassportDialog - Environment variable check:', { NEXT_PUBLIC_CONTRACT_ADDRESS: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS, contractAddress, hasEnvVar: !!process.env.NEXT_PUBLIC_CONTRACT_ADDRESS }); interface NftMetadata { name: string; description: string; image: string; attributes: { trait_type: string; value: string }[]; } export function CarvIdPassportDialog() { const { address, isConnected, chain } = useAccount(); const { data: session } = useSession(); const [metadata, setMetadata] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(""); const [open, setOpen] = useState(false); const [web2Profile, setWeb2Profile] = useState(null); const [web2Loading, setWeb2Loading] = useState(false); const [web2Error, setWeb2Error] = useState(null); const [trustScore, setTrustScore] = useState<{ value: number; badge: string; explanation: string } | null>(null); const [isClient, setIsClient] = useState(false); const isOnCorrectNetwork = chain?.id === bscTestnet.id || chain?.id === localhost.id; const { data: tokenId, error: tokenIdError, isFetching: isFetchingTokenId } = useReadContract({ address: contractAddress, abi: carvIdAbi, functionName: "walletToTokenId", args: address ? [address] : undefined, query: { enabled: isConnected && isOnCorrectNetwork && !!address, }, }); // Check if user has a token - fix the logic to handle BigInt properly const hasToken = tokenId !== undefined && tokenId !== null && Number(tokenId) > 0; // Enhanced debugging for CARV ID detection useEffect(() => { if (isConnected && isOnCorrectNetwork && address) { console.log('🔍 CARV ID Detection Debug:', { address, contractAddress, functionName: 'walletToTokenId', args: [address], enabled: isConnected && isOnCorrectNetwork && !!address, network: chain?.id === localhost.id ? 'Localhost' : 'BNB Testnet', chainId: chain?.id, tokenId: tokenId ? String(tokenId) : null, hasToken, tokenIdError }); // Check if contract is deployed if (window.ethereum) { const provider = new ethers.BrowserProvider(window.ethereum as any); provider.getCode(contractAddress).then((code: string) => { console.log('📋 Contract Deployment Check:', { contractAddress, hasCode: code !== '0x', codeLength: code.length, isDeployed: code !== '0x' }); }).catch((error: any) => { console.error('❌ Contract deployment check failed:', error); }); } } }, [isConnected, isOnCorrectNetwork, address, contractAddress, chain, tokenId, hasToken, tokenIdError]); // ABI validation debugging useEffect(() => { console.log('🔧 ABI Validation Debug:', { abiLength: carvIdAbi.length, hasWalletToTokenId: carvIdAbi.some((item: any) => typeof item === 'object' && item.name === 'walletToTokenId' ), hasTokenURI: carvIdAbi.some((item: any) => typeof item === 'object' && item.name === 'tokenURI' ), // Show sample of ABI functions abiFunctions: carvIdAbi .filter((item: any) => typeof item === 'object' && item.type === 'function') .slice(0, 10) .map((item: any) => item.name) }); }, []); const { data: tokenURI, error: tokenURIError, isFetching: isFetchingTokenURI } = useReadContract({ address: contractAddress, abi: carvIdAbi, functionName: "tokenURI", args: hasToken && tokenId ? [tokenId] : undefined, query: { enabled: hasToken, }, }); // Set client flag to prevent hydration mismatch useEffect(() => { setIsClient(true); }, []); useEffect(() => { const anyError = tokenIdError || tokenURIError; if (anyError) { console.error('❌ CARV ID Error:', anyError); setError(String(anyError.message)); setIsLoading(false); return; } if (tokenURI) { try { const uriString = tokenURI as string; if (uriString.startsWith("data:application/json;base64,")) { const base64String = uriString.substring(29); const jsonString = atob(base64String); const parsedMetadata = JSON.parse(jsonString); setMetadata(parsedMetadata); console.log('✅ CARV ID Metadata loaded:', parsedMetadata); } else { setError("Unsupported token URI format."); } } catch (e) { console.error('❌ Failed to parse token URI:', e); setError(String(e)); } } setIsLoading(isFetchingTokenId || isFetchingTokenURI); }, [tokenURI, tokenIdError, tokenURIError, isFetchingTokenId, isFetchingTokenURI]); // Fetch Web2 achievements when modal opens and address is available useEffect(() => { if (address && open) { setWeb2Loading(true); setWeb2Error(null); // Create identities array from session data const identities = []; // Add GitHub identity if user is logged in with GitHub if (session?.user && (session as any).provider === 'github' && (session as any).username) { identities.push({ provider: 'github', username: (session as any).username }); } // Add Google identity if user is logged in with Google if (session?.user && (session as any).provider === 'google' && session.user.email) { identities.push({ provider: 'google', email: session.user.email }); } // If no session data, use demo data if (identities.length === 0) { identities.push({ provider: 'github', username: 'demo' }); identities.push({ provider: 'google', email: 'demo@example.com' }); } // Fetch Web2 achievements fetch('/api/web2/achievements', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identities }) }) .then(res => res.json()) .then(data => { setWeb2Profile(data); setWeb2Loading(false); }) .catch(() => { setWeb2Error('Failed to fetch Web2 achievements'); setWeb2Loading(false); }); } }, [address, open, session]); // Compute trust score based on Web2 achievements and metadata useEffect(() => { if (web2Profile || metadata) { let score = 30; // Base score let badge = "New User"; let explanation = "Base score for CARV ID holder."; // Add score from Web2 achievements if (web2Profile && web2Profile.totalScore) { score += Math.min(web2Profile.totalScore / 10, 50); // Scale achievements score explanation += ` Web2 achievements: ${web2Profile.totalScore} pts.`; if (web2Profile.overallTier === 'Gold') { score += 20; explanation += " Gold tier bonus."; } else if (web2Profile.overallTier === 'Silver') { score += 10; explanation += " Silver tier bonus."; } } // Add score from NFT metadata if (metadata && metadata.attributes) { const hasNFTs = metadata.attributes.find(a => a.trait_type === "NFTs"); if (hasNFTs) { score += 10; explanation += " NFT activity detected."; } } // Determine badge based on score if (score > 90) badge = "Trusted"; else if (score > 70) badge = "Active"; else if (score > 50) badge = "Verified"; setTrustScore({ value: Math.round(score), badge, explanation }); } }, [web2Profile, metadata]); // Button is only enabled if user is connected and has a CARV ID const canView = isConnected && isOnCorrectNetwork && hasToken; // Get button text and tooltip based on state - only on client side const getButtonState = () => { if (!isClient) { return { text: "Loading...", disabled: true }; } if (!isConnected) { return { text: "Connect Wallet First", disabled: true }; } if (!isOnCorrectNetwork) { return { text: "Switch to BNB Testnet/Localhost", disabled: true }; } if (!hasToken) { return { text: "Mint CARV ID First", disabled: true }; } return { text: "View CARV ID", disabled: false }; }; const buttonState = getButtonState(); // Don't render the button until client-side hydration is complete if (!isClient) { return ( ); } return ( ); }