Reorganize repository into monorepo structure

Restructured the project to support multiple frontend applications:
- Move web app to web/ directory
- Create pezkuwi-sdk-ui/ for Polkadot SDK clone (planned)
- Create mobile/ directory for mobile app development
- Add shared/ directory with common utilities, types, and blockchain code
- Update README.md with comprehensive documentation
- Remove obsolete DKSweb/ directory

This monorepo structure enables better code sharing and organized
development across web, mobile, and SDK UI projects.
This commit is contained in:
Claude
2025-11-14 00:46:35 +00:00
parent d66e46034a
commit 24be8d4411
206 changed files with 502 additions and 4 deletions
@@ -0,0 +1,280 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Switch } from '@/components/ui/switch';
import { CheckCircle, Info, TrendingUp, Users, Award } from 'lucide-react';
const DelegateProfile: React.FC = () => {
const { t } = useTranslation();
const [isDelegate, setIsDelegate] = useState(false);
const [profileData, setProfileData] = useState({
statement: '',
expertise: [],
commitments: '',
website: '',
twitter: '',
acceptingDelegations: true,
minDelegation: '100',
maxDelegation: '100000'
});
const expertiseOptions = [
'Treasury Management',
'Technical Development',
'Community Building',
'Governance Design',
'Security',
'Economics',
'Marketing',
'Legal'
];
const handleBecomeDelegate = () => {
setIsDelegate(true);
console.log('Becoming a delegate with:', profileData);
};
if (!isDelegate) {
return (
<Card className="border-green-200">
<CardHeader>
<CardTitle>{t('delegation.becomeDelegate')}</CardTitle>
<CardDescription>
{t('delegation.becomeDelegateDesc')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<Alert className="border-blue-200 bg-blue-50 text-gray-900">
<Info className="w-4 h-4 text-gray-900" />
<AlertDescription className="text-gray-900">
{t('delegation.delegateRequirements')}
</AlertDescription>
</Alert>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card>
<CardContent className="p-4 text-center">
<TrendingUp className="w-8 h-8 mx-auto mb-2 text-green-600" />
<h4 className="font-semibold mb-1">{t('delegation.buildReputation')}</h4>
<p className="text-sm text-gray-600">{t('delegation.buildReputationDesc')}</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Users className="w-8 h-8 mx-auto mb-2 text-yellow-600" />
<h4 className="font-semibold mb-1">{t('delegation.earnTrust')}</h4>
<p className="text-sm text-gray-600">{t('delegation.earnTrustDesc')}</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Award className="w-8 h-8 mx-auto mb-2 text-red-600" />
<h4 className="font-semibold mb-1">{t('delegation.getRewards')}</h4>
<p className="text-sm text-gray-600">{t('delegation.getRewardsDesc')}</p>
</CardContent>
</Card>
</div>
<div className="space-y-4">
<div>
<Label htmlFor="statement">{t('delegation.delegateStatement')}</Label>
<Textarea
id="statement"
placeholder={t('delegation.statementPlaceholder')}
value={profileData.statement}
onChange={(e) => setProfileData({...profileData, statement: e.target.value})}
rows={4}
/>
</div>
<div>
<Label>{t('delegation.expertise')}</Label>
<div className="flex flex-wrap gap-2 mt-2">
{expertiseOptions.map((option) => (
<label key={option} className="flex items-center gap-2">
<input
type="checkbox"
className="rounded"
onChange={(e) => {
if (e.target.checked) {
setProfileData({
...profileData,
expertise: [...profileData.expertise, option]
});
} else {
setProfileData({
...profileData,
expertise: profileData.expertise.filter(e => e !== option)
});
}
}}
/>
<span className="text-sm">{option}</span>
</label>
))}
</div>
</div>
<div>
<Label htmlFor="commitments">{t('delegation.commitments')}</Label>
<Textarea
id="commitments"
placeholder={t('delegation.commitmentsPlaceholder')}
value={profileData.commitments}
onChange={(e) => setProfileData({...profileData, commitments: e.target.value})}
rows={3}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="website">{t('delegation.website')}</Label>
<Input
id="website"
placeholder="https://..."
value={profileData.website}
onChange={(e) => setProfileData({...profileData, website: e.target.value})}
/>
</div>
<div>
<Label htmlFor="twitter">{t('delegation.twitter')}</Label>
<Input
id="twitter"
placeholder="@username"
value={profileData.twitter}
onChange={(e) => setProfileData({...profileData, twitter: e.target.value})}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="minDelegation">{t('delegation.minDelegation')}</Label>
<Input
id="minDelegation"
type="number"
placeholder="Min PZK"
value={profileData.minDelegation}
onChange={(e) => setProfileData({...profileData, minDelegation: e.target.value})}
/>
</div>
<div>
<Label htmlFor="maxDelegation">{t('delegation.maxDelegation')}</Label>
<Input
id="maxDelegation"
type="number"
placeholder="Max PZK"
value={profileData.maxDelegation}
onChange={(e) => setProfileData({...profileData, maxDelegation: e.target.value})}
/>
</div>
</div>
<div className="flex items-center justify-between p-4 border rounded-lg">
<div>
<Label htmlFor="accepting">{t('delegation.acceptingDelegations')}</Label>
<p className="text-sm text-gray-600">{t('delegation.acceptingDesc')}</p>
</div>
<Switch
id="accepting"
checked={profileData.acceptingDelegations}
onCheckedChange={(checked) =>
setProfileData({...profileData, acceptingDelegations: checked})
}
/>
</div>
</div>
<Button
onClick={handleBecomeDelegate}
className="w-full bg-green-600 hover:bg-green-700"
disabled={!profileData.statement || profileData.expertise.length === 0}
>
{t('delegation.activateDelegate')}
</Button>
</CardContent>
</Card>
);
}
return (
<Card className="border-green-200">
<CardHeader>
<CardTitle className="flex items-center gap-2">
{t('delegation.yourDelegateProfile')}
<Badge className="bg-green-100 text-green-800">
<CheckCircle className="w-3 h-3 mr-1" />
Active
</Badge>
</CardTitle>
</CardHeader>
<CardContent>
<Alert className="border-green-200 bg-green-50 mb-6 text-gray-900">
<CheckCircle className="w-4 h-4 text-gray-900" />
<AlertDescription className="text-gray-900">
{t('delegation.delegateActive')}
</AlertDescription>
</Alert>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<Card>
<CardContent className="p-4">
<div className="text-2xl font-bold text-green-600">0</div>
<div className="text-sm text-gray-600">{t('delegation.delegators')}</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="text-2xl font-bold text-yellow-600">0 PZK</div>
<div className="text-sm text-gray-600">{t('delegation.totalReceived')}</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="text-2xl font-bold text-red-600">0%</div>
<div className="text-sm text-gray-600">{t('delegation.successRate')}</div>
</CardContent>
</Card>
</div>
<div className="space-y-4">
<div>
<h4 className="font-semibold mb-2">{t('delegation.yourStatement')}</h4>
<p className="text-gray-700">{profileData.statement}</p>
</div>
<div>
<h4 className="font-semibold mb-2">{t('delegation.yourExpertise')}</h4>
<div className="flex flex-wrap gap-2">
{profileData.expertise.map((exp) => (
<Badge key={exp} variant="secondary">{exp}</Badge>
))}
</div>
</div>
<div>
<h4 className="font-semibold mb-2">{t('delegation.delegationLimits')}</h4>
<p className="text-gray-700">
Min: {profileData.minDelegation} PZK | Max: {profileData.maxDelegation} PZK
</p>
</div>
</div>
<div className="flex gap-2 mt-6">
<Button variant="outline">
{t('delegation.editProfile')}
</Button>
<Button variant="outline">
{t('delegation.pauseDelegations')}
</Button>
</div>
</CardContent>
</Card>
);
};
export default DelegateProfile;
@@ -0,0 +1,323 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Users, TrendingUp, Shield, Clock, ChevronRight, Award } from 'lucide-react';
import DelegateProfile from './DelegateProfile';
const DelegationManager: React.FC = () => {
const { t } = useTranslation();
const [selectedDelegate, setSelectedDelegate] = useState<any>(null);
const [delegationAmount, setDelegationAmount] = useState('');
const [delegationPeriod, setDelegationPeriod] = useState('3months');
const delegates = [
{
id: 1,
name: 'Leyla Zana',
address: '0x1234...5678',
avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
reputation: 9500,
successRate: 92,
totalDelegated: 125000,
activeProposals: 8,
categories: ['Treasury', 'Community'],
description: 'Focused on community development and treasury management',
performance: {
proposalsCreated: 45,
proposalsPassed: 41,
participationRate: 98
}
},
{
id: 2,
name: 'Mazlum Doğan',
address: '0x8765...4321',
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d',
reputation: 8800,
successRate: 88,
totalDelegated: 98000,
activeProposals: 6,
categories: ['Technical', 'Governance'],
description: 'Technical expert specializing in protocol upgrades',
performance: {
proposalsCreated: 32,
proposalsPassed: 28,
participationRate: 95
}
},
{
id: 3,
name: 'Sakine Cansız',
address: '0x9876...1234',
avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80',
reputation: 9200,
successRate: 90,
totalDelegated: 110000,
activeProposals: 7,
categories: ['Community', 'Governance'],
description: 'Community organizer with focus on inclusive governance',
performance: {
proposalsCreated: 38,
proposalsPassed: 34,
participationRate: 96
}
}
];
const myDelegations = [
{
id: 1,
delegate: 'Leyla Zana',
amount: 5000,
category: 'Treasury',
period: '3 months',
remaining: '45 days',
status: 'active'
},
{
id: 2,
delegate: 'Mazlum Doğan',
amount: 3000,
category: 'Technical',
period: '6 months',
remaining: '120 days',
status: 'active'
}
];
const handleDelegate = () => {
console.log('Delegating:', {
delegate: selectedDelegate,
amount: delegationAmount,
period: delegationPeriod
});
};
return (
<div className="container mx-auto px-4 py-8 max-w-7xl">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">{t('delegation.title')}</h1>
<p className="text-gray-600">{t('delegation.description')}</p>
</div>
{/* Stats Overview */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<Card className="border-green-200">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<Users className="w-8 h-8 text-green-600" />
<div>
<div className="text-2xl font-bold">12</div>
<div className="text-sm text-gray-600">{t('delegation.activeDelegates')}</div>
</div>
</div>
</CardContent>
</Card>
<Card className="border-yellow-200">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<TrendingUp className="w-8 h-8 text-yellow-600" />
<div>
<div className="text-2xl font-bold">450K</div>
<div className="text-sm text-gray-600">{t('delegation.totalDelegated')}</div>
</div>
</div>
</CardContent>
</Card>
<Card className="border-red-200">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<Shield className="w-8 h-8 text-red-600" />
<div>
<div className="text-2xl font-bold">89%</div>
<div className="text-sm text-gray-600">{t('delegation.avgSuccessRate')}</div>
</div>
</div>
</CardContent>
</Card>
<Card className="border-blue-200">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<Clock className="w-8 h-8 text-blue-600" />
<div>
<div className="text-2xl font-bold">8K</div>
<div className="text-sm text-gray-600">{t('delegation.yourDelegated')}</div>
</div>
</div>
</CardContent>
</Card>
</div>
<Tabs defaultValue="explore" className="space-y-6">
<TabsList className="grid w-full grid-cols-3 bg-green-50 text-gray-900">
<TabsTrigger value="explore">{t('delegation.explore')}</TabsTrigger>
<TabsTrigger value="my-delegations">{t('delegation.myDelegations')}</TabsTrigger>
<TabsTrigger value="delegate-profile">{t('delegation.becomeDelegate')}</TabsTrigger>
</TabsList>
<TabsContent value="explore">
<Card className="border-green-200">
<CardHeader>
<CardTitle>{t('delegation.topDelegates')}</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{delegates.map((delegate) => (
<div
key={delegate.id}
className="border rounded-lg p-4 hover:bg-gray-50 transition-colors cursor-pointer"
onClick={() => setSelectedDelegate(delegate)}
>
<div className="flex items-start justify-between">
<div className="flex items-start gap-4">
<img
src={delegate.avatar}
alt={delegate.name}
className="w-12 h-12 rounded-full"
/>
<div>
<h3 className="font-semibold flex items-center gap-2">
{delegate.name}
<Badge className="bg-green-100 text-green-800">
{delegate.successRate}% success
</Badge>
</h3>
<p className="text-sm text-gray-600 mb-2">{delegate.description}</p>
<div className="flex flex-wrap gap-2 mb-2">
{delegate.categories.map((cat) => (
<Badge key={cat} variant="secondary">{cat}</Badge>
))}
</div>
<div className="flex items-center gap-4 text-sm text-gray-500">
<span className="flex items-center gap-1">
<TrendingUp className="w-3 h-3" />
{delegate.reputation} rep
</span>
<span className="flex items-center gap-1">
<Users className="w-3 h-3" />
{(delegate.totalDelegated / 1000).toFixed(0)}K delegated
</span>
<span className="flex items-center gap-1">
<Award className="w-3 h-3" />
{delegate.activeProposals} active
</span>
</div>
</div>
</div>
<Button size="sm" variant="outline">
<ChevronRight className="w-4 h-4" />
</Button>
</div>
</div>
))}
</div>
{/* Delegation Form */}
{selectedDelegate && (
<Card className="mt-6 border-2 border-green-500">
<CardHeader>
<CardTitle>{t('delegation.delegateTo')} {selectedDelegate.name}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<Label htmlFor="amount">{t('delegation.amount')}</Label>
<Input
id="amount"
type="number"
placeholder="Enter PZK amount"
value={delegationAmount}
onChange={(e) => setDelegationAmount(e.target.value)}
/>
</div>
<div>
<Label htmlFor="period">{t('delegation.period')}</Label>
<Select value={delegationPeriod} onValueChange={setDelegationPeriod}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1month">1 Month</SelectItem>
<SelectItem value="3months">3 Months</SelectItem>
<SelectItem value="6months">6 Months</SelectItem>
<SelectItem value="1year">1 Year</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label>{t('delegation.categories')}</Label>
<div className="flex flex-wrap gap-2 mt-2">
{['Treasury', 'Technical', 'Community', 'Governance'].map((cat) => (
<label key={cat} className="flex items-center gap-2">
<input type="checkbox" className="rounded" />
<span>{cat}</span>
</label>
))}
</div>
</div>
<Button
onClick={handleDelegate}
className="w-full bg-green-600 hover:bg-green-700"
>
{t('delegation.confirmDelegation')}
</Button>
</CardContent>
</Card>
)}
</CardContent>
</Card>
</TabsContent>
<TabsContent value="my-delegations">
<Card className="border-green-200">
<CardHeader>
<CardTitle>{t('delegation.yourDelegations')}</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{myDelegations.map((delegation) => (
<div key={delegation.id} className="border rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<div>
<h4 className="font-semibold">{delegation.delegate}</h4>
<div className="flex items-center gap-3 text-sm text-gray-600 mt-1">
<span>{delegation.amount} PZK</span>
<Badge variant="secondary">{delegation.category}</Badge>
<span>{delegation.remaining} remaining</span>
</div>
</div>
<Badge className="bg-green-100 text-green-800">
{delegation.status}
</Badge>
</div>
<Progress value={60} className="h-2" />
<div className="flex gap-2 mt-3">
<Button size="sm" variant="outline">
{t('delegation.modify')}
</Button>
<Button size="sm" variant="outline">
{t('delegation.revoke')}
</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="delegate-profile">
<DelegateProfile />
</TabsContent>
</Tabs>
</div>
);
};
export default DelegationManager;