diff --git a/web/src/components/p2p/DepositModal.tsx b/web/src/components/p2p/DepositModal.tsx index e365fda8..e734da63 100644 --- a/web/src/components/p2p/DepositModal.tsx +++ b/web/src/components/p2p/DepositModal.tsx @@ -25,7 +25,6 @@ import { Copy, CheckCircle2, AlertTriangle, - ExternalLink, QrCode, Wallet } from 'lucide-react'; @@ -45,7 +44,7 @@ interface DepositModalProps { onSuccess?: () => void; } -type DepositStep = 'select' | 'send' | 'verify' | 'success'; +type DepositStep = 'select' | 'send' | 'verifying' | 'success'; export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) { const { t } = useTranslation(); @@ -61,7 +60,7 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) const [blockNumber, setBlockNumber] = useState(); const [loading, setLoading] = useState(false); const [copied, setCopied] = useState(false); - const [verifying, setVerifying] = useState(false); + const [verifyError, setVerifyError] = useState(''); // Fetch platform wallet address on mount useEffect(() => { @@ -83,7 +82,7 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) setBlockNumber(undefined); setLoading(false); setCopied(false); - setVerifying(false); + setVerifyError(''); }; const handleClose = () => { @@ -145,14 +144,18 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) if (hash) { setTxHash(hash); // Capture approximate block number for faster verification + let blockNum: number | undefined; try { const header = await assetHubApi.rpc.chain.getHeader(); - setBlockNumber(header.number.toNumber()); + blockNum = header.number.toNumber(); + setBlockNumber(blockNum); } catch { // Non-critical - verification will still work via search } - setStep('verify'); + setStep('verifying'); toast.success(t('p2pDeposit.txSent')); + // Auto-verify immediately — fire and forget + handleVerifyDeposit(hash, blockNum); } } catch (error: unknown) { console.error('Deposit transaction error:', error); @@ -163,8 +166,11 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) } }; - const handleVerifyDeposit = async () => { - if (!txHash) { + const handleVerifyDeposit = async (hash?: string, blockNum?: number) => { + const verifyHash = hash || txHash; + const verifyBlockNumber = blockNum !== undefined ? blockNum : blockNumber; + + if (!verifyHash) { toast.error(t('p2pDeposit.enterTxHash')); return; } @@ -175,11 +181,10 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) return; } - setVerifying(true); + setVerifyError(''); + setStep('verifying'); try { - // Call the Edge Function for secure deposit verification - // Use fetch directly to read response body on all status codes const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY; const res = await fetch(`${supabaseUrl}/functions/v1/verify-deposit`, { @@ -190,12 +195,12 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) 'apikey': supabaseKey, }, body: JSON.stringify({ - txHash, + txHash: verifyHash, token, expectedAmount: depositAmount, walletAddress: selectedAccount?.address, identityId, - ...(blockNumber ? { blockNumber } : {}) + ...(verifyBlockNumber ? { blockNumber: verifyBlockNumber } : {}) }) }); @@ -211,9 +216,7 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) } catch (error) { console.error('Verify deposit error:', error); const message = error instanceof Error ? error.message : t('p2pDeposit.verificationFailed'); - toast.error(message); - } finally { - setVerifying(false); + setVerifyError(message); } }; @@ -351,67 +354,80 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) ); - case 'verify': + case 'verifying': return (
- - - - {t('p2pDeposit.txSentVerify')} - - - -
- -
- setTxHash(e.target.value)} - placeholder="0x..." - className="font-mono text-xs" - /> - -
-
- -
-
-
-

{t('p2pDeposit.tokenLabel')}

-

{token}

+ {verifyError ? ( + <> +
+
+ +
+
+

+ {t('p2pDeposit.verifyFailed')} +

+

{verifyError}

+
+ +
+
+
+

{t('p2pDeposit.tokenLabel')}

+

{token}

+
+
+

{t('p2pDeposit.amountLabel')}

+

{amount}

+
+
+ {txHash && ( +
+

TX

+

{txHash}

+
+ )} +
+ +
+ + +
+ + ) : ( +
+
-

{t('p2pDeposit.amountLabel')}

-

{amount}

+

{t('p2pDeposit.autoVerifying')}

+

+ {t('p2pDeposit.autoVerifyingDesc')} +

+
+
+
+
+

{t('p2pDeposit.tokenLabel')}

+

{token}

+
+
+

{t('p2pDeposit.amountLabel')}

+

{amount}

+
+
+ {txHash && ( +
+

TX

+

{txHash}

+
+ )}
-
- - - - - + )}
); @@ -457,7 +473,7 @@ export function DepositModal({ isOpen, onClose, onSuccess }: DepositModalProps) {step === 'select' && t('p2pDeposit.selectStep')} {step === 'send' && t('p2pDeposit.sendStep')} - {step === 'verify' && t('p2pDeposit.verifyStep')} + {step === 'verifying' && t('p2pDeposit.autoVerifying')} )} diff --git a/web/src/i18n/locales/ar.ts b/web/src/i18n/locales/ar.ts index d899948a..1bbba162 100644 --- a/web/src/i18n/locales/ar.ts +++ b/web/src/i18n/locales/ar.ts @@ -1248,6 +1248,10 @@ export default { 'p2pDeposit.tokenLabel': 'الرمز', 'p2pDeposit.amountLabel': 'المبلغ', 'p2pDeposit.done': 'تم', + 'p2pDeposit.autoVerifying': 'جاري التحقق من الإيداع...', + 'p2pDeposit.autoVerifyingDesc': 'جاري البحث عن معاملتك في البلوكتشين...', + 'p2pDeposit.verifyFailed': 'فشل التحقق', + 'p2pDeposit.retry': 'حاول مرة أخرى', 'p2pWithdraw.title': 'سحب من رصيد P2P', 'p2pWithdraw.formStep': 'اسحب عملة رقمية من رصيد P2P إلى محفظة خارجية', diff --git a/web/src/i18n/locales/ckb.ts b/web/src/i18n/locales/ckb.ts index dd16d26f..9b8f8183 100644 --- a/web/src/i18n/locales/ckb.ts +++ b/web/src/i18n/locales/ckb.ts @@ -1238,6 +1238,10 @@ export default { 'p2pDeposit.tokenLabel': 'تۆکن', 'p2pDeposit.amountLabel': 'بڕ', 'p2pDeposit.done': 'تەواو', + 'p2pDeposit.autoVerifying': 'دانان لە پشتڕاستکردنەوەدایە...', + 'p2pDeposit.autoVerifyingDesc': 'لە بلۆکچەین بۆ مامەڵەکەت دەگەڕێت...', + 'p2pDeposit.verifyFailed': 'پشتڕاستکردنەوە سەرکەوتوو نەبوو', + 'p2pDeposit.retry': 'دووبارە هەوڵ بدەوە', 'p2pWithdraw.title': 'دەرهێنان لە باڵانسی P2P', 'p2pWithdraw.formStep': 'لە باڵانسی P2P کریپتۆ دەربهێنە بۆ جزدانی دەرەکی', diff --git a/web/src/i18n/locales/en.ts b/web/src/i18n/locales/en.ts index c9fcf810..c0f8f4ce 100644 --- a/web/src/i18n/locales/en.ts +++ b/web/src/i18n/locales/en.ts @@ -1591,6 +1591,10 @@ export default { 'p2pDeposit.tokenLabel': 'Token', 'p2pDeposit.amountLabel': 'Amount', 'p2pDeposit.done': 'Done', + 'p2pDeposit.autoVerifying': 'Verifying deposit...', + 'p2pDeposit.autoVerifyingDesc': 'Searching for your transaction on blockchain...', + 'p2pDeposit.verifyFailed': 'Verification failed', + 'p2pDeposit.retry': 'Try Again', // WithdrawModal 'p2pWithdraw.title': 'Withdraw from P2P Balance', diff --git a/web/src/i18n/locales/fa.ts b/web/src/i18n/locales/fa.ts index e8dfd6cb..9b12fe45 100644 --- a/web/src/i18n/locales/fa.ts +++ b/web/src/i18n/locales/fa.ts @@ -1261,6 +1261,10 @@ export default { 'p2pDeposit.tokenLabel': 'توکن', 'p2pDeposit.amountLabel': 'مقدار', 'p2pDeposit.done': 'انجام شد', + 'p2pDeposit.autoVerifying': 'واریز در حال تأیید...', + 'p2pDeposit.autoVerifyingDesc': 'در حال جستجوی تراکنش شما در بلاکچین...', + 'p2pDeposit.verifyFailed': 'تأیید ناموفق بود', + 'p2pDeposit.retry': 'تلاش مجدد', // WithdrawModal 'p2pWithdraw.title': 'برداشت از موجودی P2P', diff --git a/web/src/i18n/locales/kmr.ts b/web/src/i18n/locales/kmr.ts index 4136c703..4be893c3 100644 --- a/web/src/i18n/locales/kmr.ts +++ b/web/src/i18n/locales/kmr.ts @@ -1253,6 +1253,10 @@ export default { 'p2pDeposit.tokenLabel': 'Token', 'p2pDeposit.amountLabel': 'Miqdar', 'p2pDeposit.done': 'Temam', + 'p2pDeposit.autoVerifying': 'Danîn tê piştrastkirin...', + 'p2pDeposit.autoVerifyingDesc': 'Li blockchain kirrûbirê te tê lêgerîn...', + 'p2pDeposit.verifyFailed': 'Piştrastkirin bi ser neket', + 'p2pDeposit.retry': 'Dîsa Biceribîne', // WithdrawModal 'p2pWithdraw.title': 'Ji Hesabê P2P Vekişîne', diff --git a/web/src/i18n/locales/tr.ts b/web/src/i18n/locales/tr.ts index 92a5db79..21188405 100644 --- a/web/src/i18n/locales/tr.ts +++ b/web/src/i18n/locales/tr.ts @@ -1247,6 +1247,10 @@ export default { 'p2pDeposit.tokenLabel': 'Token', 'p2pDeposit.amountLabel': 'Miktar', 'p2pDeposit.done': 'Tamam', + 'p2pDeposit.autoVerifying': 'Yatırım doğrulanıyor...', + 'p2pDeposit.autoVerifyingDesc': "Blockchain'de işleminiz aranıyor...", + 'p2pDeposit.verifyFailed': 'Doğrulama başarısız oldu', + 'p2pDeposit.retry': 'Tekrar Dene', // WithdrawModal 'p2pWithdraw.title': 'P2P Bakiyeden Çekim',