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 }