fix: mobile UI improvements and web3Enable for WalletConnect signing

- Compact stat cards on mobile (Dashboard, Referral, P2P)
- Hide unnecessary sections on mobile (Recent Activity, NFTs, Score Calculation, Liquidity Pools, Recent Swaps)
- Fix back arrow overlapping title on all pages
- Swap Settings and Governance nav positions for better mobile dropdown
- Add back arrow to Presale page
- Add web3Enable before all web3FromAddress calls for WalletConnect compatibility
- Fix citizenship authentication signing with WalletConnect

web/src/pages/Dashboard.tsx

@@ -12,7 +12,7 @@ import { User, Mail, Phone, Globe, MapPin, Calendar, Shield, AlertCircle, ArrowL
 import { useToast } from '@/hooks/use-toast';
 import { fetchUserTikis, getPrimaryRole, getTikiDisplayName, getTikiColor, getTikiEmoji, getUserRoleCategories, getAllTikiNFTDetails, generateCitizenNumber, type TikiNFTDetails } from '@pezkuwi/lib/tiki';
 import { getAllScores, getStakingScoreStatus, startScoreTracking, getPezRewards, recordTrustScore, claimPezReward, type UserScores, type StakingScoreStatus, type PezRewardInfo, formatDuration } from '@pezkuwi/lib/scores';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { getKycStatus } from '@pezkuwi/lib/kyc';
 import { ReferralDashboard } from '@/components/referral/ReferralDashboard';
 // Commission proposals card removed - no longer using notary system for KYC approval
@@ -157,6 +157,7 @@ export default function Dashboard() {
 
     setStartingScoreTracking(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       // startScoreTracking on People Chain - staking data comes from Asset Hub via XCM
       const result = await startScoreTracking(peopleApi, selectedAccount.address, injector.signer);
@@ -192,6 +193,7 @@ export default function Dashboard() {
 
     setIsRecordingScore(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await recordTrustScore(peopleApi, selectedAccount.address, injector.signer);
 
@@ -213,6 +215,7 @@ export default function Dashboard() {
 
     setIsClaimingReward(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await claimPezReward(peopleApi, selectedAccount.address, epochIndex, injector.signer);
 
@@ -329,7 +332,8 @@ export default function Dashboard() {
 
     setRenouncingCitizenship(true);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log('Renouncing citizenship...');
@@ -411,16 +415,19 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-6xl relative">
-      <button
-        onClick={() => navigate('/')}
-        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-      >
-        <ArrowLeft className="w-5 h-5" />
-      </button>
-      <h1 className="text-3xl font-bold mb-6">{t('dashboard.title')}</h1>
+    <div className="container mx-auto p-4 sm:p-6 max-w-6xl">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <button
+          onClick={() => navigate('/')}
+          className="text-gray-400 hover:text-white transition-colors shrink-0"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+        <h1 className="text-2xl sm:text-3xl font-bold">{t('dashboard.title')}</h1>
+      </div>
       
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
+      {/* Account Status, Member Since, Role, Total Score - desktop only */}
+      <div className="hidden md:grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">{t('dashboard.accountStatus')}</CardTitle>
@@ -488,7 +495,59 @@ export default function Dashboard() {
         </Card>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
+      {/* Scores - compact 2x2 grid on mobile, full cards on desktop */}
+      <div className="grid grid-cols-2 gap-2 md:hidden mb-4">
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Shield className="h-4 w-4 text-purple-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.trustScore')}</p>
+            <p className="text-lg font-bold text-purple-600 leading-tight">{loadingScores ? '...' : scores.trustScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Users className="h-4 w-4 text-cyan-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.referralScore')}</p>
+            <p className="text-lg font-bold text-cyan-600 leading-tight">{loadingScores ? '...' : scores.referralScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <TrendingUp className="h-4 w-4 text-green-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.stakingScore')}</p>
+            <p className="text-lg font-bold text-green-600 leading-tight">{loadingScores ? '...' : scores.stakingScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Award className="h-4 w-4 text-pink-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.tikiScore')}</p>
+            <p className="text-lg font-bold text-pink-600 leading-tight">{loadingScores ? '...' : scores.tikiScore}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Staking Start Tracking - mobile only, separate card */}
+      {!stakingStatus?.isTracking && selectedAccount && (
+        <div className="md:hidden mb-4">
+          <Button
+            size="sm"
+            variant="outline"
+            className="w-full"
+            onClick={handleStartScoreTracking}
+            disabled={startingScoreTracking || loadingScores}
+          >
+            {startingScoreTracking ? (
+              <><Loader2 className="h-3 w-3 mr-1 animate-spin" />{t('dashboard.starting')}</>
+            ) : (
+              <><Play className="h-3 w-3 mr-1" />{t('dashboard.startTracking')}</>
+            )}
+          </Button>
+        </div>
+      )}
+
+      {/* Scores - full cards on desktop */}
+      <div className="hidden md:grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">{t('dashboard.trustScore')}</CardTitle>
@@ -664,7 +723,7 @@ export default function Dashboard() {
           <TabsTrigger value="roles" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.rolesTab')}</TabsTrigger>
           <TabsTrigger value="referrals" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.referralsTab')}</TabsTrigger>
           <TabsTrigger value="security" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.securityTab')}</TabsTrigger>
-          <TabsTrigger value="activity" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.activityTab')}</TabsTrigger>
+          <TabsTrigger value="activity" className="hidden md:inline-flex text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.activityTab')}</TabsTrigger>
         </TabsList>
 
         <TabsContent value="profile" className="space-y-4">

web/src/pages/Presale.tsx

@@ -7,11 +7,13 @@ import { Input } from '@/components/ui/input';
 import { Card } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Loader2, AlertCircle, CheckCircle2, Timer, TrendingUp, Users } from 'lucide-react';
+import { Loader2, AlertCircle, CheckCircle2, Timer, TrendingUp, Users, ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 export default function Presale() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { api, selectedAccount, isApiReady } = usePezkuwi();
   const { balances } = useWallet();
 
@@ -163,6 +165,17 @@ export default function Presale() {
   if (!active) {
     return (
       <div className="container mx-auto py-12 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-4">
+            <button
+              onClick={() => navigate('/')}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <span className="text-gray-400 text-sm">Back</span>
+          </div>
+        </div>
         <Card className="p-8 text-center max-w-2xl mx-auto">
           <div className="mb-6">
             <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -199,13 +212,21 @@ export default function Presale() {
   return (
     <div className="container mx-auto py-12 px-4">
       <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
-            PEZ Token Pre-Sale
-          </h1>
-          <p className="text-muted-foreground">
-            Contribute wUSDT and receive PEZ tokens at a special rate
-          </p>
+        <div className="flex items-center gap-3 mb-4 sm:mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <h1 className="text-2xl md:text-4xl font-bold mb-1 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
+              PEZ Token Pre-Sale
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Contribute wUSDT and receive PEZ tokens at a special rate
+            </p>
+          </div>
         </div>
 
         {paused && (

web/src/pages/ProfileSettings.tsx

@@ -212,14 +212,16 @@ export default function ProfileSettings() {
   };
 
   return (
-    <div className="container mx-auto py-8 max-w-4xl relative">
-      <button
-        onClick={() => navigate('/')}
-        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-      >
-        <ArrowLeft className="w-5 h-5" />
-      </button>
-      <h1 className="text-3xl font-bold mb-8">{t('profileSettings.title')}</h1>
+    <div className="container mx-auto py-8 max-w-4xl">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <button
+          onClick={() => navigate('/')}
+          className="text-gray-400 hover:text-white transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+        <h1 className="text-3xl font-bold">{t('profileSettings.title')}</h1>
+      </div>
 
       <Tabs defaultValue="profile" className="space-y-4">
         <TabsList className="grid w-full grid-cols-4">

web/src/pages/WalletDashboard.tsx

@@ -10,7 +10,7 @@ import { NftList } from '@/components/NftList';
 import { Button } from '@/components/ui/button';
 import { ArrowUpRight, ArrowDownRight, History, ArrowLeft, RefreshCw, Coins, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { getPezRewards, recordTrustScore, claimPezReward, type PezRewardInfo } from '@pezkuwi/lib/scores';
 
 interface Transaction {
@@ -239,6 +239,7 @@ const WalletDashboard: React.FC = () => {
     if (!peopleApi || !selectedAccount) return;
     setIsRecordingScore(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await recordTrustScore(peopleApi, selectedAccount.address, injector.signer);
       if (result.success) {
@@ -259,6 +260,7 @@ const WalletDashboard: React.FC = () => {
     if (!peopleApi || !selectedAccount) return;
     setIsClaimingReward(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await claimPezReward(peopleApi, selectedAccount.address, epochIndex, injector.signer);
       if (result.success) {
@@ -299,20 +301,22 @@ const WalletDashboard: React.FC = () => {
   return (
     <div className="min-h-screen bg-gray-950 pt-24 pb-12">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
-        <button
-          onClick={() => navigate('/')}
-          className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-        >
-          <ArrowLeft className="w-5 h-5" />
-        </button>
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-white mb-2">{t('wallet.dashboard')}</h1>
-          <p className="text-gray-400">{t('wallet.manageTokens')}</p>
+        <div className="flex items-center gap-3 mb-4 sm:mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-1">{t('wallet.dashboard')}</h1>
+            <p className="text-gray-400">{t('wallet.manageTokens')}</p>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left Column - Recent Activity & NFTs */}
-          <div className="lg:col-span-1 space-y-6">
+          {/* Left Column - Recent Activity & NFTs (hidden on mobile) */}
+          <div className="hidden md:block lg:col-span-1 space-y-6">
             {/* Recent Activity */}
             <div className="bg-gray-900 border border-gray-800 rounded-lg p-6">
               <div className="flex items-center justify-between mb-4">