"use client";
import React, { useState, useEffect } from "react";
import {
ConnectButton,
useAccount,
useDisconnect,
useWallets,
usePublicClient,
} from "@particle-network/connectkit";
import { ethers, type Eip1193Provider } from "ethers";
import { parseEther, formatEther } from "viem";
export default function Home() {
// Account-related states
const { isConnected, address } = useAccount();
const { disconnect } = useDisconnect();
const [primaryWallet] = useWallets();
const publicClient = usePublicClient();
// State variables for recipient address, transaction hash, and balance
const [recipientAddress, setRecipientAddress] = useState<string>("");
const [transactionHash, setTransactionHash] = useState<string | null>(null);
const [balance, setBalance] = useState<string>("");
// Fetch and display user balance when connected
useEffect(() => {
const fetchBalance = async () => {
if (address) {
try {
const balanceResponse = await publicClient.getBalance({ address });
const balanceInEther = formatEther(balanceResponse);
setBalance(balanceInEther);
} catch (error) {
console.error("Error fetching balance:", error);
}
}
};
if (isConnected) {
fetchBalance();
}
}, [isConnected, address, publicClient]);
// Send transaction using ethers.js with a custom EIP-1193 provider
const executeTransaction = async () => {
if (!recipientAddress || !primaryWallet) return;
const tx = {
to: recipientAddress,
value: parseEther("0.01"), // Set value to 0.01 Ether
data: "0x",
};
try {
const EOAprovider = await primaryWallet.connector.getProvider();
const customProvider = new ethers.BrowserProvider(
EOAprovider as Eip1193Provider,
"any"
);
const signer = await customProvider.getSigner();
const txResponse = await signer.sendTransaction(tx);
const txReceipt = await txResponse.wait();
setTransactionHash(txReceipt.hash);
} catch (error) {
console.error("Error executing transaction:", error);
}
};
return (
<div className="min-h-screen flex flex-col items-center justify-center p-8 bg-black text-white">
<ConnectButton label="Connect Wallet" />
{isConnected && (
<div className="w-full max-w-md mt-6">
<h2 className="text-xl font-bold text-white mb-4">Account Details</h2>
<p className="text-lg text-white">
Balance: {balance || "Loading..."} ETH
</p>
<h2 className="text-xl font-bold text-white mt-6 mb-4">
Send 0.01 ETH
</h2>
<input
type="text"
placeholder="Recipient Address"
value={recipientAddress}
onChange={(e) => setRecipientAddress(e.target.value)}
className="p-2 w-full rounded border border-gray-700 bg-gray-900 text-white"
/>
<button
className="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"
onClick={executeTransaction}
disabled={!recipientAddress}
>
Send Transaction
</button>
<button
className="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
onClick={disconnect}
>
Disconnect
</button>
{transactionHash && (
<div className="text-sm text-green-500 mt-4">
Transaction Hash: {transactionHash}
</div>
)}
</div>
)}
</div>
);
}