diff --git a/src/components/WalletModal.tsx b/src/components/WalletModal.tsx new file mode 100644 index 0000000..8d3148c --- /dev/null +++ b/src/components/WalletModal.tsx @@ -0,0 +1,268 @@ +import { useState } from 'react'; +import { Wallet, Plus, Trash2, Zap, Globe, Settings, CheckCircle } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; +import { useNWC } from '@/hooks/useNWC'; +import { useWallet } from '@/hooks/useWallet'; +import { useToast } from '@/hooks/useToast'; + +interface WalletModalProps { + children?: React.ReactNode; + className?: string; +} + +export function WalletModal({ children, className }: WalletModalProps) { + const [open, setOpen] = useState(false); + const [addDialogOpen, setAddDialogOpen] = useState(false); + const [connectionUri, setConnectionUri] = useState(''); + const [alias, setAlias] = useState(''); + const [isConnecting, setIsConnecting] = useState(false); + + const { + connections, + activeConnection, + connectionInfo, + addConnection, + removeConnection, + setActiveConnection + } = useNWC(); + + const { hasWebLN, hasNWC, isDetecting } = useWallet(); + const { toast } = useToast(); + + const handleAddConnection = async () => { + if (!connectionUri.trim()) { + toast({ + title: 'Connection URI required', + description: 'Please enter a valid NWC connection URI.', + variant: 'destructive', + }); + return; + } + + setIsConnecting(true); + try { + const success = await addConnection(connectionUri.trim(), alias.trim() || undefined); + if (success) { + setConnectionUri(''); + setAlias(''); + setAddDialogOpen(false); + } + } finally { + setIsConnecting(false); + } + }; + + const handleRemoveConnection = (walletPubkey: string) => { + removeConnection(walletPubkey); + }; + + const handleSetActive = (walletPubkey: string) => { + setActiveConnection(walletPubkey); + toast({ + title: 'Active wallet changed', + description: 'The selected wallet is now active for zaps.', + }); + }; + + + + return ( + + + {children || ( + + )} + + + + + + Lightning Wallet + + + Connect your lightning wallet to send zaps instantly. + + + +
+ {/* Current Status */} +
+

Current Status

+ +
+ {/* WebLN */} +
+
+ +
+

WebLN

+

Browser extension

+
+
+
+ {hasWebLN && } + + {isDetecting ? "..." : hasWebLN ? "Ready" : "Not Found"} + +
+
+ + {/* NWC */} +
+
+ +
+

Nostr Wallet Connect

+

+ {connections.length > 0 + ? `${connections.length} wallet${connections.length !== 1 ? 's' : ''} connected` + : "Remote wallet connection" + } +

+
+
+
+ {hasNWC && } + + {hasNWC ? "Ready" : "None"} + +
+
+
+
+ + + + {/* NWC Management */} +
+
+

Nostr Wallet Connect

+ + + + + + + Connect NWC Wallet + + Enter your connection string from a compatible wallet. + + +
+
+ + setAlias(e.target.value)} + /> +
+
+ +