452 lines
19 KiB
TypeScript
452 lines
19 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import { getAccessToken, getEmbeddedConnectedWallet, usePrivy, useWallets, Google, Twitter, Discord } from "@privy-io/react-auth";
|
|
import Head from "next/head";
|
|
import { useBalance } from 'wagmi';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faDiscord, faGoogle, faMeta, faTwitter, faXTwitter } from "@fortawesome/free-brands-svg-icons";
|
|
import { faAdd, faFileExport, faLink, faTrash, faUnlink, faWallet } from "@fortawesome/free-solid-svg-icons";
|
|
import { useSetActiveWallet } from "@privy-io/wagmi";
|
|
import { encodeFunctionData, parseAbi } from 'viem';
|
|
import { gameDataABI } from "./data";
|
|
import { arbitrumSepolia, baseSepolia } from "viem/chains";
|
|
|
|
export default function DashboardPage() {
|
|
const [verifyResult, setVerifyResult] = useState(0);
|
|
const [username, setUsername] = useState('');
|
|
const [vaultData, setVaultData] = useState({ prehp: "0", vc: "0" });
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
const [ticketAmount, setTicketAmount] = useState(1);
|
|
const router = useRouter();
|
|
|
|
const { ready, authenticated, user, logout, exportWallet, linkWallet, unlinkWallet, linkDiscord, unlinkDiscord, linkTwitter, unlinkTwitter, linkGoogle, unlinkGoogle } = usePrivy();
|
|
const { wallets } = useWallets();
|
|
|
|
const [activeWallet, setActiveWallet] = useState(user?.wallet?.address);
|
|
const [activeWalletObj, setActiveWalletObj] = useState(wallets[0]);
|
|
const [ticketsCount, setTicketsCount] = useState(0);
|
|
|
|
const { data: balanceData } = useBalance({
|
|
address: activeWallet as `0x${string}`,
|
|
token: "0x22b6c31c2beb8f2d0d5373146eed41ab9ede3caf"
|
|
});
|
|
|
|
const balance = balanceData?.formatted;
|
|
const token = balanceData?.symbol;
|
|
|
|
|
|
function ToggleDiscord() {
|
|
if (user?.discord) {
|
|
unlinkDiscord(user?.discord.subject);
|
|
} else {
|
|
linkDiscord();
|
|
}
|
|
}
|
|
|
|
function ToggleTwitter() {
|
|
if (user?.twitter) {
|
|
unlinkTwitter(user?.twitter.subject);
|
|
} else {
|
|
linkTwitter();
|
|
}
|
|
}
|
|
|
|
function ToggleGoogle() {
|
|
if (user?.google) {
|
|
unlinkGoogle(user?.google.subject);
|
|
} else {
|
|
linkGoogle();
|
|
}
|
|
}
|
|
async function handleWalletClick(address: string) {
|
|
setActiveWallet(address);
|
|
const url = `http://vps.playpoolstudios.com/metahunt/api/launcher/set_wallet.php?id=${user?.id}&wallet=${address}`;
|
|
const response = await fetch(url);
|
|
console.log(url);
|
|
|
|
wallets.forEach((element) => {
|
|
if (element.address == address) {
|
|
setActiveWalletObj(element);
|
|
element.switchChain(chainId);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
if (ready && !authenticated) {
|
|
router.push("/");
|
|
}
|
|
if (ready) {
|
|
if (username == "-1") {
|
|
console.log(user?.id);
|
|
router.push("/logincomplete");
|
|
}
|
|
}
|
|
}, [ready, authenticated, router, username]);
|
|
|
|
useEffect(() => {
|
|
async function fetchUsername() {
|
|
if (ready) {
|
|
try {
|
|
const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
|
|
const data = await response.text();
|
|
setUsername(data);
|
|
} catch (error) {
|
|
console.error("Error fetching username:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function fetchVaultData() {
|
|
if (user?.id) {
|
|
try {
|
|
const response = await fetch(`http://vps.playpoolstudios.com/metahunt/api/launcher/get_vault.php?id=${user?.id}`);
|
|
const data = await response.json();
|
|
setVaultData({ prehp: data.prehp, vc: data.vc });
|
|
} catch (error) {
|
|
console.error("Error fetching vault data:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchUsername();
|
|
fetchVaultData();
|
|
}, [ready]);
|
|
|
|
async function autoSetActiveWallet(){
|
|
try {
|
|
const response = await fetch(`http://vps.playpoolstudios.com/metahunt/api/launcher/get_active_wallet.php?id=${user?.id}`);
|
|
const activeWalletString = await response.text();
|
|
wallets.forEach((element)=>{
|
|
if(element.address == activeWalletString){
|
|
setActiveWallet(element.address);
|
|
setActiveWalletObj(element);
|
|
}
|
|
});
|
|
|
|
if(activeWalletString != activeWallet){
|
|
setActiveWalletObj(wallets[0]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching vault data:", error);
|
|
}
|
|
|
|
}
|
|
|
|
const chainId = arbitrumSepolia.id;
|
|
|
|
useEffect(() => {
|
|
setActiveWallet(getEmbeddedConnectedWallet(wallets)?.address);
|
|
autoSetActiveWallet();
|
|
getTickets();
|
|
}, [wallets]);
|
|
|
|
useEffect(() => {
|
|
getTickets();
|
|
}, [activeWalletObj]);
|
|
|
|
|
|
const contractAddress = "0x7e06ae145dc3d73350c7da040355654EbF11f1bc";
|
|
async function buyTicket(amount: number) {
|
|
const isEmbedded = getEmbeddedConnectedWallet(wallets)?.address == activeWalletObj?.address;
|
|
const provider = await activeWalletObj?.getEthereumProvider();
|
|
if (!provider) {
|
|
console.error("Ethereum provider not found");
|
|
return;
|
|
}
|
|
|
|
const data = encodeFunctionData({
|
|
abi: gameDataABI,
|
|
functionName: 'buyTickets',
|
|
args: [amount],
|
|
});
|
|
const value = 1000000000000 * amount;
|
|
console.log(`isEmbbedded : ${isEmbedded}`)
|
|
const transactionRequest = {
|
|
from: activeWalletObj?.address,
|
|
to: contractAddress,
|
|
data: data,
|
|
value: isEmbedded ? value : value.toString(),
|
|
};
|
|
|
|
try {
|
|
const transactionHash = await provider.request({
|
|
method: 'eth_sendTransaction',
|
|
params: [transactionRequest],
|
|
});
|
|
// Polling for the transaction receipt
|
|
const checkTransactionReceipt = async () => {
|
|
const receipt = await provider.request({
|
|
method: 'eth_getTransactionReceipt',
|
|
params: [transactionHash],
|
|
});
|
|
|
|
if (receipt && receipt.status) {
|
|
if (receipt.status === '0x1') { // Transaction was successful
|
|
console.log('Transaction confirmed:', receipt);
|
|
getTickets(); // Call getTickets() after the transaction is confirmed
|
|
//setShowPopup(false); // Close the popup after successful transaction
|
|
} else {
|
|
console.error('Transaction failed:', receipt);
|
|
}
|
|
} else {
|
|
// Retry after some delay if the receipt is not available yet
|
|
setTimeout(checkTransactionReceipt, 2000); // Poll every 2 seconds
|
|
}
|
|
};
|
|
|
|
checkTransactionReceipt();
|
|
setShowPopup(false); // Close the popup after successful transaction
|
|
} catch (error) {
|
|
console.error('Transaction failed:', error);
|
|
}
|
|
}
|
|
|
|
async function getTickets() {
|
|
const provider = await activeWalletObj?.getEthereumProvider();
|
|
if (!provider) {
|
|
console.error("Ethereum provider not found");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = encodeFunctionData({
|
|
abi: gameDataABI,
|
|
functionName: 'balanceOf',
|
|
args: [activeWalletObj?.address, 0],
|
|
});
|
|
|
|
const callRequest = {
|
|
from: activeWalletObj?.address,
|
|
to: contractAddress,
|
|
data: data,
|
|
};
|
|
|
|
const result = await provider.request({
|
|
method: 'eth_call',
|
|
params: [callRequest],
|
|
});
|
|
|
|
const balanceHex = result;
|
|
const balance = parseInt(balanceHex, 16);
|
|
setTicketsCount(balance);
|
|
} catch (error) {
|
|
console.error('Call failed:', error);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>W3B Games Dashboard</title>
|
|
</Head>
|
|
|
|
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-gradient-to-br from-purple-900 to-blue-900 text-white">
|
|
{ready && authenticated ? (
|
|
<>
|
|
<div className="flex flex-row justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
|
|
Welcome {username || "Crypto Warrior"},
|
|
</h1>
|
|
<button
|
|
onClick={logout}
|
|
className="text-sm bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 py-2 px-6 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div className="bg-gradient-to-br from-purple-800 to-indigo-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
|
<h2 className="text-lg font-semibold mb-2 text-purple-300">Vault Credits</h2>
|
|
<p className="text-4xl font-bold text-white">{vaultData.vc || "0"} <span className="text-2xl text-purple-300">VC</span></p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-blue-800 to-cyan-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
|
<h2 className="text-lg font-semibold mb-2 text-blue-300">{token} Balance</h2>
|
|
<p className="text-4xl font-bold text-white">{balance || 0} <span className="text-2xl text-blue-300">{token}</span></p>
|
|
<p className="text-xs mt-2 text-blue-300 truncate">{activeWallet}</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-green-800 to-teal-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1 flex flex-col justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-semibold mb-2 text-green-300">Hunt Tickets</h2>
|
|
<p className="text-4xl font-bold text-white">{ticketsCount || "0"}</p>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={() => setShowPopup(true)}
|
|
className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 py-2 px-4 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
|
|
>
|
|
Buy Tickets
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-yellow-800 to-orange-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
|
<h2 className="text-lg font-semibold mb-2 text-yellow-300">Pre-hunt Points</h2>
|
|
<p className="text-4xl font-bold text-white">{vaultData.prehp || "0"} <span className="text-2xl text-yellow-300">PHP</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-10">
|
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
|
|
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">Socials</h2>
|
|
<div className="space-y-6">
|
|
{[
|
|
{ icon: faXTwitter, name: 'Twitter', user: user?.twitter, toggle: ToggleTwitter },
|
|
{ icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
|
|
{ icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
|
|
].map((social) => (
|
|
<div key={social.name} className="flex items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-8 h-8 flex items-center justify-center">
|
|
<FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
|
|
</div>
|
|
<span className="font-medium">{social.name}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
|
|
{social.user ? (
|
|
social.name === 'Google'
|
|
? `@${(social.user as Google).email}`
|
|
: `@${(social.user as Twitter | Discord).username}`
|
|
) : 'Not linked'}
|
|
</span>
|
|
<button
|
|
onClick={social.toggle}
|
|
className={`rounded-full px-4 py-2 font-semibold transition duration-300 ${
|
|
social.user
|
|
? 'bg-red-600 hover:bg-red-700 text-white'
|
|
: 'bg-green-600 hover:bg-green-700 text-white'
|
|
}`}
|
|
>
|
|
{social.user ? 'Unlink' : 'Link'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
|
|
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-500">Wallets</h2>
|
|
<div className="space-y-4">
|
|
<div
|
|
className={`grid grid-cols-6 ${
|
|
activeWallet == getEmbeddedConnectedWallet(wallets)?.address
|
|
? 'bg-gradient-to-r from-blue-700 to-purple-700'
|
|
: 'bg-gray-800'
|
|
} rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
|
|
onClick={() => handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? "")}
|
|
>
|
|
<FontAwesomeIcon icon={faLink} className="text-cyan-400 w-8 h-8" />
|
|
<div className="col-span-4">
|
|
<p className="font-semibold">W3B Wallet</p>
|
|
<p className="text-sm text-gray-400 truncate">
|
|
{getEmbeddedConnectedWallet(wallets)?.address}
|
|
</p>
|
|
</div>
|
|
<button
|
|
className="justify-self-end bg-purple-600 hover:bg-purple-700 rounded-full p-2 transition duration-300"
|
|
onClick={exportWallet}
|
|
>
|
|
<FontAwesomeIcon icon={faFileExport} className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{wallets.map((wallet) => {
|
|
if (wallet.connectorType == "embedded") return null;
|
|
const address = wallet.address;
|
|
return (
|
|
<div
|
|
key={address}
|
|
className={`grid grid-cols-6 ${
|
|
wallet.linked
|
|
? address == activeWallet
|
|
? 'bg-gradient-to-r from-blue-700 to-purple-700'
|
|
: 'bg-gray-800'
|
|
: 'bg-gray-900 bg-opacity-30'
|
|
} rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
|
|
onClick={() => handleWalletClick(address)}
|
|
>
|
|
<FontAwesomeIcon icon={faWallet} className={`${wallet.linked ? 'text-yellow-400' : 'text-gray-600'} w-8 h-8`} />
|
|
<div className="col-span-4">
|
|
<p className={`font-semibold ${wallet.linked ? 'text-white' : 'text-gray-600'}`}>{wallet.walletClientType}</p>
|
|
<p className={`text-sm ${wallet.linked ? 'text-gray-300' : 'text-gray-600'} truncate`}>{wallet.address}</p>
|
|
</div>
|
|
{wallet.linked ? (
|
|
<button
|
|
className="justify-self-end bg-red-600 hover:bg-red-700 rounded-full p-2 transition duration-300"
|
|
onClick={() => unlinkWallet(wallet.address)}
|
|
>
|
|
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4" />
|
|
</button>
|
|
) : (
|
|
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4 text-gray-600 justify-self-end" />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
onClick={linkWallet}
|
|
className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-2 px-3 rounded-lg transition duration-300 ease-in-out flex items-center justify-center space-x-2 text-sm"
|
|
>
|
|
<FontAwesomeIcon icon={faAdd} className="w-4 h-4" />
|
|
<span>Connect New Wallet</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{showPopup && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
|
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 rounded-2xl shadow-2xl max-w-md w-full">
|
|
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">Buy Hunt Tickets</h2>
|
|
<div className="flex items-center justify-center space-x-4 mb-6">
|
|
<button
|
|
onClick={() => setTicketAmount(Math.max(1, ticketAmount - 1))}
|
|
className={`text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300 ${ticketAmount <= 1 ? 'opacity-50 cursor-not-allowed' : ''}`}
|
|
disabled={ticketAmount <= 1}
|
|
>
|
|
-
|
|
</button>
|
|
<div className="w-24 text-center text-2xl font-bold text-white bg-transparent border-b-2 border-blue-500">
|
|
{ticketAmount}
|
|
</div>
|
|
<button
|
|
onClick={() => setTicketAmount(ticketAmount + 1)}
|
|
className="text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
<div className="flex justify-between space-x-4">
|
|
<button
|
|
onClick={() => buyTicket(ticketAmount)}
|
|
className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
|
|
>
|
|
Buy Tickets
|
|
</button>
|
|
<button
|
|
onClick={() => setShowPopup(false)}
|
|
className="flex-1 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex justify-center items-center h-screen">
|
|
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|