mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-22 14:47:58 +00:00
feat(p2p): add Kurdish diaspora payment methods (130+ total)
- Add 61 new payment methods for diaspora countries: - Germany (EUR): Sparkasse, Commerzbank, DKB, etc. - Sweden (SEK): Swish, Nordea, SEB, Swedbank - UK (GBP): Faster Payments, Barclays, HSBC, Monzo - France (EUR): Crédit Agricole, Lydia, BNP Paribas - Netherlands (EUR): iDEAL, ABN AMRO, Bunq, Tikkie - Belgium (EUR): Bancontact, KBC - Austria (EUR): Erste Bank, Raiffeisen - Switzerland (CHF): TWINT, UBS, PostFinance - Norway (NOK): Vipps, DNB, SpareBank 1 - Denmark (DKK): MobilePay, Danske Bank - Australia (AUD): PayID, Commonwealth Bank - Canada (CAD): Interac e-Transfer, TD Bank - Expand FiatCurrency type: SEK, GBP, CHF, NOK, DKK, AUD, CAD - Update CreateAd, BlockTrade, ExpressMode components - Add regional labels (Bakur, Başûr, Rojhilat, EU diaspora)
This commit is contained in:
@@ -0,0 +1,385 @@
|
||||
/**
|
||||
* Block Trade Component - OKX-Style OTC Trading
|
||||
*
|
||||
* Block trades are for large volume trades that are handled differently
|
||||
* from regular P2P trades. They offer:
|
||||
* - Custom pricing negotiation
|
||||
* - Dedicated support
|
||||
* - Multi-tranche settlements
|
||||
* - Enhanced privacy
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import {
|
||||
Blocks, Shield, Clock, Lock, MessageSquare, ChevronRight,
|
||||
Building2, AlertTriangle
|
||||
} from 'lucide-react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { toast } from 'sonner';
|
||||
import type { CryptoToken, FiatCurrency } from '@pezkuwi/lib/p2p-fiat';
|
||||
|
||||
interface BlockTradeRequest {
|
||||
id: string;
|
||||
type: 'buy' | 'sell';
|
||||
token: CryptoToken;
|
||||
fiat_currency: FiatCurrency;
|
||||
amount: number;
|
||||
target_price?: number;
|
||||
message?: string;
|
||||
status: 'pending' | 'negotiating' | 'approved' | 'in_progress' | 'completed' | 'cancelled';
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const SUPPORTED_TOKENS: CryptoToken[] = ['HEZ', 'PEZ'];
|
||||
|
||||
// All supported fiat currencies including Kurdish Diaspora countries
|
||||
const SUPPORTED_FIATS: { code: FiatCurrency; name: string; symbol: string; region: string }[] = [
|
||||
// Primary regions (Kurdistan & neighboring)
|
||||
{ code: 'TRY', name: 'Turkish Lira', symbol: '₺', region: 'Bakur' },
|
||||
{ code: 'IQD', name: 'Iraqi Dinar', symbol: 'د.ع', region: 'Başûr' },
|
||||
{ code: 'IRR', name: 'Iranian Rial', symbol: '﷼', region: 'Rojhilat' },
|
||||
// Eurozone diaspora
|
||||
{ code: 'EUR', name: 'Euro', symbol: '€', region: 'EU' },
|
||||
// Other diaspora regions
|
||||
{ code: 'USD', name: 'US Dollar', symbol: '$', region: 'USA' },
|
||||
{ code: 'GBP', name: 'British Pound', symbol: '£', region: 'UK' },
|
||||
{ code: 'SEK', name: 'Swedish Krona', symbol: 'kr', region: 'Sweden' },
|
||||
{ code: 'CHF', name: 'Swiss Franc', symbol: 'Fr.', region: 'Switzerland' },
|
||||
{ code: 'NOK', name: 'Norwegian Krone', symbol: 'kr', region: 'Norway' },
|
||||
{ code: 'DKK', name: 'Danish Krone', symbol: 'kr', region: 'Denmark' },
|
||||
{ code: 'AUD', name: 'Australian Dollar', symbol: 'A$', region: 'Australia' },
|
||||
{ code: 'CAD', name: 'Canadian Dollar', symbol: 'C$', region: 'Canada' },
|
||||
];
|
||||
|
||||
// Minimum amounts for block trade (in USD equivalent)
|
||||
const MINIMUM_BLOCK_AMOUNTS: Record<CryptoToken, number> = {
|
||||
HEZ: 10000, // 10,000 HEZ minimum
|
||||
PEZ: 50000, // 50,000 PEZ minimum
|
||||
};
|
||||
|
||||
export function BlockTrade() {
|
||||
const [showRequestModal, setShowRequestModal] = useState(false);
|
||||
const [type, setType] = useState<'buy' | 'sell'>('buy');
|
||||
const [token, setToken] = useState<CryptoToken>('HEZ');
|
||||
const [fiat, setFiat] = useState<FiatCurrency>('USD');
|
||||
const [amount, setAmount] = useState('');
|
||||
const [targetPrice, setTargetPrice] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [requests, setRequests] = useState<BlockTradeRequest[]>([]);
|
||||
|
||||
const { user } = useAuth();
|
||||
const fiatSymbol = SUPPORTED_FIATS.find(f => f.code === fiat)?.symbol || '';
|
||||
const minAmount = MINIMUM_BLOCK_AMOUNTS[token];
|
||||
|
||||
// Fetch user's block trade requests
|
||||
React.useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
const fetchRequests = async () => {
|
||||
const { data, error } = await supabase
|
||||
.from('p2p_block_trade_requests')
|
||||
.select('*')
|
||||
.eq('user_id', user.id)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (!error && data) {
|
||||
setRequests(data);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRequests();
|
||||
}, [user]);
|
||||
|
||||
const handleSubmitRequest = async () => {
|
||||
if (!user) {
|
||||
toast.error('Please login to submit a block trade request');
|
||||
return;
|
||||
}
|
||||
|
||||
const amountNum = parseFloat(amount);
|
||||
if (isNaN(amountNum) || amountNum < minAmount) {
|
||||
toast.error(`Minimum amount for ${token} block trade is ${minAmount.toLocaleString()} ${token}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('p2p_block_trade_requests')
|
||||
.insert({
|
||||
user_id: user.id,
|
||||
type,
|
||||
token,
|
||||
fiat_currency: fiat,
|
||||
amount: amountNum,
|
||||
target_price: targetPrice ? parseFloat(targetPrice) : null,
|
||||
message: message || null,
|
||||
status: 'pending'
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast.success('Block trade request submitted! Our OTC desk will contact you within 24 hours.');
|
||||
setShowRequestModal(false);
|
||||
setAmount('');
|
||||
setTargetPrice('');
|
||||
setMessage('');
|
||||
|
||||
// Add to local state
|
||||
setRequests(prev => [data, ...prev]);
|
||||
} catch (err) {
|
||||
console.error('Block trade request error:', err);
|
||||
toast.error('Failed to submit request');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: BlockTradeRequest['status']) => {
|
||||
const styles: Record<string, string> = {
|
||||
pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
negotiating: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
approved: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
in_progress: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||
completed: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
cancelled: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||
};
|
||||
return styles[status] || styles.pending;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="bg-gradient-to-br from-purple-500/10 to-blue-500/10 border-purple-500/30">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-2 bg-purple-500/20 rounded-lg">
|
||||
<Blocks className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg text-white">Block Trade (OTC)</CardTitle>
|
||||
<CardDescription className="text-gray-400">
|
||||
Large volume trades with custom pricing
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">
|
||||
VIP
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Features */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Lock className="w-4 h-4 text-purple-400" />
|
||||
<span>Private Negotiation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Shield className="w-4 h-4 text-green-400" />
|
||||
<span>Escrow Protected</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Building2 className="w-4 h-4 text-blue-400" />
|
||||
<span>Dedicated Support</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Clock className="w-4 h-4 text-yellow-400" />
|
||||
<span>Flexible Settlement</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Minimum Amounts Info */}
|
||||
<div className="p-3 bg-gray-800/50 rounded-lg">
|
||||
<p className="text-xs text-gray-500 mb-2">Minimum Block Trade Amounts:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(MINIMUM_BLOCK_AMOUNTS).map(([t, min]) => (
|
||||
<Badge key={t} variant="outline" className="border-gray-700 text-gray-300">
|
||||
{min.toLocaleString()} {t}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Request Button */}
|
||||
<Button
|
||||
className="w-full bg-purple-600 hover:bg-purple-700"
|
||||
onClick={() => setShowRequestModal(true)}
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mr-2" />
|
||||
Request Block Trade
|
||||
<ChevronRight className="w-4 h-4 ml-auto" />
|
||||
</Button>
|
||||
|
||||
{/* Active Requests */}
|
||||
{requests.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-gray-500">Your Requests:</p>
|
||||
{requests.slice(0, 3).map(req => (
|
||||
<div
|
||||
key={req.id}
|
||||
className="p-2 bg-gray-800/50 rounded-lg flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs ${req.type === 'buy' ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{req.type.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-sm text-white">
|
||||
{req.amount.toLocaleString()} {req.token}
|
||||
</span>
|
||||
</div>
|
||||
<Badge className={getStatusBadge(req.status)}>
|
||||
{req.status.replace('_', ' ')}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Request Modal */}
|
||||
<Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
|
||||
<DialogContent className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white flex items-center gap-2">
|
||||
<Blocks className="w-5 h-5 text-purple-400" />
|
||||
Block Trade Request
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400">
|
||||
Submit a request for our OTC desk to handle your large volume trade.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Buy/Sell Toggle */}
|
||||
<Tabs value={type} onValueChange={(v) => setType(v as 'buy' | 'sell')}>
|
||||
<TabsList className="grid w-full grid-cols-2 bg-gray-800">
|
||||
<TabsTrigger value="buy" className="data-[state=active]:bg-green-600">
|
||||
Buy
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="sell" className="data-[state=active]:bg-red-600">
|
||||
Sell
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Token & Fiat */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Token</Label>
|
||||
<Select value={token} onValueChange={(v) => setToken(v as CryptoToken)}>
|
||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SUPPORTED_TOKENS.map(t => (
|
||||
<SelectItem key={t} value={t}>{t}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Currency</Label>
|
||||
<Select value={fiat} onValueChange={(v) => setFiat(v as FiatCurrency)}>
|
||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SUPPORTED_FIATS.map(f => (
|
||||
<SelectItem key={f.code} value={f.code}>
|
||||
{f.symbol} {f.code}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Amount ({token})</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={`Min: ${minAmount.toLocaleString()}`}
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
className="bg-gray-800 border-gray-700"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Minimum: {minAmount.toLocaleString()} {token}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Target Price (Optional) */}
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Target Price (Optional)</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Your desired price per unit"
|
||||
value={targetPrice}
|
||||
onChange={(e) => setTargetPrice(e.target.value)}
|
||||
className="bg-gray-800 border-gray-700 pr-16"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
|
||||
{fiatSymbol}/{token}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Additional Details (Optional)</Label>
|
||||
<Textarea
|
||||
placeholder="Settlement preferences, timeline, payment methods..."
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
className="bg-gray-800 border-gray-700 min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Warning */}
|
||||
<div className="p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg flex items-start gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-yellow-400 mt-0.5" />
|
||||
<p className="text-xs text-yellow-400">
|
||||
Block trades require KYC verification and may take 24-48 hours to process.
|
||||
Our OTC desk will contact you via email.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowRequestModal(false)}
|
||||
className="border-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
onClick={handleSubmitRequest}
|
||||
disabled={isSubmitting || !amount || parseFloat(amount) < minAmount}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit Request'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -241,11 +241,21 @@ export function CreateAd({ onAdCreated }: CreateAdProps) {
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="TRY">🇹🇷 Turkish Lira (TRY)</SelectItem>
|
||||
<SelectItem value="IQD">🇮🇶 Iraqi Dinar (IQD)</SelectItem>
|
||||
<SelectItem value="IRR">🇮🇷 Iranian Rial (IRR)</SelectItem>
|
||||
<SelectItem value="EUR">🇪🇺 Euro (EUR)</SelectItem>
|
||||
{/* Primary regions - Kurdistan & neighboring */}
|
||||
<SelectItem value="TRY">🇹🇷 Turkish Lira (TRY) - Bakur</SelectItem>
|
||||
<SelectItem value="IQD">🇮🇶 Iraqi Dinar (IQD) - Başûr</SelectItem>
|
||||
<SelectItem value="IRR">🇮🇷 Iranian Rial (IRR) - Rojhilat</SelectItem>
|
||||
{/* Eurozone diaspora */}
|
||||
<SelectItem value="EUR">🇪🇺 Euro (EUR) - EU</SelectItem>
|
||||
{/* Other diaspora regions */}
|
||||
<SelectItem value="USD">🇺🇸 US Dollar (USD)</SelectItem>
|
||||
<SelectItem value="GBP">🇬🇧 British Pound (GBP)</SelectItem>
|
||||
<SelectItem value="SEK">🇸🇪 Swedish Krona (SEK)</SelectItem>
|
||||
<SelectItem value="CHF">🇨🇭 Swiss Franc (CHF)</SelectItem>
|
||||
<SelectItem value="NOK">🇳🇴 Norwegian Krone (NOK)</SelectItem>
|
||||
<SelectItem value="DKK">🇩🇰 Danish Krone (DKK)</SelectItem>
|
||||
<SelectItem value="AUD">🇦🇺 Australian Dollar (AUD)</SelectItem>
|
||||
<SelectItem value="CAD">🇨🇦 Canadian Dollar (CAD)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,369 @@
|
||||
/**
|
||||
* Express Mode Component - OKX-Style Quick Trading
|
||||
*
|
||||
* Express mode allows users to quickly buy/sell crypto at the best available rate
|
||||
* without manually selecting an offer. The system automatically matches with
|
||||
* the best available merchant.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Zap, ArrowRight, Shield, Clock, Star, AlertCircle, CheckCircle2 } from 'lucide-react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { toast } from 'sonner';
|
||||
import type { CryptoToken, FiatCurrency } from '@pezkuwi/lib/p2p-fiat';
|
||||
|
||||
interface BestOffer {
|
||||
id: string;
|
||||
seller_id: string;
|
||||
price_per_unit: number;
|
||||
remaining_amount: number;
|
||||
payment_method_name: string;
|
||||
seller_reputation: number;
|
||||
seller_completed_trades: number;
|
||||
time_limit_minutes: number;
|
||||
}
|
||||
|
||||
interface ExpressModeProps {
|
||||
onTradeStarted?: (tradeId: string) => void;
|
||||
}
|
||||
|
||||
const SUPPORTED_TOKENS: CryptoToken[] = ['HEZ', 'PEZ'];
|
||||
|
||||
// All supported fiat currencies including Kurdish Diaspora countries
|
||||
const SUPPORTED_FIATS: { code: FiatCurrency; name: string; symbol: string; region: string }[] = [
|
||||
// Primary regions (Kurdistan & neighboring)
|
||||
{ code: 'TRY', name: 'Turkish Lira', symbol: '₺', region: 'Bakur' },
|
||||
{ code: 'IQD', name: 'Iraqi Dinar', symbol: 'د.ع', region: 'Başûr' },
|
||||
{ code: 'IRR', name: 'Iranian Rial', symbol: '﷼', region: 'Rojhilat' },
|
||||
// Eurozone diaspora
|
||||
{ code: 'EUR', name: 'Euro', symbol: '€', region: 'EU' },
|
||||
// Other diaspora regions
|
||||
{ code: 'USD', name: 'US Dollar', symbol: '$', region: 'USA' },
|
||||
{ code: 'GBP', name: 'British Pound', symbol: '£', region: 'UK' },
|
||||
{ code: 'SEK', name: 'Swedish Krona', symbol: 'kr', region: 'Sweden' },
|
||||
{ code: 'CHF', name: 'Swiss Franc', symbol: 'Fr.', region: 'Switzerland' },
|
||||
{ code: 'NOK', name: 'Norwegian Krone', symbol: 'kr', region: 'Norway' },
|
||||
{ code: 'DKK', name: 'Danish Krone', symbol: 'kr', region: 'Denmark' },
|
||||
{ code: 'AUD', name: 'Australian Dollar', symbol: 'A$', region: 'Australia' },
|
||||
{ code: 'CAD', name: 'Canadian Dollar', symbol: 'C$', region: 'Canada' },
|
||||
];
|
||||
|
||||
export function ExpressMode({ onTradeStarted }: ExpressModeProps) {
|
||||
const [mode, setMode] = useState<'buy' | 'sell'>('buy');
|
||||
const [token, setToken] = useState<CryptoToken>('HEZ');
|
||||
const [fiat, setFiat] = useState<FiatCurrency>('TRY');
|
||||
const [amount, setAmount] = useState<string>('');
|
||||
const [inputType, setInputType] = useState<'crypto' | 'fiat'>('fiat');
|
||||
const [bestOffer, setBestOffer] = useState<BestOffer | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Calculate conversion
|
||||
const fiatSymbol = SUPPORTED_FIATS.find(f => f.code === fiat)?.symbol || '';
|
||||
const cryptoAmount = inputType === 'crypto'
|
||||
? parseFloat(amount) || 0
|
||||
: bestOffer ? (parseFloat(amount) || 0) / bestOffer.price_per_unit : 0;
|
||||
const fiatAmount = inputType === 'fiat'
|
||||
? parseFloat(amount) || 0
|
||||
: bestOffer ? (parseFloat(amount) || 0) * bestOffer.price_per_unit : 0;
|
||||
|
||||
// Fetch best offer when parameters change
|
||||
useEffect(() => {
|
||||
const fetchBestOffer = async () => {
|
||||
if (!amount || parseFloat(amount) <= 0) {
|
||||
setBestOffer(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Get best offer based on mode
|
||||
const { data, error } = await supabase
|
||||
.from('p2p_fiat_offers')
|
||||
.select(`
|
||||
id,
|
||||
seller_id,
|
||||
price_per_unit,
|
||||
remaining_amount,
|
||||
time_limit_minutes,
|
||||
payment_methods!inner(method_name),
|
||||
profiles!p2p_fiat_offers_seller_id_fkey(display_name),
|
||||
p2p_reputation!p2p_fiat_offers_seller_id_fkey(reputation_score, completed_trades)
|
||||
`)
|
||||
.eq('token', token)
|
||||
.eq('fiat_currency', fiat)
|
||||
.eq('status', 'open')
|
||||
.gt('remaining_amount', 0)
|
||||
.order('price_per_unit', { ascending: mode === 'buy' })
|
||||
.limit(1)
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
setBestOffer(null);
|
||||
} else if (data) {
|
||||
setBestOffer({
|
||||
id: data.id,
|
||||
seller_id: data.seller_id,
|
||||
price_per_unit: data.price_per_unit,
|
||||
remaining_amount: data.remaining_amount,
|
||||
payment_method_name: (data.payment_methods as { method_name?: string })?.method_name || 'Bank Transfer',
|
||||
seller_reputation: (data.p2p_reputation as { reputation_score?: number })?.reputation_score || 0,
|
||||
seller_completed_trades: (data.p2p_reputation as { completed_trades?: number })?.completed_trades || 0,
|
||||
time_limit_minutes: data.time_limit_minutes,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fetch best offer error:', err);
|
||||
setBestOffer(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const debounce = setTimeout(fetchBestOffer, 300);
|
||||
return () => clearTimeout(debounce);
|
||||
}, [amount, token, fiat, mode]);
|
||||
|
||||
// Handle express trade
|
||||
const handleExpressTrade = async () => {
|
||||
if (!user) {
|
||||
toast.error('Please login to trade');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!bestOffer) {
|
||||
toast.error('No offers available');
|
||||
return;
|
||||
}
|
||||
|
||||
if (cryptoAmount > bestOffer.remaining_amount) {
|
||||
toast.error(`Maximum available: ${bestOffer.remaining_amount} ${token}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
// Accept the best offer
|
||||
const { data: result, error } = await supabase.rpc('accept_p2p_offer', {
|
||||
p_offer_id: bestOffer.id,
|
||||
p_buyer_id: user.id,
|
||||
p_buyer_wallet: '', // Will be set from user profile
|
||||
p_amount: cryptoAmount
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
const response = typeof result === 'string' ? JSON.parse(result) : result;
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.error || 'Failed to start trade');
|
||||
}
|
||||
|
||||
toast.success('Express trade started!');
|
||||
|
||||
if (onTradeStarted) {
|
||||
onTradeStarted(response.trade_id);
|
||||
} else {
|
||||
navigate(`/p2p/trade/${response.trade_id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Express trade error:', err);
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to start trade');
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-gradient-to-br from-yellow-500/10 to-orange-500/10 border-yellow-500/30">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-2 bg-yellow-500/20 rounded-lg">
|
||||
<Zap className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg text-white">Express Mode</CardTitle>
|
||||
<p className="text-xs text-gray-400">Instant best-rate matching</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
|
||||
Fast
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Buy/Sell Toggle */}
|
||||
<Tabs value={mode} onValueChange={(v) => setMode(v as 'buy' | 'sell')}>
|
||||
<TabsList className="grid w-full grid-cols-2 bg-gray-800">
|
||||
<TabsTrigger value="buy" className="data-[state=active]:bg-green-600">
|
||||
Buy {token}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="sell" className="data-[state=active]:bg-red-600">
|
||||
Sell {token}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Token & Fiat Selection */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Crypto</Label>
|
||||
<Select value={token} onValueChange={(v) => setToken(v as CryptoToken)}>
|
||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SUPPORTED_TOKENS.map(t => (
|
||||
<SelectItem key={t} value={t}>{t}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-gray-400 text-xs">Currency</Label>
|
||||
<Select value={fiat} onValueChange={(v) => setFiat(v as FiatCurrency)}>
|
||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SUPPORTED_FIATS.map(f => (
|
||||
<SelectItem key={f.code} value={f.code}>
|
||||
{f.symbol} {f.code}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount Input */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<Label className="text-gray-400 text-xs">
|
||||
{inputType === 'fiat' ? `Amount (${fiat})` : `Amount (${token})`}
|
||||
</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs text-yellow-400 h-auto p-0"
|
||||
onClick={() => setInputType(inputType === 'fiat' ? 'crypto' : 'fiat')}
|
||||
>
|
||||
Switch to {inputType === 'fiat' ? token : fiat}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
className="bg-gray-800 border-gray-700 text-lg pr-16"
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
{inputType === 'fiat' ? fiatSymbol : token}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conversion Display */}
|
||||
{bestOffer && parseFloat(amount) > 0 && (
|
||||
<div className="p-3 bg-gray-800/50 rounded-lg space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">You {mode === 'buy' ? 'pay' : 'receive'}</span>
|
||||
<span className="text-white font-medium">
|
||||
{fiatSymbol}{fiatAmount.toLocaleString(undefined, { maximumFractionDigits: 2 })} {fiat}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center">
|
||||
<ArrowRight className="w-4 h-4 text-gray-500" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">You {mode === 'buy' ? 'receive' : 'send'}</span>
|
||||
<span className="text-white font-medium">
|
||||
{cryptoAmount.toLocaleString(undefined, { maximumFractionDigits: 6 })} {token}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-gray-700 space-y-1">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">Rate</span>
|
||||
<span className="text-gray-300">
|
||||
1 {token} = {fiatSymbol}{bestOffer.price_per_unit.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">Merchant Rating</span>
|
||||
<span className="text-yellow-400 flex items-center gap-1">
|
||||
<Star className="w-3 h-3" />
|
||||
{bestOffer.seller_reputation}% ({bestOffer.seller_completed_trades} trades)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">Payment</span>
|
||||
<span className="text-gray-300">{bestOffer.payment_method_name}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">Time Limit</span>
|
||||
<span className="text-gray-300 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{bestOffer.time_limit_minutes} min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Offers Warning */}
|
||||
{!bestOffer && parseFloat(amount) > 0 && !isLoading && (
|
||||
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-400" />
|
||||
<span className="text-sm text-red-400">
|
||||
No offers available for this pair
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Express Trade Button */}
|
||||
<Button
|
||||
className="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-semibold"
|
||||
size="lg"
|
||||
onClick={handleExpressTrade}
|
||||
disabled={!bestOffer || isLoading || isProcessing || !user}
|
||||
>
|
||||
{isProcessing ? (
|
||||
<>Processing...</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="w-4 h-4 mr-2" />
|
||||
{mode === 'buy' ? 'Buy' : 'Sell'} {token} Instantly
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex items-center justify-center gap-4 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Shield className="w-3 h-3 text-green-400" />
|
||||
Escrow Protected
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3 text-blue-400" />
|
||||
Verified Merchants
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user