632 lines
25 KiB
TypeScript
632 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { useWallet } from '@solana/wallet-adapter-react';
|
|
import { Connection, PublicKey, Transaction } from '@solana/web3.js';
|
|
import {createTransferInstruction, getAssociatedTokenAddress, createAssociatedTokenAccountInstruction } from '@solana/spl-token';
|
|
import Header, { HeaderRef } from './components/Header';
|
|
import Leaderboard from './components/Leaderboard';
|
|
import { CLUSTER_URL, ENTRY_FEE_DINO } from './shared';
|
|
import { DINO_TOKEN_ADDRESS, FEE_COLLECTOR } from './constants';
|
|
import {
|
|
sendTransactionWithMobileOptimization,
|
|
isMobileDevice,
|
|
getMobileCommitmentLevel,
|
|
validateTransactionForMobile
|
|
} from './utils/mobileWalletUtils';
|
|
|
|
interface DashboardData {
|
|
leaderboard: Array<{ owner: string; score: string }>;
|
|
available_tx: string | null;
|
|
attempts_count:number;
|
|
}
|
|
|
|
export default function Home() {
|
|
const wallet = useWallet();
|
|
const { publicKey, sendTransaction } = wallet;
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [txHash, setTxHash] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [hasTicket, setHasTicket] = useState(false);
|
|
const [ticketTxHash, setTicketTxHash] = useState<string | null>(null);
|
|
const [showPaymentSuccess, setShowPaymentSuccess] = useState(false);
|
|
const [highscore, setHighscore] = useState(0);
|
|
const [dashboardData, setDashboardData] = useState<DashboardData>({ leaderboard: [], available_tx: null, attempts_count: 0 });
|
|
const [dashboardLoading, setDashboardLoading] = useState(true);
|
|
const [dashboardError, setDashboardError] = useState<string | null>(null);
|
|
const headerRef = useRef<HeaderRef>(null);
|
|
|
|
// Poll for available tickets every 5 seconds (only when no ticket is available)
|
|
useEffect(() => {
|
|
if (!publicKey) {
|
|
setHasTicket(false);
|
|
return;
|
|
}
|
|
|
|
// Don't poll if we already have a ticket
|
|
if (hasTicket) {
|
|
return;
|
|
}
|
|
|
|
const checkTicket = async () => {
|
|
try {
|
|
const response = await fetch(`https://vps.playpoolstudios.com/dino/api/get_available_tx.php?owner=${publicKey.toString()}`);
|
|
|
|
if (response.ok) {
|
|
const ticketData = await response.text();
|
|
// If we get a valid transaction hash (not "0"), we have a ticket
|
|
const ticketAvailable = ticketData !== "0" && ticketData.trim().length > 0;
|
|
setHasTicket(ticketAvailable);
|
|
|
|
// If ticket becomes available, stop polling immediately
|
|
if (ticketAvailable) {
|
|
setTicketTxHash(ticketData);
|
|
return;
|
|
}
|
|
|
|
setTicketTxHash(null);
|
|
} else {
|
|
setHasTicket(false);
|
|
setTicketTxHash(null);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking ticket:', error);
|
|
setHasTicket(false);
|
|
} finally {
|
|
|
|
}
|
|
};
|
|
|
|
// Check immediately
|
|
checkTicket();
|
|
|
|
// Set up polling every 5 seconds
|
|
const interval = setInterval(checkTicket, 5000);
|
|
|
|
// Cleanup interval on unmount, when publicKey changes, or when ticket becomes available
|
|
return () => clearInterval(interval);
|
|
}, [publicKey, hasTicket]);
|
|
|
|
|
|
useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
if (event.origin === window.location.origin && typeof event.data === "string") {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
if (message?.type === "gameClose" && typeof message.status === "number") {
|
|
game_close_signal(message.status);
|
|
}
|
|
} catch (error) {
|
|
console.error("JSON parse error from Unity message:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener("message", handleMessage);
|
|
return () => window.removeEventListener("message", handleMessage);
|
|
}, []);
|
|
|
|
// Fetch dashboard data every 5 seconds
|
|
useEffect(() => {
|
|
const fetchDashboardData = async () => {
|
|
try {
|
|
setDashboardLoading(true);
|
|
const response = await fetch('https://vps.playpoolstudios.com/dino/api/get_dashboard_data.php');
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch dashboard data');
|
|
}
|
|
|
|
const data: DashboardData = await response.json();
|
|
|
|
setHighscore(parseInt(data.leaderboard[0].score));
|
|
setDashboardData(data);
|
|
setDashboardError(null);
|
|
} catch (err) {
|
|
console.error('Error fetching dashboard data:', err);
|
|
setDashboardError(err instanceof Error ? err.message : 'Failed to fetch dashboard data');
|
|
} finally {
|
|
setDashboardLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchDashboardData();
|
|
|
|
// Refresh dashboard data every 5 seconds
|
|
const interval = setInterval(fetchDashboardData, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const game_close_signal = (status: number) => {
|
|
console.log("game_close_signal", status);
|
|
setHasTicket(false);
|
|
setTicketTxHash(null);
|
|
};
|
|
|
|
// Auto-hide payment success panel after 5 seconds
|
|
useEffect(() => {
|
|
console.log('useEffect triggered:', { txHash, showPaymentSuccess });
|
|
|
|
if (txHash && !showPaymentSuccess) {
|
|
console.log('Starting progress animation');
|
|
setShowPaymentSuccess(true);
|
|
console.log('showPaymentSuccess set to true');
|
|
} else {
|
|
console.log('Condition not met:', { txHash: !!txHash, showPaymentSuccess });
|
|
}
|
|
}, [txHash, showPaymentSuccess]);
|
|
|
|
// Test useEffect
|
|
useEffect(() => {
|
|
console.log('Test useEffect - component mounted');
|
|
}, []);
|
|
|
|
const handleEnterGame = async () => {
|
|
if (!publicKey) {
|
|
setError('Please connect your wallet first');
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
setError(null);
|
|
setTxHash(null);
|
|
|
|
try {
|
|
const connection = new Connection(CLUSTER_URL, 'confirmed');
|
|
const dinoMint = new PublicKey(DINO_TOKEN_ADDRESS);
|
|
|
|
// Get the user's DINO token account
|
|
const userTokenAccount = await getAssociatedTokenAddress(
|
|
dinoMint,
|
|
publicKey
|
|
);
|
|
|
|
// Check user's token account status and balance
|
|
console.log('Checking user token account status...');
|
|
const userTokenAccountInfo = await connection.getAccountInfo(userTokenAccount);
|
|
if (!userTokenAccountInfo) {
|
|
throw new Error('DINO token account not found. Please ensure you have DINO tokens in your wallet.');
|
|
}
|
|
|
|
// Get token balance
|
|
const userTokenAccounts = await connection.getParsedTokenAccountsByOwner(
|
|
publicKey,
|
|
{ mint: dinoMint }
|
|
);
|
|
|
|
if (userTokenAccounts.value.length === 0) {
|
|
throw new Error('No DINO tokens found in your wallet.');
|
|
}
|
|
|
|
const userBalance = userTokenAccounts.value[0].account.data.parsed.info.tokenAmount.uiAmount;
|
|
console.log('User DINO balance:', userBalance);
|
|
|
|
if (userBalance < ENTRY_FEE_DINO) {
|
|
throw new Error(`Insufficient DINO tokens. You have ${userBalance} DINO, but need ${ENTRY_FEE_DINO} DINO to play.`);
|
|
}
|
|
|
|
// Get or create the fee collector's DINO token account
|
|
const feeCollectorTokenAccount = await getAssociatedTokenAddress(
|
|
dinoMint,
|
|
FEE_COLLECTOR
|
|
);
|
|
|
|
const transaction = new Transaction();
|
|
|
|
// Check if fee collector token account exists, if not create it
|
|
const feeCollectorAccountInfo = await connection.getAccountInfo(feeCollectorTokenAccount);
|
|
if (!feeCollectorAccountInfo) {
|
|
console.log('Creating fee collector token account...');
|
|
const createAccountIx = createAssociatedTokenAccountInstruction(
|
|
publicKey,
|
|
feeCollectorTokenAccount,
|
|
FEE_COLLECTOR,
|
|
dinoMint
|
|
);
|
|
transaction.add(createAccountIx);
|
|
console.log('Added create account instruction');
|
|
}
|
|
|
|
// Add the transfer instruction (10 DINO tokens = 10,000,000,000 lamports for 9 decimals)
|
|
const transferAmount = ENTRY_FEE_DINO * 1_000_000_000; // 10 DINO tokens
|
|
console.log('Adding transfer instruction for', ENTRY_FEE_DINO, 'DINO tokens (', transferAmount, 'lamports)');
|
|
|
|
const transferIx = createTransferInstruction(
|
|
userTokenAccount,
|
|
feeCollectorTokenAccount,
|
|
publicKey,
|
|
transferAmount
|
|
);
|
|
|
|
// Validate the transfer instruction
|
|
if (!transferIx.programId.equals(dinoMint)) {
|
|
console.warn('Transfer instruction program ID mismatch');
|
|
}
|
|
|
|
transaction.add(transferIx);
|
|
console.log('Added transfer instruction');
|
|
|
|
// Get recent blockhash with higher commitment for mobile wallets
|
|
const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('confirmed');
|
|
transaction.recentBlockhash = blockhash;
|
|
transaction.lastValidBlockHeight = lastValidBlockHeight;
|
|
transaction.feePayer = publicKey;
|
|
|
|
// Ensure the transaction is properly formatted for mobile wallets
|
|
console.log('Transaction details before preflight:');
|
|
console.log('- Recent blockhash:', transaction.recentBlockhash);
|
|
console.log('- Last valid block height:', transaction.lastValidBlockHeight);
|
|
console.log('- Fee payer:', transaction.feePayer?.toString());
|
|
console.log('- Number of instructions:', transaction.instructions.length);
|
|
console.log('- Instructions:', transaction.instructions.map((ix, i) => `${i}: ${ix.programId.toString()}`));
|
|
|
|
// Validate transaction for mobile wallets
|
|
const validationErrors = validateTransactionForMobile(transaction);
|
|
if (validationErrors.length > 0) {
|
|
console.warn('Transaction validation errors:', validationErrors);
|
|
// For mobile wallets, we might want to be more strict
|
|
if (isMobileDevice()) {
|
|
throw new Error(`Transaction validation failed: ${validationErrors.join(', ')}`);
|
|
}
|
|
}
|
|
|
|
// Preflight check for mobile wallets
|
|
try {
|
|
console.log('Running preflight check for transaction...');
|
|
const { value: { err, logs } } = await connection.simulateTransaction(transaction);
|
|
|
|
if (err) {
|
|
console.warn('Preflight check failed:', err);
|
|
console.log('Preflight logs:', logs);
|
|
|
|
// For mobile wallets, we'll try to fix common issues and retry
|
|
if (isMobileDevice()) {
|
|
console.log('Attempting to fix transaction for mobile wallet...');
|
|
|
|
// Refresh blockhash and retry preflight
|
|
const { blockhash: newBlockhash, lastValidBlockHeight: newLastValidBlockHeight } = await connection.getLatestBlockhash('confirmed');
|
|
transaction.recentBlockhash = newBlockhash;
|
|
transaction.lastValidBlockHeight = newLastValidBlockHeight;
|
|
|
|
// Retry preflight with fresh blockhash
|
|
const retryResult = await connection.simulateTransaction(transaction);
|
|
if (retryResult.value.err) {
|
|
console.warn('Preflight retry also failed:', retryResult.value.err);
|
|
// On mobile, we might want to proceed anyway as some wallets handle this differently
|
|
console.log('Proceeding with transaction despite preflight failure (mobile wallet behavior)');
|
|
} else {
|
|
console.log('Preflight retry successful!');
|
|
}
|
|
} else {
|
|
// On desktop, be more strict about preflight failures
|
|
throw new Error(`Transaction simulation failed: ${err}`);
|
|
}
|
|
} else {
|
|
console.log('Preflight check passed successfully');
|
|
}
|
|
} catch (simError) {
|
|
console.warn('Preflight simulation failed:', simError);
|
|
|
|
// On mobile, we might want to proceed anyway as some wallets handle this differently
|
|
if (isMobileDevice()) {
|
|
console.log('Proceeding with transaction despite preflight failure (mobile wallet behavior)');
|
|
} else {
|
|
throw new Error('Transaction preflight check failed. Please try again.');
|
|
}
|
|
}
|
|
|
|
// Send the transaction with mobile-optimized options
|
|
let signature: string;
|
|
|
|
try {
|
|
signature = await sendTransactionWithMobileOptimization(
|
|
transaction,
|
|
connection,
|
|
wallet,
|
|
{
|
|
skipPreflight: false, // Try with preflight first
|
|
preflightCommitment: 'confirmed',
|
|
maxRetries: 3,
|
|
commitment: getMobileCommitmentLevel()
|
|
}
|
|
);
|
|
} catch (error) {
|
|
console.warn('Mobile-optimized transaction failed, trying with preflight disabled...');
|
|
|
|
// If mobile-optimized fails, try with preflight disabled for mobile wallets
|
|
if (isMobileDevice()) {
|
|
try {
|
|
signature = await sendTransactionWithMobileOptimization(
|
|
transaction,
|
|
connection,
|
|
wallet,
|
|
{
|
|
skipPreflight: true, // Disable preflight as fallback
|
|
preflightCommitment: 'confirmed',
|
|
maxRetries: 2,
|
|
commitment: getMobileCommitmentLevel()
|
|
}
|
|
);
|
|
} catch (fallbackError) {
|
|
console.error('Fallback transaction also failed:', fallbackError);
|
|
throw fallbackError;
|
|
}
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Remove the old confirmation logic since it's handled in the utility
|
|
setTxHash(signature);
|
|
console.log('Transaction successful! Hash:', signature);
|
|
console.log('txHash state set to:', signature);
|
|
|
|
// Refresh the dino balance in header after successful payment
|
|
if (headerRef.current) {
|
|
await headerRef.current.refreshBalance();
|
|
}
|
|
|
|
// Immediately check for ticket availability after successful payment
|
|
try {
|
|
const ticketResponse = await fetch(`https://vps.playpoolstudios.com/dino/api/get_available_tx.php?owner=${publicKey.toString()}`);
|
|
if (ticketResponse.ok) {
|
|
const ticketData = await ticketResponse.text();
|
|
const ticketAvailable = ticketData !== "0" && ticketData.trim().length > 0;
|
|
setHasTicket(ticketAvailable);
|
|
}
|
|
} catch (ticketError) {
|
|
console.warn('Error checking ticket after payment:', ticketError);
|
|
}
|
|
|
|
// Send transaction to validator
|
|
try {
|
|
const validatorUrl = `https://solpay.playpoolstudios.com/tx/new?tx=${signature}&target_address=${FEE_COLLECTOR.toString()}&amount=10000000000&sender_address=${publicKey.toString()}&token_mint=${dinoMint.toString()}`;
|
|
// Add leaderboard entry
|
|
const leaderboardUrl = 'https://vps.playpoolstudios.com/dino/api/add_leaderboard.php';
|
|
const leaderboardData = new FormData();
|
|
leaderboardData.append('tx', signature);
|
|
leaderboardData.append('owner', publicKey.toString());
|
|
leaderboardData.append('score', '0'); // Initial score of 0
|
|
|
|
try {
|
|
const leaderboardResponse = await fetch(leaderboardUrl, {
|
|
method: 'POST',
|
|
body: leaderboardData
|
|
});
|
|
|
|
if (!leaderboardResponse.ok) {
|
|
console.warn('Failed to add leaderboard entry');
|
|
}
|
|
} catch (leaderboardError) {
|
|
console.warn('Error adding leaderboard entry:', leaderboardError);
|
|
}
|
|
const response = await fetch(validatorUrl);
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
console.log('Transaction validated:', result);
|
|
} else {
|
|
console.warn('Failed to validate transaction with server');
|
|
}
|
|
} catch (validationError) {
|
|
console.warn('Error validating transaction with server:', validationError);
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Error processing payment:', err);
|
|
|
|
// Enhanced error handling for mobile wallets
|
|
let errorMessage = 'Failed to process payment';
|
|
|
|
if (err instanceof Error) {
|
|
// Log additional debugging info for mobile wallets
|
|
if (isMobileDevice()) {
|
|
console.log('Mobile device detected, additional debugging info:');
|
|
console.log('User agent:', navigator.userAgent);
|
|
console.log('Screen size:', window.innerWidth, 'x', window.innerHeight);
|
|
console.log('Wallet connected:', !!publicKey);
|
|
}
|
|
|
|
if (err.message.includes('signature verification failed')) {
|
|
errorMessage = 'Mobile wallet signature verification failed. Please try again or check your wallet settings.';
|
|
} else if (err.message.includes('missing signature')) {
|
|
errorMessage = 'Transaction signature missing. Please approve the transaction in your wallet.';
|
|
} else if (err.message.includes('User rejected')) {
|
|
errorMessage = 'Transaction was rejected. Please try again.';
|
|
} else if (err.message.includes('insufficient funds')) {
|
|
errorMessage = 'Insufficient DINO tokens. Please check your balance.';
|
|
} else if (err.message.includes('Transaction simulation failed')) {
|
|
errorMessage = 'Transaction validation failed. Please check your wallet connection and try again.';
|
|
} else if (err.message.includes('blockhash')) {
|
|
errorMessage = 'Transaction expired. Please try again.';
|
|
} else if (err.message.includes('preflight')) {
|
|
errorMessage = 'Transaction preflight check failed. This usually means there\'s an issue with your wallet connection or token balance. Try the Debug Wallet button to diagnose the issue.';
|
|
} else if (err.message.includes('insufficient lamports')) {
|
|
errorMessage = 'Insufficient SOL for transaction fees. Please ensure you have some SOL in your wallet for gas fees.';
|
|
} else if (err.message.includes('invalid account')) {
|
|
errorMessage = 'Invalid account detected. Please refresh the page and reconnect your wallet.';
|
|
} else {
|
|
errorMessage = err.message;
|
|
}
|
|
}
|
|
|
|
setError(errorMessage);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const handleDebugWallet = async () => {
|
|
if (!publicKey) {
|
|
setError('Please connect your wallet first');
|
|
return;
|
|
}
|
|
|
|
console.log('=== WALLET DEBUG INFO ===');
|
|
console.log('Public key:', publicKey.toString());
|
|
console.log('Is mobile device:', isMobileDevice());
|
|
|
|
try {
|
|
const connection = new Connection(CLUSTER_URL, 'confirmed');
|
|
const dinoMint = new PublicKey(DINO_TOKEN_ADDRESS);
|
|
|
|
// Test basic connection
|
|
console.log('Testing Solana connection...');
|
|
const version = await connection.getVersion();
|
|
console.log('Solana version:', version);
|
|
|
|
// Test token account
|
|
console.log('Testing token account...');
|
|
const userTokenAccount = await getAssociatedTokenAddress(dinoMint, publicKey);
|
|
console.log('User token account:', userTokenAccount.toString());
|
|
|
|
const userTokenAccountInfo = await connection.getAccountInfo(userTokenAccount);
|
|
console.log('Token account exists:', !!userTokenAccountInfo);
|
|
|
|
if (userTokenAccountInfo) {
|
|
const userTokenAccounts = await connection.getParsedTokenAccountsByOwner(
|
|
publicKey,
|
|
{ mint: dinoMint }
|
|
);
|
|
|
|
if (userTokenAccounts.value.length > 0) {
|
|
const balance = userTokenAccounts.value[0].account.data.parsed.info.tokenAmount.uiAmount;
|
|
console.log('DINO balance:', balance);
|
|
} else {
|
|
console.log('No DINO tokens found');
|
|
}
|
|
}
|
|
|
|
// Test simple transaction simulation
|
|
console.log('Testing simple transaction simulation...');
|
|
const testTransaction = new Transaction();
|
|
testTransaction.recentBlockhash = (await connection.getLatestBlockhash('confirmed')).blockhash;
|
|
testTransaction.feePayer = publicKey;
|
|
|
|
try {
|
|
const simResult = await connection.simulateTransaction(testTransaction);
|
|
console.log('Simple transaction simulation result:', simResult);
|
|
} catch (simError) {
|
|
console.error('Simple transaction simulation failed:', simError);
|
|
}
|
|
|
|
console.log('=== END DEBUG INFO ===');
|
|
setError('Debug info logged to console. Check browser console for details.');
|
|
|
|
} catch (error) {
|
|
console.error('Debug failed:', error);
|
|
setError(`Debug failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Header ref={headerRef} />
|
|
|
|
{/* Game iframe - shown when user has a ticket */}
|
|
{hasTicket && (
|
|
<div className="w-full h-screen flex justify-center items-center bg-white" style={{ marginTop: '80px' }}>
|
|
<iframe
|
|
src={`/Build/index.html?tx=${ticketTxHash}&highscore=${highscore}`}
|
|
className="w-full h-full"
|
|
title="Dino Game"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main content - only shown when no ticket */}
|
|
{!hasTicket && (
|
|
<main className="pt-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="text-center">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
Welcome to <span className="text-green-600">$DINO</span>
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
|
|
Beat the highscore to win the jackpot!
|
|
</p>
|
|
|
|
|
|
|
|
{/* Enter Button - only show when no ticket */}
|
|
{!hasTicket && (
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<button
|
|
onClick={handleEnterGame}
|
|
disabled={!publicKey || isProcessing}
|
|
className={`px-8 py-4 text-xl font-bold rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 ${
|
|
!publicKey
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: isProcessing
|
|
? 'bg-yellow-500 cursor-wait'
|
|
: 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-green-500/25 hover:shadow-xl hover:shadow-green-500/30'
|
|
}`}
|
|
>
|
|
{!publicKey
|
|
? 'Connect Wallet to Enter'
|
|
: isProcessing
|
|
? 'Processing Payment...'
|
|
: `Enter Game - Pay ${ENTRY_FEE_DINO} $DINO`
|
|
}
|
|
</button>
|
|
|
|
{/* Debug Button */}
|
|
{publicKey && (
|
|
<button
|
|
onClick={handleDebugWallet}
|
|
className="px-6 py-3 text-sm font-medium bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-all duration-300 hover:scale-105"
|
|
>
|
|
Debug Wallet
|
|
</button>
|
|
)}
|
|
|
|
{/* Status Messages */}
|
|
{error && (
|
|
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg max-w-md">
|
|
<p className="text-sm">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{txHash && (
|
|
<div
|
|
className={`bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg max-w-md transition-all duration-300 ease-in-out transform ${
|
|
showPaymentSuccess
|
|
? 'opacity-100 scale-100 translate-y-0'
|
|
: 'opacity-0 scale-95 translate-y-2'
|
|
}`}
|
|
>
|
|
<p className="text-sm font-semibold mb-2">Payment Successful!</p>
|
|
<p className="text-xs break-all">Transaction Hash: {txHash}</p>
|
|
<a
|
|
href={`https://explorer.solana.com/tx/${txHash}?cluster=devnet`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs underline hover:text-green-800"
|
|
>
|
|
View on Explorer
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
)}
|
|
|
|
{/* Leaderboard */}
|
|
<div className="mt-12 max-w-2xl mx-auto">
|
|
<Leaderboard
|
|
leaderboard={dashboardData.leaderboard}
|
|
loading={dashboardLoading}
|
|
error={dashboardError}
|
|
attemptsCount={dashboardData.attempts_count}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|