Nicolas Cantu
0112c7152f
- Replace 'NotConnected' message with ConnectButton component - Display user name (or shortened pubkey) in form title when connected - Update ConnectButton styling to match dark theme - Improve UX by allowing direct connection from presentation page
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { useNostrConnect } from '@/hooks/useNostrConnect'
|
|
import { ConnectedUserMenu } from './ConnectedUserMenu'
|
|
|
|
function ConnectForm({ onConnect, loading, error }: {
|
|
onConnect: () => void
|
|
loading: boolean
|
|
error: string | null
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<button
|
|
onClick={() => {
|
|
void onConnect()
|
|
}}
|
|
disabled={loading}
|
|
className="px-6 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan disabled:opacity-50"
|
|
>
|
|
{loading ? 'Connecting...' : 'Connect with Nostr'}
|
|
</button>
|
|
{error && <p className="text-sm text-red-400">{error}</p>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ConnectButton() {
|
|
const { connected, pubkey, profile, loading, error, connect, disconnect } = useNostrConnect()
|
|
|
|
if (connected && pubkey) {
|
|
return (
|
|
<ConnectedUserMenu
|
|
pubkey={pubkey}
|
|
profile={profile}
|
|
onDisconnect={() => {
|
|
void disconnect()
|
|
}}
|
|
loading={loading}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ConnectForm
|
|
onConnect={() => {
|
|
void connect()
|
|
}}
|
|
loading={loading}
|
|
error={error}
|
|
/>
|
|
)
|
|
}
|