pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-04-22 13:37:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile UI improvements and web3Enable for WalletConnect signing

Browse Source 
- 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
This commit is contained in:
Kurdistan Tech Ministry
2026-02-23 06:22:12 +03:00
parent b2282ab70c
commit fc9a92f58c
22 changed files with 258 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AddLiquidityModal.tsx
+2 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { X, Plus, Info, AlertCircle } from 'lucide-react';
import { web3FromAddress } from '@pezkuwi/extension-dapp';
import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { useWallet } from '@/contexts/WalletContext';
import { Button } from '@/components/ui/button';
@@ -358,6 +358,7 @@ export const AddLiquidityModal: React.FC<AddLiquidityModalProps> = ({
}
// Get the signer from the extension
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
// Convert amounts to proper decimals
web/src/components/AppLayout.tsx
+37 -37
View File
@@ -178,35 +178,14 @@ const AppLayout: React.FC = () => {
<Users className="w-4 h-4 sm:w-5 sm:h-5 text-cyan-400" />
{t('nav.beCitizen')}
</button>
{/* Governance (dropdown) */}
<div className="relative">
<button
onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')}
className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
>
<FileEdit className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" />
<span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span>
</button>
{openMenu === 'governance' && (
<div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
<button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} 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('governance.proposals')}
</button>
<button onClick={() => { setShowDelegation(true); setOpenMenu(null); }} 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('governance.delegation')}
</button>
<button onClick={() => { setShowForum(true); setOpenMenu(null); }} 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'); setOpenMenu(null); }} 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); setOpenMenu(null); }} 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>
{/* Settings */}
<button
onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
>
<Settings className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" />
{t('nav.settings')}
</button>
{/* Trading (dropdown) */}
<div className="relative">
<button
@@ -244,14 +223,35 @@ const AppLayout: React.FC = () => {
<Award className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" />
{t('nav.education')}
</button>
{/* Settings */}
<button
onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }}
className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
>
<Settings className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" />
{t('nav.settings')}
</button>
{/* Governance (dropdown) */}
<div className="relative">
<button
onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')}
className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
>
<FileEdit className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" />
<span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span>
</button>
{openMenu === 'governance' && (
<div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
<button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} 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('governance.proposals')}
</button>
<button onClick={() => { setShowDelegation(true); setOpenMenu(null); }} 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('governance.delegation')}
</button>
<button onClick={() => { setShowForum(true); setOpenMenu(null); }} 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'); setOpenMenu(null); }} 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); setOpenMenu(null); }} 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>
{/* Logout */}
<button
onClick={async () => { setOpenMenu(null); await signOut(); navigate('/login'); }}
web/src/components/LPStakeModal.tsx
+2 -1
View File
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { X, Lock, AlertCircle, Loader2, Clock } from 'lucide-react';
import { web3FromAddress } from '@pezkuwi/extension-dapp';
import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -85,6 +85,7 @@ export const LPStakeModal: React.FC<LPStakeModalProps> = ({
try {
const amountBN = BigInt(Math.floor(amount * 1e12));
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
const tx = assetHubApi.tx.assetRewards.stake(poolId, amountBN.toString());
web/src/components/LPStakingModal.tsx
+4 -1
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { X, Lock, Unlock, Gift, AlertCircle, Loader2, Info } from 'lucide-react';
import { web3FromAddress } from '@pezkuwi/extension-dapp';
import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -143,6 +143,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
if (!pool) throw new Error('Pool not found');
const amountBN = BigInt(Math.floor(parseFloat(stakeAmount) * 1e12));
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
const tx = assetHubApi.tx.assetRewards.stake(selectedPool, amountBN.toString());
@@ -189,6 +190,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
if (!pool) throw new Error('Pool not found');
const amountBN = BigInt(Math.floor(parseFloat(unstakeAmount) * 1e12));
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
const tx = assetHubApi.tx.assetRewards.unstake(selectedPool, amountBN.toString());
@@ -231,6 +233,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
setSuccess(null);
try {
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
const tx = assetHubApi.tx.assetRewards.harvestRewards(selectedPool);
web/src/components/RemoveLiquidityModal.tsx
+2 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { X, Minus, AlertCircle, Info } from 'lucide-react';
import { web3FromAddress } from '@pezkuwi/extension-dapp';
import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { useWallet } from '@/contexts/WalletContext';
import { Button } from '@/components/ui/button';
@@ -160,6 +160,7 @@ export const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
try {
// Get the signer from the extension
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
// Get decimals for each asset
web/src/components/TokenSwap.tsx
+4 -3
View File
@@ -584,7 +584,8 @@ const TokenSwap = () => {
});
// Get signer from extension
const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
// Build transaction based on token types
@@ -1134,7 +1135,7 @@ const TokenSwap = () => {
</div>
</Card>
<Card className="p-6">
<Card className="p-6 hidden md:block">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<TrendingUp className="h-5 w-5" />
{t('tokenSwap.liquidityPools')}
@@ -1165,7 +1166,7 @@ const TokenSwap = () => {
</Card>
</div>
<div>
<div className="hidden md:block">
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<Clock className="h-5 w-5" />
web/src/components/TransferModal.tsx
+2 -1
View File
@@ -130,7 +130,8 @@ export const TransferModal: React.FC<TransferModalProps> = ({ isOpen, onClose, s
try {
// Import web3FromAddress to get the injector
const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
// Convert amount to smallest unit
web/src/components/USDTBridge.tsx
+2 -1
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { X, ArrowDown, ArrowUp, AlertCircle, Info, Clock, CheckCircle2 } from 'lucide-react';
import { web3FromAddress } from '@pezkuwi/extension-dapp';
import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { useWallet } from '@/contexts/WalletContext';
import { Button } from '@/components/ui/button';
@@ -114,6 +114,7 @@ export const USDTBridge: React.FC<USDTBridgeProps> = ({
setSuccess(null);
try {
await web3Enable('PezkuwiChain');
const injector = await web3FromAddress(selectedAccount.address);
// Burn wUSDT
web/src/components/XCMTeleportModal.tsx
+2 -1
View File
@@ -157,7 +157,8 @@ export const XCMTeleportModal: React.FC<XCMTeleportModalProps> = ({ isOpen, onCl
setTxStatus('signing');
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);
// Convert to smallest unit (12 decimals)
web/src/components/admin/CommissionSetupTab.tsx
+4 -2
View File
@@ -70,7 +70,8 @@ export function CommissionSetupTab() {
setProcessing(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);
// Parse addresses (one per line, trim whitespace)
@@ -174,7 +175,8 @@ export function CommissionSetupTab() {
setProcessing(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('Initializing KYC Commission...');
web/src/components/admin/CommissionVotingTab.tsx
+6 -3
View File
@@ -150,7 +150,8 @@ export function CommissionVotingTab() {
setVoting(proposal.hash);
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(`Voting ${approve ? 'AYE' : 'NAY'} on proposal:`, proposal.hash);
@@ -257,7 +258,8 @@ export function CommissionVotingTab() {
setVoting(proposal.hash);
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('Executing proposal:', proposal.hash);
@@ -431,7 +433,8 @@ export function CommissionVotingTab() {
if (!api || !selectedAccount) return;
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);
// Get current members
web/src/components/dashboard/CommissionProposalsCard.tsx
+4 -2
View File
@@ -109,7 +109,8 @@ export function CommissionProposalsCard() {
setVoting(proposal.hash);
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);
const tx = api.tx.dynamicCommissionCollective.vote(
@@ -199,7 +200,8 @@ export function CommissionProposalsCard() {
setVoting(proposal.hash);
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);
// Get proposal length bound
web/src/components/dex/DEXDashboard.tsx
+4 -4
View File
@@ -50,14 +50,14 @@ export const DEXDashboard: React.FC = () => {
};
return (
<div className="min-h-screen bg-gray-950 text-white">
<div className="min-h-screen bg-gray-950 text-white pt-24 md:pt-24">
{/* Header */}
<div className="bg-gradient-to-r from-green-900/30 via-yellow-900/30 to-red-900/30 border-b border-gray-800 py-8">
<div className="bg-gradient-to-r from-green-900/30 via-yellow-900/30 to-red-900/30 border-b border-gray-800 py-4 md:py-8">
<div className="max-w-7xl mx-auto px-4">
<h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 bg-clip-text text-transparent">
<h1 className="text-2xl md:text-4xl font-bold mb-1 md:mb-2 bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 bg-clip-text text-transparent">
{t('dex.title')}
</h1>
<p className="text-gray-400 text-lg">
<p className="text-gray-400 text-sm md:text-lg">
{t('dex.description')}
</p>
web/src/components/p2p/P2PDashboard.tsx
+20 -2
View File
@@ -131,8 +131,26 @@ export function P2PDashboard() {
/>
</div>
{/* Stats Cards */}
<div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-4">
{/* Stats Cards - Compact on mobile */}
<div className="lg:col-span-3 grid grid-cols-3 gap-2 md:hidden">
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<Clock className="w-4 h-4 text-yellow-400 mb-1" />
<span className="text-[10px] text-gray-400">{t('p2p.activeTrades')}</span>
<span className="text-lg font-bold text-white">{userStats.activeTrades}</span>
</div>
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<CheckCircle2 className="w-4 h-4 text-green-400 mb-1" />
<span className="text-[10px] text-gray-400">{t('p2p.completed')}</span>
<span className="text-lg font-bold text-white">{userStats.completedTrades}</span>
</div>
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<TrendingUp className="w-4 h-4 text-blue-400 mb-1" />
<span className="text-[10px] text-gray-400">{t('p2p.volume')}</span>
<span className="text-lg font-bold text-white">${userStats.totalVolume.toLocaleString()}</span>
</div>
</div>
{/* Stats Cards - Desktop */}
<div className="lg:col-span-3 hidden md:grid grid-cols-3 gap-4">
<Card className="bg-gray-900 border-gray-800">
<CardContent className="py-4 flex items-center gap-3">
<div className="p-2 bg-yellow-500/20 rounded-lg">
web/src/components/referral/InviteUserModal.tsx
+2 -1
View File
@@ -81,7 +81,8 @@ export const InviteUserModal: React.FC<InviteUserModalProps> = ({ isOpen, onClos
setInitiateSuccess(false);
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(`Initiating referral from ${selectedAccount.address} to ${inviteeAddress}...`);
web/src/components/referral/ReferralDashboard.tsx
+23 -4
View File
@@ -100,8 +100,27 @@ export const ReferralDashboard: React.FC = () => {
</Button>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Mobile Compact Stats */}
<div className="grid grid-cols-3 gap-2 md:hidden">
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<Users className="w-4 h-4 text-green-500 mb-1" />
<span className="text-[10px] text-gray-400">{t('referral.totalReferrals')}</span>
<span className="text-lg font-bold text-green-500">{stats?.referralCount ?? 0}</span>
</div>
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<Trophy className="w-4 h-4 text-yellow-500 mb-1" />
<span className="text-[10px] text-gray-400">{t('referral.referralScore')}</span>
<span className="text-lg font-bold text-yellow-500">{stats?.referralScore ?? 0}</span>
</div>
<div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
<Clock className="w-4 h-4 text-yellow-500 mb-1" />
<span className="text-[10px] text-gray-400">{t('referral.pendingApprovals')}</span>
<span className="text-lg font-bold text-yellow-500">{loadingApprovals ? '...' : pendingApprovals.length}</span>
</div>
</div>
{/* Desktop Stats Grid */}
<div className="hidden md:grid md:grid-cols-3 gap-6">
{/* Referral Count */}
<Card className="bg-gray-900 border-gray-800">
<CardHeader className="pb-3">
@@ -165,8 +184,8 @@ export const ReferralDashboard: React.FC = () => {
</Card>
</div>
{/* Score Breakdown */}
<Card className="bg-gray-900 border-gray-800">
{/* Score Breakdown - Desktop only */}
<Card className="bg-gray-900 border-gray-800 hidden md:block">
<CardHeader>
<CardTitle className="text-white">{t('referral.scoreCalc')}</CardTitle>
<CardDescription className="text-gray-400">