nwc icon change + context fix

This commit is contained in:
Chad Curtis 2025-07-14 02:01:30 +00:00
parent c98a6bbf64
commit 8f51db5a49
2 changed files with 19 additions and 5 deletions

View File

@ -673,10 +673,24 @@ import { NWCProvider } from '@/contexts/NWCContext';
</NostrProvider>
```
#### useZaps Hook API
**The `useZaps` hook accepts flexible input types - DO NOT create duplicate hooks:**
```tsx
// Single event
const { zap, totalSats, isLoading } = useZaps(event, webln, activeNWC, onSuccess);
// Multiple events (for bulk fetching zap data)
const { zapData, isLoading } = useZaps(eventArray, webln, activeNWC);
// Disable fetching
const { zap } = useZaps([], webln, activeNWC, onSuccess);
```
```tsx
// Use unified wallet detection and zap components
const { webln, activeNWC, preferredMethod } = useWallet();
const { zap } = useZaps(target, webln, activeNWC, onSuccess);
// Pre-built components available
import { ZapButton } from '@/components/ZapButton';
@ -691,10 +705,10 @@ if (!author.metadata?.lud16 && !author.metadata?.lud06) {
**Critical patterns:**
- **Include NWCProvider** in the provider tree before using any zap functionality
- **Use existing `useZaps` hook** - it handles both single events and arrays
- Detect WebLN only when needed (dialog open)
- Show payment method indicator to users
- Handle errors gracefully with specific messaging
- Use `useZaps` hook for payment logic
## App Configuration

View File

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Wallet, Plus, Trash2, Zap, Globe, Settings, CheckCircle } from 'lucide-react';
import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
Dialog,
@ -128,7 +128,7 @@ export function WalletModal({ children, className }: WalletModalProps) {
{/* NWC */}
<div className="flex items-center justify-between p-3 border rounded-lg">
<div className="flex items-center gap-3">
<Settings className="h-4 w-4 text-muted-foreground" />
<WalletMinimal className="h-4 w-4 text-muted-foreground" />
<div>
<p className="text-sm font-medium">Nostr Wallet Connect</p>
<p className="text-xs text-muted-foreground">
@ -215,7 +215,7 @@ export function WalletModal({ children, className }: WalletModalProps) {
return (
<div key={connection.connectionString} className={`flex items-center justify-between p-3 border rounded-lg ${isActive ? 'ring-2 ring-primary' : ''}`}>
<div className="flex items-center gap-3">
<Settings className="h-4 w-4 text-muted-foreground" />
<WalletMinimal className="h-4 w-4 text-muted-foreground" />
<div>
<p className="text-sm font-medium">
{connection.alias || info?.alias || 'Lightning Wallet'}