Initial commit

app/pages/home/HomePage.tsx

@@ -0,0 +1,7 @@
+export function HomePage() {
+  return (
+    <div>
+      <p>Hello Wagmi!</p>
+    </div>
+  );
+}

app/pages/status/StatusPage.tsx

@@ -0,0 +1,79 @@
+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>
+    );
+}