41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useWeb3Modal } from '@web3modal/wagmi/react';
|
|
import { useAccount, useDisconnect } from 'wagmi';
|
|
import { formatAddress } from '@/utils/format';
|
|
|
|
export function ConnectButton() {
|
|
const { open } = useWeb3Modal();
|
|
const { address, isConnected } = useAccount();
|
|
const { disconnect } = useDisconnect();
|
|
|
|
const handleConnect = () => {
|
|
open();
|
|
};
|
|
|
|
if (isConnected && address) {
|
|
return (
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{formatAddress(address)}
|
|
</span>
|
|
<button
|
|
onClick={() => disconnect()}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleConnect}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Connect Wallet
|
|
</button>
|
|
);
|
|
}
|