From 1caad3ad796780d52d5dd610ccb6b612fb40f2ff Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Wed, 29 Oct 2025 02:02:11 +0300
Subject: [PATCH] feat: Major UI improvements and DEX integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Features:
- Improved navbar with proper flex layout and spacing
- Added Governance and Trading dropdown menus
- Integrated TokenSwap with AssetConversion pallet support
- Added DEX availability check with fallback UI

🎨 UI Improvements:
- Fixed navbar logo positioning (left-aligned)
- Menu items flow naturally from left to right
- Responsive design improvements
- Updated social media links in footer

🔧 Technical:
- Real-time balance queries from Assets pallet
- Exchange rate calculation from liquidity pools
- Slippage protection
- Transaction event monitoring

📝 Modified files:
- AppLayout.tsx: Navbar restructure
- TokenSwap.tsx: DEX integration
- WalletModal.tsx: Wallet improvements
- Login.tsx: Auth updates
---
 src/components/AppLayout.tsx          | 287 ++++++++++---------
 src/components/TokenSwap.tsx          | 381 +++++++++++++++++++++-----
 src/components/wallet/WalletModal.tsx | 267 ++++++++++++------
 src/pages/Login.tsx                   |  49 ++--
 4 files changed, 682 insertions(+), 302 deletions(-)

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 4a75ab24..bd5c86d1 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -71,180 +71,180 @@ const AppLayout: React.FC = () => {
     <div className="min-h-screen bg-gray-950 text-white">
       {/* Navigation */}
       <nav className="fixed top-0 w-full z-40 bg-gray-950/90 backdrop-blur-md border-b border-gray-800">
-        <div className="container mx-auto px-8">
+        <div className="w-full px-4">
           <div className="flex items-center justify-between h-16">
-            <div className="flex items-center">
-              <span className="text-xl font-bold bg-gradient-to-r from-green-500 to-yellow-400 bg-clip-text text-transparent">
+            {/* LEFT: Logo */}
+            <div className="flex-shrink-0">
+              <span className="text-lg font-bold bg-gradient-to-r from-green-500 to-yellow-400 bg-clip-text text-transparent whitespace-nowrap">
                 PezkuwiChain
               </span>
             </div>
             
-            <div className="hidden md:flex items-center space-x-8">
+            {/* CENTER & RIGHT: Menu + Actions in same row */}
+            <div className="hidden lg:flex items-center space-x-4 flex-1 justify-start ml-8 pr-4">
               {user ? (
                 <>
                   <button 
                     onClick={() => navigate('/dashboard')}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
+                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm"
                   >
                     <LayoutDashboard className="w-4 h-4" />
-
-                    {t('nav.dashboard', 'Dashboard')}
+                    Dashboard
                   </button>
+                  
                   <button
                     onClick={() => navigate('/wallet')}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
+                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm"
                   >
                     <Wallet className="w-4 h-4" />
-                    {t('nav.wallet', 'Wallet')}
+                    Wallet
                   </button>
+
+                  {/* Governance Dropdown */}
+                  <div className="relative group">
+                    <button className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm">
+                      <FileEdit className="w-4 h-4" />
+                      Governance
+                      <svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                    <div className="absolute left-0 mt-2 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+                      <button 
+                        onClick={() => setShowProposalWizard(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg"
+                      >
+                        <FileEdit className="w-4 h-4" />
+                        {t('nav.proposals')}
+                      </button>
+                      <button 
+                        onClick={() => setShowDelegation(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
+                      >
+                        <Users2 className="w-4 h-4" />
+                        {t('nav.delegation')}
+                      </button>
+                      <button 
+                        onClick={() => setShowForum(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
+                      >
+                        <MessageSquare className="w-4 h-4" />
+                        {t('nav.forum')}
+                      </button>
+                      <button 
+                        onClick={() => {
+                          setShowTreasury(true);
+                          setTreasuryTab('overview');
+                        }}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
+                      >
+                        <PiggyBank className="w-4 h-4" />
+                        {t('nav.treasury')}
+                      </button>
+                      <button 
+                        onClick={() => setShowModeration(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-b-lg"
+                      >
+                        <ShieldCheck className="w-4 h-4" />
+                        {t('nav.moderation')}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Trading Dropdown */}
+                  <div className="relative group">
+                    <button className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm">
+                      <ArrowRightLeft className="w-4 h-4" />
+                      Trading
+                      <svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                    <div className="absolute left-0 mt-2 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+                      <button 
+                        onClick={() => setShowTokenSwap(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg"
+                      >
+                        <Repeat className="w-4 h-4" />
+                        Token Swap
+                      </button>
+                      <button 
+                        onClick={() => setShowP2P(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
+                      >
+                        <ArrowRightLeft className="w-4 h-4" />
+                        P2P Market
+                      </button>
+                      <button 
+                        onClick={() => setShowStaking(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
+                      >
+                        <TrendingUp className="w-4 h-4" />
+                        Staking
+                      </button>
+                      <button 
+                        onClick={() => setShowMultiSig(true)}
+                        className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-b-lg"
+                      >
+                        <Lock className="w-4 h-4" />
+                        MultiSig
+                      </button>
+                    </div>
+                  </div>
+
                   <button 
                     onClick={() => navigate('/profile-settings')}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
+                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm"
                   >
                     <Settings className="w-4 h-4" />
-                    {t('nav.settings', 'Settings')}
-                  </button>
-                  {isAdmin && (
-                    <button 
-                      onClick={() => navigate('/admin')}
-                      className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                    >
-                      <UserCog className="w-4 h-4" />
-                      {t('nav.admin', 'Admin')}
-                    </button>
-                  )}
-                  <button 
-                    onClick={() => setShowProposalWizard(true)}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                  >
-                    <FileEdit className="w-4 h-4" />
-                    {t('nav.proposals')}
-                  </button>
-                  <button 
-                    onClick={() => setShowDelegation(true)}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                  >
-                    <Users2 className="w-4 h-4" />
-                    {t('nav.delegation')}
-                  </button>
-                  <button 
-                    onClick={() => setShowForum(true)}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                  >
-                    <MessageSquare className="w-4 h-4" />
-                    {t('nav.forum')}
-                  </button>
-                  <button 
-                    onClick={() => {
-                      setShowTreasury(true);
-                      setTreasuryTab('overview');
-                    }}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                  >
-                    <PiggyBank className="w-4 h-4" />
-                    {t('nav.treasury')}
-                  </button>
-                  <button 
-                    onClick={() => setShowModeration(true)}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-                  >
-                    <ShieldCheck className="w-4 h-4" />
-                    {t('nav.moderation')}
+                    Settings
                   </button>
+                  
                   <button 
                     onClick={async () => {
                       await signOut();
                       navigate('/login');
                     }}
-                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
+                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1 text-sm"
                   >
                     <LogIn className="w-4 h-4 rotate-180" />
-                    {t('nav.logout', 'Logout')}
+                    Logout
                   </button>
                 </>
               ) : (
                 <button 
                   onClick={() => navigate('/login')}
-                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2 text-sm"
                 >
                   <LogIn className="w-4 h-4" />
-                  {t('nav.login', 'Login')}
+                  Login
                 </button>
               )}
-              <button 
-                onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
-                className="text-gray-300 hover:text-white transition-colors"
-              >
-                {t('nav.governance')}
-              </button>
-
               
-              <button 
-                onClick={() => setShowStaking(true)}
-                className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-              >
-                <TrendingUp className="w-4 h-4" />
-                Staking
-              </button>
-              
-              <button 
-                onClick={() => setShowP2P(true)}
-                className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-              >
-                <ArrowRightLeft className="w-4 h-4" />
-                P2P
-              </button>
-              
-              <button 
-                onClick={() => setShowTokenSwap(true)}
-                className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-              >
-                <Repeat className="w-4 h-4" />
-                Token Swap
-              </button>
-
-              <button 
-                onClick={() => setShowMultiSig(true)}
-                className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
-              >
-                <Lock className="w-4 h-4" />
-                MultiSig
-              </button>
               <a 
                 href="https://docs.pezkuwichain.io" 
                 target="_blank" 
                 rel="noopener noreferrer"
-                className="text-gray-300 hover:text-white transition-colors"
+                className="text-gray-300 hover:text-white transition-colors text-sm"
               >
-                {t('nav.docs')}
+                Docs
               </a>
-            </div>
 
-            <div className="flex items-center space-x-4">
-              <div className="flex items-center space-x-2">
+              {/* Divider */}
+              <div className="w-px h-6 bg-gray-700"></div>
+
+              {/* Actions continue after Docs */}
+              <div className="flex items-center">
                 {isConnected ? (
-                  <div className="flex items-center text-green-500 text-sm">
-                    <Wifi className="w-4 h-4 mr-1" />
-                    <span className="hidden sm:inline">Live</span>
-                  </div>
+                  <Wifi className="w-4 h-4 text-green-500" />
                 ) : (
-                  <div className="flex items-center text-gray-500 text-sm">
-                    <WifiOff className="w-4 h-4 mr-1" />
-                    <span className="hidden sm:inline">Offline</span>
-                  </div>
+                  <WifiOff className="w-4 h-4 text-gray-500" />
                 )}
               </div>
+              
               <NotificationBell />
               <LanguageSwitcher />
               <PolkadotWalletButton />
-              <a 
-                href="https://github.com/pezkuwichain" 
-                target="_blank" 
-                rel="noopener noreferrer"
-                className="text-gray-400 hover:text-white transition-colors"
-              >
-                <Github className="w-5 h-5" />
-              </a>
             </div>
           </div>
         </div>
@@ -265,19 +265,19 @@ const AppLayout: React.FC = () => {
           <DelegationManager />
         ) : showForum ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <ForumOverview />
             </div>
           </div>
         ) : showModeration ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <ModerationPanel />
             </div>
           </div>
         ) : showTreasury ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <div className="text-center mb-12">
                 <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
                   {t('treasury.title', 'Treasury Management')}
@@ -327,7 +327,7 @@ const AppLayout: React.FC = () => {
           </div>
         ) : showStaking ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <div className="text-center mb-12">
                 <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
                   Staking Rewards
@@ -341,7 +341,7 @@ const AppLayout: React.FC = () => {
           </div>
         ) : showP2P ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <div className="text-center mb-12">
                 <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
                   P2P Trading Market
@@ -355,7 +355,7 @@ const AppLayout: React.FC = () => {
           </div>
         ) : showTokenSwap ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <div className="text-center mb-12">
                 <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-500 bg-clip-text text-transparent">
                   PEZ/HEZ Token Swap
@@ -369,7 +369,7 @@ const AppLayout: React.FC = () => {
           </div>
         ) : showMultiSig ? (
           <div className="pt-20 min-h-screen bg-gray-950">
-            <div className="max-w-full mx-auto px-8">
+            <div className="max-w-full mx-auto px-4">
               <div className="text-center mb-12">
                 <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
                   Multi-Signature Wallet
@@ -431,7 +431,11 @@ const AppLayout: React.FC = () => {
 
       {/* Footer */}
       <footer className="bg-gray-950 border-t border-gray-800 py-12">
-        <div className="max-w-full mx-auto px-8">
+              <div className="mt-4 space-y-1 text-sm text-gray-400">
+                <p>📧 info@pezkuwichain.io</p>
+                <p>📧 info@pezkuwichain.app</p>
+              </div>
+        <div className="max-w-full mx-auto px-4">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
               <h3 className="text-lg font-semibold mb-4 bg-gradient-to-r from-green-500 to-yellow-400 bg-clip-text text-transparent">
@@ -479,18 +483,33 @@ const AppLayout: React.FC = () => {
               <h4 className="text-white font-semibold mb-4">{t('footer.community')}</h4>
               <ul className="space-y-2">
                 <li>
-                  <a href="#" className="text-gray-400 hover:text-white text-sm">
+                  <a href="https://discord.gg/pezkuwichain" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white text-sm flex items-center">
                     Discord
+                    <ExternalLink className="w-3 h-3 ml-1" />
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="text-gray-400 hover:text-white text-sm">
-                    Twitter
+                  <a href="https://x.com/PezkuwiChain" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white text-sm flex items-center">
+                    Twitter/X
+                    <ExternalLink className="w-3 h-3 ml-1" />
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="text-gray-400 hover:text-white text-sm">
+                  <a href="https://t.me/PezkuwiApp" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white text-sm flex items-center">
                     Telegram
+                    <ExternalLink className="w-3 h-3 ml-1" />
+                  </a>
+                </li>
+                <li>
+                  <a href="https://www.youtube.com/@SatoshiQazi" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white text-sm flex items-center">
+                    YouTube
+                    <ExternalLink className="w-3 h-3 ml-1" />
+                  </a>
+                </li>
+                <li>
+                  <a href="https://facebook.com/profile.php?id=61582484611719" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white text-sm flex items-center">
+                    Facebook
+                    <ExternalLink className="w-3 h-3 ml-1" />
                   </a>
                 </li>
               </ul>
@@ -508,4 +527,4 @@ const AppLayout: React.FC = () => {
   );
 };
 
-export default AppLayout;
+export default AppLayout;
\ No newline at end of file
diff --git a/src/components/TokenSwap.tsx b/src/components/TokenSwap.tsx
index 1f04eee1..d97c3419 100644
--- a/src/components/TokenSwap.tsx
+++ b/src/components/TokenSwap.tsx
@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowDownUp, Settings, Info, TrendingUp, Clock } from 'lucide-react';
+import { ArrowDownUp, Settings, TrendingUp, Clock, AlertCircle } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { usePolkadot } from '@/contexts/PolkadotContext';
-import { ASSET_IDS, formatBalance } from '@/lib/wallet';
-import { toast } from '@/components/ui/use-toast';
+import { ASSET_IDS, formatBalance, parseAmount } from '@/lib/wallet';
+import { useToast } from '@/hooks/use-toast';
 
 const TokenSwap = () => {
   const { api, isApiReady, selectedAccount } = usePolkadot();
+  const { toast } = useToast();
+  
   const [fromToken, setFromToken] = useState('PEZ');
   const [toToken, setToToken] = useState('HEZ');
   const [fromAmount, setFromAmount] = useState('');
@@ -18,13 +22,35 @@ const TokenSwap = () => {
   const [showConfirm, setShowConfirm] = useState(false);
   const [isSwapping, setIsSwapping] = useState(false);
 
+  // DEX availability check
+  const [isDexAvailable, setIsDexAvailable] = useState(false);
+
   // Real balances from blockchain
   const [fromBalance, setFromBalance] = useState('0');
   const [toBalance, setToBalance] = useState('0');
-  const [exchangeRate, setExchangeRate] = useState(2.5); // Will be fetched from pool
+  const [exchangeRate, setExchangeRate] = useState(0);
   const [isLoadingBalances, setIsLoadingBalances] = useState(false);
+  const [isLoadingRate, setIsLoadingRate] = useState(false);
 
-  const toAmount = fromAmount ? (parseFloat(fromAmount) * exchangeRate).toFixed(4) : '';
+  // Liquidity pool data
+  const [liquidityPools, setLiquidityPools] = useState<any[]>([]);
+  const [isLoadingPools, setIsLoadingPools] = useState(false);
+
+  const toAmount = fromAmount && exchangeRate > 0 
+    ? (parseFloat(fromAmount) * exchangeRate).toFixed(4) 
+    : '';
+
+  // Check if AssetConversion pallet is available
+  useEffect(() => {
+    if (api && isApiReady) {
+      const hasAssetConversion = api.tx.assetConversion !== undefined;
+      setIsDexAvailable(hasAssetConversion);
+      
+      if (!hasAssetConversion) {
+        console.warn('AssetConversion pallet not available in runtime');
+      }
+    }
+  }, [api, isApiReady]);
 
   // Fetch balances from blockchain
   useEffect(() => {
@@ -63,22 +89,108 @@ const TokenSwap = () => {
     };
 
     fetchBalances();
-  }, [api, isApiReady, selectedAccount, fromToken, toToken]);
+  }, [api, isApiReady, selectedAccount, fromToken, toToken, toast]);
 
-  // TODO: Fetch exchange rate from DEX pool
-  // This should query the liquidity pool to get real-time exchange rates
+  // Fetch exchange rate from AssetConversion pool
   useEffect(() => {
-    // Placeholder: In real implementation, query pool reserves
-    // const fetchExchangeRate = async () => {
-    //   if (!api || !isApiReady) return;
-    //   const pool = await api.query.dex.pools([fromAssetId, toAssetId]);
-    //   // Calculate rate from pool reserves
-    // };
+    const fetchExchangeRate = async () => {
+      if (!api || !isApiReady || !isDexAvailable) {
+        return;
+      }
 
-    // Mock exchange rate for now
-    const mockRate = fromToken === 'PEZ' ? 2.5 : 0.4;
-    setExchangeRate(mockRate);
-  }, [api, isApiReady, fromToken, toToken]);
+      setIsLoadingRate(true);
+      try {
+        const fromAssetId = ASSET_IDS[fromToken as keyof typeof ASSET_IDS];
+        const toAssetId = ASSET_IDS[toToken as keyof typeof ASSET_IDS];
+
+        // Create pool asset tuple [asset1, asset2]
+        const poolAssets = [
+          { NativeOrAsset: { Asset: fromAssetId } },
+          { NativeOrAsset: { Asset: toAssetId } }
+        ];
+
+        // Query pool from AssetConversion pallet
+        const poolInfo = await api.query.assetConversion.pools(poolAssets);
+
+        if (poolInfo && !poolInfo.isEmpty) {
+          const pool = poolInfo.toJSON() as any;
+          
+          if (pool && pool[0] && pool[1]) {
+            // Pool structure: [reserve0, reserve1]
+            const reserve0 = parseFloat(pool[0].toString());
+            const reserve1 = parseFloat(pool[1].toString());
+            
+            // Calculate exchange rate
+            const rate = reserve1 / reserve0;
+            setExchangeRate(rate);
+          } else {
+            console.warn('Pool has no reserves');
+            setExchangeRate(0);
+          }
+        } else {
+          console.warn('No liquidity pool found for this pair');
+          setExchangeRate(0);
+        }
+      } catch (error) {
+        console.error('Failed to fetch exchange rate:', error);
+        setExchangeRate(0);
+      } finally {
+        setIsLoadingRate(false);
+      }
+    };
+
+    fetchExchangeRate();
+  }, [api, isApiReady, isDexAvailable, fromToken, toToken]);
+
+  // Fetch liquidity pools
+  useEffect(() => {
+    const fetchLiquidityPools = async () => {
+      if (!api || !isApiReady || !isDexAvailable) {
+        return;
+      }
+
+      setIsLoadingPools(true);
+      try {
+        // Query all pools from AssetConversion pallet
+        const poolsEntries = await api.query.assetConversion.pools.entries();
+
+        if (poolsEntries && poolsEntries.length > 0) {
+          const pools = poolsEntries.map(([key, value]: any) => {
+            const poolData = value.toJSON();
+            const poolKey = key.toHuman();
+            
+            // Calculate TVL from reserves
+            const tvl = poolData && poolData[0] && poolData[1]
+              ? ((parseFloat(poolData[0]) + parseFloat(poolData[1])) / 1e12).toFixed(2)
+              : '0';
+            
+            // Parse asset IDs from pool key
+            const assets = poolKey?.[0] || [];
+            const asset1 = assets[0]?.NativeOrAsset?.Asset || '?';
+            const asset2 = assets[1]?.NativeOrAsset?.Asset || '?';
+            
+            return {
+              pool: `Asset ${asset1} / Asset ${asset2}`,
+              tvl: `$${tvl}M`,
+              apr: 'TBD', // Requires historical data
+              volume: 'TBD', // Requires event indexing
+            };
+          });
+
+          setLiquidityPools(pools.slice(0, 3));
+        } else {
+          setLiquidityPools([]);
+        }
+      } catch (error) {
+        console.error('Failed to fetch liquidity pools:', error);
+        setLiquidityPools([]);
+      } finally {
+        setIsLoadingPools(false);
+      }
+    };
+
+    fetchLiquidityPools();
+  }, [api, isApiReady, isDexAvailable]);
 
   const handleSwap = () => {
     setFromToken(toToken);
@@ -96,24 +208,99 @@ const TokenSwap = () => {
       return;
     }
 
+    if (!isDexAvailable) {
+      toast({
+        title: 'DEX Not Available',
+        description: 'AssetConversion pallet is not enabled in runtime',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!exchangeRate || exchangeRate === 0) {
+      toast({
+        title: 'Error',
+        description: 'No liquidity pool available for this pair',
+        variant: 'destructive',
+      });
+      return;
+    }
+
     setIsSwapping(true);
     try {
-      // TODO: Implement actual swap transaction
-      // const fromAssetId = ASSET_IDS[fromToken];
-      // const toAssetId = ASSET_IDS[toToken];
-      // const amount = parseAmount(fromAmount, 12);
-      // await api.tx.dex.swap(fromAssetId, toAssetId, amount, minReceive).signAndSend(...);
+      const fromAssetId = ASSET_IDS[fromToken as keyof typeof ASSET_IDS];
+      const toAssetId = ASSET_IDS[toToken as keyof typeof ASSET_IDS];
+      const amountIn = parseAmount(fromAmount, 12);
+      
+      // Calculate minimum amount out based on slippage
+      const minAmountOut = parseAmount(
+        (parseFloat(toAmount) * (1 - parseFloat(slippage) / 100)).toString(),
+        12
+      );
 
-      // Simulated swap for now
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      // Create path for swap
+      const path = [
+        { NativeOrAsset: { Asset: fromAssetId } },
+        { NativeOrAsset: { Asset: toAssetId } }
+      ];
 
-      toast({
-        title: 'Success',
-        description: `Swapped ${fromAmount} ${fromToken} for ${toAmount} ${toToken}`,
-      });
+      // Get signer from extension
+      const { web3FromAddress } = await import('@polkadot/extension-dapp');
+      const injector = await web3FromAddress(selectedAccount.address);
 
-      setShowConfirm(false);
-      setFromAmount('');
+      // Submit swap transaction to AssetConversion pallet
+      const tx = api.tx.assetConversion.swapExactTokensForTokens(
+        path,
+        amountIn.toString(),
+        minAmountOut.toString(),
+        selectedAccount.address,
+        true // keep_alive
+      );
+
+      await tx.signAndSend(
+        selectedAccount.address,
+        { signer: injector.signer },
+        ({ status, events }) => {
+          if (status.isInBlock) {
+            console.log('Swap in block:', status.asInBlock.toHex());
+            
+            toast({
+              title: 'Transaction Submitted',
+              description: `Swap in block ${status.asInBlock.toHex().slice(0, 10)}...`,
+            });
+          }
+
+          if (status.isFinalized) {
+            console.log('Swap finalized:', status.asFinalized.toHex());
+            
+            // Check for successful swap event
+            const swapEvent = events.find(({ event }) =>
+              api.events.assetConversion?.SwapExecuted?.is(event)
+            );
+
+            if (swapEvent) {
+              toast({
+                title: 'Success!',
+                description: `Swapped ${fromAmount} ${fromToken} for ${toAmount} ${toToken}`,
+              });
+
+              setShowConfirm(false);
+              setFromAmount('');
+              
+              // Refresh balances
+              window.location.reload();
+            } else {
+              toast({
+                title: 'Error',
+                description: 'Swap transaction failed',
+                variant: 'destructive',
+              });
+            }
+            
+            setIsSwapping(false);
+          }
+        }
+      );
     } catch (error: any) {
       console.error('Swap failed:', error);
       toast({
@@ -121,22 +308,44 @@ const TokenSwap = () => {
         description: error.message || 'Swap transaction failed',
         variant: 'destructive',
       });
-    } finally {
       setIsSwapping(false);
     }
   };
 
-  const liquidityData = [
-    { pool: 'PEZ/HEZ', tvl: '2.5M', apr: '24.5%', volume: '850K' },
-    { pool: 'PEZ/USDT', tvl: '1.8M', apr: '18.2%', volume: '620K' },
-    { pool: 'HEZ/USDT', tvl: '1.2M', apr: '21.8%', volume: '480K' }
-  ];
+  // Show DEX unavailable message
+  if (!isDexAvailable && isApiReady) {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <Card className="p-8">
+          <div className="text-center space-y-6">
+            <div className="flex justify-center">
+              <div className="p-4 bg-yellow-500/10 rounded-full">
+                <AlertCircle className="w-12 h-12 text-yellow-500" />
+              </div>
+            </div>
+            
+            <div>
+              <h2 className="text-2xl font-bold mb-2">DEX Coming Soon</h2>
+              <p className="text-gray-400 max-w-md mx-auto">
+                The AssetConversion pallet is not yet enabled in the runtime. 
+                Token swapping functionality will be available after the next runtime upgrade.
+              </p>
+            </div>
 
-  const txHistory = [
-    { from: 'PEZ', to: 'HEZ', amount: '1000', rate: '2.48', time: '2 min ago' },
-    { from: 'HEZ', to: 'PEZ', amount: '500', rate: '0.41', time: '5 min ago' },
-    { from: 'PEZ', to: 'HEZ', amount: '2500', rate: '2.51', time: '12 min ago' }
-  ];
+            <Badge variant="outline" className="text-yellow-500 border-yellow-500/30">
+              Scheduled for Next Runtime Upgrade
+            </Badge>
+
+            <div className="pt-4">
+              <Button variant="outline" onClick={() => window.location.href = '/'}>
+                Back to Dashboard
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -149,6 +358,15 @@ const TokenSwap = () => {
             </Button>
           </div>
 
+          {!selectedAccount && (
+            <Alert className="mb-4 bg-yellow-500/10 border-yellow-500/30">
+              <AlertCircle className="h-4 w-4 text-yellow-500" />
+              <AlertDescription className="text-yellow-300">
+                Please connect your wallet to swap tokens
+              </AlertDescription>
+            </Alert>
+          )}
+
           <div className="space-y-4">
             <div className="bg-gray-50 rounded-lg p-4 text-gray-900">
               <div className="flex justify-between mb-2">
@@ -164,6 +382,7 @@ const TokenSwap = () => {
                   onChange={(e) => setFromAmount(e.target.value)}
                   placeholder="0.0"
                   className="text-2xl font-bold border-0 bg-transparent"
+                  disabled={!selectedAccount}
                 />
                 <Button variant="outline" className="min-w-[100px]">
                   {fromToken === 'PEZ' ? '🟣 PEZ' : '🟡 HEZ'}
@@ -177,6 +396,7 @@ const TokenSwap = () => {
                 size="icon"
                 onClick={handleSwap}
                 className="rounded-full bg-white border-2"
+                disabled={!selectedAccount}
               >
                 <ArrowDownUp className="h-5 w-5" />
               </Button>
@@ -206,7 +426,15 @@ const TokenSwap = () => {
             <div className="bg-blue-50 rounded-lg p-3 text-gray-900">
               <div className="flex justify-between text-sm">
                 <span className="text-gray-900">Exchange Rate</span>
-                <span className="font-semibold text-gray-900">1 {fromToken} = {exchangeRate} {toToken}</span>
+                <span className="font-semibold text-gray-900">
+                  {isLoadingRate ? (
+                    'Loading...'
+                  ) : exchangeRate > 0 ? (
+                    `1 ${fromToken} = ${exchangeRate.toFixed(4)} ${toToken}`
+                  ) : (
+                    'No pool available'
+                  )}
+                </span>
               </div>
               <div className="flex justify-between text-sm mt-1">
                 <span className="text-gray-900">Slippage Tolerance</span>
@@ -217,9 +445,9 @@ const TokenSwap = () => {
             <Button
               className="w-full h-12 text-lg"
               onClick={() => setShowConfirm(true)}
-              disabled={!fromAmount || parseFloat(fromAmount) <= 0}
+              disabled={!fromAmount || parseFloat(fromAmount) <= 0 || !selectedAccount || exchangeRate === 0}
             >
-              Swap Tokens
+              {!selectedAccount ? 'Connect Wallet' : exchangeRate === 0 ? 'No Pool Available' : 'Swap Tokens'}
             </Button>
           </div>
         </Card>
@@ -229,20 +457,29 @@ const TokenSwap = () => {
             <TrendingUp className="h-5 w-5" />
             Liquidity Pools
           </h3>
-          <div className="space-y-3">
-            {liquidityData.map((pool, idx) => (
-              <div key={idx} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg text-gray-900">
-                <div>
-                  <div className="font-semibold text-gray-900">{pool.pool}</div>
-                  <div className="text-sm text-gray-900">TVL: ${pool.tvl}</div>
+          
+          {isLoadingPools ? (
+            <div className="text-center text-gray-500 py-8">Loading pools...</div>
+          ) : liquidityPools.length > 0 ? (
+            <div className="space-y-3">
+              {liquidityPools.map((pool, idx) => (
+                <div key={idx} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg text-gray-900">
+                  <div>
+                    <div className="font-semibold text-gray-900">{pool.pool}</div>
+                    <div className="text-sm text-gray-900">TVL: {pool.tvl}</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-green-600 font-semibold">{pool.apr} APR</div>
+                    <div className="text-sm text-gray-900">Vol: {pool.volume}</div>
+                  </div>
                 </div>
-                <div className="text-right">
-                  <div className="text-green-600 font-semibold">{pool.apr} APR</div>
-                  <div className="text-sm text-gray-900">Vol: ${pool.volume}</div>
-                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 py-8">
+              No liquidity pools available yet
+            </div>
+          )}
         </Card>
       </div>
 
@@ -250,21 +487,11 @@ const TokenSwap = () => {
         <Card className="p-6">
           <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
             <Clock className="h-5 w-5" />
-            Recent Transactions
+            Recent Swaps
           </h3>
-          <div className="space-y-3">
-            {txHistory.map((tx, idx) => (
-              <div key={idx} className="p-3 bg-gray-50 rounded-lg text-gray-900">
-                <div className="flex justify-between items-center mb-1">
-                  <span className="font-semibold text-gray-900">{tx.amount} {tx.from}</span>
-                  <ArrowDownUp className="h-4 w-4 text-gray-400" />
-                </div>
-                <div className="flex justify-between text-sm text-gray-900">
-                  <span>Rate: {tx.rate}</span>
-                  <span>{tx.time}</span>
-                </div>
-              </div>
-            ))}
+          
+          <div className="text-center text-gray-500 py-8">
+            {selectedAccount ? 'No swap history yet' : 'Connect wallet to view history'}
           </div>
         </Card>
       </div>
@@ -311,10 +538,18 @@ const TokenSwap = () => {
                 <span className="text-gray-900">You Pay</span>
                 <span className="font-bold text-gray-900">{fromAmount} {fromToken}</span>
               </div>
-              <div className="flex justify-between">
+              <div className="flex justify-between mb-2">
                 <span className="text-gray-900">You Receive</span>
                 <span className="font-bold text-gray-900">{toAmount} {toToken}</span>
               </div>
+              <div className="flex justify-between mt-3 pt-3 border-t text-sm">
+                <span className="text-gray-600">Exchange Rate</span>
+                <span className="text-gray-600">1 {fromToken} = {exchangeRate.toFixed(4)} {toToken}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Slippage</span>
+                <span className="text-gray-600">{slippage}%</span>
+              </div>
             </div>
             <Button
               className="w-full"
diff --git a/src/components/wallet/WalletModal.tsx b/src/components/wallet/WalletModal.tsx
index a4c73bc9..b378e7af 100644
--- a/src/components/wallet/WalletModal.tsx
+++ b/src/components/wallet/WalletModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Wallet, Chrome, Smartphone, Copy, Check, ExternalLink } from 'lucide-react';
+import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
@@ -8,8 +8,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useWallet } from '@/contexts/WalletContext';
+import { usePolkadot } from '@/contexts/PolkadotContext';
 import { formatAddress } from '@/lib/wallet';
 
 interface WalletModalProps {
@@ -18,24 +17,37 @@ interface WalletModalProps {
 }
 
 export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) => {
-  const { connectMetaMask, connectWalletConnect, isConnected, address } = useWallet();
+  const { 
+    accounts, 
+    selectedAccount, 
+    setSelectedAccount,
+    connectWallet, 
+    disconnectWallet,
+    error 
+  } = usePolkadot();
+  
   const [copied, setCopied] = useState(false);
 
   const handleCopyAddress = () => {
-    if (address) {
-      navigator.clipboard.writeText(address);
+    if (selectedAccount?.address) {
+      navigator.clipboard.writeText(selectedAccount.address);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }
   };
 
-  const handleMetaMaskConnect = async () => {
-    await connectMetaMask();
-    if (isConnected) onClose();
+  const handleConnect = async () => {
+    await connectWallet();
   };
 
-  const handleWalletConnectConnect = async () => {
-    await connectWalletConnect();
+  const handleSelectAccount = (account: typeof accounts[0]) => {
+    setSelectedAccount(account);
+    onClose();
+  };
+
+  const handleDisconnect = () => {
+    disconnectWallet();
+    onClose();
   };
 
   return (
@@ -43,82 +55,181 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Wallet className="h-5 w-5 text-kesk" />
-            Connect Wallet
+            <Wallet className="h-5 w-5 text-purple-400" />
+            {selectedAccount ? 'Wallet Connected' : 'Connect Wallet'}
           </DialogTitle>
           <DialogDescription>
-            Connect your wallet to interact with PezkuwiChain governance
+            {selectedAccount 
+              ? 'Manage your Polkadot account' 
+              : 'Connect your Polkadot.js extension to interact with PezkuwiChain'}
           </DialogDescription>
         </DialogHeader>
 
-        {!isConnected ? (
-          <Tabs defaultValue="browser" className="w-full">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="browser">Browser Wallet</TabsTrigger>
-              <TabsTrigger value="mobile">Mobile Wallet</TabsTrigger>
-            </TabsList>
-            
-            <TabsContent value="browser" className="space-y-4">
-              <Button
-                onClick={handleMetaMaskConnect}
-                className="w-full justify-start bg-kesk hover:bg-kesk/90"
-              >
-                <Chrome className="mr-2 h-5 w-5" />
-                MetaMask
-              </Button>
-              <div className="text-sm text-muted-foreground">
-                Don't have MetaMask?{' '}
-                <a
-                  href="https://metamask.io/download/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-kesk hover:underline"
-                >
-                  Download here
-                </a>
-              </div>
-            </TabsContent>
-            
-            <TabsContent value="mobile" className="space-y-4">
-              <Button
-                onClick={handleWalletConnectConnect}
-                className="w-full justify-start bg-zer hover:bg-zer/90"
-              >
-                <Smartphone className="mr-2 h-5 w-5" />
-                WalletConnect
-              </Button>
-              <div className="text-sm text-muted-foreground">
-                Scan QR code with your mobile wallet to connect
-              </div>
-            </TabsContent>
-          </Tabs>
-        ) : (
+        {/* No Extension Error */}
+        {error && error.includes('extension') && (
           <div className="space-y-4">
-            <div className="flex items-center justify-between p-3 border rounded-lg">
-              <div>
-                <div className="text-sm text-muted-foreground">Connected Address</div>
-                <div className="font-mono font-medium">{formatAddress(address!)}</div>
-              </div>
-              <Button
-                size="icon"
-                variant="ghost"
-                onClick={handleCopyAddress}
+            <div className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+              <p className="text-sm text-yellow-300">
+                Polkadot.js extension not detected. Please install it to continue.
+              </p>
+            </div>
+
+            <div className="flex gap-3">
+              <a
+                href="https://polkadot.js.org/extension/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-1"
               >
-                {copied ? (
-                  <Check className="h-4 w-4 text-kesk" />
-                ) : (
-                  <Copy className="h-4 w-4" />
-                )}
+                <Button className="w-full bg-orange-600 hover:bg-orange-700">
+                  <Chrome className="mr-2 h-4 w-4" />
+                  Install Extension
+                </Button>
+              </a>
+            </div>
+
+            <p className="text-xs text-gray-400 text-center">
+              After installing, refresh the page and try again
+            </p>
+          </div>
+        )}
+
+        {/* Connected State */}
+        {selectedAccount && !error && (
+          <div className="space-y-4">
+            {/* Account Info */}
+            <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
+              <div>
+                <div className="text-xs text-gray-400 mb-1">Account Name</div>
+                <div className="font-medium">{selectedAccount.meta.name || 'Unnamed Account'}</div>
+              </div>
+
+              <div>
+                <div className="text-xs text-gray-400 mb-1">Address</div>
+                <div className="flex items-center justify-between gap-2">
+                  <code className="text-sm font-mono text-gray-300 truncate">
+                    {formatAddress(selectedAccount.address)}
+                  </code>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleCopyAddress}
+                    className="shrink-0"
+                  >
+                    {copied ? (
+                      <Check className="h-4 w-4 text-green-400" />
+                    ) : (
+                      <Copy className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <div className="text-xs text-gray-400 mb-1">Source</div>
+                <div className="text-sm text-gray-300">
+                  {selectedAccount.meta.source || 'polkadot-js'}
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                className="flex-1"
+                onClick={() => window.open(`https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer`, '_blank')}
+              >
+                <ExternalLink className="mr-2 h-4 w-4" />
+                View on Explorer
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleDisconnect}
+                className="text-red-400 border-red-400/30 hover:bg-red-400/10"
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                Disconnect
               </Button>
             </div>
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => window.open('https://explorer.pezkuwichain.app/address/' + address, '_blank')}
-            >
-              <ExternalLink className="mr-2 h-4 w-4" />
-              View on Explorer
-            </Button>
+
+            {/* Switch Account */}
+            {accounts.length > 1 && (
+              <div className="space-y-2">
+                <div className="text-sm text-gray-400">Switch Account</div>
+                <div className="space-y-2 max-h-48 overflow-y-auto">
+                  {accounts.map((account) => (
+                    <button
+                      key={account.address}
+                      onClick={() => handleSelectAccount(account)}
+                      className={`w-full p-3 rounded-lg border transition-all text-left ${
+                        account.address === selectedAccount.address
+                          ? 'bg-purple-500/20 border-purple-500/50'
+                          : 'bg-gray-800/30 border-gray-700 hover:border-gray-600'
+                      }`}
+                    >
+                      <div className="font-medium text-sm">
+                        {account.meta.name || 'Unnamed'}
+                      </div>
+                      <div className="text-xs text-gray-400 font-mono">
+                        {formatAddress(account.address)}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Not Connected State */}
+        {!selectedAccount && !error && (
+          <div className="space-y-4">
+            {accounts.length > 0 ? (
+              // Has accounts, show selection
+              <div className="space-y-2">
+                <div className="text-sm text-gray-400">Select an account to connect:</div>
+                <div className="space-y-2">
+                  {accounts.map((account) => (
+                    <button
+                      key={account.address}
+                      onClick={() => handleSelectAccount(account)}
+                      className="w-full p-4 rounded-lg border border-gray-700 bg-gray-800/50 hover:border-purple-500/50 hover:bg-gray-800 transition-all text-left"
+                    >
+                      <div className="font-medium mb-1">
+                        {account.meta.name || 'Unnamed Account'}
+                      </div>
+                      <div className="text-sm text-gray-400 font-mono">
+                        {account.address}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              // No accounts, show connect button
+              <div className="space-y-4">
+                <Button
+                  onClick={handleConnect}
+                  className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
+                >
+                  <Wallet className="mr-2 h-4 w-4" />
+                  Connect Polkadot.js
+                </Button>
+                
+                <div className="text-sm text-gray-400 text-center">
+                  Don't have Polkadot.js?{' '}
+                  <a
+                    href="https://polkadot.js.org/extension/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-purple-400 hover:underline"
+                  >
+                    Download here
+                  </a>
+                </div>
+              </div>
+            )}
           </div>
         )}
       </DialogContent>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 2dcbf33b..56014cd9 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,31 +1,27 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
+import { usePolkadot } from '@/contexts/PolkadotContext';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { TwoFactorVerify } from '@/components/auth/TwoFactorVerify';
 import { Separator } from '@/components/ui/separator';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Eye, EyeOff, Wallet, Mail, Lock, User, AlertCircle, ArrowLeft, UserPlus } from 'lucide-react';
-import { useWallet } from '@/contexts/WalletContext';
 import { useTranslation } from 'react-i18next';
-import { supabase } from '@/lib/supabase';
 
 const Login: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { connect } = useWallet();
+  const { connectWallet, selectedAccount } = usePolkadot();
   const { signIn, signUp } = useAuth();
   const [showPassword, setShowPassword] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const [requires2FA, setRequires2FA] = useState(false);
-  const [tempUserId, setTempUserId] = useState('');
   
   const [loginData, setLoginData] = useState({
     email: '',
@@ -49,17 +45,16 @@ const Login: React.FC = () => {
       const { error } = await signIn(loginData.email, loginData.password);
       
       if (error) {
-        // More user-friendly error messages
         if (error.message?.includes('Invalid login credentials')) {
-          setError('Email veya şifre hatalı. Doğru bilgiler: info@pezkuwichain.io / Sq230515yBkB@#nm90');
+          setError('Email or password is incorrect. Please try again.');
         } else {
-          setError(error.message || 'Giriş başarısız. Lütfen tekrar deneyin.');
+          setError(error.message || 'Login failed. Please try again.');
         }
       } else {
         navigate('/');
       }
     } catch (err) {
-      setError('Giriş yapılamadı. Lütfen tekrar deneyin.');
+      setError('Login failed. Please try again.');
     } finally {
       setLoading(false);
     }
@@ -83,7 +78,12 @@ const Login: React.FC = () => {
         return;
       }
       
-      const { error } = await signUp(signupData.email, signupData.password, signupData.name, signupData.referralCode);
+      const { error } = await signUp(
+        signupData.email, 
+        signupData.password, 
+        signupData.name, 
+        signupData.referralCode
+      );
       
       if (error) {
         setError(error.message);
@@ -99,11 +99,21 @@ const Login: React.FC = () => {
 
   const handleWalletConnect = async () => {
     setLoading(true);
+    setError('');
     try {
-      await connect();
-      navigate('/');
-    } catch (err) {
-      setError('Failed to connect wallet');
+      await connectWallet();
+      if (selectedAccount) {
+        navigate('/');
+      } else {
+        setError('Please select an account from your Polkadot.js extension');
+      }
+    } catch (err: any) {
+      console.error('Wallet connection failed:', err);
+      if (err.message?.includes('extension')) {
+        setError('Polkadot.js extension not found. Please install it first.');
+      } else {
+        setError('Failed to connect wallet. Please try again.');
+      }
     } finally {
       setLoading(false);
     }
@@ -201,6 +211,7 @@ const Login: React.FC = () => {
                     {t('login.forgotPassword', 'Forgot password?')}
                   </button>
                 </div>
+
                 {error && (
                   <Alert className="bg-red-900/20 border-red-800">
                     <AlertCircle className="h-4 w-4 text-red-500" />
@@ -208,7 +219,6 @@ const Login: React.FC = () => {
                   </Alert>
                 )}
                 
-                
                 <Button 
                   type="submit" 
                   className="w-full bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400"
@@ -320,6 +330,7 @@ const Login: React.FC = () => {
                     {t('login.referralDescription', 'If someone referred you, enter their code here')}
                   </p>
                 </div>
+
                 {error && (
                   <Alert className="bg-red-900/20 border-red-800">
                     <AlertCircle className="h-4 w-4 text-red-500" />
@@ -354,8 +365,12 @@ const Login: React.FC = () => {
             disabled={loading}
           >
             <Wallet className="mr-2 h-4 w-4" />
-            {t('login.connectWallet', 'Connect Wallet')}
+            {t('login.connectWallet', 'Connect with Polkadot.js')}
           </Button>
+
+          <p className="mt-2 text-xs text-center text-gray-500">
+            {t('login.walletHint', 'Connect your Polkadot wallet for instant access')}
+          </p>
         </CardContent>
         
         <CardFooter className="text-center text-sm text-gray-500">