/ frontend / src / components / auth / WalletConnect.tsx
WalletConnect.tsx
 1  import { useAuthStore } from '../../store/auth'
 2  import IdentityBadge from './IdentityBadge'
 3  
 4  export default function WalletConnect() {
 5    const { isConnected, address, connect, disconnect, isConnecting } =
 6      useAuthStore()
 7  
 8    if (isConnected && address) {
 9      return (
10        <div className="flex items-center gap-3">
11          <IdentityBadge address={address} />
12          <button
13            onClick={disconnect}
14            className="text-sm text-text-tertiary hover:text-text-primary transition-colors"
15          >
16            Disconnect
17          </button>
18        </div>
19      )
20    }
21  
22    return (
23      <button
24        onClick={connect}
25        disabled={isConnecting}
26        className="px-4 py-2 bg-alpha-600 text-white rounded-lg hover:bg-alpha-700 disabled:opacity-50 transition-colors"
27      >
28        {isConnecting ? 'Connecting...' : 'Connect Wallet'}
29      </button>
30    )
31  }