feat: add P2P deposit/withdraw flow for Telegram mini app

- New request-withdraw-telegram edge function (session token auth)
- New DepositWithdrawModal component with deposit/withdraw tabs
- Deposit: platform wallet display, TX hash verification, on-chain check
- Withdraw: token select, amount, fee display, balance validation
- BalanceCard: deposit/withdraw buttons always visible
- P2P section: modal state management and balance refresh on success
- p2p-api: verifyDeposit and requestWithdraw functions
- i18n: 24 new translation keys across all 6 languages
This commit is contained in:
2026-02-26 20:33:31 +03:00
parent 0606f93146
commit b711524d57
14 changed files with 1142 additions and 10 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "pezkuwi-telegram-miniapp",
"version": "1.0.225",
"version": "1.0.227",
"type": "module",
"description": "Pezkuwichain Telegram Mini App - Forum, Announcements, Rewards",
"author": "Pezkuwichain Team",
+36 -3
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { Wallet, Lock, RefreshCw } from 'lucide-react';
import { Wallet, Lock, RefreshCw, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/AuthContext';
import { useTranslation } from '@/i18n';
@@ -8,9 +8,17 @@ import { getInternalBalance, type InternalBalance } from '@/lib/p2p-api';
interface BalanceCardProps {
onRefresh?: () => void;
onDeposit?: () => void;
onWithdraw?: () => void;
onBalancesLoaded?: (balances: InternalBalance[]) => void;
}
export function BalanceCard({ onRefresh }: BalanceCardProps) {
export function BalanceCard({
onRefresh,
onDeposit,
onWithdraw,
onBalancesLoaded,
}: BalanceCardProps) {
const { sessionToken } = useAuth();
const { t, isRTL } = useTranslation();
const { hapticImpact } = useTelegram();
@@ -24,13 +32,14 @@ export function BalanceCard({ onRefresh }: BalanceCardProps) {
try {
const data = await getInternalBalance(sessionToken);
setBalances(data);
onBalancesLoaded?.(data);
} catch (err) {
console.error('Failed to fetch balances:', err);
} finally {
setLoading(false);
setRefreshing(false);
}
}, [sessionToken]);
}, [sessionToken, onBalancesLoaded]);
useEffect(() => {
fetchBalances();
@@ -103,6 +112,30 @@ export function BalanceCard({ onRefresh }: BalanceCardProps) {
))}
</div>
)}
{/* Deposit / Withdraw buttons */}
<div className="flex gap-2 mt-3">
<button
onClick={() => {
hapticImpact('light');
onDeposit?.();
}}
className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 text-green-400 text-xs font-medium rounded-lg transition-colors"
>
<ArrowDownToLine className="w-3.5 h-3.5" />
{t('p2p.deposit')}
</button>
<button
onClick={() => {
hapticImpact('light');
onWithdraw?.();
}}
className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-orange-500/10 hover:bg-orange-500/20 border border-orange-500/30 text-orange-400 text-xs font-medium rounded-lg transition-colors"
>
<ArrowUpFromLine className="w-3.5 h-3.5" />
{t('p2p.withdraw')}
</button>
</div>
</div>
);
}
+543
View File
@@ -0,0 +1,543 @@
import { useState, useCallback } from 'react';
import {
X,
Copy,
Check,
ArrowDownToLine,
ArrowUpFromLine,
Loader2,
AlertCircle,
CheckCircle2,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/AuthContext';
import { useWallet } from '@/contexts/WalletContext';
import { useTranslation } from '@/i18n';
import { useTelegram } from '@/hooks/useTelegram';
import { verifyDeposit, requestWithdraw } from '@/lib/p2p-api';
const PLATFORM_WALLET = '5H18ZZBU4LwPYbeEZ1JBGvibCU2edhhM8HNUtFi7GgC36CgS';
const WITHDRAW_FEE: Record<string, number> = {
HEZ: 0.1,
PEZ: 1,
};
const MIN_WITHDRAW: Record<string, number> = {
HEZ: 1,
PEZ: 10,
};
interface DepositWithdrawModalProps {
isOpen: boolean;
onClose: () => void;
initialTab?: 'deposit' | 'withdraw';
availableBalances?: Record<string, number>;
onSuccess?: () => void;
}
type DepositStep = 'form' | 'verifying' | 'success' | 'error';
export function DepositWithdrawModal({
isOpen,
onClose,
initialTab = 'deposit',
availableBalances = {},
onSuccess,
}: DepositWithdrawModalProps) {
const { sessionToken } = useAuth();
const { address } = useWallet();
const { t, isRTL } = useTranslation();
const { hapticImpact, hapticNotification } = useTelegram();
const [activeTab, setActiveTab] = useState<'deposit' | 'withdraw'>(initialTab);
// Deposit state
const [depositToken, setDepositToken] = useState<'HEZ' | 'PEZ'>('HEZ');
const [depositAmount, setDepositAmount] = useState('');
const [txHash, setTxHash] = useState('');
const [blockNumber, setBlockNumber] = useState('');
const [depositStep, setDepositStep] = useState<DepositStep>('form');
const [depositError, setDepositError] = useState('');
const [depositResult, setDepositResult] = useState<{ amount: number; token: string } | null>(
null
);
const [copied, setCopied] = useState(false);
// Withdraw state
const [withdrawToken, setWithdrawToken] = useState<'HEZ' | 'PEZ'>('HEZ');
const [withdrawAmount, setWithdrawAmount] = useState('');
const [withdrawAddress, setWithdrawAddress] = useState(address || '');
const [withdrawLoading, setWithdrawLoading] = useState(false);
const [withdrawError, setWithdrawError] = useState('');
const [withdrawSuccess, setWithdrawSuccess] = useState(false);
const handleCopyAddress = useCallback(async () => {
try {
await navigator.clipboard.writeText(PLATFORM_WALLET);
setCopied(true);
hapticNotification('success');
setTimeout(() => setCopied(false), 2000);
} catch {
// Fallback for environments where clipboard API is not available
const textArea = document.createElement('textarea');
textArea.value = PLATFORM_WALLET;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
setCopied(true);
hapticNotification('success');
setTimeout(() => setCopied(false), 2000);
}
}, [hapticNotification]);
const handleVerifyDeposit = async () => {
if (!sessionToken || !txHash || !depositAmount) return;
const amount = parseFloat(depositAmount);
if (isNaN(amount) || amount <= 0) {
setDepositError(t('p2p.depositInvalidAmount'));
return;
}
hapticImpact('medium');
setDepositStep('verifying');
setDepositError('');
try {
const result = await verifyDeposit(
sessionToken,
txHash.trim(),
depositToken,
amount,
blockNumber ? parseInt(blockNumber) : undefined
);
setDepositResult({ amount: result.amount, token: result.token });
setDepositStep('success');
hapticNotification('success');
onSuccess?.();
} catch (err) {
const message = err instanceof Error ? err.message : String(err);
setDepositError(message);
setDepositStep('error');
hapticNotification('error');
}
};
const handleWithdraw = async () => {
if (!sessionToken || !withdrawAmount || !withdrawAddress) return;
const amount = parseFloat(withdrawAmount);
if (isNaN(amount) || amount <= 0) {
setWithdrawError(t('p2p.depositInvalidAmount'));
return;
}
if (amount < MIN_WITHDRAW[withdrawToken]) {
setWithdrawError(`${t('p2p.minWithdraw')}: ${MIN_WITHDRAW[withdrawToken]} ${withdrawToken}`);
return;
}
const available = availableBalances[withdrawToken] || 0;
if (amount > available) {
setWithdrawError(t('p2p.insufficientBalance'));
return;
}
hapticImpact('medium');
setWithdrawLoading(true);
setWithdrawError('');
try {
await requestWithdraw(sessionToken, withdrawToken, amount, withdrawAddress.trim());
setWithdrawSuccess(true);
hapticNotification('success');
onSuccess?.();
} catch (err) {
const message = err instanceof Error ? err.message : String(err);
setWithdrawError(message);
hapticNotification('error');
} finally {
setWithdrawLoading(false);
}
};
const resetDeposit = () => {
setDepositStep('form');
setDepositError('');
setDepositResult(null);
setTxHash('');
setBlockNumber('');
setDepositAmount('');
};
const resetWithdraw = () => {
setWithdrawError('');
setWithdrawSuccess(false);
setWithdrawAmount('');
};
const handleClose = () => {
resetDeposit();
resetWithdraw();
onClose();
};
if (!isOpen) return null;
const fee = WITHDRAW_FEE[withdrawToken] || 0;
const withdrawNum = parseFloat(withdrawAmount) || 0;
const netAmount = Math.max(0, withdrawNum - fee);
return (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
{/* Backdrop */}
<div className="absolute inset-0 bg-black/60" onClick={handleClose} />
{/* Modal */}
<div
className={cn(
'relative w-full max-w-md max-h-[90vh] bg-card rounded-t-2xl sm:rounded-2xl border border-border overflow-y-auto',
isRTL && 'direction-rtl'
)}
dir={isRTL ? 'rtl' : 'ltr'}
>
{/* Header */}
<div className="sticky top-0 bg-card z-10 flex items-center justify-between p-4 border-b border-border">
<div className="flex rounded-lg bg-muted p-0.5">
<button
onClick={() => {
setActiveTab('deposit');
hapticImpact('light');
}}
className={cn(
'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
activeTab === 'deposit'
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground'
)}
>
<ArrowDownToLine className="w-3.5 h-3.5" />
{t('p2p.deposit')}
</button>
<button
onClick={() => {
setActiveTab('withdraw');
hapticImpact('light');
}}
className={cn(
'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
activeTab === 'withdraw'
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground'
)}
>
<ArrowUpFromLine className="w-3.5 h-3.5" />
{t('p2p.withdraw')}
</button>
</div>
<button onClick={handleClose} className="p-1.5 rounded-full hover:bg-muted/50">
<X className="w-5 h-5 text-muted-foreground" />
</button>
</div>
<div className="p-4 space-y-4">
{/* ── Deposit Tab ── */}
{activeTab === 'deposit' && (
<>
{depositStep === 'form' && (
<>
{/* Instructions */}
<div className="bg-cyan-500/10 border border-cyan-500/20 rounded-xl p-3">
<p className="text-xs text-cyan-300">{t('p2p.depositInstructions')}</p>
</div>
{/* Platform wallet address */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.platformWallet')}
</label>
<div className="flex items-center gap-2 bg-muted rounded-lg p-2.5">
<code className="flex-1 text-xs text-foreground break-all font-mono">
{PLATFORM_WALLET}
</code>
<button
onClick={handleCopyAddress}
className="shrink-0 p-1.5 rounded-md hover:bg-card/50 transition-colors"
>
{copied ? (
<Check className="w-4 h-4 text-green-400" />
) : (
<Copy className="w-4 h-4 text-muted-foreground" />
)}
</button>
</div>
</div>
{/* Token select */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.selectToken')}
</label>
<div className="flex gap-2">
{(['HEZ', 'PEZ'] as const).map((tok) => (
<button
key={tok}
onClick={() => setDepositToken(tok)}
className={cn(
'flex-1 py-2 text-sm font-medium rounded-lg border transition-colors',
depositToken === tok
? 'border-cyan-500 bg-cyan-500/10 text-cyan-400'
: 'border-border text-muted-foreground'
)}
>
{tok}
</button>
))}
</div>
</div>
{/* Amount */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.amount')} ({depositToken})
</label>
<input
type="number"
inputMode="decimal"
value={depositAmount}
onChange={(e) => setDepositAmount(e.target.value)}
placeholder="0.00"
className="w-full bg-muted rounded-lg px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-cyan-500"
/>
</div>
{/* TX Hash */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.txHash')}
</label>
<input
type="text"
value={txHash}
onChange={(e) => setTxHash(e.target.value)}
placeholder={t('p2p.txHashPlaceholder')}
className="w-full bg-muted rounded-lg px-3 py-2.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-cyan-500 font-mono"
/>
</div>
{/* Block Number (optional) */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.blockNumber')} ({t('p2p.optional')})
</label>
<input
type="number"
inputMode="numeric"
value={blockNumber}
onChange={(e) => setBlockNumber(e.target.value)}
placeholder="e.g. 1234567"
className="w-full bg-muted rounded-lg px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-cyan-500"
/>
</div>
{/* Verify button */}
<button
onClick={handleVerifyDeposit}
disabled={!txHash || !depositAmount || !sessionToken}
className="w-full py-3 bg-cyan-500 hover:bg-cyan-600 disabled:bg-muted disabled:text-muted-foreground text-white font-medium rounded-xl transition-colors"
>
{t('p2p.verifyDeposit')}
</button>
</>
)}
{depositStep === 'verifying' && (
<div className="flex flex-col items-center justify-center py-12 space-y-3">
<Loader2 className="w-10 h-10 text-cyan-400 animate-spin" />
<p className="text-sm text-foreground">{t('p2p.verifying')}</p>
<p className="text-xs text-muted-foreground text-center">
{t('p2p.verifyingDesc')}
</p>
</div>
)}
{depositStep === 'success' && depositResult && (
<div className="flex flex-col items-center justify-center py-12 space-y-3">
<CheckCircle2 className="w-12 h-12 text-green-400" />
<p className="text-lg font-bold text-foreground">{t('p2p.depositSuccess')}</p>
<p className="text-sm text-muted-foreground">
+{depositResult.amount} {depositResult.token}
</p>
<button
onClick={handleClose}
className="mt-4 px-6 py-2.5 bg-cyan-500 hover:bg-cyan-600 text-white font-medium rounded-xl transition-colors"
>
{t('common.close')}
</button>
</div>
)}
{depositStep === 'error' && (
<div className="flex flex-col items-center justify-center py-12 space-y-3">
<AlertCircle className="w-12 h-12 text-red-400" />
<p className="text-lg font-bold text-foreground">{t('p2p.depositFailed')}</p>
<p className="text-xs text-red-400 text-center max-w-xs">{depositError}</p>
<button
onClick={resetDeposit}
className="mt-4 px-6 py-2.5 bg-muted hover:bg-muted/70 text-foreground font-medium rounded-xl transition-colors"
>
{t('common.retry')}
</button>
</div>
)}
</>
)}
{/* ── Withdraw Tab ── */}
{activeTab === 'withdraw' && (
<>
{withdrawSuccess ? (
<div className="flex flex-col items-center justify-center py-12 space-y-3">
<CheckCircle2 className="w-12 h-12 text-green-400" />
<p className="text-lg font-bold text-foreground">{t('p2p.withdrawSuccess')}</p>
<p className="text-xs text-muted-foreground text-center">
{t('p2p.withdrawProcessing')}
</p>
<button
onClick={handleClose}
className="mt-4 px-6 py-2.5 bg-cyan-500 hover:bg-cyan-600 text-white font-medium rounded-xl transition-colors"
>
{t('common.close')}
</button>
</div>
) : (
<>
{/* Token select */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.selectToken')}
</label>
<div className="flex gap-2">
{(['HEZ', 'PEZ'] as const).map((tok) => (
<button
key={tok}
onClick={() => {
setWithdrawToken(tok);
setWithdrawAmount('');
setWithdrawError('');
}}
className={cn(
'flex-1 py-2 text-sm font-medium rounded-lg border transition-colors',
withdrawToken === tok
? 'border-cyan-500 bg-cyan-500/10 text-cyan-400'
: 'border-border text-muted-foreground'
)}
>
{tok}
</button>
))}
</div>
</div>
{/* Amount */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-xs text-muted-foreground">
{t('p2p.withdrawAmount')} ({withdrawToken})
</label>
<button
onClick={() =>
setWithdrawAmount(String(availableBalances[withdrawToken] || 0))
}
className="text-xs text-cyan-400 hover:text-cyan-300"
>
{t('p2p.maxAvailable')}:{' '}
{(availableBalances[withdrawToken] || 0).toFixed(2)}
</button>
</div>
<input
type="number"
inputMode="decimal"
value={withdrawAmount}
onChange={(e) => {
setWithdrawAmount(e.target.value);
setWithdrawError('');
}}
placeholder="0.00"
className="w-full bg-muted rounded-lg px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-cyan-500"
/>
</div>
{/* Wallet address */}
<div>
<label className="text-xs text-muted-foreground mb-1 block">
{t('p2p.walletAddress')}
</label>
<input
type="text"
value={withdrawAddress}
onChange={(e) => setWithdrawAddress(e.target.value)}
placeholder="5..."
className="w-full bg-muted rounded-lg px-3 py-2.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-cyan-500 font-mono"
/>
</div>
{/* Fee info */}
<div className="bg-muted rounded-xl p-3 space-y-1.5">
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">{t('p2p.networkFee')}</span>
<span className="text-foreground">
{fee} {withdrawToken}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">{t('p2p.netAmount')}</span>
<span className="text-foreground font-medium">
{netAmount.toFixed(4)} {withdrawToken}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">{t('p2p.minWithdraw')}</span>
<span className="text-foreground">
{MIN_WITHDRAW[withdrawToken]} {withdrawToken}
</span>
</div>
</div>
{/* Error */}
{withdrawError && (
<div className="flex items-center gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-2.5">
<AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
<p className="text-xs text-red-400">{withdrawError}</p>
</div>
)}
{/* Withdraw button */}
<button
onClick={handleWithdraw}
disabled={
withdrawLoading || !withdrawAmount || !withdrawAddress || !sessionToken
}
className="w-full py-3 bg-cyan-500 hover:bg-cyan-600 disabled:bg-muted disabled:text-muted-foreground text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
>
{withdrawLoading ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
{t('p2p.withdrawing')}
</>
) : (
t('p2p.withdraw')
)}
</button>
</>
)}
</>
)}
</div>
</div>
</div>
);
}
+25
View File
@@ -395,6 +395,31 @@ const ar: Translations = {
fake_payment_proof: 'إثبات دفع مزور',
other: 'أخرى',
},
// Deposit / Withdraw
deposit: 'إيداع',
withdraw: 'سحب',
platformWallet: 'عنوان محفظة المنصة',
txHash: 'هاش المعاملة',
txHashPlaceholder: '0x...',
blockNumber: 'رقم الكتلة',
optional: 'اختياري',
verifyDeposit: 'تحقق من الإيداع',
verifying: 'جارٍ التحقق...',
verifyingDesc: 'يتم فحص المعاملة على السلسلة. قد يستغرق هذا حتى ٦٠ ثانية.',
depositSuccess: 'تم الإيداع بنجاح!',
depositFailed: 'فشل الإيداع',
depositInstructions: 'أرسل التوكنات إلى عنوان محفظة المنصة أدناه، ثم الصق هاش المعاملة للتحقق.',
depositInvalidAmount: 'يرجى إدخال مبلغ صالح',
selectToken: 'اختر التوكن',
withdrawAmount: 'مبلغ السحب',
networkFee: 'رسوم الشبكة',
netAmount: 'المبلغ المستلم',
withdrawSuccess: 'تم طلب السحب!',
withdrawProcessing: 'يتم معالجة سحبك. سيتم إرسال التوكنات إلى محفظتك قريباً.',
withdrawing: 'جارٍ المعالجة...',
minWithdraw: 'الحد الأدنى للسحب',
maxAvailable: 'الحد الأقصى',
walletAddress: 'عنوان المحفظة',
noTrades: 'لا توجد صفقات بعد',
},
+25
View File
@@ -397,6 +397,31 @@ const ckb: Translations = {
fake_payment_proof: 'بەڵگەی پارەدانی ساختە',
other: 'هی تر',
},
// Deposit / Withdraw
deposit: 'پارە دابنێ',
withdraw: 'پارە دەربهێنە',
platformWallet: 'ناونیشانی جزدانی پلاتفۆرم',
txHash: 'هاشی مامەڵە',
txHashPlaceholder: '0x...',
blockNumber: 'ژمارەی بلۆک',
optional: 'ئارەزوومەندانە',
verifyDeposit: 'پشتڕاستکردنەوەی پارەدانان',
verifying: 'پشتڕاستدەکرێتەوە...',
verifyingDesc: 'مامەڵە لەسەر زنجیرە پشکنین دەکرێت. ئەمە دەکرێت تا ٦٠ چرکە بخایەنێت.',
depositSuccess: 'پارەدانان سەرکەوتوو بوو!',
depositFailed: 'پارەدانان سەرنەکەوت',
depositInstructions: 'تۆکن بنێرە بۆ ناونیشانی جزدانی پلاتفۆرمی خوارەوە، پاشان هاشی مامەڵە بلکێنە بۆ پشتڕاستکردنەوە.',
depositInvalidAmount: 'تکایە بڕێکی دروست بنووسە',
selectToken: 'تۆکن هەڵبژێرە',
withdrawAmount: 'بڕی دەرهێنان',
networkFee: 'کرێی تۆڕ',
netAmount: 'وەردەگریت',
withdrawSuccess: 'داواکاری دەرهێنان دروستکرا!',
withdrawProcessing: 'دەرهێنانەکەت لە پرۆسەدایە. تۆکنەکان بەم زووانە دەنێردرێن بۆ جزدانەکەت.',
withdrawing: 'لە پرۆسەدایە...',
minWithdraw: 'کەمترین دەرهێنان',
maxAvailable: 'زۆرترین',
walletAddress: 'ناونیشانی جزدان',
noTrades: 'هێشتا بازرگانی نییە',
},
+25
View File
@@ -396,6 +396,31 @@ const en: Translations = {
fake_payment_proof: 'Fake payment proof',
other: 'Other',
},
// Deposit / Withdraw
deposit: 'Deposit',
withdraw: 'Withdraw',
platformWallet: 'Platform Wallet Address',
txHash: 'Transaction Hash',
txHashPlaceholder: '0x...',
blockNumber: 'Block Number',
optional: 'optional',
verifyDeposit: 'Verify Deposit',
verifying: 'Verifying...',
verifyingDesc: 'Checking on-chain transaction. This may take up to 60 seconds.',
depositSuccess: 'Deposit Successful!',
depositFailed: 'Deposit Failed',
depositInstructions: 'Send tokens to the platform wallet address below, then paste the transaction hash to verify.',
depositInvalidAmount: 'Please enter a valid amount',
selectToken: 'Select Token',
withdrawAmount: 'Withdrawal Amount',
networkFee: 'Network Fee',
netAmount: 'You Receive',
withdrawSuccess: 'Withdrawal Requested!',
withdrawProcessing: 'Your withdrawal is being processed. Tokens will be sent to your wallet shortly.',
withdrawing: 'Processing...',
minWithdraw: 'Min Withdrawal',
maxAvailable: 'Max',
walletAddress: 'Wallet Address',
noTrades: 'No trades yet',
},
+25
View File
@@ -396,6 +396,31 @@ const fa: Translations = {
fake_payment_proof: 'مدرک پرداخت جعلی',
other: 'سایر',
},
// Deposit / Withdraw
deposit: 'واریز',
withdraw: 'برداشت',
platformWallet: 'آدرس کیف پول پلتفرم',
txHash: 'هش تراکنش',
txHashPlaceholder: '0x...',
blockNumber: 'شماره بلاک',
optional: 'اختیاری',
verifyDeposit: 'تایید واریز',
verifying: 'در حال تایید...',
verifyingDesc: 'تراکنش روی زنجیره بررسی می‌شود. این ممکن است تا ۶۰ ثانیه طول بکشد.',
depositSuccess: 'واریز موفق!',
depositFailed: 'واریز ناموفق',
depositInstructions: 'توکن‌ها را به آدرس کیف پول پلتفرم زیر ارسال کنید، سپس هش تراکنش را برای تایید جایگذاری کنید.',
depositInvalidAmount: 'لطفا مقدار معتبری وارد کنید',
selectToken: 'انتخاب توکن',
withdrawAmount: 'مقدار برداشت',
networkFee: 'کارمزد شبکه',
netAmount: 'دریافتی شما',
withdrawSuccess: 'درخواست برداشت ثبت شد!',
withdrawProcessing: 'برداشت شما در حال پردازش است. توکن‌ها به زودی به کیف پول شما ارسال می‌شوند.',
withdrawing: 'در حال پردازش...',
minWithdraw: 'حداقل برداشت',
maxAvailable: 'حداکثر',
walletAddress: 'آدرس کیف پول',
noTrades: 'هنوز معامله‌ای نیست',
},
+25
View File
@@ -408,6 +408,31 @@ const krd: Translations = {
fake_payment_proof: 'Belgeya dravdanê ya sexte',
other: 'Yên din',
},
// Deposit / Withdraw
deposit: 'Depo Bike',
withdraw: 'Derxe',
platformWallet: 'Navnîşana Cûzdanê ya Platformê',
txHash: 'Hash ya Danûstandinê',
txHashPlaceholder: '0x...',
blockNumber: 'Hejmara Blokê',
optional: 'ne mecbûrî',
verifyDeposit: 'Depoyê Verast Bike',
verifying: 'Tê verast kirin...',
verifyingDesc: 'Danûstandin li ser zincîrê tê kontrol kirin. Ev dikare heya 60 çirkeyan bigire.',
depositSuccess: 'Depo Serkeftî!',
depositFailed: 'Depo Serneket',
depositInstructions: 'Token bişîne navnîşana cûzdanê ya platformê ya jêrîn, paşê hash ya danûstandinê bişkoje ji bo verastkirin.',
depositInvalidAmount: 'Ji kerema xwe mîqdarek derbasdar binivîsin',
selectToken: 'Token Hilbijêrin',
withdrawAmount: 'Mîqdara Derxistinê',
networkFee: 'Heqê Torê',
netAmount: 'Hûn Digirin',
withdrawSuccess: 'Daxwaza Derxistinê Hat Afirandin!',
withdrawProcessing: 'Derxistina we tê pêvajokirin. Token dê di demeke kurt de bên şandin bo cûzdanê we.',
withdrawing: 'Tê pêvajokirin...',
minWithdraw: 'Kêmtirîn Derxistin',
maxAvailable: 'Herî zêde',
walletAddress: 'Navnîşana Cûzdanê',
noTrades: 'Hê bazirganî tune',
},
+25
View File
@@ -396,6 +396,31 @@ const tr: Translations = {
fake_payment_proof: 'Sahte ödeme kanıtı',
other: 'Diğer',
},
// Deposit / Withdraw
deposit: 'Yatır',
withdraw: 'Çek',
platformWallet: 'Platform Cüzdan Adresi',
txHash: 'İşlem Hash',
txHashPlaceholder: '0x...',
blockNumber: 'Blok Numarası',
optional: 'isteğe bağlı',
verifyDeposit: 'Yatırmayı Doğrula',
verifying: 'Doğrulanıyor...',
verifyingDesc: 'Zincir üzerinde işlem kontrol ediliyor. Bu 60 saniyeye kadar sürebilir.',
depositSuccess: 'Yatırma Başarılı!',
depositFailed: 'Yatırma Başarısız',
depositInstructions: 'Aşağıdaki platform cüzdan adresine token gönderin, ardından doğrulamak için işlem hash yapıştırın.',
depositInvalidAmount: 'Geçerli bir miktar girin',
selectToken: 'Token Seçin',
withdrawAmount: 'Çekim Miktarı',
networkFee: 'Ağ Ücreti',
netAmount: 'Alacağınız',
withdrawSuccess: 'Çekim Talebi Oluşturuldu!',
withdrawProcessing: 'Çekim işleminiz işleniyor. Tokenler kısa sürede cüzdanınıza gönderilecek.',
withdrawing: 'İşleniyor...',
minWithdraw: 'Min Çekim',
maxAvailable: 'Maks',
walletAddress: 'Cüzdan Adresi',
noTrades: 'Henüz işlem yok',
},
+25
View File
@@ -406,6 +406,31 @@ export interface Translations {
fake_payment_proof: string;
other: string;
};
// Deposit / Withdraw
deposit: string;
withdraw: string;
platformWallet: string;
txHash: string;
txHashPlaceholder: string;
blockNumber: string;
optional: string;
verifyDeposit: string;
verifying: string;
verifyingDesc: string;
depositSuccess: string;
depositFailed: string;
depositInstructions: string;
depositInvalidAmount: string;
selectToken: string;
withdrawAmount: string;
networkFee: string;
netAmount: string;
withdrawSuccess: string;
withdrawProcessing: string;
withdrawing: string;
minWithdraw: string;
maxAvailable: string;
walletAddress: string;
// No data
noTrades: string;
};
+50
View File
@@ -134,6 +134,56 @@ export async function getInternalBalance(sessionToken: string): Promise<Internal
return result.balances || [];
}
// ─── Deposit / Withdraw ─────────────────────────────────────
export interface VerifyDepositResult {
success: boolean;
amount: number;
token: string;
newBalance: number;
txHash: string;
}
export interface RequestWithdrawResult {
success: boolean;
requestId: string;
amount: number;
fee: number;
netAmount: number;
token: string;
status: string;
}
export async function verifyDeposit(
sessionToken: string,
txHash: string,
token: 'HEZ' | 'PEZ',
expectedAmount: number,
blockNumber?: number
): Promise<VerifyDepositResult> {
return callEdgeFunction<VerifyDepositResult>('verify-deposit-telegram', {
sessionToken,
txHash,
token,
expectedAmount,
blockNumber,
});
}
export async function requestWithdraw(
sessionToken: string,
token: 'HEZ' | 'PEZ',
amount: number,
walletAddress: string
): Promise<RequestWithdrawResult> {
return callEdgeFunction<RequestWithdrawResult>('request-withdraw-telegram', {
sessionToken,
token,
amount,
walletAddress,
});
}
// ─── Payment Methods ─────────────────────────────────────────
export async function getPaymentMethods(
+52 -3
View File
@@ -1,15 +1,22 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { Plus, History, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/AuthContext';
import { useTranslation } from '@/i18n';
import { useTelegram } from '@/hooks/useTelegram';
import { getP2PTrades, getMyOffers, type P2POffer, type P2PTrade } from '@/lib/p2p-api';
import {
getP2PTrades,
getMyOffers,
type P2POffer,
type P2PTrade,
type InternalBalance,
} from '@/lib/p2p-api';
import { BalanceCard } from '@/components/p2p/BalanceCard';
import { OfferList } from '@/components/p2p/OfferList';
import { TradeModal } from '@/components/p2p/TradeModal';
import { CreateOfferModal } from '@/components/p2p/CreateOfferModal';
import { TradeView } from '@/components/p2p/TradeView';
import { DepositWithdrawModal } from '@/components/p2p/DepositWithdrawModal';
type Tab = 'buy' | 'sell' | 'myAds' | 'myTrades';
@@ -23,6 +30,35 @@ export function P2PSection() {
const [showCreateOffer, setShowCreateOffer] = useState(false);
const [activeTradeId, setActiveTradeId] = useState<string | null>(null);
// Deposit/Withdraw modal state
const [showDepositWithdraw, setShowDepositWithdraw] = useState(false);
const [depositWithdrawTab, setDepositWithdrawTab] = useState<'deposit' | 'withdraw'>('deposit');
const availableBalancesRef = useRef<Record<string, number>>({});
const balanceCardRefreshRef = useRef<(() => void) | null>(null);
const handleBalancesLoaded = useCallback((balances: InternalBalance[]) => {
const map: Record<string, number> = {};
for (const b of balances) {
map[b.token] = b.available_balance;
}
availableBalancesRef.current = map;
}, []);
const handleOpenDeposit = () => {
setDepositWithdrawTab('deposit');
setShowDepositWithdraw(true);
};
const handleOpenWithdraw = () => {
setDepositWithdrawTab('withdraw');
setShowDepositWithdraw(true);
};
const handleDepositWithdrawSuccess = () => {
// Trigger balance card refresh
balanceCardRefreshRef.current?.();
};
// My ads / trades state
const [myOffers, setMyOffers] = useState<P2POffer[]>([]);
const [myTrades, setMyTrades] = useState<P2PTrade[]>([]);
@@ -145,7 +181,11 @@ export function P2PSection() {
</div>
{/* Balance Card */}
<BalanceCard />
<BalanceCard
onDeposit={handleOpenDeposit}
onWithdraw={handleOpenWithdraw}
onBalancesLoaded={handleBalancesLoaded}
/>
{/* Tabs */}
<div className="flex rounded-xl bg-muted p-1">
@@ -284,6 +324,15 @@ export function P2PSection() {
onClose={() => setShowCreateOffer(false)}
onOfferCreated={handleOfferCreated}
/>
{/* Deposit / Withdraw Modal */}
<DepositWithdrawModal
isOpen={showDepositWithdraw}
onClose={() => setShowDepositWithdraw(false)}
initialTab={depositWithdrawTab}
availableBalances={availableBalancesRef.current}
onSuccess={handleDepositWithdrawSuccess}
/>
</div>
);
}
+3 -3
View File
@@ -1,5 +1,5 @@
{
"version": "1.0.225",
"buildTime": "2026-02-26T14:51:09.120Z",
"buildNumber": 1772117469121
"version": "1.0.227",
"buildTime": "2026-02-26T17:26:18.861Z",
"buildNumber": 1772126778862
}
@@ -0,0 +1,282 @@
// request-withdraw-telegram Edge Function
// For Telegram MiniApp users - creates a withdrawal request with session token auth
// The actual blockchain TX is handled by process-withdraw (cron/admin)
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
import { createHmac } from 'https://deno.land/std@0.177.0/node/crypto.ts';
// CORS - Production domain only
const ALLOWED_ORIGINS = [
'https://telegram.pezkuwichain.io',
'https://telegram.pezkiwi.app',
'https://t.me',
];
function getCorsHeaders(origin: string | null): Record<string, string> {
const allowedOrigin =
origin && ALLOWED_ORIGINS.some((o) => origin.startsWith(o)) ? origin : ALLOWED_ORIGINS[0];
return {
'Access-Control-Allow-Origin': allowedOrigin,
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
'Access-Control-Allow-Methods': 'POST, OPTIONS',
};
}
// Minimum withdrawal amounts
const MIN_WITHDRAW: Record<string, number> = {
HEZ: 1,
PEZ: 10,
};
// Withdrawal fee (in tokens)
const WITHDRAW_FEE: Record<string, number> = {
HEZ: 0.1,
PEZ: 1,
};
interface WithdrawRequest {
sessionToken: string;
token: 'HEZ' | 'PEZ';
amount: number;
walletAddress: string;
}
// Session token secret (derived from bot token)
function getSessionSecret(botToken: string): Uint8Array {
return createHmac('sha256', 'SessionTokenSecret').update(botToken).digest();
}
// Verify HMAC-signed session token
function verifySessionToken(token: string, botToken: string): number | null {
try {
const parts = token.split('.');
if (parts.length !== 2) {
return verifyLegacyToken(token);
}
const [payloadB64, signature] = parts;
const secret = getSessionSecret(botToken);
const expectedSig = createHmac('sha256', secret).update(payloadB64).digest('hex');
if (signature !== expectedSig) {
return null;
}
const payload = JSON.parse(atob(payloadB64));
if (Date.now() > payload.exp) {
return null;
}
return payload.tgId;
} catch {
return null;
}
}
// Legacy token format (Base64 only)
function verifyLegacyToken(token: string): number | null {
try {
const decoded = atob(token);
const [telegramId, timestamp] = decoded.split(':');
const ts = parseInt(timestamp);
if (Date.now() - ts > 7 * 24 * 60 * 60 * 1000) {
return null;
}
return parseInt(telegramId);
} catch {
return null;
}
}
serve(async (req) => {
const origin = req.headers.get('origin');
const corsHeaders = getCorsHeaders(origin);
if (req.method === 'OPTIONS') {
return new Response(null, { headers: corsHeaders });
}
try {
let body: WithdrawRequest;
try {
const text = await req.text();
body = JSON.parse(text);
} catch {
return new Response(
JSON.stringify({ success: false, error: 'Invalid JSON in request body' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
const { sessionToken, token, amount, walletAddress } = body;
// Get bot token for session verification
const botToken = Deno.env.get('TELEGRAM_BOT_TOKEN');
if (!botToken) {
return new Response(
JSON.stringify({ success: false, error: 'Server configuration error' }),
{ status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// Validate session token
if (!sessionToken) {
return new Response(
JSON.stringify({ success: false, error: 'Missing session token' }),
{ status: 401, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
const telegramId = verifySessionToken(sessionToken, botToken);
if (!telegramId) {
return new Response(
JSON.stringify({ success: false, error: 'Invalid or expired session token' }),
{ status: 401, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// Create Supabase service client
const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
const serviceClient = createClient(supabaseUrl, supabaseServiceKey);
// Get auth user for telegram user
const telegramEmail = `telegram_${telegramId}@pezkuwichain.io`;
const {
data: { users: existingUsers },
} = await serviceClient.auth.admin.listUsers();
const authUser = existingUsers?.find((u) => u.email === telegramEmail);
if (!authUser) {
return new Response(
JSON.stringify({ success: false, error: 'User not found. Please deposit first.' }),
{ status: 404, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
const userId = authUser.id;
// Validate input
if (!token || !amount || !walletAddress) {
return new Response(
JSON.stringify({
success: false,
error: 'Missing required fields: token, amount, walletAddress',
}),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
if (!['HEZ', 'PEZ'].includes(token)) {
return new Response(
JSON.stringify({ success: false, error: 'Invalid token. Must be HEZ or PEZ' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
if (amount <= 0) {
return new Response(
JSON.stringify({ success: false, error: 'Amount must be greater than 0' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
if (amount < MIN_WITHDRAW[token]) {
return new Response(
JSON.stringify({
success: false,
error: `Minimum withdrawal is ${MIN_WITHDRAW[token]} ${token}`,
}),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// Validate wallet address format (Substrate SS58)
if (!walletAddress.match(/^5[A-HJ-NP-Za-km-z1-9]{47}$/)) {
return new Response(
JSON.stringify({ success: false, error: 'Invalid wallet address format' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
const fee = WITHDRAW_FEE[token];
const netAmount = amount - fee;
if (netAmount <= 0) {
return new Response(
JSON.stringify({ success: false, error: 'Amount too small after fee deduction' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// Check user's available balance
const { data: balanceData } = await serviceClient
.from('user_internal_balances')
.select('available_balance')
.eq('user_id', userId)
.eq('token', token)
.single();
if (!balanceData || balanceData.available_balance < amount) {
return new Response(
JSON.stringify({
success: false,
error: 'Insufficient balance',
available: balanceData?.available_balance || 0,
}),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// Create withdrawal request using DB function (moves available -> locked)
const { data: requestResult, error: requestError } = await serviceClient.rpc(
'request_withdraw',
{
p_user_id: userId,
p_token: token,
p_amount: amount,
p_wallet_address: walletAddress,
}
);
if (requestError || !requestResult?.success) {
return new Response(
JSON.stringify({
success: false,
error:
requestResult?.error || requestError?.message || 'Failed to create withdrawal request',
}),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
console.log(
`Withdraw request created: TelegramID=${telegramId}, Amount=${amount} ${token}, Fee=${fee}, Net=${netAmount}, Wallet=${walletAddress}`
);
return new Response(
JSON.stringify({
success: true,
requestId: requestResult.request_id,
amount,
fee,
netAmount,
token,
status: 'pending',
message: 'Withdrawal request created. Processing will begin shortly.',
}),
{ status: 200, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
} catch (error) {
console.error('Edge function error:', error);
const origin = req.headers.get('origin');
return new Response(
JSON.stringify({ success: false, error: 'Internal server error' }),
{ status: 500, headers: { ...getCorsHeaders(origin), 'Content-Type': 'application/json' } }
);
}
});