fix(wallet-modal): add loading state for extension connect, fix Play Store link

- Extension button now shows 'Approve in extension...' spinner while web3Enable waits
- Add generic error fallback for errors not matching 'authorize'/'not found' patterns
- Replace 'Coming soon on Play Store' with real Play Store download link (io.pezkuwichain.wallet)
- WalletConnectModal mobile hint now links directly to Play Store
- Updated in all 6 locales: en, tr, ar, fa, kmr, ckb
This commit is contained in:
2026-05-05 08:28:52 +03:00
parent 67bc28cff4
commit f024d21cf5
8 changed files with 80 additions and 20 deletions
@@ -165,9 +165,14 @@ export const WalletConnectModal: React.FC<WalletConnectModalProps> = ({ isOpen,
<ExternalLink className="mr-2 h-4 w-4" />
{t('walletModal.wcOpenApp', 'Open pezWallet')}
</Button>
<p className="text-xs text-gray-500 text-center">
{t('walletModal.wcInstallHint', "Don't have pezWallet? It will be available on Play Store soon.")}
</p>
<a
href="https://play.google.com/store/apps/details?id=io.pezkuwichain.wallet"
target="_blank"
rel="noopener noreferrer"
className="text-xs text-gray-500 text-center hover:text-purple-400 transition-colors"
>
{t('walletModal.wcInstallHint', "Don't have pezWallet? Download it on Play Store.")}
</a>
</div>
) : (
// Desktop: QR code
+48 -5
View File
@@ -40,6 +40,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
const isMobile = useIsMobile();
const [copied, setCopied] = useState(false);
const [showWCModal, setShowWCModal] = useState(false);
const [isConnecting, setIsConnecting] = useState(false);
const [scores, setScores] = useState<UserScores>({
trustScore: 0,
referralScore: 0,
@@ -58,7 +59,12 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
};
const handleConnect = async () => {
await connectWallet();
setIsConnecting(true);
try {
await connectWallet();
} finally {
setIsConnecting(false);
}
};
const handleSelectAccount = (account: typeof accounts[0]) => {
@@ -169,6 +175,32 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
</div>
)}
{/* Generic Error - any error not caught above */}
{error && !error.includes('authorize') && !error.includes('not found') && (
<div className="space-y-4">
<div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
<p className="text-sm text-red-300">{error}</p>
</div>
<Button
onClick={handleConnect}
className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
disabled={isConnecting}
>
{isConnecting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t('walletModal.connectingExtension', 'Approve in extension...')}
</>
) : (
<>
<Wallet className="mr-2 h-4 w-4" />
{t('walletModal.tryAgain')}
</>
)}
</Button>
</div>
)}
{/* Connected State */}
{selectedAccount && !error && (
<div className="space-y-4">
@@ -351,13 +383,18 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
onClick={handleConnect}
className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
size="sm"
disabled={isApiInitializing}
disabled={isApiInitializing || isConnecting}
>
{isApiInitializing ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t('walletModal.connectingBlockchain', 'Connecting to blockchain...')}
</>
) : isConnecting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t('walletModal.connectingExtension', 'Approve in extension...')}
</>
) : (
<>
<Wallet className="mr-2 h-4 w-4" />
@@ -405,9 +442,15 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
</>
)}
</Button>
<div className="flex items-center justify-center gap-1 text-xs text-gray-400">
{t('walletModal.mobileComingSoon')}
</div>
<a
href="https://play.google.com/store/apps/details?id=io.pezkuwichain.wallet"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-1 text-xs text-gray-400 hover:text-purple-400 transition-colors"
>
<ExternalLink className="h-3 w-3" />
{t('walletModal.mobilePlayStore', 'Download on Play Store')}
</a>
</div>
</div>
)}
+4 -2
View File
@@ -1840,14 +1840,16 @@ export default {
'walletModal.mobileTitle': 'محفظة الجوال',
'walletModal.mobileDesc': 'للجوال — امسح رمز QR بتطبيق pezWallet',
'walletModal.mobileConnect': 'اتصل بـ pezWallet',
'walletModal.mobileComingSoon': 'قريباً على Play Store',
'walletModal.mobileComingSoon': 'تنزيل من Play Store',
'walletModal.mobilePlayStore': 'تنزيل من Play Store',
'walletModal.connectingExtension': 'وافق في الإضافة...',
'walletModal.or': 'أو',
'walletModal.connectWC': 'اتصل عبر pezWallet (الجوال)',
'walletModal.wcScanQR': 'امسح بـ pezWallet للاتصال',
'walletModal.wcOpenWallet': 'اتصل بتطبيق pezWallet',
'walletModal.wcWaitingMobile': 'وافق على الاتصال في pezWallet',
'walletModal.wcOpenApp': 'افتح pezWallet',
'walletModal.wcInstallHint': 'ليس لديك pezWallet؟ سيكون متاحاً قريباً على Play Store.',
'walletModal.wcInstallHint': 'ليس لديك pezWallet؟ حمّله من Play Store.',
'walletModal.wcGenerating': 'جاري إنشاء رمز QR...',
'walletModal.wcWaiting': 'في انتظار اتصال المحفظة...',
'walletModal.wcConnected': 'تم الاتصال!',
+4 -2
View File
@@ -1830,14 +1830,16 @@ export default {
'walletModal.mobileTitle': 'جزدانی مۆبایل',
'walletModal.mobileDesc': 'بۆ مۆبایل — بە pezWallet QR کۆد بخوێنەوە',
'walletModal.mobileConnect': 'بە pezWallet پەیوەندی بکە',
'walletModal.mobileComingSoon': 'بەم زووانە لە Play Store',
'walletModal.mobileComingSoon': 'دابەزاندن لە Play Store',
'walletModal.mobilePlayStore': 'دابەزاندن لە Play Store',
'walletModal.connectingExtension': 'لە پێوەکراوەکەدا پەسەندی بکە...',
'walletModal.or': 'یان',
'walletModal.connectWC': 'بە pezWallet پەیوەندی بکە (مۆبایل)',
'walletModal.wcScanQR': 'بۆ پەیوەندیکردن بە pezWallet سکان بکە',
'walletModal.wcOpenWallet': 'بە pezWallet پەیوەندی بکە',
'walletModal.wcWaitingMobile': 'لە pezWallet پەیوەندییەکە پشتڕاست بکەوە',
'walletModal.wcOpenApp': 'pezWallet بکەوە',
'walletModal.wcInstallHint': 'pezWallet نییە؟ بەم زووانە لە Play Store بەردەست دەبێت.',
'walletModal.wcInstallHint': 'pezWallet نییە؟ لە Play Store دابەزێنە.',
'walletModal.wcGenerating': 'QR کۆد دروستدەکرێت...',
'walletModal.wcWaiting': 'چاوەڕوانی پەیوەندیکردنی جزدان...',
'walletModal.wcConnected': 'پەیوەندی کرا!',
+4 -2
View File
@@ -2199,7 +2199,9 @@ export default {
'walletModal.mobileTitle': 'Mobile Wallet',
'walletModal.mobileDesc': 'For mobile — scan QR code with pezWallet app',
'walletModal.mobileConnect': 'Connect with pezWallet',
'walletModal.mobileComingSoon': 'Coming soon on Play Store',
'walletModal.mobileComingSoon': 'Download on Play Store',
'walletModal.mobilePlayStore': 'Download on Play Store',
'walletModal.connectingExtension': 'Approve in extension...',
'walletModal.or': 'or',
'walletModal.connectWC': 'Connect with pezWallet (Mobile)',
'walletModal.wcScanQR': 'Scan with pezWallet to connect',
@@ -2208,7 +2210,7 @@ export default {
'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.wcInstallHint': "Don't have pezWallet? Download it on Play Store.",
'walletModal.wcConnected': 'Connected!',
'walletModal.wcInstructions': 'Open pezWallet app → Settings → WalletConnect → Scan QR code',
'walletModal.wcRetry': 'Try Again',
+4 -2
View File
@@ -1800,14 +1800,16 @@ export default {
'walletModal.mobileTitle': 'کیف پول موبایل',
'walletModal.mobileDesc': 'برای موبایل — کد QR را با اپلیکیشن pezWallet اسکن کنید',
'walletModal.mobileConnect': 'اتصال با pezWallet',
'walletModal.mobileComingSoon': 'به زودی در Play Store',
'walletModal.mobileComingSoon': 'دانلود از Play Store',
'walletModal.mobilePlayStore': 'دانلود از Play Store',
'walletModal.connectingExtension': 'در افزونه تأیید کنید...',
'walletModal.or': 'یا',
'walletModal.connectWC': 'اتصال با pezWallet (موبایل)',
'walletModal.wcScanQR': 'برای اتصال با pezWallet اسکن کنید',
'walletModal.wcOpenWallet': 'اتصال با اپلیکیشن pezWallet',
'walletModal.wcWaitingMobile': 'اتصال را در pezWallet تأیید کنید',
'walletModal.wcOpenApp': 'باز کردن pezWallet',
'walletModal.wcInstallHint': 'pezWallet ندارید؟ به زودی در Play Store در دسترس خواهد بود.',
'walletModal.wcInstallHint': 'pezWallet ندارید؟ از Play Store دانلود کنید.',
'walletModal.wcGenerating': 'در حال ایجاد کد QR...',
'walletModal.wcWaiting': 'در انتظار اتصال کیف پول...',
'walletModal.wcConnected': 'متصل شد!',
+4 -2
View File
@@ -1857,14 +1857,16 @@ export default {
'walletModal.mobileTitle': 'Berîka Mobîl',
'walletModal.mobileDesc': 'Ji bo mobîl — bi pezWallet QR kodê bişopîne',
'walletModal.mobileConnect': 'Bi pezWallet Ve Girêbide',
'walletModal.mobileComingSoon': 'Di nêzîk de li Play Store',
'walletModal.mobileComingSoon': 'Ji Play Store dakêşin',
'walletModal.mobilePlayStore': 'Ji Play Store dakêşin',
'walletModal.connectingExtension': 'Di pêvekê de erê bikin...',
'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.wcInstallHint': 'pezWallet tune? Ji Play Store dakêşin.',
'walletModal.wcGenerating': 'QR kod tê çêkirin...',
'walletModal.wcWaiting': 'Li benda girêdana berîkê...',
'walletModal.wcConnected': 'Girêdayî!',
+4 -2
View File
@@ -1851,14 +1851,16 @@ export default {
'walletModal.mobileTitle': 'Mobil Cüzdan',
'walletModal.mobileDesc': 'Mobil için — pezWallet uygulamasıyla QR kodu tarayın',
'walletModal.mobileConnect': 'pezWallet ile Bağlan',
'walletModal.mobileComingSoon': 'Yakında Play Store\'da',
'walletModal.mobileComingSoon': 'Play Store\'dan İndir',
'walletModal.mobilePlayStore': 'Play Store\'dan İndir',
'walletModal.connectingExtension': 'Uzantıda onaylayın...',
'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.wcInstallHint': 'pezWallet yok mu? Play Store\'dan indirin.',
'walletModal.wcGenerating': 'QR kod oluşturuluyor...',
'walletModal.wcWaiting': 'Cüzdan bağlantısı bekleniyor...',
'walletModal.wcConnected': 'Bağlandı!',