diff --git a/web/src/components/wallet/WalletConnectModal.tsx b/web/src/components/wallet/WalletConnectModal.tsx index a8553822..b45d7a47 100644 --- a/web/src/components/wallet/WalletConnectModal.tsx +++ b/web/src/components/wallet/WalletConnectModal.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { Smartphone, Loader2, CheckCircle, XCircle } from 'lucide-react'; +import { Smartphone, Loader2, CheckCircle, XCircle, ExternalLink } from 'lucide-react'; import QRCode from 'qrcode'; import { Dialog, @@ -11,6 +11,7 @@ import { } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { usePezkuwi } from '@/contexts/PezkuwiContext'; +import { useIsMobile } from '@/hooks/use-mobile'; interface WalletConnectModalProps { isOpen: boolean; @@ -22,7 +23,9 @@ type ConnectionState = 'generating' | 'waiting' | 'connected' | 'error'; export const WalletConnectModal: React.FC = ({ isOpen, onClose }) => { const { t } = useTranslation(); const { connectWalletConnect, selectedAccount, wcPeerName } = usePezkuwi(); + const isMobile = useIsMobile(); const [qrDataUrl, setQrDataUrl] = useState(''); + const [wcUri, setWcUri] = useState(''); const [connectionState, setConnectionState] = useState('generating'); const [errorMsg, setErrorMsg] = useState(''); @@ -32,24 +35,31 @@ export const WalletConnectModal: React.FC = ({ isOpen, try { const uri = await connectWalletConnect(); + setWcUri(uri); - // Generate QR code as data URL - const dataUrl = await QRCode.toDataURL(uri, { - width: 300, - margin: 2, - color: { - dark: '#000000', - light: '#ffffff', - }, - }); - - setQrDataUrl(dataUrl); - setConnectionState('waiting'); + if (isMobile) { + // Mobile: open pezWallet via deep link automatically + const deepLink = `pezkuwiwallet://wc?uri=${encodeURIComponent(uri)}`; + window.location.href = deepLink; + setConnectionState('waiting'); + } else { + // Desktop: generate QR code + const dataUrl = await QRCode.toDataURL(uri, { + width: 300, + margin: 2, + color: { + dark: '#000000', + light: '#ffffff', + }, + }); + setQrDataUrl(dataUrl); + setConnectionState('waiting'); + } } catch (err) { setConnectionState('error'); setErrorMsg(err instanceof Error ? err.message : 'Connection failed'); } - }, [connectWalletConnect]); + }, [connectWalletConnect, isMobile]); // Start connection when modal opens useEffect(() => { @@ -59,6 +69,7 @@ export const WalletConnectModal: React.FC = ({ isOpen, return () => { setQrDataUrl(''); + setWcUri(''); setConnectionState('generating'); }; }, [isOpen, startConnection]); @@ -75,6 +86,12 @@ export const WalletConnectModal: React.FC = ({ isOpen, return () => window.removeEventListener('walletconnect_connected', handleConnected); }, [onClose]); + const handleOpenPezWallet = () => { + if (wcUri) { + window.location.href = `pezkuwiwallet://wc?uri=${encodeURIComponent(wcUri)}`; + } + }; + return ( @@ -84,7 +101,9 @@ export const WalletConnectModal: React.FC = ({ isOpen, WalletConnect - {t('walletModal.wcScanQR', 'Scan with pezWallet to connect')} + {isMobile + ? t('walletModal.wcOpenWallet', 'Connect with pezWallet app') + : t('walletModal.wcScanQR', 'Scan with pezWallet to connect')} @@ -94,28 +113,59 @@ export const WalletConnectModal: React.FC = ({ isOpen,

- {t('walletModal.wcGenerating', 'Generating QR code...')} + {t('walletModal.wcGenerating', 'Generating connection...')}

)} - {/* QR Code display - waiting for scan */} - {connectionState === 'waiting' && qrDataUrl && ( + {/* Waiting state */} + {connectionState === 'waiting' && ( <> -
- WalletConnect QR Code -
-
- - {t('walletModal.wcWaiting', 'Waiting for wallet to connect...')} -
-

- {t('walletModal.wcInstructions', 'Open pezWallet app → Settings → WalletConnect → Scan QR code')} -

+ {isMobile ? ( + // Mobile: deep link button +
+
+ +
+

+ {t('walletModal.wcWaitingMobile', 'Approve the connection in pezWallet')} +

+
+ + {t('walletModal.wcWaiting', 'Waiting for wallet to connect...')} +
+ +

+ {t('walletModal.wcInstallHint', "Don't have pezWallet? It will be available on Play Store soon.")} +

+
+ ) : ( + // Desktop: QR code + <> + {qrDataUrl && ( +
+ WalletConnect QR Code +
+ )} +
+ + {t('walletModal.wcWaiting', 'Waiting for wallet to connect...')} +
+

+ {t('walletModal.wcInstructions', 'Open pezWallet app → Settings → WalletConnect → Scan QR code')} +

+ + )} )} diff --git a/web/src/i18n/locales/ar.ts b/web/src/i18n/locales/ar.ts index 90a6a768..b46c7973 100644 --- a/web/src/i18n/locales/ar.ts +++ b/web/src/i18n/locales/ar.ts @@ -1827,6 +1827,10 @@ export default { 'walletModal.or': 'أو', 'walletModal.connectWC': 'اتصل عبر pezWallet (الجوال)', 'walletModal.wcScanQR': 'امسح بـ pezWallet للاتصال', + 'walletModal.wcOpenWallet': 'اتصل بتطبيق pezWallet', + 'walletModal.wcWaitingMobile': 'وافق على الاتصال في pezWallet', + 'walletModal.wcOpenApp': 'افتح pezWallet', + 'walletModal.wcInstallHint': 'ليس لديك pezWallet؟ سيكون متاحاً قريباً على Play Store.', 'walletModal.wcGenerating': 'جاري إنشاء رمز QR...', 'walletModal.wcWaiting': 'في انتظار اتصال المحفظة...', 'walletModal.wcConnected': 'تم الاتصال!', diff --git a/web/src/i18n/locales/ckb.ts b/web/src/i18n/locales/ckb.ts index ed622689..23024ba6 100644 --- a/web/src/i18n/locales/ckb.ts +++ b/web/src/i18n/locales/ckb.ts @@ -1817,6 +1817,10 @@ export default { 'walletModal.or': 'یان', 'walletModal.connectWC': 'بە pezWallet پەیوەندی بکە (مۆبایل)', 'walletModal.wcScanQR': 'بۆ پەیوەندیکردن بە pezWallet سکان بکە', + 'walletModal.wcOpenWallet': 'بە pezWallet پەیوەندی بکە', + 'walletModal.wcWaitingMobile': 'لە pezWallet پەیوەندییەکە پشتڕاست بکەوە', + 'walletModal.wcOpenApp': 'pezWallet بکەوە', + 'walletModal.wcInstallHint': 'pezWallet نییە؟ بەم زووانە لە Play Store بەردەست دەبێت.', 'walletModal.wcGenerating': 'QR کۆد دروستدەکرێت...', 'walletModal.wcWaiting': 'چاوەڕوانی پەیوەندیکردنی جزدان...', 'walletModal.wcConnected': 'پەیوەندی کرا!', diff --git a/web/src/i18n/locales/en.ts b/web/src/i18n/locales/en.ts index 78e0b8fe..4e9cdc07 100644 --- a/web/src/i18n/locales/en.ts +++ b/web/src/i18n/locales/en.ts @@ -2186,8 +2186,12 @@ export default { 'walletModal.or': 'or', 'walletModal.connectWC': 'Connect with pezWallet (Mobile)', 'walletModal.wcScanQR': 'Scan with pezWallet to connect', - 'walletModal.wcGenerating': 'Generating QR code...', + 'walletModal.wcOpenWallet': 'Connect with pezWallet app', + 'walletModal.wcGenerating': 'Generating connection...', 'walletModal.wcWaiting': 'Waiting for wallet to connect...', + 'walletModal.wcWaitingMobile': 'Approve the connection in pezWallet', + 'walletModal.wcOpenApp': 'Open pezWallet', + 'walletModal.wcInstallHint': "Don't have pezWallet? It will be available on Play Store soon.", 'walletModal.wcConnected': 'Connected!', 'walletModal.wcInstructions': 'Open pezWallet app → Settings → WalletConnect → Scan QR code', 'walletModal.wcRetry': 'Try Again', diff --git a/web/src/i18n/locales/fa.ts b/web/src/i18n/locales/fa.ts index e5bc1aee..ae9ae376 100644 --- a/web/src/i18n/locales/fa.ts +++ b/web/src/i18n/locales/fa.ts @@ -1787,6 +1787,10 @@ export default { 'walletModal.or': 'یا', 'walletModal.connectWC': 'اتصال با pezWallet (موبایل)', 'walletModal.wcScanQR': 'برای اتصال با pezWallet اسکن کنید', + 'walletModal.wcOpenWallet': 'اتصال با اپلیکیشن pezWallet', + 'walletModal.wcWaitingMobile': 'اتصال را در pezWallet تأیید کنید', + 'walletModal.wcOpenApp': 'باز کردن pezWallet', + 'walletModal.wcInstallHint': 'pezWallet ندارید؟ به زودی در Play Store در دسترس خواهد بود.', 'walletModal.wcGenerating': 'در حال ایجاد کد QR...', 'walletModal.wcWaiting': 'در انتظار اتصال کیف پول...', 'walletModal.wcConnected': 'متصل شد!', diff --git a/web/src/i18n/locales/kmr.ts b/web/src/i18n/locales/kmr.ts index 2548ef1b..89a8886e 100644 --- a/web/src/i18n/locales/kmr.ts +++ b/web/src/i18n/locales/kmr.ts @@ -1844,6 +1844,10 @@ export default { 'walletModal.or': 'an jî', 'walletModal.connectWC': 'Bi pezWallet ve girêbide (Mobîl)', 'walletModal.wcScanQR': 'Ji bo girêdanê bi pezWallet re bişopîne', + 'walletModal.wcOpenWallet': 'Bi pezWallet ve girêbide', + 'walletModal.wcWaitingMobile': 'Di pezWallet de girêdanê bipejirîne', + 'walletModal.wcOpenApp': 'pezWallet Veke', + 'walletModal.wcInstallHint': 'pezWallet tune? Di demek nêzîk de li Play Store dê hebe.', 'walletModal.wcGenerating': 'QR kod tê çêkirin...', 'walletModal.wcWaiting': 'Li benda girêdana berîkê...', 'walletModal.wcConnected': 'Girêdayî!', diff --git a/web/src/i18n/locales/tr.ts b/web/src/i18n/locales/tr.ts index c438cbbf..48de8801 100644 --- a/web/src/i18n/locales/tr.ts +++ b/web/src/i18n/locales/tr.ts @@ -1838,6 +1838,10 @@ export default { 'walletModal.or': 'veya', 'walletModal.connectWC': 'pezWallet ile Bağlan (Mobil)', 'walletModal.wcScanQR': 'Bağlanmak için pezWallet ile tarayın', + 'walletModal.wcOpenWallet': 'pezWallet uygulamasıyla bağlan', + 'walletModal.wcWaitingMobile': 'pezWallet\'ta bağlantıyı onaylayın', + 'walletModal.wcOpenApp': 'pezWallet\'ı Aç', + 'walletModal.wcInstallHint': 'pezWallet yok mu? Yakında Play Store\'da olacak.', 'walletModal.wcGenerating': 'QR kod oluşturuluyor...', 'walletModal.wcWaiting': 'Cüzdan bağlantısı bekleniyor...', 'walletModal.wcConnected': 'Bağlandı!',