43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useAccount, useConnect, useDisconnect } from "wagmi";
|
|
import { formatAddress } from "@/lib/utils";
|
|
|
|
export function WalletConnect() {
|
|
const { address, isConnected } = useAccount();
|
|
const { connectors, connect } = useConnect();
|
|
const { disconnect } = useDisconnect();
|
|
|
|
if (isConnected && address) {
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-sm">
|
|
<span className="text-gray-400">Connected:</span>{" "}
|
|
<span className="font-mono">{formatAddress(address)}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => disconnect()}
|
|
className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
{connectors.map((connector) => (
|
|
<button
|
|
key={connector.uid}
|
|
onClick={() => connect({ connector })}
|
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
|
|
>
|
|
Connect {connector.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|