mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-24 14:17:56 +00:00
feat(p2p): add Phase 3 dispute system components
- Add DisputeModal.tsx with reason selection, evidence upload, terms acceptance - Add P2PDispute.tsx page with evidence gallery, status timeline, real-time updates - Integrate dispute button in P2PTrade.tsx - Add /p2p/dispute/:disputeId route to App.tsx - Add P2P test suite with MockStore pattern (32 tests passing) - Update P2P-BUILDING-PLAN.md with Phase 3 progress (70% complete) - Fix lint errors in test files and components
This commit is contained in:
@@ -0,0 +1,360 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Loader2,
|
||||
ArrowUpRight,
|
||||
ArrowDownLeft,
|
||||
RefreshCw,
|
||||
FileText,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { toast } from 'sonner';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { type P2PFiatTrade, type P2PFiatOffer } from '@shared/lib/p2p-fiat';
|
||||
|
||||
// Trade status type
|
||||
type TradeStatus = 'pending' | 'payment_sent' | 'completed' | 'cancelled' | 'disputed' | 'refunded';
|
||||
|
||||
// Extended trade with offer details
|
||||
interface TradeWithOffer extends P2PFiatTrade {
|
||||
offer?: P2PFiatOffer;
|
||||
}
|
||||
|
||||
export default function P2POrders() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [trades, setTrades] = useState<TradeWithOffer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('active');
|
||||
|
||||
// Fetch user's trades
|
||||
const fetchTrades = async () => {
|
||||
if (!user) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Fetch all trades where user is buyer or seller
|
||||
const { data: tradesData, error } = await supabase
|
||||
.from('p2p_fiat_trades')
|
||||
.select('*')
|
||||
.or(`seller_id.eq.${user.id},buyer_id.eq.${user.id}`)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Fetch offer details for each trade
|
||||
const tradesWithOffers = await Promise.all(
|
||||
(tradesData || []).map(async (trade) => {
|
||||
const { data: offerData } = await supabase
|
||||
.from('p2p_fiat_offers')
|
||||
.select('*')
|
||||
.eq('id', trade.offer_id)
|
||||
.single();
|
||||
|
||||
return {
|
||||
...trade,
|
||||
offer: offerData || undefined,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setTrades(tradesWithOffers);
|
||||
} catch (error) {
|
||||
console.error('Fetch trades error:', error);
|
||||
toast.error('Failed to load orders');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTrades();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [user]);
|
||||
|
||||
// Filter trades by status
|
||||
const activeTrades = trades.filter(t =>
|
||||
['pending', 'payment_sent', 'disputed'].includes(t.status)
|
||||
);
|
||||
const completedTrades = trades.filter(t => t.status === 'completed');
|
||||
const cancelledTrades = trades.filter(t =>
|
||||
['cancelled', 'refunded'].includes(t.status)
|
||||
);
|
||||
|
||||
// Get status badge
|
||||
const getStatusBadge = (status: TradeStatus) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return (
|
||||
<Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
Awaiting Payment
|
||||
</Badge>
|
||||
);
|
||||
case 'payment_sent':
|
||||
return (
|
||||
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
Payment Sent
|
||||
</Badge>
|
||||
);
|
||||
case 'completed':
|
||||
return (
|
||||
<Badge className="bg-green-500/20 text-green-400 border-green-500/30">
|
||||
<CheckCircle2 className="w-3 h-3 mr-1" />
|
||||
Completed
|
||||
</Badge>
|
||||
);
|
||||
case 'cancelled':
|
||||
return (
|
||||
<Badge className="bg-gray-500/20 text-gray-400 border-gray-500/30">
|
||||
<XCircle className="w-3 h-3 mr-1" />
|
||||
Cancelled
|
||||
</Badge>
|
||||
);
|
||||
case 'disputed':
|
||||
return (
|
||||
<Badge className="bg-red-500/20 text-red-400 border-red-500/30">
|
||||
<AlertTriangle className="w-3 h-3 mr-1" />
|
||||
Disputed
|
||||
</Badge>
|
||||
);
|
||||
case 'refunded':
|
||||
return (
|
||||
<Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">
|
||||
<RefreshCw className="w-3 h-3 mr-1" />
|
||||
Refunded
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return <Badge>{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
// Render trade card
|
||||
const renderTradeCard = (trade: TradeWithOffer) => {
|
||||
const isBuyer = trade.buyer_id === user?.id;
|
||||
const counterpartyWallet = isBuyer
|
||||
? trade.offer?.seller_wallet || 'Unknown'
|
||||
: trade.buyer_wallet;
|
||||
|
||||
const timeAgo = (date: string) => {
|
||||
const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
|
||||
if (seconds < 60) return 'Just now';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={trade.id}
|
||||
className="bg-gray-900 border-gray-800 hover:border-gray-700 transition-colors cursor-pointer"
|
||||
onClick={() => navigate(`/p2p/trade/${trade.id}`)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Direction Icon */}
|
||||
<div className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center
|
||||
${isBuyer ? 'bg-green-500/20' : 'bg-red-500/20'}
|
||||
`}>
|
||||
{isBuyer ? (
|
||||
<ArrowDownLeft className="w-5 h-5 text-green-400" />
|
||||
) : (
|
||||
<ArrowUpRight className="w-5 h-5 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Trade Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`font-semibold ${isBuyer ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{isBuyer ? 'Buy' : 'Sell'}
|
||||
</span>
|
||||
<span className="text-white font-medium">
|
||||
{trade.crypto_amount} {trade.offer?.token || 'HEZ'}
|
||||
</span>
|
||||
{getStatusBadge(trade.status as TradeStatus)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Avatar className="h-5 w-5">
|
||||
<AvatarFallback className="bg-gray-700 text-xs">
|
||||
{counterpartyWallet.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="truncate">
|
||||
{counterpartyWallet.slice(0, 8)}...{counterpartyWallet.slice(-4)}
|
||||
</span>
|
||||
<span className="text-gray-500">•</span>
|
||||
<span>{timeAgo(trade.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{trade.fiat_amount.toFixed(2)} {trade.offer?.fiat_currency || 'TRY'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
@ {trade.price_per_unit.toFixed(2)}/{trade.offer?.token || 'HEZ'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deadline warning for pending trades */}
|
||||
{trade.status === 'pending' && trade.payment_deadline && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-800">
|
||||
<div className="flex items-center gap-2 text-yellow-400 text-sm">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>
|
||||
Payment deadline: {new Date(trade.payment_deadline).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// Render empty state
|
||||
const renderEmptyState = (message: string) => (
|
||||
<div className="text-center py-12">
|
||||
<FileText className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400">{message}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<Card className="bg-gray-900 border-gray-800">
|
||||
<CardContent className="py-12 text-center">
|
||||
<AlertTriangle className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-white mb-2">Login Required</h2>
|
||||
<p className="text-gray-400 mb-6">Please log in to view your P2P orders.</p>
|
||||
<Button onClick={() => navigate('/login')}>Log In</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate('/p2p')}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
P2P Trading
|
||||
</Button>
|
||||
<div className="flex-1" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={fetchTrades}
|
||||
disabled={loading}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-white">My Orders</h1>
|
||||
<p className="text-gray-400">View and manage your P2P trades</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<Card className="bg-gray-900 border-gray-800">
|
||||
<CardContent className="py-4 text-center">
|
||||
<p className="text-2xl font-bold text-yellow-400">{activeTrades.length}</p>
|
||||
<p className="text-sm text-gray-400">Active</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-gray-900 border-gray-800">
|
||||
<CardContent className="py-4 text-center">
|
||||
<p className="text-2xl font-bold text-green-400">{completedTrades.length}</p>
|
||||
<p className="text-sm text-gray-400">Completed</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-gray-900 border-gray-800">
|
||||
<CardContent className="py-4 text-center">
|
||||
<p className="text-2xl font-bold text-gray-400">{cancelledTrades.length}</p>
|
||||
<p className="text-sm text-gray-400">Cancelled</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-3 mb-6">
|
||||
<TabsTrigger value="active" className="relative">
|
||||
Active
|
||||
{activeTrades.length > 0 && (
|
||||
<span className="ml-2 px-1.5 py-0.5 text-xs bg-yellow-500 text-black rounded-full">
|
||||
{activeTrades.length}
|
||||
</span>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||
<TabsTrigger value="cancelled">Cancelled</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-green-500" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<TabsContent value="active" className="space-y-4">
|
||||
{activeTrades.length === 0
|
||||
? renderEmptyState('No active trades')
|
||||
: activeTrades.map(renderTradeCard)
|
||||
}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed" className="space-y-4">
|
||||
{completedTrades.length === 0
|
||||
? renderEmptyState('No completed trades')
|
||||
: completedTrades.map(renderTradeCard)
|
||||
}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="cancelled" className="space-y-4">
|
||||
{cancelledTrades.length === 0
|
||||
? renderEmptyState('No cancelled trades')
|
||||
: cancelledTrades.map(renderTradeCard)
|
||||
}
|
||||
</TabsContent>
|
||||
</>
|
||||
)}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user