80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { formatEther, type Address } from "viem";
|
|
import { useBalance, useBlockNumber, useConnect, useConnection, useConnectors, useDisconnect } from "wagmi";
|
|
|
|
function WalletDetails({ address }: { address: Address }) {
|
|
const { data: blockNumber } = useBlockNumber({ watch: true });
|
|
const { data: balance, isPending, error, refetch: refetchBalance } = useBalance({ address });
|
|
const { mutate: disconnect } = useDisconnect();
|
|
|
|
useEffect(() => {
|
|
refetchBalance();
|
|
}, [blockNumber]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<h1 className="text-lg font-bold">You are connected</h1>
|
|
|
|
<p className="break-all">Your address is: {address}</p>
|
|
|
|
{isPending && <p>Loading balance...</p>}
|
|
{error && <p>An error occurred.</p>}
|
|
|
|
{blockNumber && <p>Block number: {blockNumber.toLocaleString()}</p>}
|
|
{balance && <p>Balance: {formatEther(balance.value)} ETH</p>}
|
|
|
|
<div className="flex flex-row">
|
|
<button
|
|
className="bg-black text-white py-2 px-6 rounded-xl cursor-pointer"
|
|
onClick={() => disconnect()}
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
function ConnectWallet() {
|
|
const connectors = useConnectors();
|
|
const { mutate: connect } = useConnect();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<h1 className="text-lg font-bold">Connect your wallet</h1>
|
|
|
|
<p>Choose an option from the list below:</p>
|
|
<div className="flex flex-row gap-6">
|
|
{connectors.map(connector => (
|
|
<button
|
|
key={connector.id}
|
|
onClick={() => connect({ connector })}
|
|
className="bg-black text-white px-6 py-2 rounded-lg cursor-pointer"
|
|
>
|
|
Connect {connector.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
export function StatusPage() {
|
|
const { address, isConnected } = useConnection();
|
|
|
|
return (
|
|
<div className="bg-white p-5 border border-slate-200 shadow-sm rounded-xl flex flex-col gap-6">
|
|
{isConnected && address ? (
|
|
<WalletDetails address={address} />
|
|
) : (
|
|
<ConnectWallet />
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|