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

src/components/p2p/BalanceCard.tsx

@@ -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>
   );
 }

src/components/p2p/DepositWithdrawModal.tsx

@@ -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>
+  );
+}