skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

fix(ux): remove dead marketplace payment dialog; show live sats estimate

Browse source 
The '$40k/BTC' era confirm-payment dialog was unreachable after the Pay button
was removed — deleted it, its handler and state (and the now-unused useCashu
import). In its place, listings show '≈ N sats' under the price using the live
rate, so buyers still see the sat amount.
This commit is contained in:
SkateSpots 2026-09-26 18:59:47 +07:00
parent 760bc9b82c
commit 18d2af6366
1 changed files with 5 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
src/components/MarketplaceItemCard.tsx
View file

@ -25,7 +25,6 @@ import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { useAuthor } from '@/hooks/useAuthor';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useCashu } from '@/hooks/wallet/useCashu';
import { useUsdToSats } from '@/hooks/useExchangeRate';
import { useToast } from '@/hooks/useToast';
import { useNostrPublish } from '@/hooks/useNostrPublish';
@ -84,15 +83,11 @@ export function MarketplaceItemCard({ item, compact = false }: MarketplaceItemCa
// Fetch trust score
const { data: trustScore } = useTrustScore(item.pubkey);
// Cashu wallet integration
const { totalBalance: cashuBalance, coco } = useCashu();
const [showPaymentDialog, setShowPaymentDialog] = useState(false);
const [showReportDialog, setShowReportDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [reportReason, setReportReason] = useState<string>('');
const [reportDetails, setReportDetails] = useState('');
const [isReporting, setIsReporting] = useState(false);
const [isPaying, setIsPaying] = useState(false);
// Format price display
const priceDisplay = item.price
@ -141,27 +136,6 @@ export function MarketplaceItemCard({ item, compact = false }: MarketplaceItemCa
const reportCount = reportData?.count || 0;
const shouldHide = reportData?.shouldHide || false;
const handleCashuPayment = async () => {
if (!coco || !user) return;
setIsPaying(true);
try {
toast({
title: 'Payment Feature Coming Soon',
description: `Cashu peer-to-peer payments will be available soon! For now, please contact the seller directly.`,
});
setShowPaymentDialog(false);
} catch (error) {
toast({
variant: 'destructive',
title: 'Payment Failed',
description: error instanceof Error ? error.message : 'Failed to process payment',
});
} finally {
setIsPaying(false);
}
};
const handleReport = async () => {
if (!user || !reportReason) {
toast({ title: 'Please select a reason', variant: 'destructive' });
@ -306,6 +280,11 @@ export function MarketplaceItemCard({ item, compact = false }: MarketplaceItemCa
{priceTypeLabel && priceTypeLabel !== 'Fixed Price' && (
<div className="text-xs text-gray-400">{priceTypeLabel}</div>
)}
{priceInSats > 0 && (
<div className="text-xs text-[#ccff00] whitespace-nowrap">
≈ {priceInSats.toLocaleString()} sats
</div>
)}
</div>
{/* Actions dropdown */}
@ -501,72 +480,6 @@ export function MarketplaceItemCard({ item, compact = false }: MarketplaceItemCa
</div>
</CardContent>
{/* Payment Confirmation Dialog */}
<Dialog open={showPaymentDialog} onOpenChange={setShowPaymentDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Payment</DialogTitle>
<DialogDescription>Review the payment details before confirming</DialogDescription>
</DialogHeader>
<div className="space-y-4">
{/* Item details */}
<div className="flex items-start gap-3 p-3 rounded-lg bg-muted">
{primaryImage && (
<ImageWithFallback src={primaryImage} alt={item.title} className="w-16 h-16 rounded object-cover" />
)}
<div className="flex-1">
<h4 className="font-bold">{item.title}</h4>
<p className="text-sm text-muted-foreground">Sold by {displayName}</p>
</div>
</div>
{/* Payment details */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Price:</span>
<span className="font-bold">{priceDisplay}</span>
</div>
<div className="flex justify-between text-sm">
<span>Amount (sats):</span>
<span className="font-bold">{priceInSats.toLocaleString()} sats</span>
</div>
<div className="flex justify-between text-sm">
<span>Your Cashu Balance:</span>
<span className="font-bold">{cashuBalance.toLocaleString()} sats</span>
</div>
<div className="flex justify-between text-sm text-muted-foreground">
<span>After Payment:</span>
<span>{(cashuBalance - priceInSats).toLocaleString()} sats</span>
</div>
</div>
<Card className="bg-yellow-950/30 border-yellow-500/30">
<CardContent className="p-3">
<p className="text-xs text-yellow-200">
⚠️ <strong>Peer-to-peer payments are coming soon!</strong> This feature will allow
you to send Cashu tokens directly to the seller. For now, please contact the seller
to arrange payment.
</p>
</CardContent>
</Card>
<div className="flex gap-2">
<Button onClick={() => setShowPaymentDialog(false)} variant="outline" className="flex-1">
Cancel
</Button>
<Button
onClick={handleCashuPayment}
disabled={isPaying}
className="flex-1 bg-orange-500 hover:bg-orange-600"
>
{isPaying ? 'Processing...' : 'Confirm Payment'}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
{/* Delete confirmation (controlled — trigger lives in the owner dropdown) */}
<DeleteEntityDialog
event={item.event}