mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-06-13 10:01:02 +00:00
Merge branch 'claude/calisma-ya-011CV6DKKRcWvDTxoEY7rYV4' into main
This commit is contained in:
@@ -0,0 +1,282 @@
|
|||||||
|
// ========================================
|
||||||
|
// Async Component Pattern
|
||||||
|
// ========================================
|
||||||
|
// Standard pattern for loading/error/empty states
|
||||||
|
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Loader2, AlertCircle, Inbox, RefreshCw } from 'lucide-react';
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// LOADING SKELETON
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export const CardSkeleton: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Card className="bg-gray-900 border-gray-800 animate-pulse">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="h-6 bg-gray-800 rounded w-1/3 mb-4"></div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="h-4 bg-gray-800 rounded"></div>
|
||||||
|
<div className="h-4 bg-gray-800 rounded w-5/6"></div>
|
||||||
|
<div className="h-4 bg-gray-800 rounded w-4/6"></div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ListItemSkeleton: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-4 p-4 bg-gray-900 border border-gray-800 rounded-lg animate-pulse">
|
||||||
|
<div className="w-12 h-12 bg-gray-800 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-800 rounded w-1/4"></div>
|
||||||
|
<div className="h-3 bg-gray-800 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-20 bg-gray-800 rounded"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TableSkeleton: React.FC<{ rows?: number }> = ({ rows = 5 }) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{Array.from({ length: rows }).map((_, i) => (
|
||||||
|
<div key={i} className="flex gap-4 p-3 bg-gray-900 border border-gray-800 rounded animate-pulse">
|
||||||
|
<div className="h-4 bg-gray-800 rounded flex-1"></div>
|
||||||
|
<div className="h-4 bg-gray-800 rounded w-24"></div>
|
||||||
|
<div className="h-4 bg-gray-800 rounded w-32"></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// LOADING COMPONENT
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export const LoadingState: React.FC<{
|
||||||
|
message?: string;
|
||||||
|
fullScreen?: boolean;
|
||||||
|
}> = ({ message = 'Loading...', fullScreen = false }) => {
|
||||||
|
const content = (
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<Loader2 className="w-12 h-12 text-green-500 animate-spin" />
|
||||||
|
<p className="text-gray-400">{message}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (fullScreen) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||||
|
<CardContent>{content}</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-12">
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ERROR STATE
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export const ErrorState: React.FC<{
|
||||||
|
message?: string;
|
||||||
|
error?: Error | string;
|
||||||
|
onRetry?: () => void;
|
||||||
|
fullScreen?: boolean;
|
||||||
|
}> = ({
|
||||||
|
message = 'An error occurred',
|
||||||
|
error,
|
||||||
|
onRetry,
|
||||||
|
fullScreen = false,
|
||||||
|
}) => {
|
||||||
|
const errorMessage = typeof error === 'string' ? error : error?.message;
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">{message}</strong>
|
||||||
|
{errorMessage && (
|
||||||
|
<p className="text-sm text-gray-400 mb-4">{errorMessage}</p>
|
||||||
|
)}
|
||||||
|
{onRetry && (
|
||||||
|
<Button
|
||||||
|
onClick={onRetry}
|
||||||
|
size="sm"
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-4 h-4 mr-2" />
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (fullScreen) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">{content}</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="p-4">{content}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// EMPTY STATE
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export const EmptyState: React.FC<{
|
||||||
|
message?: string;
|
||||||
|
description?: string;
|
||||||
|
icon?: ReactNode;
|
||||||
|
action?: {
|
||||||
|
label: string;
|
||||||
|
onClick: () => void;
|
||||||
|
};
|
||||||
|
fullScreen?: boolean;
|
||||||
|
}> = ({
|
||||||
|
message = 'No data found',
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
action,
|
||||||
|
fullScreen = false,
|
||||||
|
}) => {
|
||||||
|
const content = (
|
||||||
|
<div className="flex flex-col items-center gap-4 text-center">
|
||||||
|
{icon || <Inbox className="w-16 h-16 text-gray-600" />}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-1">{message}</h3>
|
||||||
|
{description && <p className="text-sm text-gray-400">{description}</p>}
|
||||||
|
</div>
|
||||||
|
{action && (
|
||||||
|
<Button onClick={action.onClick} className="bg-green-600 hover:bg-green-700">
|
||||||
|
{action.label}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (fullScreen) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||||
|
<CardContent>{content}</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="p-12">{content}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ASYNC COMPONENT WRAPPER
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export interface AsyncComponentProps<T> {
|
||||||
|
/** Loading state */
|
||||||
|
isLoading: boolean;
|
||||||
|
/** Error object */
|
||||||
|
error?: Error | string | null;
|
||||||
|
/** Data */
|
||||||
|
data?: T | null;
|
||||||
|
/** Children render function */
|
||||||
|
children: (data: T) => ReactNode;
|
||||||
|
/** Custom loading component */
|
||||||
|
LoadingComponent?: React.ComponentType;
|
||||||
|
/** Custom error component */
|
||||||
|
ErrorComponent?: React.ComponentType<{ error: Error | string; onRetry?: () => void }>;
|
||||||
|
/** Custom empty component */
|
||||||
|
EmptyComponent?: React.ComponentType;
|
||||||
|
/** Retry callback */
|
||||||
|
onRetry?: () => void;
|
||||||
|
/** Loading message */
|
||||||
|
loadingMessage?: string;
|
||||||
|
/** Error message */
|
||||||
|
errorMessage?: string;
|
||||||
|
/** Empty message */
|
||||||
|
emptyMessage?: string;
|
||||||
|
/** Full screen mode */
|
||||||
|
fullScreen?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Standard async component pattern
|
||||||
|
* Handles loading, error, empty, and success states
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <AsyncComponent
|
||||||
|
* isLoading={loading}
|
||||||
|
* error={error}
|
||||||
|
* data={courses}
|
||||||
|
* onRetry={refetch}
|
||||||
|
* >
|
||||||
|
* {(courses) => <CourseList courses={courses} />}
|
||||||
|
* </AsyncComponent>
|
||||||
|
*/
|
||||||
|
export function AsyncComponent<T>({
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
data,
|
||||||
|
children,
|
||||||
|
LoadingComponent,
|
||||||
|
ErrorComponent,
|
||||||
|
EmptyComponent,
|
||||||
|
onRetry,
|
||||||
|
loadingMessage = 'Loading...',
|
||||||
|
errorMessage = 'Failed to load data',
|
||||||
|
emptyMessage = 'No data available',
|
||||||
|
fullScreen = false,
|
||||||
|
}: AsyncComponentProps<T>): JSX.Element {
|
||||||
|
// Loading state
|
||||||
|
if (isLoading) {
|
||||||
|
if (LoadingComponent) {
|
||||||
|
return <LoadingComponent />;
|
||||||
|
}
|
||||||
|
return <LoadingState message={loadingMessage} fullScreen={fullScreen} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (error) {
|
||||||
|
if (ErrorComponent) {
|
||||||
|
return <ErrorComponent error={error} onRetry={onRetry} />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ErrorState
|
||||||
|
message={errorMessage}
|
||||||
|
error={error}
|
||||||
|
onRetry={onRetry}
|
||||||
|
fullScreen={fullScreen}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Empty state
|
||||||
|
if (!data || (Array.isArray(data) && data.length === 0)) {
|
||||||
|
if (EmptyComponent) {
|
||||||
|
return <EmptyComponent />;
|
||||||
|
}
|
||||||
|
return <EmptyState message={emptyMessage} fullScreen={fullScreen} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success state - render children with data
|
||||||
|
return <>{children(data)}</>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,537 @@
|
|||||||
|
// ========================================
|
||||||
|
// Error Handler & User-Friendly Messages
|
||||||
|
// ========================================
|
||||||
|
// Convert blockchain errors to human-readable messages
|
||||||
|
|
||||||
|
import type { ApiPromise } from '@polkadot/api';
|
||||||
|
import type { DispatchError } from '@polkadot/types/interfaces';
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ERROR MESSAGE MAPPINGS
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
interface ErrorMessage {
|
||||||
|
en: string;
|
||||||
|
kmr: string; // Kurmanji
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User-friendly error messages for common blockchain errors
|
||||||
|
* Key format: "palletName.errorName"
|
||||||
|
*/
|
||||||
|
const ERROR_MESSAGES: Record<string, ErrorMessage> = {
|
||||||
|
// Staking errors
|
||||||
|
'staking.InsufficientBond': {
|
||||||
|
en: 'Bond amount too small. Please check minimum staking requirement.',
|
||||||
|
kmr: 'Mîqdara bond zêde piçûk e. Ji kerema xwe mîqdara kêmtirîn kontrol bike.',
|
||||||
|
},
|
||||||
|
'staking.AlreadyBonded': {
|
||||||
|
en: 'You have already bonded tokens. Use "Bond More" to add additional stake.',
|
||||||
|
kmr: 'We berê token bond kirine. Ji bo zêdekirin "Bond More" bikar bîne.',
|
||||||
|
},
|
||||||
|
'staking.NotStash': {
|
||||||
|
en: 'This account is not a stash account. Please use your staking controller.',
|
||||||
|
kmr: 'Ev account stash nîne. Ji kerema xwe controller bikar bîne.',
|
||||||
|
},
|
||||||
|
'staking.NoMoreChunks': {
|
||||||
|
en: 'Too many unbonding chunks. Please wait for previous unbondings to complete.',
|
||||||
|
kmr: 'Zêde chunk unbonding hene. Ji kerema xwe li çavkaniyên berê bisekine.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Identity KYC errors
|
||||||
|
'identityKyc.AlreadyApplied': {
|
||||||
|
en: 'You already have a pending citizenship application. Please wait for approval.',
|
||||||
|
kmr: 'We berê serlêdana welatîtiyê heye. Ji kerema xwe li pejirandina bisekine.',
|
||||||
|
},
|
||||||
|
'identityKyc.AlreadyApproved': {
|
||||||
|
en: 'Your citizenship application is already approved!',
|
||||||
|
kmr: 'Serlêdana welatîtiya we berê hatiye pejirandin!',
|
||||||
|
},
|
||||||
|
'identityKyc.NotApproved': {
|
||||||
|
en: 'Your KYC is not approved yet. Please complete citizenship application first.',
|
||||||
|
kmr: 'KYC-ya we hîn nehatiye pejirandin. Pêşî serlêdana welatîtiyê temam bike.',
|
||||||
|
},
|
||||||
|
'identityKyc.IdentityNotSet': {
|
||||||
|
en: 'Please set your identity information first.',
|
||||||
|
kmr: 'Ji kerema xwe pêşî agahdariya nasnameya xwe saz bike.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Tiki errors
|
||||||
|
'tiki.RoleAlreadyAssigned': {
|
||||||
|
en: 'This role is already assigned to the user.',
|
||||||
|
kmr: 'Ev rol berê ji bikarhêner re hatiye veqetandin.',
|
||||||
|
},
|
||||||
|
'tiki.UnauthorizedRoleAssignment': {
|
||||||
|
en: 'You do not have permission to assign this role.',
|
||||||
|
kmr: 'We destûra veqetandina vê rolê nîne.',
|
||||||
|
},
|
||||||
|
'tiki.RoleNotFound': {
|
||||||
|
en: 'The specified role does not exist.',
|
||||||
|
kmr: 'Rola diyarkirî tune ye.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// ValidatorPool errors
|
||||||
|
'validatorPool.AlreadyInPool': {
|
||||||
|
en: 'You are already registered in the validator pool.',
|
||||||
|
kmr: 'We berê di pool-a validator de tomar bûyî.',
|
||||||
|
},
|
||||||
|
'validatorPool.NotInPool': {
|
||||||
|
en: 'You are not registered in the validator pool.',
|
||||||
|
kmr: 'We di pool-a validator de tomar nebûyî.',
|
||||||
|
},
|
||||||
|
'validatorPool.InsufficientStake': {
|
||||||
|
en: 'Insufficient stake for validator pool. Please increase your stake.',
|
||||||
|
kmr: 'Stake ji bo pool-a validator kêm e. Ji kerema xwe stake-ya xwe zêde bike.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// DEX/AssetConversion errors
|
||||||
|
'assetConversion.PoolNotFound': {
|
||||||
|
en: 'Liquidity pool not found for this token pair.',
|
||||||
|
kmr: 'Pool-a liquidity ji bo vê cuda-token nehat dîtin.',
|
||||||
|
},
|
||||||
|
'assetConversion.InsufficientLiquidity': {
|
||||||
|
en: 'Insufficient liquidity in pool. Try a smaller amount.',
|
||||||
|
kmr: 'Liquidity-ya pool-ê kêm e. Mîqdareke piçûktir biceribîne.',
|
||||||
|
},
|
||||||
|
'assetConversion.SlippageTooHigh': {
|
||||||
|
en: 'Price impact too high. Increase slippage tolerance or reduce amount.',
|
||||||
|
kmr: 'Bandora bihayê zêde mezin e. Toleransa slippage zêde bike an mîqdarê kêm bike.',
|
||||||
|
},
|
||||||
|
'assetConversion.AmountTooSmall': {
|
||||||
|
en: 'Swap amount too small. Minimum swap amount not met.',
|
||||||
|
kmr: 'Mîqdara swap zêde piçûk e. Mîqdara kêmtirîn nehatiye gihîştin.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Balance/Asset errors
|
||||||
|
'balances.InsufficientBalance': {
|
||||||
|
en: 'Insufficient balance. You do not have enough tokens for this transaction.',
|
||||||
|
kmr: 'Balance-ya we kêm e. Ji bo vê transaction token-ên we têr nînin.',
|
||||||
|
},
|
||||||
|
'balances.ExistentialDeposit': {
|
||||||
|
en: 'Amount is below existential deposit. Account would be reaped.',
|
||||||
|
kmr: 'Mîqdar ji existential deposit kêmtir e. Account dê were jêbirin.',
|
||||||
|
},
|
||||||
|
'assets.BalanceLow': {
|
||||||
|
en: 'Asset balance too low for this operation.',
|
||||||
|
kmr: 'Balance-ya asset-ê ji bo vê operation zêde kêm e.',
|
||||||
|
},
|
||||||
|
'assets.NoPermission': {
|
||||||
|
en: 'You do not have permission to perform this operation on this asset.',
|
||||||
|
kmr: 'We destûra vê operation-ê li ser vê asset-ê nîne.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Governance errors
|
||||||
|
'referenda.NotOngoing': {
|
||||||
|
en: 'This referendum is not currently active.',
|
||||||
|
kmr: 'Ev referendum niha ne çalak e.',
|
||||||
|
},
|
||||||
|
'referenda.AlreadyVoted': {
|
||||||
|
en: 'You have already voted on this referendum.',
|
||||||
|
kmr: 'We berê li ser vê referendum-ê deng da.',
|
||||||
|
},
|
||||||
|
'convictionVoting.NotVoter': {
|
||||||
|
en: 'You are not eligible to vote. Citizenship required.',
|
||||||
|
kmr: 'We mafê dengdanê nîne. Welatîtî pêwîst e.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Treasury errors
|
||||||
|
'treasury.InsufficientProposersBalance': {
|
||||||
|
en: 'Insufficient balance to submit treasury proposal. Bond required.',
|
||||||
|
kmr: 'Ji bo pêşniyara treasury-yê balance kêm e. Bond pêwîst e.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Welati (Elections & Governance) errors
|
||||||
|
'welati.ElectionNotFound': {
|
||||||
|
en: 'Election not found. Please check the election ID.',
|
||||||
|
kmr: 'Hilbijartin nehat dîtin. Ji kerema xwe ID-ya hilbijartinê kontrol bike.',
|
||||||
|
},
|
||||||
|
'welati.ElectionNotActive': {
|
||||||
|
en: 'This election is not currently active.',
|
||||||
|
kmr: 'Ev hilbijartin niha ne çalak e.',
|
||||||
|
},
|
||||||
|
'welati.CandidacyPeriodExpired': {
|
||||||
|
en: 'Candidate registration period has ended.',
|
||||||
|
kmr: 'Dema qeydkirina berendaman qediya.',
|
||||||
|
},
|
||||||
|
'welati.VotingPeriodNotStarted': {
|
||||||
|
en: 'Voting period has not started yet. Please wait.',
|
||||||
|
kmr: 'Dema dengdanê hîn dest pê nekiriye. Ji kerema xwe bisekine.',
|
||||||
|
},
|
||||||
|
'welati.VotingPeriodExpired': {
|
||||||
|
en: 'Voting period has ended.',
|
||||||
|
kmr: 'Dema dengdanê qediya.',
|
||||||
|
},
|
||||||
|
'welati.AlreadyCandidate': {
|
||||||
|
en: 'You are already registered as a candidate in this election.',
|
||||||
|
kmr: 'We berê wekî berendam di vê hilbijartinê de tomar bûyî.',
|
||||||
|
},
|
||||||
|
'welati.AlreadyVoted': {
|
||||||
|
en: 'You have already voted in this election.',
|
||||||
|
kmr: 'We berê di vê hilbijartinê de deng da.',
|
||||||
|
},
|
||||||
|
'welati.InsufficientEndorsements': {
|
||||||
|
en: 'Insufficient endorsements. You need more citizen supporters.',
|
||||||
|
kmr: 'Piştgiriya têr tune. We piştgiriya zêdetir ji welatiyên pêwîst e.',
|
||||||
|
},
|
||||||
|
'welati.InsufficientTrustScore': {
|
||||||
|
en: 'Your trust score is too low for this election. Build your reputation first.',
|
||||||
|
kmr: 'Skora emîniya we ji bo vê hilbijartinê zêde kêm e. Pêşî navê xwe baş bike.',
|
||||||
|
},
|
||||||
|
'welati.NotACitizen': {
|
||||||
|
en: 'You must be a verified citizen (KYC approved) to participate.',
|
||||||
|
kmr: 'Divê we welatiyeke pejirandî (KYC pejirandî) bin da beşdar bibin.',
|
||||||
|
},
|
||||||
|
'welati.DepositRequired': {
|
||||||
|
en: 'Candidacy deposit required. Please pay the registration fee.',
|
||||||
|
kmr: 'Depozîta berendamiyê pêwîst e. Ji kerema xwe lêçûna qeydkirinê bidin.',
|
||||||
|
},
|
||||||
|
'welati.NotAuthorizedToNominate': {
|
||||||
|
en: 'You are not authorized to nominate officials. Minister or President only.',
|
||||||
|
kmr: 'We destûra hilbijartina karbidestan nîne. Tenê Wezîr an Serok.',
|
||||||
|
},
|
||||||
|
'welati.NotAuthorizedToApprove': {
|
||||||
|
en: 'Only the President can approve appointments.',
|
||||||
|
kmr: 'Tenê Serok dikare bicîhbûnan bipejirîne.',
|
||||||
|
},
|
||||||
|
'welati.NotAuthorizedToPropose': {
|
||||||
|
en: 'You are not authorized to submit proposals. Parliament members only.',
|
||||||
|
kmr: 'We destûra pêşniyaran pêşkêş kirinê nîne. Tenê endamên parlamentoyê.',
|
||||||
|
},
|
||||||
|
'welati.NotAuthorizedToVote': {
|
||||||
|
en: 'You are not authorized to vote on this proposal.',
|
||||||
|
kmr: 'We destûra dengdanê li ser vê pêşniyarê nîne.',
|
||||||
|
},
|
||||||
|
'welati.ProposalNotFound': {
|
||||||
|
en: 'Proposal not found. Please check the proposal ID.',
|
||||||
|
kmr: 'Pêşniyar nehat dîtin. Ji kerema xwe ID-ya pêşniyarê kontrol bike.',
|
||||||
|
},
|
||||||
|
'welati.ProposalNotActive': {
|
||||||
|
en: 'This proposal is not currently active or voting has ended.',
|
||||||
|
kmr: 'Ev pêşniyar niha ne çalak e an dengdan qediya.',
|
||||||
|
},
|
||||||
|
'welati.ProposalAlreadyVoted': {
|
||||||
|
en: 'You have already voted on this proposal.',
|
||||||
|
kmr: 'We berê li ser vê pêşniyarê deng da.',
|
||||||
|
},
|
||||||
|
'welati.QuorumNotMet': {
|
||||||
|
en: 'Quorum not met. Insufficient participation for this decision.',
|
||||||
|
kmr: 'Quorum nehat bidest xistin. Beşdariya têr ji bo vê biryarê tune ye.',
|
||||||
|
},
|
||||||
|
'welati.InvalidDistrict': {
|
||||||
|
en: 'Invalid electoral district. Please select a valid district.',
|
||||||
|
kmr: 'Qeza hilbijartinê nederbasdar e. Ji kerema xwe qezayeke derbasdar hilbijêre.',
|
||||||
|
},
|
||||||
|
'welati.RoleAlreadyFilled': {
|
||||||
|
en: 'This government position is already filled.',
|
||||||
|
kmr: 'Ev pozîsyona hukûmetê berê hatiye dagirtin.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Perwerde (Education) errors
|
||||||
|
'perwerde.CourseNotFound': {
|
||||||
|
en: 'Course not found. Please check the course ID.',
|
||||||
|
kmr: 'Ders nehat dîtin. Ji kerema xwe ID-ya dersê kontrol bike.',
|
||||||
|
},
|
||||||
|
'perwerde.AlreadyEnrolled': {
|
||||||
|
en: 'You are already enrolled in this course.',
|
||||||
|
kmr: 'We berê di vî dersê de tomar bûyî.',
|
||||||
|
},
|
||||||
|
'perwerde.NotEnrolled': {
|
||||||
|
en: 'You must enroll in this course first before completing it.',
|
||||||
|
kmr: 'Pêşî divê we di vî dersê de tomar bibin da ku temam bikin.',
|
||||||
|
},
|
||||||
|
'perwerde.CourseNotActive': {
|
||||||
|
en: 'This course is archived and no longer accepting enrollments.',
|
||||||
|
kmr: 'Ev ders di arşîvê de ye û êdî tomaran qebûl nake.',
|
||||||
|
},
|
||||||
|
'perwerde.CourseAlreadyCompleted': {
|
||||||
|
en: 'You have already completed this course.',
|
||||||
|
kmr: 'We berê ev ders temam kiriye.',
|
||||||
|
},
|
||||||
|
'perwerde.NotCourseOwner': {
|
||||||
|
en: 'Only the course owner can perform this action.',
|
||||||
|
kmr: 'Tenê xwediyê dersê dikare vê çalakiyê bike.',
|
||||||
|
},
|
||||||
|
'perwerde.TooManyCourses': {
|
||||||
|
en: 'Course enrollment limit reached. Please complete some courses first.',
|
||||||
|
kmr: 'Sînorê tomarkirina dersê gihîşt. Ji kerema xwe pêşî hin dersan temam bikin.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// System/General errors
|
||||||
|
'system.CallFiltered': {
|
||||||
|
en: 'This action is not permitted by the system filters.',
|
||||||
|
kmr: 'Ev çalakî ji hêla fîltireyên sîstemê ve nayê destûrdan.',
|
||||||
|
},
|
||||||
|
'BadOrigin': {
|
||||||
|
en: 'Unauthorized: You do not have permission for this action.',
|
||||||
|
kmr: 'Destûrnîn: We destûra vê çalakiyê nîne.',
|
||||||
|
},
|
||||||
|
'Module': {
|
||||||
|
en: 'A blockchain module error occurred. Please try again.',
|
||||||
|
kmr: 'Xeletiya module-ya blockchain-ê qewimî. Ji kerema xwe dîsa biceribîne.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ERROR EXTRACTION & FORMATTING
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract error information from DispatchError
|
||||||
|
*/
|
||||||
|
export function extractDispatchError(
|
||||||
|
api: ApiPromise,
|
||||||
|
dispatchError: DispatchError
|
||||||
|
): {
|
||||||
|
section: string;
|
||||||
|
name: string;
|
||||||
|
docs: string;
|
||||||
|
raw: string;
|
||||||
|
} {
|
||||||
|
if (dispatchError.isModule) {
|
||||||
|
const decoded = api.registry.findMetaError(dispatchError.asModule);
|
||||||
|
return {
|
||||||
|
section: decoded.section,
|
||||||
|
name: decoded.name,
|
||||||
|
docs: decoded.docs.join(' ').trim(),
|
||||||
|
raw: `${decoded.section}.${decoded.name}`,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
section: 'Unknown',
|
||||||
|
name: dispatchError.type,
|
||||||
|
docs: dispatchError.toString(),
|
||||||
|
raw: dispatchError.toString(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get user-friendly error message
|
||||||
|
* Falls back to blockchain docs if no custom message exists
|
||||||
|
*/
|
||||||
|
export function getUserFriendlyError(
|
||||||
|
api: ApiPromise,
|
||||||
|
dispatchError: DispatchError,
|
||||||
|
language: 'en' | 'kmr' = 'en'
|
||||||
|
): string {
|
||||||
|
const errorInfo = extractDispatchError(api, dispatchError);
|
||||||
|
const errorKey = errorInfo.raw;
|
||||||
|
|
||||||
|
// Check if we have a custom message
|
||||||
|
const customMessage = ERROR_MESSAGES[errorKey];
|
||||||
|
if (customMessage) {
|
||||||
|
return customMessage[language];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback to blockchain documentation
|
||||||
|
if (errorInfo.docs && errorInfo.docs.length > 0) {
|
||||||
|
return errorInfo.docs;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Final fallback
|
||||||
|
return `Transaction failed: ${errorInfo.section}.${errorInfo.name}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// TOAST HELPER
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export interface ToastFunction {
|
||||||
|
(options: {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
variant?: 'default' | 'destructive';
|
||||||
|
}): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle blockchain error with toast notification
|
||||||
|
* Automatically extracts user-friendly message
|
||||||
|
*/
|
||||||
|
export function handleBlockchainError(
|
||||||
|
error: any,
|
||||||
|
api: ApiPromise | null,
|
||||||
|
toast: ToastFunction,
|
||||||
|
language: 'en' | 'kmr' = 'en'
|
||||||
|
): void {
|
||||||
|
console.error('Blockchain error:', error);
|
||||||
|
|
||||||
|
// If it's a dispatch error from transaction callback
|
||||||
|
if (error?.isModule !== undefined && api) {
|
||||||
|
const userMessage = getUserFriendlyError(api, error, language);
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Transaction Failed' : 'Transaction Têk Çû',
|
||||||
|
description: userMessage,
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a standard error object
|
||||||
|
if (error?.message) {
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||||
|
description: error.message,
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a string
|
||||||
|
if (typeof error === 'string') {
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||||
|
description: error,
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generic fallback
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||||
|
description:
|
||||||
|
language === 'en'
|
||||||
|
? 'An unexpected error occurred. Please try again.'
|
||||||
|
: 'Xeletîyek nediyar qewimî. Ji kerema xwe dîsa biceribîne.',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// SUCCESS MESSAGES
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export interface SuccessMessage {
|
||||||
|
en: string;
|
||||||
|
kmr: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SUCCESS_MESSAGES: Record<string, SuccessMessage> = {
|
||||||
|
// Staking
|
||||||
|
'staking.bonded': {
|
||||||
|
en: 'Successfully staked {{amount}} HEZ. Rewards will start in the next era.',
|
||||||
|
kmr: '{{amount}} HEZ bi serkeftî stake kirin. Xelat di era pêşîn de dest pê dike.',
|
||||||
|
},
|
||||||
|
'staking.unbonded': {
|
||||||
|
en: 'Unbonded {{amount}} HEZ. Withdrawal available in {{days}} days.',
|
||||||
|
kmr: '{{amount}} HEZ unbond kirin. Di {{days}} rojan de derbasdarî dibe.',
|
||||||
|
},
|
||||||
|
'staking.nominated': {
|
||||||
|
en: 'Successfully nominated {{count}} validators.',
|
||||||
|
kmr: 'Bi serkeftî {{count}} validator nomînekirin.',
|
||||||
|
},
|
||||||
|
'staking.scoreStarted': {
|
||||||
|
en: 'Staking score tracking started! Your score will accumulate over time.',
|
||||||
|
kmr: 'Şopa staking dest pê kir! Xala we dê bi demê re kom bibe.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Citizenship
|
||||||
|
'citizenship.applied': {
|
||||||
|
en: 'Citizenship application submitted successfully! We will review your application.',
|
||||||
|
kmr: 'Serlêdana welatîtiyê bi serkeftî hate şandin! Em ê serlêdana we binirxînin.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Governance
|
||||||
|
'governance.voted': {
|
||||||
|
en: 'Your vote has been recorded successfully!',
|
||||||
|
kmr: 'Deng-a we bi serkeftî hate tomarkirin!',
|
||||||
|
},
|
||||||
|
'governance.proposed': {
|
||||||
|
en: 'Proposal submitted successfully! Voting will begin soon.',
|
||||||
|
kmr: 'Pêşniyar bi serkeftî hate şandin! Dengdan hêdî dest pê dike.',
|
||||||
|
},
|
||||||
|
|
||||||
|
// DEX
|
||||||
|
'dex.swapped': {
|
||||||
|
en: 'Successfully swapped {{from}} {{fromToken}} for {{to}} {{toToken}}',
|
||||||
|
kmr: 'Bi serkeftî {{from}} {{fromToken}} bo {{to}} {{toToken}} guhertin',
|
||||||
|
},
|
||||||
|
'dex.liquidityAdded': {
|
||||||
|
en: 'Successfully added liquidity to the pool!',
|
||||||
|
kmr: 'Bi serkeftî liquidity li pool-ê zêde kir!',
|
||||||
|
},
|
||||||
|
'dex.liquidityRemoved': {
|
||||||
|
en: 'Successfully removed liquidity from the pool!',
|
||||||
|
kmr: 'Bi serkeftî liquidity ji pool-ê derxist!',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Welati (Elections & Governance)
|
||||||
|
'welati.candidateRegistered': {
|
||||||
|
en: 'Successfully registered as candidate! Deposit: {{deposit}} HEZ. Good luck!',
|
||||||
|
kmr: 'Bi serkeftî wekî berendam tomar bûn! Depozît: {{deposit}} HEZ. Serkeftinê!',
|
||||||
|
},
|
||||||
|
'welati.voteCast': {
|
||||||
|
en: 'Your vote has been cast successfully! Thank you for participating.',
|
||||||
|
kmr: 'Deng-a we bi serkeftî hate dayîn! Spas ji bo beşdarî bûnê.',
|
||||||
|
},
|
||||||
|
'welati.proposalSubmitted': {
|
||||||
|
en: 'Proposal submitted successfully! Voting period: {{days}} days.',
|
||||||
|
kmr: 'Pêşniyar bi serkeftî hate şandin! Dema dengdanê: {{days}} roj.',
|
||||||
|
},
|
||||||
|
'welati.proposalVoted': {
|
||||||
|
en: 'Vote recorded on proposal #{{id}}. Your voice matters!',
|
||||||
|
kmr: 'Deng li ser pêşniyara #{{id}} tomar bû. Deng-a we girîng e!',
|
||||||
|
},
|
||||||
|
'welati.officialNominated': {
|
||||||
|
en: 'Official nominated successfully! Awaiting presidential approval.',
|
||||||
|
kmr: 'Karbides bi serkeftî hate hilbijartin! Li pejirandina serokê bisekine.',
|
||||||
|
},
|
||||||
|
'welati.appointmentApproved': {
|
||||||
|
en: 'Appointment approved! {{nominee}} is now {{role}}.',
|
||||||
|
kmr: 'Bicîhbûn pejirandî! {{nominee}} niha {{role}} ye.',
|
||||||
|
},
|
||||||
|
'welati.electionFinalized': {
|
||||||
|
en: 'Election finalized! {{winners}} elected. Turnout: {{turnout}}%',
|
||||||
|
kmr: 'Hilbijartin temam bû! {{winners}} hate hilbijartin. Beşdarî: {{turnout}}%',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Perwerde (Education)
|
||||||
|
'perwerde.courseCreated': {
|
||||||
|
en: 'Course "{{name}}" created successfully! Course ID: #{{id}}',
|
||||||
|
kmr: 'Dersa "{{name}}" bi serkeftî hate afirandin! ID-ya Dersê: #{{id}}',
|
||||||
|
},
|
||||||
|
'perwerde.enrolled': {
|
||||||
|
en: 'Successfully enrolled in course! Start learning now.',
|
||||||
|
kmr: 'Bi serkeftî di dersê de tomar bûn! Niha dest bi hînbûnê bike.',
|
||||||
|
},
|
||||||
|
'perwerde.completed': {
|
||||||
|
en: 'Congratulations! Course completed. Points earned: {{points}}',
|
||||||
|
kmr: 'Pîroz be! Ders temam bû. Xalên bidestxistî: {{points}}',
|
||||||
|
},
|
||||||
|
'perwerde.archived': {
|
||||||
|
en: 'Course archived successfully. No new enrollments will be accepted.',
|
||||||
|
kmr: 'Ders bi serkeftî hate arşîvkirin. Tomarên nû nayên qebûlkirin.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle successful blockchain transaction
|
||||||
|
*/
|
||||||
|
export function handleBlockchainSuccess(
|
||||||
|
messageKey: string,
|
||||||
|
toast: ToastFunction,
|
||||||
|
params: Record<string, string | number> = {},
|
||||||
|
language: 'en' | 'kmr' = 'en'
|
||||||
|
): void {
|
||||||
|
const template = SUCCESS_MESSAGES[messageKey];
|
||||||
|
|
||||||
|
if (!template) {
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Success' : 'Serkeft',
|
||||||
|
description: language === 'en' ? 'Transaction successful!' : 'Transaction serkeftî!',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace template variables like {{amount}}
|
||||||
|
let message = template[language];
|
||||||
|
Object.entries(params).forEach(([key, value]) => {
|
||||||
|
message = message.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
|
||||||
|
});
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: language === 'en' ? 'Success' : 'Serkeft',
|
||||||
|
description: message,
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,382 @@
|
|||||||
|
// ========================================
|
||||||
|
// Route Guards & Permission Checking
|
||||||
|
// ========================================
|
||||||
|
// Functions to check user permissions for protected routes
|
||||||
|
|
||||||
|
import type { ApiPromise } from '@polkadot/api';
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// CITIZENSHIP STATUS CHECK
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has approved citizenship (KYC approved)
|
||||||
|
* Required for: Voting, Education, Validator Pool, etc.
|
||||||
|
*/
|
||||||
|
export async function checkCitizenStatus(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check if Identity KYC pallet exists
|
||||||
|
if (!api.query?.identityKyc?.kycStatuses) {
|
||||||
|
console.warn('Identity KYC pallet not available');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const kycStatus = await api.query.identityKyc.kycStatuses(address);
|
||||||
|
|
||||||
|
if (kycStatus.isEmpty) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusStr = kycStatus.toString();
|
||||||
|
return statusStr === 'Approved';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking citizen status:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// VALIDATOR POOL STATUS CHECK
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user is registered in validator pool
|
||||||
|
* Required for: Validator Pool dashboard, validator settings
|
||||||
|
*/
|
||||||
|
export async function checkValidatorStatus(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check if ValidatorPool pallet exists
|
||||||
|
if (!api.query?.validatorPool?.poolMembers) {
|
||||||
|
console.warn('ValidatorPool pallet not available');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const poolMember = await api.query.validatorPool.poolMembers(address);
|
||||||
|
return !poolMember.isEmpty;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking validator status:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// TIKI ROLE CHECK
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
// Tiki role enum mapping (from pallet-tiki)
|
||||||
|
const TIKI_ROLES = [
|
||||||
|
'Hemwelatî', // 0 - Citizen
|
||||||
|
'Parlementer', // 1 - Parliament Member
|
||||||
|
'SerokiMeclise', // 2 - Speaker of Parliament
|
||||||
|
'Serok', // 3 - President
|
||||||
|
'Wezir', // 4 - Minister
|
||||||
|
'EndameDiwane', // 5 - Dîwan Member (Constitutional Court)
|
||||||
|
'Dadger', // 6 - Judge
|
||||||
|
'Dozger', // 7 - Prosecutor
|
||||||
|
'Hiquqnas', // 8 - Lawyer
|
||||||
|
'Noter', // 9 - Notary
|
||||||
|
'Xezinedar', // 10 - Treasurer
|
||||||
|
'Bacgir', // 11 - Tax Collector
|
||||||
|
'GerinendeyeCavkaniye',// 12 - Resource Manager
|
||||||
|
'OperatorêTorê', // 13 - Network Operator
|
||||||
|
'PisporêEwlehiyaSîber',// 14 - Cyber Security Expert
|
||||||
|
'GerinendeyeDaneye', // 15 - Data Manager
|
||||||
|
'Berdevk', // 16 - Spokesperson
|
||||||
|
'Qeydkar', // 17 - Registrar
|
||||||
|
'Balyoz', // 18 - Ambassador
|
||||||
|
'Navbeynkar', // 19 - Mediator
|
||||||
|
'ParêzvaneÇandî', // 20 - Cultural Protector
|
||||||
|
'Mufetîs', // 21 - Inspector
|
||||||
|
'KalîteKontrolker', // 22 - Quality Controller
|
||||||
|
'Mela', // 23 - Mullah
|
||||||
|
'Feqî', // 24 - Religious Scholar
|
||||||
|
'Perwerdekar', // 25 - Educator
|
||||||
|
'Rewsenbîr', // 26 - Intellectual
|
||||||
|
'RêveberêProjeyê', // 27 - Project Manager
|
||||||
|
'SerokêKomele', // 28 - Community Leader
|
||||||
|
'ModeratorêCivakê', // 29 - Society Moderator
|
||||||
|
'Axa', // 30 - Lord/Landowner
|
||||||
|
'Pêseng', // 31 - Pioneer
|
||||||
|
'Sêwirmend', // 32 - Counselor
|
||||||
|
'Hekem', // 33 - Wise Person
|
||||||
|
'Mamoste', // 34 - Teacher
|
||||||
|
'Bazargan', // 35 - Merchant
|
||||||
|
'SerokWeziran', // 36 - Prime Minister
|
||||||
|
'WezireDarayiye', // 37 - Finance Minister
|
||||||
|
'WezireParez', // 38 - Defense Minister
|
||||||
|
'WezireDad', // 39 - Justice Minister
|
||||||
|
'WezireBelaw', // 40 - Publication Minister
|
||||||
|
'WezireTend', // 41 - Health Minister
|
||||||
|
'WezireAva', // 42 - Infrastructure Minister
|
||||||
|
'WezireCand', // 43 - Education Minister
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has specific Tiki role
|
||||||
|
* @param role - Kurdish name of role (e.g., 'Hemwelatî', 'Perwerdekar')
|
||||||
|
*/
|
||||||
|
export async function checkTikiRole(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined,
|
||||||
|
role: string
|
||||||
|
): Promise<boolean> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check if Tiki pallet exists
|
||||||
|
if (!api.query?.tiki?.userTikis) {
|
||||||
|
console.warn('Tiki pallet not available');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tikis = await api.query.tiki.userTikis(address);
|
||||||
|
|
||||||
|
if (tikis.isEmpty) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// userTikis returns BoundedVec of Tiki enum indices
|
||||||
|
const tikiIndices = tikis.toJSON() as number[];
|
||||||
|
|
||||||
|
// Find role index
|
||||||
|
const roleIndex = TIKI_ROLES.indexOf(role);
|
||||||
|
if (roleIndex === -1) {
|
||||||
|
console.warn(`Unknown Tiki role: ${role}`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if user has this role
|
||||||
|
return tikiIndices.includes(roleIndex);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking Tiki role:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has ANY Tiki role from a list
|
||||||
|
* Useful for checking multiple acceptable roles
|
||||||
|
*/
|
||||||
|
export async function checkAnyTikiRole(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined,
|
||||||
|
roles: string[]
|
||||||
|
): Promise<boolean> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
for (const role of roles) {
|
||||||
|
const hasRole = await checkTikiRole(api, address, role);
|
||||||
|
if (hasRole) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking any Tiki role:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user is an educator (Perwerdekar)
|
||||||
|
* Required for: Creating courses in Perwerde
|
||||||
|
*/
|
||||||
|
export async function checkEducatorRole(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
return checkAnyTikiRole(api, address, [
|
||||||
|
'Perwerdekar', // Educator
|
||||||
|
'Mamoste', // Teacher
|
||||||
|
'WezireCand', // Education Minister
|
||||||
|
'Rewsenbîr', // Intellectual
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user can moderate (ModeratorêCivakê or higher)
|
||||||
|
* Required for: Forum moderation, governance moderation
|
||||||
|
*/
|
||||||
|
export async function checkModeratorRole(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
return checkAnyTikiRole(api, address, [
|
||||||
|
'ModeratorêCivakê', // Society Moderator
|
||||||
|
'Berdevk', // Spokesperson
|
||||||
|
'Serok', // President
|
||||||
|
'SerokWeziran', // Prime Minister
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user can participate in governance (citizen or higher)
|
||||||
|
* Required for: Voting, proposing, elections
|
||||||
|
*/
|
||||||
|
export async function checkGovernanceParticipation(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
// Any citizen with approved KYC can participate
|
||||||
|
return checkCitizenStatus(api, address);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user can create proposals
|
||||||
|
* Required for: Creating referendum proposals
|
||||||
|
*/
|
||||||
|
export async function checkProposalCreationRights(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
// Citizen + certain roles can create proposals
|
||||||
|
const isCitizen = await checkCitizenStatus(api, address);
|
||||||
|
if (!isCitizen) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional check: has any leadership role
|
||||||
|
return checkAnyTikiRole(api, address, [
|
||||||
|
'Parlementer', // Parliament Member
|
||||||
|
'SerokiMeclise', // Speaker
|
||||||
|
'Serok', // President
|
||||||
|
'SerokWeziran', // Prime Minister
|
||||||
|
'Wezir', // Minister
|
||||||
|
'SerokêKomele', // Community Leader
|
||||||
|
'RêveberêProjeyê', // Project Manager
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// STAKING SCORE CHECK
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has started staking score tracking
|
||||||
|
* Required for: Advanced staking features
|
||||||
|
*/
|
||||||
|
export async function checkStakingScoreTracking(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<boolean> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (!api.query?.stakingScore?.stakingStartBlock) {
|
||||||
|
console.warn('Staking score pallet not available');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startBlock = await api.query.stakingScore.stakingStartBlock(address);
|
||||||
|
return !startBlock.isNone;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking staking score tracking:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// COMBINED PERMISSION CHECKS
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
export interface UserPermissions {
|
||||||
|
isCitizen: boolean;
|
||||||
|
isValidator: boolean;
|
||||||
|
hasStakingScore: boolean;
|
||||||
|
canVote: boolean;
|
||||||
|
canCreateProposals: boolean;
|
||||||
|
canModerate: boolean;
|
||||||
|
canCreateCourses: boolean;
|
||||||
|
tikis: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all user permissions at once
|
||||||
|
* Useful for dashboard/profile pages
|
||||||
|
*/
|
||||||
|
export async function getUserPermissions(
|
||||||
|
api: ApiPromise | null,
|
||||||
|
address: string | null | undefined
|
||||||
|
): Promise<UserPermissions> {
|
||||||
|
if (!api || !address) {
|
||||||
|
return {
|
||||||
|
isCitizen: false,
|
||||||
|
isValidator: false,
|
||||||
|
hasStakingScore: false,
|
||||||
|
canVote: false,
|
||||||
|
canCreateProposals: false,
|
||||||
|
canModerate: false,
|
||||||
|
canCreateCourses: false,
|
||||||
|
tikis: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Fetch all in parallel
|
||||||
|
const [
|
||||||
|
isCitizen,
|
||||||
|
isValidator,
|
||||||
|
hasStakingScore,
|
||||||
|
canCreateProposals,
|
||||||
|
canModerate,
|
||||||
|
canCreateCourses,
|
||||||
|
tikiData,
|
||||||
|
] = await Promise.all([
|
||||||
|
checkCitizenStatus(api, address),
|
||||||
|
checkValidatorStatus(api, address),
|
||||||
|
checkStakingScoreTracking(api, address),
|
||||||
|
checkProposalCreationRights(api, address),
|
||||||
|
checkModeratorRole(api, address),
|
||||||
|
checkEducatorRole(api, address),
|
||||||
|
api.query?.tiki?.userTikis?.(address),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Parse tikis
|
||||||
|
const tikiIndices = tikiData?.isEmpty ? [] : (tikiData?.toJSON() as number[]);
|
||||||
|
const tikis = tikiIndices.map((index) => TIKI_ROLES[index] || `Unknown(${index})`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isCitizen,
|
||||||
|
isValidator,
|
||||||
|
hasStakingScore,
|
||||||
|
canVote: isCitizen, // Citizens can vote
|
||||||
|
canCreateProposals,
|
||||||
|
canModerate,
|
||||||
|
canCreateCourses,
|
||||||
|
tikis,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting user permissions:', error);
|
||||||
|
return {
|
||||||
|
isCitizen: false,
|
||||||
|
isValidator: false,
|
||||||
|
hasStakingScore: false,
|
||||||
|
canVote: false,
|
||||||
|
canCreateProposals: false,
|
||||||
|
canModerate: false,
|
||||||
|
canCreateCourses: false,
|
||||||
|
tikis: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,416 @@
|
|||||||
|
/**
|
||||||
|
* Perwerde (Education) Pallet Integration
|
||||||
|
*
|
||||||
|
* This module provides helper functions for interacting with the Perwerde pallet,
|
||||||
|
* which handles:
|
||||||
|
* - Course creation and management
|
||||||
|
* - Student enrollment
|
||||||
|
* - Course completion tracking
|
||||||
|
* - Education points/scores
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { ApiPromise } from '@polkadot/api';
|
||||||
|
import type { Option } from '@polkadot/types';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// TYPE DEFINITIONS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type CourseStatus = 'Active' | 'Archived';
|
||||||
|
|
||||||
|
export interface Course {
|
||||||
|
id: number;
|
||||||
|
owner: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
contentLink: string;
|
||||||
|
status: CourseStatus;
|
||||||
|
createdAt: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Enrollment {
|
||||||
|
student: string;
|
||||||
|
courseId: number;
|
||||||
|
enrolledAt: number;
|
||||||
|
completedAt?: number;
|
||||||
|
pointsEarned: number;
|
||||||
|
isCompleted: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StudentProgress {
|
||||||
|
totalCourses: number;
|
||||||
|
completedCourses: number;
|
||||||
|
totalPoints: number;
|
||||||
|
activeCourses: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// QUERY FUNCTIONS (Read-only)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all courses (active and archived)
|
||||||
|
*/
|
||||||
|
export async function getAllCourses(api: ApiPromise): Promise<Course[]> {
|
||||||
|
const nextId = await api.query.perwerde.nextCourseId();
|
||||||
|
const currentId = (nextId.toJSON() as number) || 0;
|
||||||
|
|
||||||
|
const courses: Course[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < currentId; i++) {
|
||||||
|
const courseOption = await api.query.perwerde.courses(i);
|
||||||
|
|
||||||
|
if (courseOption.isSome) {
|
||||||
|
const courseData = courseOption.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
courses.push({
|
||||||
|
id: i,
|
||||||
|
owner: courseData.owner,
|
||||||
|
name: hexToString(courseData.name),
|
||||||
|
description: hexToString(courseData.description),
|
||||||
|
contentLink: hexToString(courseData.contentLink),
|
||||||
|
status: courseData.status as CourseStatus,
|
||||||
|
createdAt: courseData.createdAt,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return courses;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get active courses only
|
||||||
|
*/
|
||||||
|
export async function getActiveCourses(api: ApiPromise): Promise<Course[]> {
|
||||||
|
const allCourses = await getAllCourses(api);
|
||||||
|
return allCourses.filter((course) => course.status === 'Active');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get course by ID
|
||||||
|
*/
|
||||||
|
export async function getCourseById(api: ApiPromise, courseId: number): Promise<Course | null> {
|
||||||
|
const courseOption = await api.query.perwerde.courses(courseId);
|
||||||
|
|
||||||
|
if (courseOption.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const courseData = courseOption.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: courseId,
|
||||||
|
owner: courseData.owner,
|
||||||
|
name: hexToString(courseData.name),
|
||||||
|
description: hexToString(courseData.description),
|
||||||
|
contentLink: hexToString(courseData.contentLink),
|
||||||
|
status: courseData.status as CourseStatus,
|
||||||
|
createdAt: courseData.createdAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get student's enrolled courses
|
||||||
|
*/
|
||||||
|
export async function getStudentCourses(api: ApiPromise, studentAddress: string): Promise<number[]> {
|
||||||
|
const coursesOption = await api.query.perwerde.studentCourses(studentAddress);
|
||||||
|
|
||||||
|
if (coursesOption.isNone || coursesOption.isEmpty) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (coursesOption.toJSON() as number[]) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get enrollment details for a student in a specific course
|
||||||
|
*/
|
||||||
|
export async function getEnrollment(
|
||||||
|
api: ApiPromise,
|
||||||
|
studentAddress: string,
|
||||||
|
courseId: number
|
||||||
|
): Promise<Enrollment | null> {
|
||||||
|
const enrollmentOption = await api.query.perwerde.enrollments([studentAddress, courseId]);
|
||||||
|
|
||||||
|
if (enrollmentOption.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const enrollmentData = enrollmentOption.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
student: enrollmentData.student,
|
||||||
|
courseId: enrollmentData.courseId,
|
||||||
|
enrolledAt: enrollmentData.enrolledAt,
|
||||||
|
completedAt: enrollmentData.completedAt || undefined,
|
||||||
|
pointsEarned: enrollmentData.pointsEarned || 0,
|
||||||
|
isCompleted: !!enrollmentData.completedAt,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get student's progress summary
|
||||||
|
*/
|
||||||
|
export async function getStudentProgress(api: ApiPromise, studentAddress: string): Promise<StudentProgress> {
|
||||||
|
const courseIds = await getStudentCourses(api, studentAddress);
|
||||||
|
|
||||||
|
let completedCourses = 0;
|
||||||
|
let totalPoints = 0;
|
||||||
|
|
||||||
|
for (const courseId of courseIds) {
|
||||||
|
const enrollment = await getEnrollment(api, studentAddress, courseId);
|
||||||
|
|
||||||
|
if (enrollment) {
|
||||||
|
if (enrollment.isCompleted) {
|
||||||
|
completedCourses++;
|
||||||
|
totalPoints += enrollment.pointsEarned;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalCourses: courseIds.length,
|
||||||
|
completedCourses,
|
||||||
|
totalPoints,
|
||||||
|
activeCourses: courseIds.length - completedCourses,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get Perwerde score for a student (sum of all earned points)
|
||||||
|
*/
|
||||||
|
export async function getPerwerdeScore(api: ApiPromise, studentAddress: string): Promise<number> {
|
||||||
|
try {
|
||||||
|
// Try to call the get_perwerde_score runtime API
|
||||||
|
// This might not exist in all versions, fallback to manual calculation
|
||||||
|
const score = await api.call.perwerdeApi?.getPerwerdeScore(studentAddress);
|
||||||
|
return score ? (score.toJSON() as number) : 0;
|
||||||
|
} catch (error) {
|
||||||
|
// Fallback: manually sum all points
|
||||||
|
const progress = await getStudentProgress(api, studentAddress);
|
||||||
|
return progress.totalPoints;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if student is enrolled in a course
|
||||||
|
*/
|
||||||
|
export async function isEnrolled(
|
||||||
|
api: ApiPromise,
|
||||||
|
studentAddress: string,
|
||||||
|
courseId: number
|
||||||
|
): Promise<boolean> {
|
||||||
|
const enrollment = await getEnrollment(api, studentAddress, courseId);
|
||||||
|
return enrollment !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get course enrollment statistics
|
||||||
|
*/
|
||||||
|
export async function getCourseStats(
|
||||||
|
api: ApiPromise,
|
||||||
|
courseId: number
|
||||||
|
): Promise<{
|
||||||
|
totalEnrollments: number;
|
||||||
|
completions: number;
|
||||||
|
averagePoints: number;
|
||||||
|
}> {
|
||||||
|
// Note: This requires iterating through all enrollments, which can be expensive
|
||||||
|
// In production, consider caching or maintaining separate counters
|
||||||
|
|
||||||
|
const entries = await api.query.perwerde.enrollments.entries();
|
||||||
|
|
||||||
|
let totalEnrollments = 0;
|
||||||
|
let completions = 0;
|
||||||
|
let totalPoints = 0;
|
||||||
|
|
||||||
|
for (const [key, value] of entries) {
|
||||||
|
const enrollmentData = value.toJSON() as any;
|
||||||
|
const enrollmentCourseId = (key.args[1] as any).toNumber();
|
||||||
|
|
||||||
|
if (enrollmentCourseId === courseId) {
|
||||||
|
totalEnrollments++;
|
||||||
|
|
||||||
|
if (enrollmentData.completedAt) {
|
||||||
|
completions++;
|
||||||
|
totalPoints += enrollmentData.pointsEarned || 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalEnrollments,
|
||||||
|
completions,
|
||||||
|
averagePoints: completions > 0 ? Math.round(totalPoints / completions) : 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// TRANSACTION FUNCTIONS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new course
|
||||||
|
* @requires AdminOrigin (only admin can create courses in current implementation)
|
||||||
|
*/
|
||||||
|
export async function createCourse(
|
||||||
|
api: ApiPromise,
|
||||||
|
signer: any,
|
||||||
|
name: string,
|
||||||
|
description: string,
|
||||||
|
contentLink: string
|
||||||
|
): Promise<void> {
|
||||||
|
const tx = api.tx.perwerde.createCourse(name, description, contentLink);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
tx.signAndSend(signer, ({ status, dispatchError }) => {
|
||||||
|
if (status.isInBlock) {
|
||||||
|
if (dispatchError) {
|
||||||
|
reject(dispatchError);
|
||||||
|
} else {
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enroll in a course
|
||||||
|
*/
|
||||||
|
export async function enrollInCourse(
|
||||||
|
api: ApiPromise,
|
||||||
|
signerAddress: string,
|
||||||
|
courseId: number
|
||||||
|
): Promise<void> {
|
||||||
|
const tx = api.tx.perwerde.enroll(courseId);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
tx.signAndSend(signerAddress, ({ status, dispatchError }) => {
|
||||||
|
if (status.isInBlock) {
|
||||||
|
if (dispatchError) {
|
||||||
|
reject(dispatchError);
|
||||||
|
} else {
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Complete a course
|
||||||
|
* @requires Course owner to call this for student
|
||||||
|
*/
|
||||||
|
export async function completeCourse(
|
||||||
|
api: ApiPromise,
|
||||||
|
signer: any,
|
||||||
|
studentAddress: string,
|
||||||
|
courseId: number,
|
||||||
|
points: number
|
||||||
|
): Promise<void> {
|
||||||
|
const tx = api.tx.perwerde.completeCourse(courseId, points);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
tx.signAndSend(signer, ({ status, dispatchError }) => {
|
||||||
|
if (status.isInBlock) {
|
||||||
|
if (dispatchError) {
|
||||||
|
reject(dispatchError);
|
||||||
|
} else {
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Archive a course
|
||||||
|
* @requires Course owner
|
||||||
|
*/
|
||||||
|
export async function archiveCourse(
|
||||||
|
api: ApiPromise,
|
||||||
|
signer: any,
|
||||||
|
courseId: number
|
||||||
|
): Promise<void> {
|
||||||
|
const tx = api.tx.perwerde.archiveCourse(courseId);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
tx.signAndSend(signer, ({ status, dispatchError }) => {
|
||||||
|
if (status.isInBlock) {
|
||||||
|
if (dispatchError) {
|
||||||
|
reject(dispatchError);
|
||||||
|
} else {
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// HELPER FUNCTIONS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert hex string to UTF-8 string
|
||||||
|
*/
|
||||||
|
function hexToString(hex: any): string {
|
||||||
|
if (!hex) return '';
|
||||||
|
|
||||||
|
// If it's already a string, return it
|
||||||
|
if (typeof hex === 'string' && !hex.startsWith('0x')) {
|
||||||
|
return hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a hex string, convert it
|
||||||
|
const hexStr = hex.toString().replace(/^0x/, '');
|
||||||
|
let str = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < hexStr.length; i += 2) {
|
||||||
|
const code = parseInt(hexStr.substr(i, 2), 16);
|
||||||
|
if (code !== 0) {
|
||||||
|
// Skip null bytes
|
||||||
|
str += String.fromCharCode(code);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return str.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get course difficulty label (based on points threshold)
|
||||||
|
*/
|
||||||
|
export function getCourseDifficulty(averagePoints: number): {
|
||||||
|
label: string;
|
||||||
|
color: string;
|
||||||
|
} {
|
||||||
|
if (averagePoints >= 100) {
|
||||||
|
return { label: 'Advanced', color: 'red' };
|
||||||
|
} else if (averagePoints >= 50) {
|
||||||
|
return { label: 'Intermediate', color: 'yellow' };
|
||||||
|
} else {
|
||||||
|
return { label: 'Beginner', color: 'green' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format IPFS link to gateway URL
|
||||||
|
*/
|
||||||
|
export function formatIPFSLink(ipfsHash: string): string {
|
||||||
|
if (!ipfsHash) return '';
|
||||||
|
|
||||||
|
// If already a full URL, return it
|
||||||
|
if (ipfsHash.startsWith('http')) {
|
||||||
|
return ipfsHash;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If starts with ipfs://, convert to gateway
|
||||||
|
if (ipfsHash.startsWith('ipfs://')) {
|
||||||
|
const hash = ipfsHash.replace('ipfs://', '');
|
||||||
|
return `https://ipfs.io/ipfs/${hash}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's just a hash, add gateway
|
||||||
|
return `https://ipfs.io/ipfs/${ipfsHash}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,616 @@
|
|||||||
|
/**
|
||||||
|
* Welati (Elections & Governance) Pallet Integration
|
||||||
|
*
|
||||||
|
* This module provides helper functions for interacting with the Welati pallet,
|
||||||
|
* which handles:
|
||||||
|
* - Presidential and Parliamentary Elections
|
||||||
|
* - Speaker and Constitutional Court Elections
|
||||||
|
* - Official Appointments (Ministers, Diwan)
|
||||||
|
* - Collective Proposals (Parliament/Diwan voting)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { ApiPromise } from '@polkadot/api';
|
||||||
|
import type { Option, Vec } from '@polkadot/types';
|
||||||
|
import type { AccountId, BlockNumber } from '@polkadot/types/interfaces';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// TYPE DEFINITIONS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type ElectionType = 'Presidential' | 'Parliamentary' | 'SpeakerElection' | 'ConstitutionalCourt';
|
||||||
|
|
||||||
|
export type ElectionStatus = 'CandidacyPeriod' | 'CampaignPeriod' | 'VotingPeriod' | 'Completed';
|
||||||
|
|
||||||
|
export type VoteChoice = 'Aye' | 'Nay' | 'Abstain';
|
||||||
|
|
||||||
|
export type CollectiveDecisionType =
|
||||||
|
| 'ParliamentSimpleMajority'
|
||||||
|
| 'ParliamentSuperMajority'
|
||||||
|
| 'ParliamentAbsoluteMajority'
|
||||||
|
| 'ConstitutionalReview'
|
||||||
|
| 'ConstitutionalUnanimous'
|
||||||
|
| 'ExecutiveDecision';
|
||||||
|
|
||||||
|
export type ProposalPriority = 'Urgent' | 'High' | 'Normal' | 'Low';
|
||||||
|
|
||||||
|
export type ProposalStatus = 'Active' | 'Approved' | 'Rejected' | 'Expired' | 'Executed';
|
||||||
|
|
||||||
|
export type MinisterRole =
|
||||||
|
| 'WezireDarayiye' // Finance
|
||||||
|
| 'WezireParez' // Defense
|
||||||
|
| 'WezireDad' // Justice
|
||||||
|
| 'WezireBelaw' // Education
|
||||||
|
| 'WezireTend' // Health
|
||||||
|
| 'WezireAva' // Water Resources
|
||||||
|
| 'WezireCand'; // Culture
|
||||||
|
|
||||||
|
export type GovernmentPosition = 'Serok' | 'SerokWeziran' | 'MeclisBaskanı';
|
||||||
|
|
||||||
|
export interface ElectionInfo {
|
||||||
|
electionId: number;
|
||||||
|
electionType: ElectionType;
|
||||||
|
status: ElectionStatus;
|
||||||
|
startBlock: number;
|
||||||
|
candidacyEndBlock: number;
|
||||||
|
campaignEndBlock: number;
|
||||||
|
votingEndBlock: number;
|
||||||
|
totalCandidates: number;
|
||||||
|
totalVotes: number;
|
||||||
|
turnoutPercentage: number;
|
||||||
|
districtCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CandidateInfo {
|
||||||
|
account: string;
|
||||||
|
districtId?: number;
|
||||||
|
registeredAt: number;
|
||||||
|
endorsersCount: number;
|
||||||
|
voteCount: number;
|
||||||
|
depositPaid: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ElectionResult {
|
||||||
|
electionId: number;
|
||||||
|
winners: string[];
|
||||||
|
totalVotes: number;
|
||||||
|
turnoutPercentage: number;
|
||||||
|
finalizedAt: number;
|
||||||
|
runoffRequired: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParliamentMember {
|
||||||
|
account: string;
|
||||||
|
electedAt: number;
|
||||||
|
termEndsAt: number;
|
||||||
|
votesParticipated: number;
|
||||||
|
totalVotesEligible: number;
|
||||||
|
participationRate: number;
|
||||||
|
committees: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CollectiveProposal {
|
||||||
|
proposalId: number;
|
||||||
|
proposer: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
proposedAt: number;
|
||||||
|
votingStartsAt: number;
|
||||||
|
expiresAt: number;
|
||||||
|
decisionType: CollectiveDecisionType;
|
||||||
|
status: ProposalStatus;
|
||||||
|
ayeVotes: number;
|
||||||
|
nayVotes: number;
|
||||||
|
abstainVotes: number;
|
||||||
|
threshold: number;
|
||||||
|
votesCast: number;
|
||||||
|
priority: ProposalPriority;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AppointmentProcess {
|
||||||
|
processId: number;
|
||||||
|
nominee: string;
|
||||||
|
role: string;
|
||||||
|
nominator: string;
|
||||||
|
justification: string;
|
||||||
|
status: 'Pending' | 'Approved' | 'Rejected';
|
||||||
|
createdAt: number;
|
||||||
|
deadline: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GovernanceMetrics {
|
||||||
|
totalElectionsHeld: number;
|
||||||
|
activeElections: number;
|
||||||
|
parliamentSize: number;
|
||||||
|
diwanSize: number;
|
||||||
|
activeProposals: number;
|
||||||
|
totalProposalsSubmitted: number;
|
||||||
|
averageTurnout: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// QUERY FUNCTIONS (Read-only)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current government officials
|
||||||
|
*/
|
||||||
|
export async function getCurrentOfficials(api: ApiPromise): Promise<{
|
||||||
|
serok?: string;
|
||||||
|
serokWeziran?: string;
|
||||||
|
meclisBaskanı?: string;
|
||||||
|
}> {
|
||||||
|
const [serok, serokWeziran, speaker] = await Promise.all([
|
||||||
|
api.query.welati.currentOfficials('Serok'),
|
||||||
|
api.query.welati.currentOfficials('SerokWeziran'),
|
||||||
|
api.query.welati.currentOfficials('MeclisBaskanı'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
serok: serok.isSome ? serok.unwrap().toString() : undefined,
|
||||||
|
serokWeziran: serokWeziran.isSome ? serokWeziran.unwrap().toString() : undefined,
|
||||||
|
meclisBaskanı: speaker.isSome ? speaker.unwrap().toString() : undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current cabinet ministers
|
||||||
|
*/
|
||||||
|
export async function getCurrentMinisters(api: ApiPromise): Promise<Record<MinisterRole, string | undefined>> {
|
||||||
|
const roles: MinisterRole[] = [
|
||||||
|
'WezireDarayiye',
|
||||||
|
'WezireParez',
|
||||||
|
'WezireDad',
|
||||||
|
'WezireBelaw',
|
||||||
|
'WezireTend',
|
||||||
|
'WezireAva',
|
||||||
|
'WezireCand',
|
||||||
|
];
|
||||||
|
|
||||||
|
const ministers = await Promise.all(
|
||||||
|
roles.map(role => api.query.welati.currentMinisters(role))
|
||||||
|
);
|
||||||
|
|
||||||
|
const result: Record<string, string | undefined> = {};
|
||||||
|
roles.forEach((role, index) => {
|
||||||
|
result[role] = ministers[index].isSome ? ministers[index].unwrap().toString() : undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
return result as Record<MinisterRole, string | undefined>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get parliament members list
|
||||||
|
*/
|
||||||
|
export async function getParliamentMembers(api: ApiPromise): Promise<ParliamentMember[]> {
|
||||||
|
const members = await api.query.welati.parliamentMembers();
|
||||||
|
|
||||||
|
if (!members || members.isEmpty) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const memberList: ParliamentMember[] = [];
|
||||||
|
const accountIds = members.toJSON() as string[];
|
||||||
|
|
||||||
|
for (const accountId of accountIds) {
|
||||||
|
// In a real implementation, fetch detailed member info
|
||||||
|
// For now, return basic structure
|
||||||
|
memberList.push({
|
||||||
|
account: accountId,
|
||||||
|
electedAt: 0,
|
||||||
|
termEndsAt: 0,
|
||||||
|
votesParticipated: 0,
|
||||||
|
totalVotesEligible: 0,
|
||||||
|
participationRate: 0,
|
||||||
|
committees: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return memberList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get Diwan (Constitutional Court) members
|
||||||
|
*/
|
||||||
|
export async function getDiwanMembers(api: ApiPromise): Promise<string[]> {
|
||||||
|
const members = await api.query.welati.diwanMembers();
|
||||||
|
|
||||||
|
if (!members || members.isEmpty) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (members.toJSON() as string[]) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get active elections
|
||||||
|
*/
|
||||||
|
export async function getActiveElections(api: ApiPromise): Promise<ElectionInfo[]> {
|
||||||
|
const nextId = await api.query.welati.nextElectionId();
|
||||||
|
const currentId = (nextId.toJSON() as number) || 0;
|
||||||
|
|
||||||
|
const elections: ElectionInfo[] = [];
|
||||||
|
|
||||||
|
// Query last 10 elections
|
||||||
|
for (let i = Math.max(0, currentId - 10); i < currentId; i++) {
|
||||||
|
const election = await api.query.welati.activeElections(i);
|
||||||
|
|
||||||
|
if (election.isSome) {
|
||||||
|
const data = election.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
elections.push({
|
||||||
|
electionId: i,
|
||||||
|
electionType: data.electionType as ElectionType,
|
||||||
|
status: data.status as ElectionStatus,
|
||||||
|
startBlock: data.startBlock,
|
||||||
|
candidacyEndBlock: data.candidacyEndBlock,
|
||||||
|
campaignEndBlock: data.campaignEndBlock,
|
||||||
|
votingEndBlock: data.votingEndBlock,
|
||||||
|
totalCandidates: data.totalCandidates || 0,
|
||||||
|
totalVotes: data.totalVotes || 0,
|
||||||
|
turnoutPercentage: data.turnoutPercentage || 0,
|
||||||
|
districtCount: data.districtCount,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return elections.filter(e => e.status !== 'Completed');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get election by ID
|
||||||
|
*/
|
||||||
|
export async function getElectionById(api: ApiPromise, electionId: number): Promise<ElectionInfo | null> {
|
||||||
|
const election = await api.query.welati.activeElections(electionId);
|
||||||
|
|
||||||
|
if (election.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = election.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
electionId,
|
||||||
|
electionType: data.electionType as ElectionType,
|
||||||
|
status: data.status as ElectionStatus,
|
||||||
|
startBlock: data.startBlock,
|
||||||
|
candidacyEndBlock: data.candidacyEndBlock,
|
||||||
|
campaignEndBlock: data.campaignEndBlock,
|
||||||
|
votingEndBlock: data.votingEndBlock,
|
||||||
|
totalCandidates: data.totalCandidates || 0,
|
||||||
|
totalVotes: data.totalVotes || 0,
|
||||||
|
turnoutPercentage: data.turnoutPercentage || 0,
|
||||||
|
districtCount: data.districtCount,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get candidates for an election
|
||||||
|
*/
|
||||||
|
export async function getElectionCandidates(
|
||||||
|
api: ApiPromise,
|
||||||
|
electionId: number
|
||||||
|
): Promise<CandidateInfo[]> {
|
||||||
|
const entries = await api.query.welati.electionCandidates.entries(electionId);
|
||||||
|
|
||||||
|
const candidates: CandidateInfo[] = [];
|
||||||
|
|
||||||
|
for (const [key, value] of entries) {
|
||||||
|
const data = value.toJSON() as any;
|
||||||
|
const account = (key.args[1] as AccountId).toString();
|
||||||
|
|
||||||
|
candidates.push({
|
||||||
|
account,
|
||||||
|
districtId: data.districtId,
|
||||||
|
registeredAt: data.registeredAt,
|
||||||
|
endorsersCount: data.endorsers?.length || 0,
|
||||||
|
voteCount: data.voteCount || 0,
|
||||||
|
depositPaid: data.depositPaid?.toString() || '0',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return candidates.sort((a, b) => b.voteCount - a.voteCount);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has voted in an election
|
||||||
|
*/
|
||||||
|
export async function hasVoted(
|
||||||
|
api: ApiPromise,
|
||||||
|
electionId: number,
|
||||||
|
voterAddress: string
|
||||||
|
): Promise<boolean> {
|
||||||
|
const vote = await api.query.welati.electionVotes(electionId, voterAddress);
|
||||||
|
return vote.isSome;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get election results
|
||||||
|
*/
|
||||||
|
export async function getElectionResults(
|
||||||
|
api: ApiPromise,
|
||||||
|
electionId: number
|
||||||
|
): Promise<ElectionResult | null> {
|
||||||
|
const result = await api.query.welati.electionResults(electionId);
|
||||||
|
|
||||||
|
if (result.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = result.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
electionId,
|
||||||
|
winners: data.winners || [],
|
||||||
|
totalVotes: data.totalVotes || 0,
|
||||||
|
turnoutPercentage: data.turnoutPercentage || 0,
|
||||||
|
finalizedAt: data.finalizedAt || 0,
|
||||||
|
runoffRequired: data.runoffRequired || false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get active proposals
|
||||||
|
*/
|
||||||
|
export async function getActiveProposals(api: ApiPromise): Promise<CollectiveProposal[]> {
|
||||||
|
const nextId = await api.query.welati.nextProposalId();
|
||||||
|
const currentId = (nextId.toJSON() as number) || 0;
|
||||||
|
|
||||||
|
const proposals: CollectiveProposal[] = [];
|
||||||
|
|
||||||
|
// Query last 50 proposals
|
||||||
|
for (let i = Math.max(0, currentId - 50); i < currentId; i++) {
|
||||||
|
const proposal = await api.query.welati.activeProposals(i);
|
||||||
|
|
||||||
|
if (proposal.isSome) {
|
||||||
|
const data = proposal.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
proposals.push({
|
||||||
|
proposalId: i,
|
||||||
|
proposer: data.proposer,
|
||||||
|
title: data.title,
|
||||||
|
description: data.description,
|
||||||
|
proposedAt: data.proposedAt,
|
||||||
|
votingStartsAt: data.votingStartsAt,
|
||||||
|
expiresAt: data.expiresAt,
|
||||||
|
decisionType: data.decisionType as CollectiveDecisionType,
|
||||||
|
status: data.status as ProposalStatus,
|
||||||
|
ayeVotes: data.ayeVotes || 0,
|
||||||
|
nayVotes: data.nayVotes || 0,
|
||||||
|
abstainVotes: data.abstainVotes || 0,
|
||||||
|
threshold: data.threshold || 0,
|
||||||
|
votesCast: data.votesCast || 0,
|
||||||
|
priority: data.priority as ProposalPriority,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return proposals.filter(p => p.status === 'Active').reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get proposal by ID
|
||||||
|
*/
|
||||||
|
export async function getProposalById(
|
||||||
|
api: ApiPromise,
|
||||||
|
proposalId: number
|
||||||
|
): Promise<CollectiveProposal | null> {
|
||||||
|
const proposal = await api.query.welati.activeProposals(proposalId);
|
||||||
|
|
||||||
|
if (proposal.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = proposal.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
proposalId,
|
||||||
|
proposer: data.proposer,
|
||||||
|
title: data.title,
|
||||||
|
description: data.description,
|
||||||
|
proposedAt: data.proposedAt,
|
||||||
|
votingStartsAt: data.votingStartsAt,
|
||||||
|
expiresAt: data.expiresAt,
|
||||||
|
decisionType: data.decisionType as CollectiveDecisionType,
|
||||||
|
status: data.status as ProposalStatus,
|
||||||
|
ayeVotes: data.ayeVotes || 0,
|
||||||
|
nayVotes: data.nayVotes || 0,
|
||||||
|
abstainVotes: data.abstainVotes || 0,
|
||||||
|
threshold: data.threshold || 0,
|
||||||
|
votesCast: data.votesCast || 0,
|
||||||
|
priority: data.priority as ProposalPriority,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if user has voted on a proposal
|
||||||
|
*/
|
||||||
|
export async function hasVotedOnProposal(
|
||||||
|
api: ApiPromise,
|
||||||
|
proposalId: number,
|
||||||
|
voterAddress: string
|
||||||
|
): Promise<boolean> {
|
||||||
|
const vote = await api.query.welati.collectiveVotes(proposalId, voterAddress);
|
||||||
|
return vote.isSome;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get user's vote on a proposal
|
||||||
|
*/
|
||||||
|
export async function getProposalVote(
|
||||||
|
api: ApiPromise,
|
||||||
|
proposalId: number,
|
||||||
|
voterAddress: string
|
||||||
|
): Promise<VoteChoice | null> {
|
||||||
|
const vote = await api.query.welati.collectiveVotes(proposalId, voterAddress);
|
||||||
|
|
||||||
|
if (vote.isNone) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = vote.unwrap().toJSON() as any;
|
||||||
|
return data.vote as VoteChoice;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get pending appointments
|
||||||
|
*/
|
||||||
|
export async function getPendingAppointments(api: ApiPromise): Promise<AppointmentProcess[]> {
|
||||||
|
const nextId = await api.query.welati.nextAppointmentId();
|
||||||
|
const currentId = (nextId.toJSON() as number) || 0;
|
||||||
|
|
||||||
|
const appointments: AppointmentProcess[] = [];
|
||||||
|
|
||||||
|
for (let i = Math.max(0, currentId - 20); i < currentId; i++) {
|
||||||
|
const appointment = await api.query.welati.appointmentProcesses(i);
|
||||||
|
|
||||||
|
if (appointment.isSome) {
|
||||||
|
const data = appointment.unwrap().toJSON() as any;
|
||||||
|
|
||||||
|
if (data.status === 'Pending') {
|
||||||
|
appointments.push({
|
||||||
|
processId: i,
|
||||||
|
nominee: data.nominee,
|
||||||
|
role: data.role,
|
||||||
|
nominator: data.nominator,
|
||||||
|
justification: data.justification,
|
||||||
|
status: data.status,
|
||||||
|
createdAt: data.createdAt,
|
||||||
|
deadline: data.deadline,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return appointments;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get governance statistics
|
||||||
|
*/
|
||||||
|
export async function getGovernanceStats(api: ApiPromise): Promise<GovernanceMetrics> {
|
||||||
|
const stats = await api.query.welati.governanceStats();
|
||||||
|
|
||||||
|
if (!stats || stats.isEmpty) {
|
||||||
|
return {
|
||||||
|
totalElectionsHeld: 0,
|
||||||
|
activeElections: 0,
|
||||||
|
parliamentSize: 0,
|
||||||
|
diwanSize: 0,
|
||||||
|
activeProposals: 0,
|
||||||
|
totalProposalsSubmitted: 0,
|
||||||
|
averageTurnout: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = stats.toJSON() as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalElectionsHeld: data.totalElectionsHeld || 0,
|
||||||
|
activeElections: data.activeElections || 0,
|
||||||
|
parliamentSize: data.parliamentSize || 0,
|
||||||
|
diwanSize: data.diwanSize || 0,
|
||||||
|
activeProposals: data.activeProposals || 0,
|
||||||
|
totalProposalsSubmitted: data.totalProposalsSubmitted || 0,
|
||||||
|
averageTurnout: data.averageTurnout || 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current block number
|
||||||
|
*/
|
||||||
|
export async function getCurrentBlock(api: ApiPromise): Promise<number> {
|
||||||
|
const header = await api.rpc.chain.getHeader();
|
||||||
|
return header.number.toNumber();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate remaining blocks until deadline
|
||||||
|
*/
|
||||||
|
export async function getRemainingBlocks(api: ApiPromise, deadlineBlock: number): Promise<number> {
|
||||||
|
const currentBlock = await getCurrentBlock(api);
|
||||||
|
return Math.max(0, deadlineBlock - currentBlock);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert blocks to approximate time (6 seconds per block average)
|
||||||
|
*/
|
||||||
|
export function blocksToTime(blocks: number): {
|
||||||
|
days: number;
|
||||||
|
hours: number;
|
||||||
|
minutes: number;
|
||||||
|
} {
|
||||||
|
const seconds = blocks * 6;
|
||||||
|
const days = Math.floor(seconds / 86400);
|
||||||
|
const hours = Math.floor((seconds % 86400) / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
|
||||||
|
return { days, hours, minutes };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// HELPER FUNCTIONS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get election type label
|
||||||
|
*/
|
||||||
|
export function getElectionTypeLabel(type: ElectionType): { en: string; kmr: string } {
|
||||||
|
const labels = {
|
||||||
|
Presidential: { en: 'Presidential Election', kmr: 'Hilbijartina Serokî' },
|
||||||
|
Parliamentary: { en: 'Parliamentary Election', kmr: 'Hilbijartina Parlamentoyê' },
|
||||||
|
SpeakerElection: { en: 'Speaker Election', kmr: 'Hilbijartina Serokê Parlamentoyê' },
|
||||||
|
ConstitutionalCourt: { en: 'Constitutional Court Election', kmr: 'Hilbijartina Dadgeha Destûrî' },
|
||||||
|
};
|
||||||
|
|
||||||
|
return labels[type] || { en: type, kmr: type };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get election status label
|
||||||
|
*/
|
||||||
|
export function getElectionStatusLabel(status: ElectionStatus): { en: string; kmr: string } {
|
||||||
|
const labels = {
|
||||||
|
CandidacyPeriod: { en: 'Candidate Registration Open', kmr: 'Qeydkirina Berendam Vekirî ye' },
|
||||||
|
CampaignPeriod: { en: 'Campaign Period', kmr: 'Dema Kampanyayê' },
|
||||||
|
VotingPeriod: { en: 'Voting Open', kmr: 'Dengdan Vekirî ye' },
|
||||||
|
Completed: { en: 'Completed', kmr: 'Temam bû' },
|
||||||
|
};
|
||||||
|
|
||||||
|
return labels[status] || { en: status, kmr: status };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get minister role label
|
||||||
|
*/
|
||||||
|
export function getMinisterRoleLabel(role: MinisterRole): { en: string; kmr: string } {
|
||||||
|
const labels = {
|
||||||
|
WezireDarayiye: { en: 'Minister of Finance', kmr: 'Wezîrê Darayiyê' },
|
||||||
|
WezireParez: { en: 'Minister of Defense', kmr: 'Wezîrê Parezê' },
|
||||||
|
WezireDad: { en: 'Minister of Justice', kmr: 'Wezîrê Dadê' },
|
||||||
|
WezireBelaw: { en: 'Minister of Education', kmr: 'Wezîrê Perwerdeyê' },
|
||||||
|
WezireTend: { en: 'Minister of Health', kmr: 'Wezîrê Tendirustiyê' },
|
||||||
|
WezireAva: { en: 'Minister of Water Resources', kmr: 'Wezîrê Avê' },
|
||||||
|
WezireCand: { en: 'Minister of Culture', kmr: 'Wezîrê Çandî' },
|
||||||
|
};
|
||||||
|
|
||||||
|
return labels[role] || { en: role, kmr: role };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get proposal decision type threshold
|
||||||
|
*/
|
||||||
|
export function getDecisionTypeThreshold(type: CollectiveDecisionType, totalMembers: number): number {
|
||||||
|
switch (type) {
|
||||||
|
case 'ParliamentSimpleMajority':
|
||||||
|
return Math.floor(totalMembers / 2) + 1; // > 50%
|
||||||
|
case 'ParliamentSuperMajority':
|
||||||
|
case 'ConstitutionalReview':
|
||||||
|
return Math.ceil((totalMembers * 2) / 3); // > 66.67%
|
||||||
|
case 'ParliamentAbsoluteMajority':
|
||||||
|
return Math.ceil((totalMembers * 3) / 4); // > 75%
|
||||||
|
case 'ConstitutionalUnanimous':
|
||||||
|
return totalMembers; // 100%
|
||||||
|
default:
|
||||||
|
return Math.floor(totalMembers / 2) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
+64
-49
@@ -10,6 +10,8 @@ import AdminPanel from '@/pages/AdminPanel';
|
|||||||
import WalletDashboard from './pages/WalletDashboard';
|
import WalletDashboard from './pages/WalletDashboard';
|
||||||
import ReservesDashboardPage from './pages/ReservesDashboardPage';
|
import ReservesDashboardPage from './pages/ReservesDashboardPage';
|
||||||
import BeCitizen from './pages/BeCitizen';
|
import BeCitizen from './pages/BeCitizen';
|
||||||
|
import Elections from './pages/Elections';
|
||||||
|
import EducationPlatform from './pages/EducationPlatform';
|
||||||
import { AppProvider } from '@/contexts/AppContext';
|
import { AppProvider } from '@/contexts/AppContext';
|
||||||
import { PolkadotProvider } from '@/contexts/PolkadotContext';
|
import { PolkadotProvider } from '@/contexts/PolkadotContext';
|
||||||
import { WalletProvider } from '@/contexts/WalletContext';
|
import { WalletProvider } from '@/contexts/WalletContext';
|
||||||
@@ -19,63 +21,76 @@ import { AuthProvider } from '@/contexts/AuthContext';
|
|||||||
import { ProtectedRoute } from '@/components/ProtectedRoute';
|
import { ProtectedRoute } from '@/components/ProtectedRoute';
|
||||||
import NotFound from '@/pages/NotFound';
|
import NotFound from '@/pages/NotFound';
|
||||||
import { Toaster } from '@/components/ui/toaster';
|
import { Toaster } from '@/components/ui/toaster';
|
||||||
|
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import './i18n/config';
|
import './i18n/config';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
||||||
<AuthProvider>
|
<ErrorBoundary>
|
||||||
<AppProvider>
|
<AuthProvider>
|
||||||
<PolkadotProvider>
|
<AppProvider>
|
||||||
<WalletProvider>
|
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
|
||||||
<WebSocketProvider>
|
<WalletProvider>
|
||||||
<IdentityProvider>
|
<WebSocketProvider>
|
||||||
<Router>
|
<IdentityProvider>
|
||||||
<Routes>
|
<Router>
|
||||||
<Route path="/login" element={<Login />} />
|
<Routes>
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
|
||||||
<Route path="/email-verification" element={<EmailVerification />} />
|
<Route path="/email-verification" element={<EmailVerification />} />
|
||||||
<Route path="/reset-password" element={<PasswordReset />} />
|
<Route path="/reset-password" element={<PasswordReset />} />
|
||||||
<Route path="/" element={<Index />} />
|
<Route path="/" element={<Index />} />
|
||||||
<Route path="/be-citizen" element={<BeCitizen />} />
|
<Route path="/be-citizen" element={<BeCitizen />} />
|
||||||
<Route path="/dashboard" element={
|
<Route path="/dashboard" element={
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<Dashboard />
|
<Dashboard />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
<Route path="/profile/settings" element={
|
<Route path="/profile/settings" element={
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<ProfileSettings />
|
<ProfileSettings />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
<Route path="/admin" element={
|
<Route path="/admin" element={
|
||||||
<ProtectedRoute requireAdmin>
|
<ProtectedRoute requireAdmin>
|
||||||
<AdminPanel />
|
<AdminPanel />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
<Route path="/wallet" element={
|
<Route path="/wallet" element={
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<WalletDashboard />
|
<WalletDashboard />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
<Route path="/reserves" element={
|
<Route path="/reserves" element={
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<ReservesDashboardPage />
|
<ReservesDashboardPage />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="/elections" element={
|
||||||
</Routes>
|
<ProtectedRoute>
|
||||||
</Router>
|
<Elections />
|
||||||
</IdentityProvider>
|
</ProtectedRoute>
|
||||||
</WebSocketProvider>
|
} />
|
||||||
</WalletProvider>
|
<Route path="/education" element={
|
||||||
</PolkadotProvider>
|
<ProtectedRoute>
|
||||||
</AppProvider>
|
<EducationPlatform />
|
||||||
</AuthProvider>
|
</ProtectedRoute>
|
||||||
<Toaster />
|
} />
|
||||||
|
<Route path="*" element={<NotFound />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
</IdentityProvider>
|
||||||
|
</WebSocketProvider>
|
||||||
|
</WalletProvider>
|
||||||
|
</PolkadotProvider>
|
||||||
|
</AppProvider>
|
||||||
|
</AuthProvider>
|
||||||
|
<Toaster />
|
||||||
|
</ErrorBoundary>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import RewardDistribution from './RewardDistribution';
|
|||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { useWebSocket } from '@/contexts/WebSocketContext';
|
import { useWebSocket } from '@/contexts/WebSocketContext';
|
||||||
import { StakingDashboard } from './staking/StakingDashboard';
|
import { StakingDashboard } from './staking/StakingDashboard';
|
||||||
import { P2PMarket } from './p2p/P2PMarket';
|
|
||||||
import { MultiSigWallet } from './wallet/MultiSigWallet';
|
import { MultiSigWallet } from './wallet/MultiSigWallet';
|
||||||
import { useWallet } from '@/contexts/WalletContext';
|
import { useWallet } from '@/contexts/WalletContext';
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
@@ -45,7 +44,6 @@ const AppLayout: React.FC = () => {
|
|||||||
const [showTreasury, setShowTreasury] = useState(false);
|
const [showTreasury, setShowTreasury] = useState(false);
|
||||||
const [treasuryTab, setTreasuryTab] = useState('overview');
|
const [treasuryTab, setTreasuryTab] = useState('overview');
|
||||||
const [showStaking, setShowStaking] = useState(false);
|
const [showStaking, setShowStaking] = useState(false);
|
||||||
const [showP2P, setShowP2P] = useState(false);
|
|
||||||
const [showMultiSig, setShowMultiSig] = useState(false);
|
const [showMultiSig, setShowMultiSig] = useState(false);
|
||||||
const [showDEX, setShowDEX] = useState(false);
|
const [showDEX, setShowDEX] = useState(false);
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -182,13 +180,6 @@ const AppLayout: React.FC = () => {
|
|||||||
<Droplet className="w-4 h-4" />
|
<Droplet className="w-4 h-4" />
|
||||||
DEX Pools
|
DEX Pools
|
||||||
</button>
|
</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
|
<button
|
||||||
onClick={() => setShowStaking(true)}
|
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"
|
className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2"
|
||||||
@@ -363,20 +354,6 @@ const AppLayout: React.FC = () => {
|
|||||||
<StakingDashboard />
|
<StakingDashboard />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : showP2P ? (
|
|
||||||
<div className="pt-20 min-h-screen bg-gray-950">
|
|
||||||
<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
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 text-lg max-w-3xl mx-auto">
|
|
||||||
Trade tokens directly with other users
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<P2PMarket />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : showMultiSig ? (
|
) : showMultiSig ? (
|
||||||
<div className="pt-20 min-h-screen bg-gray-950">
|
<div className="pt-20 min-h-screen bg-gray-950">
|
||||||
<div className="max-w-full mx-auto px-4">
|
<div className="max-w-full mx-auto px-4">
|
||||||
@@ -415,7 +392,7 @@ const AppLayout: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
{(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showP2P || showMultiSig) && (
|
{(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showMultiSig) && (
|
||||||
<div className="fixed bottom-8 right-8 z-50">
|
<div className="fixed bottom-8 right-8 z-50">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@@ -426,7 +403,6 @@ const AppLayout: React.FC = () => {
|
|||||||
setShowModeration(false);
|
setShowModeration(false);
|
||||||
setShowTreasury(false);
|
setShowTreasury(false);
|
||||||
setShowStaking(false);
|
setShowStaking(false);
|
||||||
setShowP2P(false);
|
|
||||||
setShowMultiSig(false);
|
setShowMultiSig(false);
|
||||||
}}
|
}}
|
||||||
className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2 transition-all"
|
className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2 transition-all"
|
||||||
|
|||||||
@@ -0,0 +1,243 @@
|
|||||||
|
// ========================================
|
||||||
|
// Error Boundary Component
|
||||||
|
// ========================================
|
||||||
|
// Catches React errors and displays fallback UI
|
||||||
|
|
||||||
|
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: ReactNode;
|
||||||
|
fallback?: ReactNode;
|
||||||
|
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
hasError: boolean;
|
||||||
|
error: Error | null;
|
||||||
|
errorInfo: ErrorInfo | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Global Error Boundary
|
||||||
|
* Catches unhandled errors in React component tree
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <ErrorBoundary>
|
||||||
|
* <App />
|
||||||
|
* </ErrorBoundary>
|
||||||
|
*/
|
||||||
|
export class ErrorBoundary extends Component<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
hasError: false,
|
||||||
|
error: null,
|
||||||
|
errorInfo: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): Partial<State> {
|
||||||
|
// Update state so next render shows fallback UI
|
||||||
|
return {
|
||||||
|
hasError: true,
|
||||||
|
error,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
|
||||||
|
// Log error to console
|
||||||
|
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||||
|
|
||||||
|
// Update state with error details
|
||||||
|
this.setState({
|
||||||
|
error,
|
||||||
|
errorInfo,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Call custom error handler if provided
|
||||||
|
if (this.props.onError) {
|
||||||
|
this.props.onError(error, errorInfo);
|
||||||
|
}
|
||||||
|
|
||||||
|
// In production, you might want to log to an error reporting service
|
||||||
|
// Example: Sentry.captureException(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleReset = (): void => {
|
||||||
|
this.setState({
|
||||||
|
hasError: false,
|
||||||
|
error: null,
|
||||||
|
errorInfo: null,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleReload = (): void => {
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
handleGoHome = (): void => {
|
||||||
|
window.location.href = '/';
|
||||||
|
};
|
||||||
|
|
||||||
|
render(): ReactNode {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
// Use custom fallback if provided
|
||||||
|
if (this.props.fallback) {
|
||||||
|
return this.props.fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default error UI
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-2xl w-full">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500 mb-6">
|
||||||
|
<AlertTriangle className="h-6 w-6 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<h2 className="text-xl font-bold mb-2 text-white">Something Went Wrong</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
An unexpected error occurred. We apologize for the inconvenience.
|
||||||
|
</p>
|
||||||
|
{this.state.error && (
|
||||||
|
<details className="mt-4 p-4 bg-gray-950 rounded border border-gray-700">
|
||||||
|
<summary className="cursor-pointer text-sm font-semibold text-gray-400 hover:text-gray-300">
|
||||||
|
Error Details (for developers)
|
||||||
|
</summary>
|
||||||
|
<div className="mt-3 text-xs font-mono space-y-2">
|
||||||
|
<div>
|
||||||
|
<strong className="text-red-400">Error:</strong>
|
||||||
|
<pre className="mt-1 text-gray-400 whitespace-pre-wrap">
|
||||||
|
{this.state.error.toString()}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
{this.state.errorInfo && (
|
||||||
|
<div>
|
||||||
|
<strong className="text-red-400">Component Stack:</strong>
|
||||||
|
<pre className="mt-1 text-gray-400 whitespace-pre-wrap">
|
||||||
|
{this.state.errorInfo.componentStack}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
<Button
|
||||||
|
onClick={this.handleReset}
|
||||||
|
className="bg-green-600 hover:bg-green-700 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-4 h-4" />
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={this.handleReload}
|
||||||
|
variant="outline"
|
||||||
|
className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-4 h-4" />
|
||||||
|
Reload Page
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={this.handleGoHome}
|
||||||
|
variant="outline"
|
||||||
|
className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Home className="w-4 h-4" />
|
||||||
|
Go Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-6 text-sm text-gray-500">
|
||||||
|
If this problem persists, please contact support at{' '}
|
||||||
|
<a
|
||||||
|
href="mailto:info@pezkuwichain.io"
|
||||||
|
className="text-green-400 hover:underline"
|
||||||
|
>
|
||||||
|
info@pezkuwichain.io
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// No error, render children normally
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ROUTE-LEVEL ERROR BOUNDARY
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Smaller error boundary for individual routes
|
||||||
|
* Less intrusive, doesn't take over the whole screen
|
||||||
|
*/
|
||||||
|
export const RouteErrorBoundary: React.FC<{
|
||||||
|
children: ReactNode;
|
||||||
|
routeName?: string;
|
||||||
|
}> = ({ children, routeName = 'this page' }) => {
|
||||||
|
const [hasError, setHasError] = React.useState(false);
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setHasError(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (hasError) {
|
||||||
|
return (
|
||||||
|
<div className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Error loading {routeName}</strong>
|
||||||
|
An error occurred while rendering this component.
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button onClick={handleReset} size="sm" className="bg-green-600 hover:bg-green-700">
|
||||||
|
<RefreshCw className="w-4 h-4 mr-2" />
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ErrorBoundary fallback={<RouteErrorFallback routeName={routeName} onReset={handleReset} />}>
|
||||||
|
{children}
|
||||||
|
</ErrorBoundary>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const RouteErrorFallback: React.FC<{ routeName: string; onReset: () => void }> = ({
|
||||||
|
routeName,
|
||||||
|
onReset,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Error loading {routeName}</strong>
|
||||||
|
An unexpected error occurred.
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button onClick={onReset} size="sm" className="bg-green-600 hover:bg-green-700">
|
||||||
|
<RefreshCw className="w-4 h-4 mr-2" />
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,466 @@
|
|||||||
|
// ========================================
|
||||||
|
// Route Guard Components
|
||||||
|
// ========================================
|
||||||
|
// Protected route wrappers that check user permissions
|
||||||
|
|
||||||
|
import React, { useEffect, useState, ReactNode } from 'react';
|
||||||
|
import { Navigate } from 'react-router-dom';
|
||||||
|
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||||
|
import { useAuth } from '@/contexts/AuthContext';
|
||||||
|
import {
|
||||||
|
checkCitizenStatus,
|
||||||
|
checkValidatorStatus,
|
||||||
|
checkEducatorRole,
|
||||||
|
checkModeratorRole,
|
||||||
|
} from '@pezkuwi/lib/guards';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||||
|
import { Loader2, AlertCircle, Users, GraduationCap, Shield } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface RouteGuardProps {
|
||||||
|
children: ReactNode;
|
||||||
|
fallbackPath?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// LOADING COMPONENT
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
const LoadingGuard: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||||
|
<CardContent className="flex flex-col items-center gap-4">
|
||||||
|
<Loader2 className="w-12 h-12 text-green-500 animate-spin" />
|
||||||
|
<p className="text-gray-400">Checking permissions...</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// CITIZEN ROUTE GUARD
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CitizenRoute - Requires approved KYC (citizenship)
|
||||||
|
* Use for: Voting, Education, Elections, etc.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <Route path="/vote" element={
|
||||||
|
* <CitizenRoute>
|
||||||
|
* <VotingPage />
|
||||||
|
* </CitizenRoute>
|
||||||
|
* } />
|
||||||
|
*/
|
||||||
|
export const CitizenRoute: React.FC<RouteGuardProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = '/be-citizen',
|
||||||
|
}) => {
|
||||||
|
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||||
|
const { user } = useAuth();
|
||||||
|
const [isCitizen, setIsCitizen] = useState<boolean | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPermission = async () => {
|
||||||
|
if (!isApiReady || !api) {
|
||||||
|
setLoading(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedAccount?.address) {
|
||||||
|
setIsCitizen(false);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const citizenStatus = await checkCitizenStatus(api, selectedAccount.address);
|
||||||
|
setIsCitizen(citizenStatus);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Citizen check failed:', error);
|
||||||
|
setIsCitizen(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPermission();
|
||||||
|
}, [api, isApiReady, selectedAccount]);
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading || !isApiReady) {
|
||||||
|
return <LoadingGuard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not connected to wallet
|
||||||
|
if (!selectedAccount) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="flex flex-col items-center gap-4 text-center">
|
||||||
|
<Users className="w-16 h-16 text-yellow-500" />
|
||||||
|
<h2 className="text-2xl font-bold text-white">Wallet Not Connected</h2>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Please connect your Polkadot wallet to access this feature.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => window.location.href = '/'}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Go to Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not a citizen
|
||||||
|
if (isCitizen === false) {
|
||||||
|
return <Navigate to={fallbackPath} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authorized
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// VALIDATOR ROUTE GUARD
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ValidatorRoute - Requires validator pool membership
|
||||||
|
* Use for: Validator pool dashboard, validator settings
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <Route path="/validator-pool" element={
|
||||||
|
* <ValidatorRoute>
|
||||||
|
* <ValidatorPoolDashboard />
|
||||||
|
* </ValidatorRoute>
|
||||||
|
* } />
|
||||||
|
*/
|
||||||
|
export const ValidatorRoute: React.FC<RouteGuardProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = '/staking',
|
||||||
|
}) => {
|
||||||
|
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||||
|
const [isValidator, setIsValidator] = useState<boolean | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPermission = async () => {
|
||||||
|
if (!isApiReady || !api) {
|
||||||
|
setLoading(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedAccount?.address) {
|
||||||
|
setIsValidator(false);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const validatorStatus = await checkValidatorStatus(api, selectedAccount.address);
|
||||||
|
setIsValidator(validatorStatus);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Validator check failed:', error);
|
||||||
|
setIsValidator(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPermission();
|
||||||
|
}, [api, isApiReady, selectedAccount]);
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading || !isApiReady) {
|
||||||
|
return <LoadingGuard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not connected to wallet
|
||||||
|
if (!selectedAccount) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not in validator pool
|
||||||
|
if (isValidator === false) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Validator Access Required</strong>
|
||||||
|
You must be registered in the Validator Pool to access this feature.
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => window.location.href = fallbackPath}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Go to Staking
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authorized
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// EDUCATOR ROUTE GUARD
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* EducatorRoute - Requires educator Tiki role
|
||||||
|
* Use for: Creating courses in Perwerde (Education platform)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <Route path="/education/create-course" element={
|
||||||
|
* <EducatorRoute>
|
||||||
|
* <CourseCreator />
|
||||||
|
* </EducatorRoute>
|
||||||
|
* } />
|
||||||
|
*/
|
||||||
|
export const EducatorRoute: React.FC<RouteGuardProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = '/education',
|
||||||
|
}) => {
|
||||||
|
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||||
|
const [isEducator, setIsEducator] = useState<boolean | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPermission = async () => {
|
||||||
|
if (!isApiReady || !api) {
|
||||||
|
setLoading(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedAccount?.address) {
|
||||||
|
setIsEducator(false);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const educatorStatus = await checkEducatorRole(api, selectedAccount.address);
|
||||||
|
setIsEducator(educatorStatus);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Educator check failed:', error);
|
||||||
|
setIsEducator(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPermission();
|
||||||
|
}, [api, isApiReady, selectedAccount]);
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading || !isApiReady) {
|
||||||
|
return <LoadingGuard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not connected to wallet
|
||||||
|
if (!selectedAccount) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not an educator
|
||||||
|
if (isEducator === false) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<GraduationCap className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Educator Role Required</strong>
|
||||||
|
You need one of these Tiki roles to create courses:
|
||||||
|
<ul className="list-disc list-inside mt-2 text-sm">
|
||||||
|
<li>Perwerdekar (Educator)</li>
|
||||||
|
<li>Mamoste (Teacher)</li>
|
||||||
|
<li>WezireCand (Education Minister)</li>
|
||||||
|
<li>Rewsenbîr (Intellectual)</li>
|
||||||
|
</ul>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => window.location.href = fallbackPath}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Browse Courses
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authorized
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// MODERATOR ROUTE GUARD
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ModeratorRoute - Requires moderator Tiki role
|
||||||
|
* Use for: Forum moderation, governance moderation
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <Route path="/moderate" element={
|
||||||
|
* <ModeratorRoute>
|
||||||
|
* <ModerationPanel />
|
||||||
|
* </ModeratorRoute>
|
||||||
|
* } />
|
||||||
|
*/
|
||||||
|
export const ModeratorRoute: React.FC<RouteGuardProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = '/',
|
||||||
|
}) => {
|
||||||
|
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||||
|
const [isModerator, setIsModerator] = useState<boolean | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPermission = async () => {
|
||||||
|
if (!isApiReady || !api) {
|
||||||
|
setLoading(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedAccount?.address) {
|
||||||
|
setIsModerator(false);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const moderatorStatus = await checkModeratorRole(api, selectedAccount.address);
|
||||||
|
setIsModerator(moderatorStatus);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Moderator check failed:', error);
|
||||||
|
setIsModerator(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPermission();
|
||||||
|
}, [api, isApiReady, selectedAccount]);
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading || !isApiReady) {
|
||||||
|
return <LoadingGuard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not connected to wallet
|
||||||
|
if (!selectedAccount) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not a moderator
|
||||||
|
if (isModerator === false) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<Shield className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Moderator Access Required</strong>
|
||||||
|
You need moderator privileges to access this feature.
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => window.location.href = fallbackPath}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Go to Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authorized
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// ADMIN ROUTE GUARD (Supabase-based)
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AdminRoute - Requires Supabase admin role
|
||||||
|
* Use for: Admin panel, system settings
|
||||||
|
* Note: This is separate from blockchain permissions
|
||||||
|
*/
|
||||||
|
export const AdminRoute: React.FC<RouteGuardProps> = ({
|
||||||
|
children,
|
||||||
|
fallbackPath = '/',
|
||||||
|
}) => {
|
||||||
|
const { user, isAdmin, loading } = useAuth();
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingGuard />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not logged in
|
||||||
|
if (!user) {
|
||||||
|
return <Navigate to="/login" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not admin
|
||||||
|
if (!isAdmin) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||||
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Alert className="bg-red-900/20 border-red-500">
|
||||||
|
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||||
|
<AlertDescription className="text-gray-300">
|
||||||
|
<strong className="block mb-2">Admin Access Required</strong>
|
||||||
|
You do not have permission to access the admin panel.
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => window.location.href = fallbackPath}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Go to Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authorized
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
@@ -13,7 +13,6 @@ import { ASSET_IDS, formatBalance, parseAmount } from '@pezkuwi/lib/wallet';
|
|||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { KurdistanSun } from './KurdistanSun';
|
import { KurdistanSun } from './KurdistanSun';
|
||||||
import { PriceChart } from './trading/PriceChart';
|
import { PriceChart } from './trading/PriceChart';
|
||||||
import { LimitOrders } from './trading/LimitOrders';
|
|
||||||
|
|
||||||
// Available tokens for swap
|
// Available tokens for swap
|
||||||
const AVAILABLE_TOKENS = [
|
const AVAILABLE_TOKENS = [
|
||||||
@@ -1107,13 +1106,6 @@ const TokenSwap = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Limit Orders Section */}
|
|
||||||
<LimitOrders
|
|
||||||
fromToken={fromToken}
|
|
||||||
toToken={toToken}
|
|
||||||
currentPrice={exchangeRate}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import DelegateProfile from './DelegateProfile';
|
|||||||
import { useDelegation } from '@/hooks/useDelegation';
|
import { useDelegation } from '@/hooks/useDelegation';
|
||||||
import { usePolkadot } from '@/contexts/PolkadotContext';
|
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||||
import { formatNumber } from '@/lib/utils';
|
import { formatNumber } from '@/lib/utils';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
|
||||||
const DelegationManager: React.FC = () => {
|
const DelegationManager: React.FC = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -37,14 +38,7 @@ const DelegationManager: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return <LoadingState message="Loading delegation data from blockchain..." />;
|
||||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-green-600 mr-3" />
|
|
||||||
<span className="text-lg">Loading delegation data from blockchain...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { TrendingUp, Droplet, BarChart3, Search, Plus } from 'lucide-react';
|
|||||||
import { PoolInfo } from '@/types/dex';
|
import { PoolInfo } from '@/types/dex';
|
||||||
import { fetchPools, formatTokenBalance } from '@pezkuwi/utils/dex';
|
import { fetchPools, formatTokenBalance } from '@pezkuwi/utils/dex';
|
||||||
import { isFounderWallet } from '@pezkuwi/utils/auth';
|
import { isFounderWallet } from '@pezkuwi/utils/auth';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
|
||||||
interface PoolBrowserProps {
|
interface PoolBrowserProps {
|
||||||
onAddLiquidity?: (pool: PoolInfo) => void;
|
onAddLiquidity?: (pool: PoolInfo) => void;
|
||||||
@@ -63,11 +64,7 @@ export const PoolBrowser: React.FC<PoolBrowserProps> = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (loading && pools.length === 0) {
|
if (loading && pools.length === 0) {
|
||||||
return (
|
return <LoadingState message="Loading liquidity pools..." />;
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<div className="text-gray-400">Loading pools...</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
|
|||||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
import {
|
import {
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
Users,
|
Users,
|
||||||
@@ -105,12 +106,7 @@ export function ForumOverview() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return <LoadingState message="Loading forum..." />;
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-3 text-muted-foreground">Loading forum...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { Badge } from '../ui/badge';
|
|||||||
import { Progress } from '../ui/progress';
|
import { Progress } from '../ui/progress';
|
||||||
import { usePolkadot } from '../../contexts/PolkadotContext';
|
import { usePolkadot } from '../../contexts/PolkadotContext';
|
||||||
import { formatBalance } from '@pezkuwi/lib/wallet';
|
import { formatBalance } from '@pezkuwi/lib/wallet';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
|
||||||
interface GovernanceStats {
|
interface GovernanceStats {
|
||||||
activeProposals: number;
|
activeProposals: number;
|
||||||
@@ -123,6 +124,10 @@ const GovernanceOverview: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingState message="Loading governance data..." />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Stats Grid */}
|
{/* Stats Grid */}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { Progress } from '../ui/progress';
|
|||||||
import { Alert, AlertDescription } from '../ui/alert';
|
import { Alert, AlertDescription } from '../ui/alert';
|
||||||
import { useGovernance } from '@/hooks/useGovernance';
|
import { useGovernance } from '@/hooks/useGovernance';
|
||||||
import { formatNumber } from '@/lib/utils';
|
import { formatNumber } from '@/lib/utils';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
|
||||||
interface Proposal {
|
interface Proposal {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -84,12 +85,7 @@ const ProposalsList: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return <LoadingState message="Loading proposals from blockchain..." />;
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary mr-3" />
|
|
||||||
<span className="text-muted-foreground">Loading proposals from blockchain...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|||||||
@@ -1,798 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, CardContent, CardDescription, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
||||||
import { ArrowUpDown, Search, Filter, TrendingUp, TrendingDown, User, Shield, Clock, DollarSign, Plus, X, SlidersHorizontal, Lock, CheckCircle, AlertCircle } from 'lucide-react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
interface P2POffer {
|
|
||||||
id: string;
|
|
||||||
type: 'buy' | 'sell';
|
|
||||||
token: 'HEZ' | 'PEZ';
|
|
||||||
amount: number;
|
|
||||||
price: number;
|
|
||||||
paymentMethod: string;
|
|
||||||
seller: {
|
|
||||||
name: string;
|
|
||||||
rating: number;
|
|
||||||
completedTrades: number;
|
|
||||||
verified: boolean;
|
|
||||||
};
|
|
||||||
minOrder: number;
|
|
||||||
maxOrder: number;
|
|
||||||
timeLimit: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const P2PMarket: React.FC = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [activeTab, setActiveTab] = useState<'buy' | 'sell'>('buy');
|
|
||||||
const [selectedToken, setSelectedToken] = useState<'HEZ' | 'PEZ'>('HEZ');
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [selectedOffer, setSelectedOffer] = useState<P2POffer | null>(null);
|
|
||||||
const [tradeAmount, setTradeAmount] = useState('');
|
|
||||||
|
|
||||||
// Advanced filters
|
|
||||||
const [paymentMethodFilter, setPaymentMethodFilter] = useState<string>('all');
|
|
||||||
const [minPrice, setMinPrice] = useState<string>('');
|
|
||||||
const [maxPrice, setMaxPrice] = useState<string>('');
|
|
||||||
const [sortBy, setSortBy] = useState<'price' | 'rating' | 'trades'>('price');
|
|
||||||
const [showFilters, setShowFilters] = useState(false);
|
|
||||||
|
|
||||||
// Order creation
|
|
||||||
const [showCreateOrder, setShowCreateOrder] = useState(false);
|
|
||||||
const [newOrderAmount, setNewOrderAmount] = useState('');
|
|
||||||
const [newOrderPrice, setNewOrderPrice] = useState('');
|
|
||||||
const [newOrderPaymentMethod, setNewOrderPaymentMethod] = useState('Bank Transfer');
|
|
||||||
|
|
||||||
const offers: P2POffer[] = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
type: 'sell',
|
|
||||||
token: 'HEZ',
|
|
||||||
amount: 10000,
|
|
||||||
price: 0.95,
|
|
||||||
paymentMethod: 'Bank Transfer',
|
|
||||||
seller: {
|
|
||||||
name: 'CryptoTrader',
|
|
||||||
rating: 4.8,
|
|
||||||
completedTrades: 234,
|
|
||||||
verified: true
|
|
||||||
},
|
|
||||||
minOrder: 100,
|
|
||||||
maxOrder: 5000,
|
|
||||||
timeLimit: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
type: 'sell',
|
|
||||||
token: 'HEZ',
|
|
||||||
amount: 5000,
|
|
||||||
price: 0.96,
|
|
||||||
paymentMethod: 'PayPal',
|
|
||||||
seller: {
|
|
||||||
name: 'TokenMaster',
|
|
||||||
rating: 4.9,
|
|
||||||
completedTrades: 567,
|
|
||||||
verified: true
|
|
||||||
},
|
|
||||||
minOrder: 50,
|
|
||||||
maxOrder: 2000,
|
|
||||||
timeLimit: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
type: 'buy',
|
|
||||||
token: 'PEZ',
|
|
||||||
amount: 15000,
|
|
||||||
price: 1.02,
|
|
||||||
paymentMethod: 'Crypto',
|
|
||||||
seller: {
|
|
||||||
name: 'PezWhale',
|
|
||||||
rating: 4.7,
|
|
||||||
completedTrades: 123,
|
|
||||||
verified: false
|
|
||||||
},
|
|
||||||
minOrder: 500,
|
|
||||||
maxOrder: 10000,
|
|
||||||
timeLimit: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
type: 'sell',
|
|
||||||
token: 'PEZ',
|
|
||||||
amount: 8000,
|
|
||||||
price: 1.01,
|
|
||||||
paymentMethod: 'Wire Transfer',
|
|
||||||
seller: {
|
|
||||||
name: 'QuickTrade',
|
|
||||||
rating: 4.6,
|
|
||||||
completedTrades: 89,
|
|
||||||
verified: true
|
|
||||||
},
|
|
||||||
minOrder: 200,
|
|
||||||
maxOrder: 3000,
|
|
||||||
timeLimit: 45
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// Payment methods list
|
|
||||||
const paymentMethods = ['Bank Transfer', 'PayPal', 'Crypto', 'Wire Transfer', 'Cash', 'Mobile Money'];
|
|
||||||
|
|
||||||
// Advanced filtering and sorting
|
|
||||||
const filteredOffers = offers
|
|
||||||
.filter(offer => {
|
|
||||||
// Basic filters
|
|
||||||
if (offer.type !== activeTab) return false;
|
|
||||||
if (offer.token !== selectedToken) return false;
|
|
||||||
if (searchTerm && !offer.seller.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
|
|
||||||
|
|
||||||
// Payment method filter
|
|
||||||
if (paymentMethodFilter !== 'all' && offer.paymentMethod !== paymentMethodFilter) return false;
|
|
||||||
|
|
||||||
// Price range filter
|
|
||||||
if (minPrice && offer.price < parseFloat(minPrice)) return false;
|
|
||||||
if (maxPrice && offer.price > parseFloat(maxPrice)) return false;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
})
|
|
||||||
.sort((a, b) => {
|
|
||||||
// Sorting logic
|
|
||||||
if (sortBy === 'price') {
|
|
||||||
return activeTab === 'buy' ? a.price - b.price : b.price - a.price;
|
|
||||||
} else if (sortBy === 'rating') {
|
|
||||||
return b.seller.rating - a.seller.rating;
|
|
||||||
} else if (sortBy === 'trades') {
|
|
||||||
return b.seller.completedTrades - a.seller.completedTrades;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Escrow state
|
|
||||||
const [showEscrow, setShowEscrow] = useState(false);
|
|
||||||
const [escrowStep, setEscrowStep] = useState<'funding' | 'confirmation' | 'release'>('funding');
|
|
||||||
const [escrowOffer, setEscrowOffer] = useState<P2POffer | null>(null);
|
|
||||||
|
|
||||||
const handleTrade = (offer: P2POffer) => {
|
|
||||||
console.log('Initiating trade:', tradeAmount, offer.token, 'with', offer.seller.name);
|
|
||||||
setEscrowOffer(offer);
|
|
||||||
setShowEscrow(true);
|
|
||||||
setEscrowStep('funding');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEscrowFund = () => {
|
|
||||||
console.log('Funding escrow with:', tradeAmount, escrowOffer?.token);
|
|
||||||
setEscrowStep('confirmation');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEscrowConfirm = () => {
|
|
||||||
console.log('Confirming payment received');
|
|
||||||
setEscrowStep('release');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEscrowRelease = () => {
|
|
||||||
console.log('Releasing escrow funds');
|
|
||||||
setShowEscrow(false);
|
|
||||||
setSelectedOffer(null);
|
|
||||||
setEscrowOffer(null);
|
|
||||||
setEscrowStep('funding');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Market Stats */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<CardTitle className="text-sm text-gray-400">HEZ Price</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold text-white">$0.95</div>
|
|
||||||
<div className="flex items-center text-green-500 text-xs mt-1">
|
|
||||||
<TrendingUp className="w-3 h-3 mr-1" />
|
|
||||||
+2.3%
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<CardTitle className="text-sm text-gray-400">PEZ Price</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold text-white">$1.02</div>
|
|
||||||
<div className="flex items-center text-red-500 text-xs mt-1">
|
|
||||||
<TrendingDown className="w-3 h-3 mr-1" />
|
|
||||||
-0.8%
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<CardTitle className="text-sm text-gray-400">24h Volume</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold text-white">$2.4M</div>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">1,234 trades</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<CardTitle className="text-sm text-gray-400">Active Offers</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold text-white">342</div>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">89 verified sellers</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* P2P Trading Interface */}
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-xl text-white">P2P Market</CardTitle>
|
|
||||||
<CardDescription className="text-gray-400">
|
|
||||||
Buy and sell tokens directly with other users
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Top Action Bar */}
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<Button
|
|
||||||
onClick={() => setShowCreateOrder(true)}
|
|
||||||
className="bg-green-600 hover:bg-green-700"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4 mr-2" />
|
|
||||||
Create Order
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setShowFilters(!showFilters)}
|
|
||||||
className="border-gray-700"
|
|
||||||
>
|
|
||||||
<SlidersHorizontal className="w-4 h-4 mr-2" />
|
|
||||||
{showFilters ? 'Hide Filters' : 'Show Filters'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Basic Filters */}
|
|
||||||
<div className="flex flex-wrap gap-4">
|
|
||||||
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'buy' | 'sell')} className="flex-1">
|
|
||||||
<TabsList className="grid w-full max-w-[200px] grid-cols-2">
|
|
||||||
<TabsTrigger value="buy">Buy</TabsTrigger>
|
|
||||||
<TabsTrigger value="sell">Sell</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<Select value={selectedToken} onValueChange={(v) => setSelectedToken(v as 'HEZ' | 'PEZ')}>
|
|
||||||
<SelectTrigger className="w-[120px] bg-gray-800 border-gray-700">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="HEZ">HEZ</SelectItem>
|
|
||||||
<SelectItem value="PEZ">PEZ</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<div className="flex-1 max-w-xs">
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
||||||
<Input
|
|
||||||
placeholder="Search sellers..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-10 bg-gray-800 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sort Selector */}
|
|
||||||
<Select value={sortBy} onValueChange={(v) => setSortBy(v as 'price' | 'rating' | 'trades')}>
|
|
||||||
<SelectTrigger className="w-[150px] bg-gray-800 border-gray-700">
|
|
||||||
<SelectValue placeholder="Sort by" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="price">Price</SelectItem>
|
|
||||||
<SelectItem value="rating">Rating</SelectItem>
|
|
||||||
<SelectItem value="trades">Trades</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Advanced Filters Panel (Binance P2P style) */}
|
|
||||||
{showFilters && (
|
|
||||||
<Card className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h4 className="font-semibold text-white flex items-center gap-2">
|
|
||||||
<Filter className="w-4 h-4" />
|
|
||||||
Advanced Filters
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
{/* Payment Method Filter */}
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm text-gray-400">Payment Method</Label>
|
|
||||||
<Select value={paymentMethodFilter} onValueChange={setPaymentMethodFilter}>
|
|
||||||
<SelectTrigger className="bg-gray-900 border-gray-700">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="all">All Methods</SelectItem>
|
|
||||||
{paymentMethods.map(method => (
|
|
||||||
<SelectItem key={method} value={method}>{method}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Min Price Filter */}
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm text-gray-400">Min Price ($)</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Min"
|
|
||||||
value={minPrice}
|
|
||||||
onChange={(e) => setMinPrice(e.target.value)}
|
|
||||||
className="bg-gray-900 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Max Price Filter */}
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm text-gray-400">Max Price ($)</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Max"
|
|
||||||
value={maxPrice}
|
|
||||||
onChange={(e) => setMaxPrice(e.target.value)}
|
|
||||||
className="bg-gray-900 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Clear Filters Button */}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setPaymentMethodFilter('all');
|
|
||||||
setMinPrice('');
|
|
||||||
setMaxPrice('');
|
|
||||||
setSearchTerm('');
|
|
||||||
}}
|
|
||||||
className="border-gray-700"
|
|
||||||
>
|
|
||||||
<X className="w-3 h-3 mr-1" />
|
|
||||||
Clear All Filters
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Offers List */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{filteredOffers.map((offer) => (
|
|
||||||
<Card key={offer.id} className="bg-gray-800 border-gray-700">
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<div className="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center">
|
|
||||||
<User className="w-5 h-5 text-gray-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="font-semibold text-white">{offer.seller.name}</span>
|
|
||||||
{offer.seller.verified && (
|
|
||||||
<Badge variant="secondary" className="bg-blue-600/20 text-blue-400">
|
|
||||||
<Shield className="w-3 h-3 mr-1" />
|
|
||||||
Verified
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
|
||||||
<span>⭐ {offer.seller.rating}</span>
|
|
||||||
<span>{offer.seller.completedTrades} trades</span>
|
|
||||||
<span>{offer.paymentMethod}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-right space-y-1">
|
|
||||||
<div className="text-lg font-bold text-white">
|
|
||||||
${offer.price} / {offer.token}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-400">
|
|
||||||
Available: {offer.amount.toLocaleString()} {offer.token}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500">
|
|
||||||
Limits: {offer.minOrder} - {offer.maxOrder} {offer.token}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
className="ml-4 bg-green-600 hover:bg-green-700"
|
|
||||||
onClick={() => setSelectedOffer(offer)}
|
|
||||||
>
|
|
||||||
{activeTab === 'buy' ? 'Buy' : 'Sell'} {offer.token}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Trade Modal */}
|
|
||||||
{selectedOffer && (
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>
|
|
||||||
{activeTab === 'buy' ? 'Buy' : 'Sell'} {selectedOffer.token} from {selectedOffer.seller.name}
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>Complete your P2P trade</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<Label>Amount ({selectedOffer.token})</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder={`Min: ${selectedOffer.minOrder}, Max: ${selectedOffer.maxOrder}`}
|
|
||||||
value={tradeAmount}
|
|
||||||
onChange={(e) => setTradeAmount(e.target.value)}
|
|
||||||
className="bg-gray-800 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gray-800 p-4 rounded-lg space-y-2">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Price per {selectedOffer.token}</span>
|
|
||||||
<span className="text-white">${selectedOffer.price}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Total Amount</span>
|
|
||||||
<span className="text-white font-semibold">
|
|
||||||
${(parseFloat(tradeAmount || '0') * selectedOffer.price).toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Payment Method</span>
|
|
||||||
<span className="text-white">{selectedOffer.paymentMethod}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Time Limit</span>
|
|
||||||
<span className="text-white">{selectedOffer.timeLimit} minutes</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
|
||||||
className="flex-1 bg-green-600 hover:bg-green-700"
|
|
||||||
onClick={() => handleTrade(selectedOffer)}
|
|
||||||
>
|
|
||||||
Confirm {activeTab === 'buy' ? 'Purchase' : 'Sale'}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="flex-1"
|
|
||||||
onClick={() => setSelectedOffer(null)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Create Order Modal (Binance P2P style) */}
|
|
||||||
{showCreateOrder && (
|
|
||||||
<Card className="bg-gray-900 border-gray-800 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<CardTitle>Create P2P Order</CardTitle>
|
|
||||||
<Button variant="ghost" size="icon" onClick={() => setShowCreateOrder(false)}>
|
|
||||||
<X className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Create a {activeTab === 'buy' ? 'buy' : 'sell'} order for {selectedToken}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<Label>Order Type</Label>
|
|
||||||
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'buy' | 'sell')}>
|
|
||||||
<TabsList className="grid w-full grid-cols-2">
|
|
||||||
<TabsTrigger value="buy">Buy</TabsTrigger>
|
|
||||||
<TabsTrigger value="sell">Sell</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Token</Label>
|
|
||||||
<Select value={selectedToken} onValueChange={(v) => setSelectedToken(v as 'HEZ' | 'PEZ')}>
|
|
||||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="HEZ">HEZ</SelectItem>
|
|
||||||
<SelectItem value="PEZ">PEZ</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Amount ({selectedToken})</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Enter amount"
|
|
||||||
value={newOrderAmount}
|
|
||||||
onChange={(e) => setNewOrderAmount(e.target.value)}
|
|
||||||
className="bg-gray-800 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Price per {selectedToken} ($)</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Enter price"
|
|
||||||
value={newOrderPrice}
|
|
||||||
onChange={(e) => setNewOrderPrice(e.target.value)}
|
|
||||||
className="bg-gray-800 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Payment Method</Label>
|
|
||||||
<Select value={newOrderPaymentMethod} onValueChange={setNewOrderPaymentMethod}>
|
|
||||||
<SelectTrigger className="bg-gray-800 border-gray-700">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{paymentMethods.map(method => (
|
|
||||||
<SelectItem key={method} value={method}>{method}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gray-800 p-3 rounded-lg">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Total Value</span>
|
|
||||||
<span className="text-white font-semibold">
|
|
||||||
${(parseFloat(newOrderAmount || '0') * parseFloat(newOrderPrice || '0')).toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
|
||||||
className="flex-1 bg-green-600 hover:bg-green-700"
|
|
||||||
onClick={() => {
|
|
||||||
console.log('Creating order:', {
|
|
||||||
type: activeTab,
|
|
||||||
token: selectedToken,
|
|
||||||
amount: newOrderAmount,
|
|
||||||
price: newOrderPrice,
|
|
||||||
paymentMethod: newOrderPaymentMethod
|
|
||||||
});
|
|
||||||
// TODO: Implement blockchain integration
|
|
||||||
setShowCreateOrder(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create Order
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="flex-1"
|
|
||||||
onClick={() => setShowCreateOrder(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-xs text-gray-500 text-center">
|
|
||||||
Note: Blockchain integration for P2P orders is coming soon
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Escrow Modal (Binance P2P Escrow style) */}
|
|
||||||
{showEscrow && escrowOffer && (
|
|
||||||
<Card className="bg-gray-900 border-gray-800 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-2xl">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Lock className="w-5 h-5 text-blue-400" />
|
|
||||||
Secure Escrow Trade
|
|
||||||
</CardTitle>
|
|
||||||
<Button variant="ghost" size="icon" onClick={() => setShowEscrow(false)}>
|
|
||||||
<X className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
Trade safely with escrow protection • {activeTab === 'buy' ? 'Buying' : 'Selling'} {escrowOffer.token}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
{/* Escrow Steps Indicator */}
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
{[
|
|
||||||
{ step: 'funding', label: 'Fund Escrow', icon: Lock },
|
|
||||||
{ step: 'confirmation', label: 'Payment', icon: Clock },
|
|
||||||
{ step: 'release', label: 'Complete', icon: CheckCircle }
|
|
||||||
].map((item, idx) => (
|
|
||||||
<div key={item.step} className="flex-1 flex flex-col items-center">
|
|
||||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
||||||
escrowStep === item.step ? 'bg-blue-600' :
|
|
||||||
['funding', 'confirmation', 'release'].indexOf(escrowStep) > idx ? 'bg-green-600' : 'bg-gray-700'
|
|
||||||
}`}>
|
|
||||||
<item.icon className="w-5 h-5 text-white" />
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-gray-400 mt-2">{item.label}</span>
|
|
||||||
{idx < 2 && (
|
|
||||||
<div className={`absolute w-32 h-0.5 mt-5 ${
|
|
||||||
['funding', 'confirmation', 'release'].indexOf(escrowStep) > idx ? 'bg-green-600' : 'bg-gray-700'
|
|
||||||
}`} style={{ left: `calc(${(idx + 1) * 33.33}% - 64px)` }}></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Trade Details Card */}
|
|
||||||
<Card className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<h4 className="font-semibold text-white mb-3">Trade Details</h4>
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-gray-400">Seller</span>
|
|
||||||
<span className="text-white font-semibold">{escrowOffer.seller.name}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-gray-400">Amount</span>
|
|
||||||
<span className="text-white font-semibold">{tradeAmount} {escrowOffer.token}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-gray-400">Price per {escrowOffer.token}</span>
|
|
||||||
<span className="text-white font-semibold">${escrowOffer.price}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-gray-400">Payment Method</span>
|
|
||||||
<span className="text-white font-semibold">{escrowOffer.paymentMethod}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between pt-2 border-t border-gray-700">
|
|
||||||
<span className="text-gray-400">Total</span>
|
|
||||||
<span className="text-lg font-bold text-white">
|
|
||||||
${(parseFloat(tradeAmount || '0') * escrowOffer.price).toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Step Content */}
|
|
||||||
{escrowStep === 'funding' && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-blue-900/20 border border-blue-500/30 rounded-lg p-4">
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Shield className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
|
|
||||||
<div className="text-sm text-blue-200">
|
|
||||||
<strong>Escrow Protection:</strong> Your funds will be held securely in smart contract escrow until both parties confirm the trade. This protects both buyer and seller.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-sm text-gray-400">
|
|
||||||
1. Fund the escrow with {tradeAmount} {escrowOffer.token}<br />
|
|
||||||
2. Wait for seller to provide payment details<br />
|
|
||||||
3. Complete payment via {escrowOffer.paymentMethod}<br />
|
|
||||||
4. Confirm payment to release escrow
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleEscrowFund}
|
|
||||||
className="w-full bg-blue-600 hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Fund Escrow ({tradeAmount} {escrowOffer.token})
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{escrowStep === 'confirmation' && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-yellow-900/20 border border-yellow-500/30 rounded-lg p-4">
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Clock className="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5" />
|
|
||||||
<div className="text-sm text-yellow-200">
|
|
||||||
<strong>Waiting for Payment:</strong> Complete your {escrowOffer.paymentMethod} payment and click confirm when done. Do not release escrow until payment is verified!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<h4 className="font-semibold text-white mb-2">Payment Instructions</h4>
|
|
||||||
<div className="text-sm text-gray-300 space-y-1">
|
|
||||||
<p>• Payment Method: {escrowOffer.paymentMethod}</p>
|
|
||||||
<p>• Amount: ${(parseFloat(tradeAmount || '0') * escrowOffer.price).toFixed(2)}</p>
|
|
||||||
<p>• Time Limit: {escrowOffer.timeLimit} minutes</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setShowEscrow(false);
|
|
||||||
setEscrowStep('funding');
|
|
||||||
}}
|
|
||||||
className="flex-1"
|
|
||||||
>
|
|
||||||
Cancel Trade
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleEscrowConfirm}
|
|
||||||
className="flex-1 bg-green-600 hover:bg-green-700"
|
|
||||||
>
|
|
||||||
I've Made Payment
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{escrowStep === 'release' && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-green-900/20 border border-green-500/30 rounded-lg p-4">
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
|
|
||||||
<div className="text-sm text-green-200">
|
|
||||||
<strong>Payment Confirmed:</strong> Your payment has been verified. The escrow will be released to the seller automatically.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<h4 className="font-semibold text-white mb-2">Trade Summary</h4>
|
|
||||||
<div className="text-sm text-gray-300 space-y-1">
|
|
||||||
<p>✅ Escrow Funded: {tradeAmount} {escrowOffer.token}</p>
|
|
||||||
<p>✅ Payment Sent: ${(parseFloat(tradeAmount || '0') * escrowOffer.price).toFixed(2)}</p>
|
|
||||||
<p>✅ Payment Verified</p>
|
|
||||||
<p className="text-green-400 font-semibold mt-2">🎉 Trade Completed Successfully!</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleEscrowRelease}
|
|
||||||
className="w-full bg-green-600 hover:bg-green-700"
|
|
||||||
>
|
|
||||||
Close & Release Escrow
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-xs text-gray-500 text-center">
|
|
||||||
Note: Smart contract escrow integration coming soon
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Overlay */}
|
|
||||||
{(showCreateOrder || selectedOffer || showEscrow) && (
|
|
||||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40" onClick={() => {
|
|
||||||
setShowCreateOrder(false);
|
|
||||||
setSelectedOffer(null);
|
|
||||||
setShowEscrow(false);
|
|
||||||
}}></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -21,6 +21,8 @@ import {
|
|||||||
parseAmount,
|
parseAmount,
|
||||||
type StakingInfo
|
type StakingInfo
|
||||||
} from '@pezkuwi/lib/staking';
|
} from '@pezkuwi/lib/staking';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
import { handleBlockchainError, handleBlockchainSuccess } from '@pezkuwi/lib/error-handler';
|
||||||
|
|
||||||
export const StakingDashboard: React.FC = () => {
|
export const StakingDashboard: React.FC = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -119,22 +121,10 @@ export const StakingDashboard: React.FC = () => {
|
|||||||
console.log('Transaction in block:', status.asInBlock.toHex());
|
console.log('Transaction in block:', status.asInBlock.toHex());
|
||||||
|
|
||||||
if (dispatchError) {
|
if (dispatchError) {
|
||||||
let errorMessage = 'Transaction failed';
|
handleBlockchainError(dispatchError, api, toast);
|
||||||
if (dispatchError.isModule) {
|
|
||||||
const decoded = api.registry.findMetaError(dispatchError.asModule);
|
|
||||||
errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs.join(' ')}`;
|
|
||||||
}
|
|
||||||
toast({
|
|
||||||
title: 'Error',
|
|
||||||
description: errorMessage,
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
} else {
|
} else {
|
||||||
toast({
|
handleBlockchainSuccess('staking.bonded', toast, { amount: bondAmount });
|
||||||
title: 'Success',
|
|
||||||
description: `Bonded ${bondAmount} HEZ successfully`,
|
|
||||||
});
|
|
||||||
setBondAmount('');
|
setBondAmount('');
|
||||||
refreshBalances();
|
refreshBalances();
|
||||||
// Refresh staking data after a delay
|
// Refresh staking data after a delay
|
||||||
@@ -183,22 +173,10 @@ export const StakingDashboard: React.FC = () => {
|
|||||||
({ status, dispatchError }) => {
|
({ status, dispatchError }) => {
|
||||||
if (status.isInBlock) {
|
if (status.isInBlock) {
|
||||||
if (dispatchError) {
|
if (dispatchError) {
|
||||||
let errorMessage = 'Nomination failed';
|
handleBlockchainError(dispatchError, api, toast);
|
||||||
if (dispatchError.isModule) {
|
|
||||||
const decoded = api.registry.findMetaError(dispatchError.asModule);
|
|
||||||
errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs.join(' ')}`;
|
|
||||||
}
|
|
||||||
toast({
|
|
||||||
title: 'Error',
|
|
||||||
description: errorMessage,
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
} else {
|
} else {
|
||||||
toast({
|
handleBlockchainSuccess('staking.nominated', toast, { count: selectedValidators.length.toString() });
|
||||||
title: 'Success',
|
|
||||||
description: `Nominated ${selectedValidators.length} validator(s)`,
|
|
||||||
});
|
|
||||||
// Refresh staking data
|
// Refresh staking data
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (api && selectedAccount) {
|
if (api && selectedAccount) {
|
||||||
@@ -241,21 +219,12 @@ export const StakingDashboard: React.FC = () => {
|
|||||||
({ status, dispatchError }) => {
|
({ status, dispatchError }) => {
|
||||||
if (status.isInBlock) {
|
if (status.isInBlock) {
|
||||||
if (dispatchError) {
|
if (dispatchError) {
|
||||||
let errorMessage = 'Unbond failed';
|
handleBlockchainError(dispatchError, api, toast);
|
||||||
if (dispatchError.isModule) {
|
|
||||||
const decoded = api.registry.findMetaError(dispatchError.asModule);
|
|
||||||
errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs.join(' ')}`;
|
|
||||||
}
|
|
||||||
toast({
|
|
||||||
title: 'Error',
|
|
||||||
description: errorMessage,
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
} else {
|
} else {
|
||||||
toast({
|
handleBlockchainSuccess('staking.unbonded', toast, {
|
||||||
title: 'Success',
|
amount: unbondAmount,
|
||||||
description: `Unbonded ${unbondAmount} HEZ. Withdrawal available in ${bondingDuration} eras`,
|
duration: bondingDuration.toString()
|
||||||
});
|
});
|
||||||
setUnbondAmount('');
|
setUnbondAmount('');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -421,11 +390,7 @@ export const StakingDashboard: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (isLoadingData) {
|
if (isLoadingData) {
|
||||||
return (
|
return <LoadingState message="Loading staking data..." />;
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-gray-400">Loading staking data...</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,306 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, CardContent, CardDescription, 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 { Badge } from '@/components/ui/badge';
|
|
||||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import { X, Clock, CheckCircle, AlertCircle } from 'lucide-react';
|
|
||||||
|
|
||||||
interface LimitOrder {
|
|
||||||
id: string;
|
|
||||||
type: 'buy' | 'sell';
|
|
||||||
fromToken: string;
|
|
||||||
toToken: string;
|
|
||||||
fromAmount: number;
|
|
||||||
limitPrice: number;
|
|
||||||
currentPrice: number;
|
|
||||||
status: 'pending' | 'filled' | 'cancelled' | 'expired';
|
|
||||||
createdAt: number;
|
|
||||||
expiresAt: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LimitOrdersProps {
|
|
||||||
fromToken: string;
|
|
||||||
toToken: string;
|
|
||||||
currentPrice: number;
|
|
||||||
onCreateOrder?: (order: Omit<LimitOrder, 'id' | 'status' | 'createdAt' | 'expiresAt'>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const LimitOrders: React.FC<LimitOrdersProps> = ({
|
|
||||||
fromToken,
|
|
||||||
toToken,
|
|
||||||
currentPrice,
|
|
||||||
onCreateOrder
|
|
||||||
}) => {
|
|
||||||
const [orderType, setOrderType] = useState<'buy' | 'sell'>('buy');
|
|
||||||
const [amount, setAmount] = useState('');
|
|
||||||
const [limitPrice, setLimitPrice] = useState('');
|
|
||||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
|
||||||
|
|
||||||
// Mock orders (in production, fetch from blockchain)
|
|
||||||
const [orders, setOrders] = useState<LimitOrder[]>([
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
type: 'buy',
|
|
||||||
fromToken: 'PEZ',
|
|
||||||
toToken: 'HEZ',
|
|
||||||
fromAmount: 100,
|
|
||||||
limitPrice: 0.98,
|
|
||||||
currentPrice: 1.02,
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: Date.now() - 3600000,
|
|
||||||
expiresAt: Date.now() + 82800000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
type: 'sell',
|
|
||||||
fromToken: 'HEZ',
|
|
||||||
toToken: 'PEZ',
|
|
||||||
fromAmount: 50,
|
|
||||||
limitPrice: 1.05,
|
|
||||||
currentPrice: 1.02,
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: Date.now() - 7200000,
|
|
||||||
expiresAt: Date.now() + 79200000
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const handleCreateOrder = () => {
|
|
||||||
const newOrder: Omit<LimitOrder, 'id' | 'status' | 'createdAt' | 'expiresAt'> = {
|
|
||||||
type: orderType,
|
|
||||||
fromToken: orderType === 'buy' ? toToken : fromToken,
|
|
||||||
toToken: orderType === 'buy' ? fromToken : toToken,
|
|
||||||
fromAmount: parseFloat(amount),
|
|
||||||
limitPrice: parseFloat(limitPrice),
|
|
||||||
currentPrice
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log('Creating limit order:', newOrder);
|
|
||||||
|
|
||||||
// Add to orders list (mock)
|
|
||||||
const order: LimitOrder = {
|
|
||||||
...newOrder,
|
|
||||||
id: Date.now().toString(),
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: Date.now(),
|
|
||||||
expiresAt: Date.now() + 86400000 // 24 hours
|
|
||||||
};
|
|
||||||
|
|
||||||
setOrders([order, ...orders]);
|
|
||||||
setShowCreateForm(false);
|
|
||||||
setAmount('');
|
|
||||||
setLimitPrice('');
|
|
||||||
|
|
||||||
if (onCreateOrder) {
|
|
||||||
onCreateOrder(newOrder);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancelOrder = (orderId: string) => {
|
|
||||||
setOrders(orders.map(order =>
|
|
||||||
order.id === orderId ? { ...order, status: 'cancelled' as const } : order
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusBadge = (status: LimitOrder['status']) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'pending':
|
|
||||||
return <Badge variant="outline" className="bg-yellow-500/10 text-yellow-400 border-yellow-500/30">
|
|
||||||
<Clock className="w-3 h-3 mr-1" />
|
|
||||||
Pending
|
|
||||||
</Badge>;
|
|
||||||
case 'filled':
|
|
||||||
return <Badge variant="outline" className="bg-green-500/10 text-green-400 border-green-500/30">
|
|
||||||
<CheckCircle className="w-3 h-3 mr-1" />
|
|
||||||
Filled
|
|
||||||
</Badge>;
|
|
||||||
case 'cancelled':
|
|
||||||
return <Badge variant="outline" className="bg-gray-500/10 text-gray-400 border-gray-500/30">
|
|
||||||
<X className="w-3 h-3 mr-1" />
|
|
||||||
Cancelled
|
|
||||||
</Badge>;
|
|
||||||
case 'expired':
|
|
||||||
return <Badge variant="outline" className="bg-red-500/10 text-red-400 border-red-500/30">
|
|
||||||
<AlertCircle className="w-3 h-3 mr-1" />
|
|
||||||
Expired
|
|
||||||
</Badge>;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getPriceDistance = (order: LimitOrder) => {
|
|
||||||
const distance = ((order.limitPrice - order.currentPrice) / order.currentPrice) * 100;
|
|
||||||
return distance;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="bg-gray-900 border-gray-800">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
|
||||||
<CardTitle>Limit Orders</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Set orders to execute at your target price
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
onClick={() => setShowCreateForm(!showCreateForm)}
|
|
||||||
className="bg-blue-600 hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
{showCreateForm ? 'Cancel' : '+ New Order'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{showCreateForm && (
|
|
||||||
<Card className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<Label>Order Type</Label>
|
|
||||||
<Tabs value={orderType} onValueChange={(v) => setOrderType(v as 'buy' | 'sell')}>
|
|
||||||
<TabsList className="grid w-full grid-cols-2">
|
|
||||||
<TabsTrigger value="buy">Buy {fromToken}</TabsTrigger>
|
|
||||||
<TabsTrigger value="sell">Sell {fromToken}</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Amount ({orderType === 'buy' ? toToken : fromToken})</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="0.0"
|
|
||||||
value={amount}
|
|
||||||
onChange={(e) => setAmount(e.target.value)}
|
|
||||||
className="bg-gray-900 border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Limit Price (1 {fromToken} = ? {toToken})</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="0.0"
|
|
||||||
value={limitPrice}
|
|
||||||
onChange={(e) => setLimitPrice(e.target.value)}
|
|
||||||
className="bg-gray-900 border-gray-700"
|
|
||||||
/>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">
|
|
||||||
Current market price: ${currentPrice.toFixed(4)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gray-900 p-3 rounded-lg space-y-1">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">You will {orderType}</span>
|
|
||||||
<span className="text-white font-semibold">
|
|
||||||
{amount || '0'} {orderType === 'buy' ? fromToken : toToken}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">When price reaches</span>
|
|
||||||
<span className="text-white font-semibold">
|
|
||||||
${limitPrice || '0'} per {fromToken}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span className="text-gray-400">Estimated total</span>
|
|
||||||
<span className="text-white font-semibold">
|
|
||||||
{((parseFloat(amount || '0') * parseFloat(limitPrice || '0'))).toFixed(2)} {orderType === 'buy' ? toToken : fromToken}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleCreateOrder}
|
|
||||||
disabled={!amount || !limitPrice}
|
|
||||||
className="w-full bg-green-600 hover:bg-green-700"
|
|
||||||
>
|
|
||||||
Create Limit Order
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="text-xs text-gray-500 text-center">
|
|
||||||
Order will expire in 24 hours if not filled
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Orders List */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{orders.length === 0 ? (
|
|
||||||
<div className="text-center py-8 text-gray-400">
|
|
||||||
No limit orders yet. Create one to get started!
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
orders.map(order => {
|
|
||||||
const priceDistance = getPriceDistance(order);
|
|
||||||
return (
|
|
||||||
<Card key={order.id} className="bg-gray-800 border-gray-700 p-4">
|
|
||||||
<div className="flex items-start justify-between mb-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Badge variant={order.type === 'buy' ? 'default' : 'secondary'}>
|
|
||||||
{order.type.toUpperCase()}
|
|
||||||
</Badge>
|
|
||||||
<span className="font-semibold text-white">
|
|
||||||
{order.fromToken} → {order.toToken}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{getStatusBadge(order.status)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4 text-sm mb-3">
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400">Amount</div>
|
|
||||||
<div className="text-white font-semibold">
|
|
||||||
{order.fromAmount} {order.fromToken}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400">Limit Price</div>
|
|
||||||
<div className="text-white font-semibold">
|
|
||||||
${order.limitPrice.toFixed(4)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400">Current Price</div>
|
|
||||||
<div className="text-white">
|
|
||||||
${order.currentPrice.toFixed(4)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400">Distance</div>
|
|
||||||
<div className={priceDistance > 0 ? 'text-green-400' : 'text-red-400'}>
|
|
||||||
{priceDistance > 0 ? '+' : ''}{priceDistance.toFixed(2)}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
|
||||||
<span>
|
|
||||||
Created {new Date(order.createdAt).toLocaleString()}
|
|
||||||
</span>
|
|
||||||
{order.status === 'pending' && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleCancelOrder(order.id)}
|
|
||||||
className="h-7 text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-xs text-gray-500 text-center pt-2">
|
|
||||||
Note: Limit orders require blockchain integration to execute automatically
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
ArrowDownRight,
|
ArrowDownRight,
|
||||||
Loader2
|
Loader2
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
import { LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
|
||||||
interface TreasuryMetrics {
|
interface TreasuryMetrics {
|
||||||
totalBalance: number;
|
totalBalance: number;
|
||||||
@@ -63,12 +64,7 @@ export const TreasuryOverview: React.FC = () => {
|
|||||||
const HealthIcon = healthStatus.icon;
|
const HealthIcon = healthStatus.icon;
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return <LoadingState message="Loading treasury data from blockchain..." />;
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-3 text-muted-foreground">Loading treasury data from blockchain...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
|||||||
@@ -1,7 +1,12 @@
|
|||||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import { User } from '@supabase/supabase-js';
|
import { User } from '@supabase/supabase-js';
|
||||||
|
|
||||||
|
// Session timeout configuration
|
||||||
|
const SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes
|
||||||
|
const ACTIVITY_CHECK_INTERVAL_MS = 60 * 1000; // Check every 1 minute
|
||||||
|
const LAST_ACTIVITY_KEY = 'last_activity_timestamp';
|
||||||
|
|
||||||
interface AuthContextType {
|
interface AuthContextType {
|
||||||
user: User | null;
|
user: User | null;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
@@ -12,23 +17,6 @@ interface AuthContextType {
|
|||||||
checkAdminStatus: () => Promise<boolean>;
|
checkAdminStatus: () => Promise<boolean>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Demo/Founder account credentials from environment variables
|
|
||||||
// ⚠️ SECURITY: Never hardcode credentials in source code!
|
|
||||||
const FOUNDER_ACCOUNT = {
|
|
||||||
email: import.meta.env.VITE_DEMO_FOUNDER_EMAIL || '',
|
|
||||||
password: import.meta.env.VITE_DEMO_FOUNDER_PASSWORD || '',
|
|
||||||
id: import.meta.env.VITE_DEMO_FOUNDER_ID || 'founder-001',
|
|
||||||
user_metadata: {
|
|
||||||
full_name: 'Satoshi Qazi Muhammed',
|
|
||||||
phone: '+9647700557978',
|
|
||||||
recovery_email: 'satoshi@pezkuwichain.io',
|
|
||||||
founder: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Check if demo mode is enabled
|
|
||||||
const DEMO_MODE_ENABLED = import.meta.env.VITE_ENABLE_DEMO_MODE === 'true';
|
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
export const useAuth = () => {
|
export const useAuth = () => {
|
||||||
@@ -44,6 +32,66 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [isAdmin, setIsAdmin] = useState(false);
|
const [isAdmin, setIsAdmin] = useState(false);
|
||||||
|
|
||||||
|
// ========================================
|
||||||
|
// SESSION TIMEOUT MANAGEMENT
|
||||||
|
// ========================================
|
||||||
|
|
||||||
|
// Update last activity timestamp
|
||||||
|
const updateLastActivity = useCallback(() => {
|
||||||
|
localStorage.setItem(LAST_ACTIVITY_KEY, Date.now().toString());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Check if session has timed out
|
||||||
|
const checkSessionTimeout = useCallback(async () => {
|
||||||
|
if (!user) return;
|
||||||
|
|
||||||
|
const lastActivity = localStorage.getItem(LAST_ACTIVITY_KEY);
|
||||||
|
if (!lastActivity) {
|
||||||
|
updateLastActivity();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastActivityTime = parseInt(lastActivity, 10);
|
||||||
|
const now = Date.now();
|
||||||
|
const inactiveTime = now - lastActivityTime;
|
||||||
|
|
||||||
|
if (inactiveTime >= SESSION_TIMEOUT_MS) {
|
||||||
|
console.log('⏱️ Session timeout - logging out due to inactivity');
|
||||||
|
await signOut();
|
||||||
|
}
|
||||||
|
}, [user]);
|
||||||
|
|
||||||
|
// Setup activity listeners
|
||||||
|
useEffect(() => {
|
||||||
|
if (!user) return;
|
||||||
|
|
||||||
|
// Update activity on user interactions
|
||||||
|
const activityEvents = ['mousedown', 'keydown', 'scroll', 'touchstart'];
|
||||||
|
|
||||||
|
const handleActivity = () => {
|
||||||
|
updateLastActivity();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Register event listeners
|
||||||
|
activityEvents.forEach((event) => {
|
||||||
|
window.addEventListener(event, handleActivity);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial activity timestamp
|
||||||
|
updateLastActivity();
|
||||||
|
|
||||||
|
// Check for timeout periodically
|
||||||
|
const timeoutChecker = setInterval(checkSessionTimeout, ACTIVITY_CHECK_INTERVAL_MS);
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
return () => {
|
||||||
|
activityEvents.forEach((event) => {
|
||||||
|
window.removeEventListener(event, handleActivity);
|
||||||
|
});
|
||||||
|
clearInterval(timeoutChecker);
|
||||||
|
};
|
||||||
|
}, [user, updateLastActivity, checkSessionTimeout]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Check active sessions and sets the user
|
// Check active sessions and sets the user
|
||||||
supabase.auth.getSession().then(({ data: { session } }) => {
|
supabase.auth.getSession().then(({ data: { session } }) => {
|
||||||
@@ -89,42 +137,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
|||||||
};
|
};
|
||||||
|
|
||||||
const signIn = async (email: string, password: string) => {
|
const signIn = async (email: string, password: string) => {
|
||||||
// Check if demo mode is enabled and this is the founder account
|
|
||||||
if (DEMO_MODE_ENABLED && email === FOUNDER_ACCOUNT.email && password === FOUNDER_ACCOUNT.password) {
|
|
||||||
// Try Supabase first
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase.auth.signInWithPassword({
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!error && data.user) {
|
|
||||||
await checkAdminStatus();
|
|
||||||
return { error: null };
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Supabase not available
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to demo mode for founder account
|
|
||||||
const demoUser = {
|
|
||||||
id: FOUNDER_ACCOUNT.id,
|
|
||||||
email: FOUNDER_ACCOUNT.email,
|
|
||||||
user_metadata: FOUNDER_ACCOUNT.user_metadata,
|
|
||||||
email_confirmed_at: new Date().toISOString(),
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
} as User;
|
|
||||||
|
|
||||||
setUser(demoUser);
|
|
||||||
setIsAdmin(true);
|
|
||||||
|
|
||||||
// Store in localStorage for persistence
|
|
||||||
localStorage.setItem('demo_user', JSON.stringify(demoUser));
|
|
||||||
|
|
||||||
return { error: null };
|
|
||||||
}
|
|
||||||
|
|
||||||
// For other accounts, use Supabase
|
|
||||||
try {
|
try {
|
||||||
const { data, error } = await supabase.auth.signInWithPassword({
|
const { data, error } = await supabase.auth.signInWithPassword({
|
||||||
email,
|
email,
|
||||||
@@ -186,21 +198,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
|||||||
};
|
};
|
||||||
|
|
||||||
const signOut = async () => {
|
const signOut = async () => {
|
||||||
localStorage.removeItem('demo_user');
|
|
||||||
setIsAdmin(false);
|
setIsAdmin(false);
|
||||||
|
setUser(null);
|
||||||
|
localStorage.removeItem(LAST_ACTIVITY_KEY);
|
||||||
await supabase.auth.signOut();
|
await supabase.auth.signOut();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Check for demo user on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const demoUser = localStorage.getItem('demo_user');
|
|
||||||
if (demoUser && !user) {
|
|
||||||
const parsedUser = JSON.parse(demoUser);
|
|
||||||
setUser(parsedUser);
|
|
||||||
setIsAdmin(true);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{
|
<AuthContext.Provider value={{
|
||||||
user,
|
user,
|
||||||
|
|||||||
@@ -0,0 +1,355 @@
|
|||||||
|
/**
|
||||||
|
* Perwerde Education Platform
|
||||||
|
*
|
||||||
|
* Decentralized education system for Digital Kurdistan
|
||||||
|
* - Browse courses from blockchain
|
||||||
|
* - Enroll in courses
|
||||||
|
* - Track learning progress
|
||||||
|
* - Earn educational credentials
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import {
|
||||||
|
GraduationCap,
|
||||||
|
BookOpen,
|
||||||
|
Award,
|
||||||
|
Users,
|
||||||
|
Clock,
|
||||||
|
Star,
|
||||||
|
TrendingUp,
|
||||||
|
CheckCircle,
|
||||||
|
Play,
|
||||||
|
ExternalLink,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||||
|
import { useAuth } from '@/contexts/AuthContext';
|
||||||
|
import { toast } from '@/components/ui/use-toast';
|
||||||
|
import { AsyncComponent, LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
import {
|
||||||
|
getActiveCourses,
|
||||||
|
getStudentProgress,
|
||||||
|
getStudentCourses,
|
||||||
|
getCourseById,
|
||||||
|
isEnrolled,
|
||||||
|
type Course,
|
||||||
|
type StudentProgress,
|
||||||
|
formatIPFSLink,
|
||||||
|
getCourseDifficulty,
|
||||||
|
} from '@pezkuwi/lib/perwerde';
|
||||||
|
import { web3FromAddress } from '@polkadot/extension-dapp';
|
||||||
|
import { handleBlockchainError, handleBlockchainSuccess } from '@pezkuwi/lib/error-handler';
|
||||||
|
|
||||||
|
export default function EducationPlatform() {
|
||||||
|
const { api, selectedAccount, isApiReady } = usePolkadot();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [courses, setCourses] = useState<Course[]>([]);
|
||||||
|
const [studentProgress, setStudentProgress] = useState<StudentProgress | null>(null);
|
||||||
|
const [enrolledCourseIds, setEnrolledCourseIds] = useState<number[]>([]);
|
||||||
|
|
||||||
|
// Fetch data
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (!api || !isApiReady) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const coursesData = await getActiveCourses(api);
|
||||||
|
setCourses(coursesData);
|
||||||
|
|
||||||
|
// If user is logged in, fetch their progress
|
||||||
|
if (selectedAccount) {
|
||||||
|
const [progress, enrolledIds] = await Promise.all([
|
||||||
|
getStudentProgress(api, selectedAccount.address),
|
||||||
|
getStudentCourses(api, selectedAccount.address),
|
||||||
|
]);
|
||||||
|
|
||||||
|
setStudentProgress(progress);
|
||||||
|
setEnrolledCourseIds(enrolledIds);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load education data:', error);
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to load courses data',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
|
||||||
|
// Refresh every 30 seconds
|
||||||
|
const interval = setInterval(fetchData, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [api, isApiReady, selectedAccount]);
|
||||||
|
|
||||||
|
const handleEnroll = async (courseId: number) => {
|
||||||
|
if (!api || !selectedAccount) {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Please connect your wallet first',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const injector = await web3FromAddress(selectedAccount.address);
|
||||||
|
const tx = api.tx.perwerde.enroll(courseId);
|
||||||
|
|
||||||
|
await tx.signAndSend(
|
||||||
|
selectedAccount.address,
|
||||||
|
{ signer: injector.signer },
|
||||||
|
({ status, dispatchError }) => {
|
||||||
|
if (status.isInBlock) {
|
||||||
|
if (dispatchError) {
|
||||||
|
handleBlockchainError(dispatchError, api, toast);
|
||||||
|
} else {
|
||||||
|
handleBlockchainSuccess('perwerde.enrolled', toast);
|
||||||
|
// Refresh data
|
||||||
|
setTimeout(async () => {
|
||||||
|
if (api && selectedAccount) {
|
||||||
|
const [progress, enrolledIds] = await Promise.all([
|
||||||
|
getStudentProgress(api, selectedAccount.address),
|
||||||
|
getStudentCourses(api, selectedAccount.address),
|
||||||
|
]);
|
||||||
|
setStudentProgress(progress);
|
||||||
|
setEnrolledCourseIds(enrolledIds);
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Enroll failed:', error);
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: error.message || 'Failed to enroll in course',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingState message="Loading education platform..." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-white mb-2 flex items-center gap-3">
|
||||||
|
<GraduationCap className="w-10 h-10 text-green-500" />
|
||||||
|
Perwerde - Education Platform
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Decentralized learning for Digital Kurdistan. Build skills, earn credentials, empower our nation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Cards */}
|
||||||
|
{studentProgress && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-blue-500/10 flex items-center justify-center">
|
||||||
|
<BookOpen className="w-6 h-6 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold text-white">{studentProgress.totalCourses}</div>
|
||||||
|
<div className="text-sm text-gray-400">Enrolled Courses</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center">
|
||||||
|
<CheckCircle className="w-6 h-6 text-green-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold text-white">{studentProgress.completedCourses}</div>
|
||||||
|
<div className="text-sm text-gray-400">Completed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-6 h-6 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold text-white">{studentProgress.activeCourses}</div>
|
||||||
|
<div className="text-sm text-gray-400">In Progress</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-yellow-500/10 flex items-center justify-center">
|
||||||
|
<Award className="w-6 h-6 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold text-white">{studentProgress.totalPoints}</div>
|
||||||
|
<div className="text-sm text-gray-400">Total Points</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Courses List */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-white">
|
||||||
|
{courses.length > 0 ? `Available Courses (${courses.length})` : 'No Courses Available'}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{courses.length === 0 ? (
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardContent className="p-12 text-center">
|
||||||
|
<BookOpen className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||||
|
<h3 className="text-xl font-bold text-gray-400 mb-2">No Active Courses</h3>
|
||||||
|
<p className="text-gray-500 mb-6">
|
||||||
|
Check back later for new educational content. Courses will be added by educators.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{courses.map((course) => {
|
||||||
|
const isUserEnrolled = enrolledCourseIds.includes(course.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={course.id}
|
||||||
|
className="bg-gray-900 border-gray-800 hover:border-green-500/50 transition-colors"
|
||||||
|
>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-start justify-between gap-6">
|
||||||
|
{/* Course Info */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-xl font-bold text-white">{course.name}</h3>
|
||||||
|
<Badge className="bg-green-500/10 text-green-400 border-green-500/30">
|
||||||
|
#{course.id}
|
||||||
|
</Badge>
|
||||||
|
{isUserEnrolled && (
|
||||||
|
<Badge className="bg-blue-500/10 text-blue-400 border-blue-500/30">
|
||||||
|
Enrolled
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-400 mb-4">{course.description}</p>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<GraduationCap className="w-4 h-4" />
|
||||||
|
{course.owner.slice(0, 8)}...{course.owner.slice(-6)}
|
||||||
|
</div>
|
||||||
|
{course.contentLink && (
|
||||||
|
<a
|
||||||
|
href={formatIPFSLink(course.contentLink)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-1 text-green-400 hover:text-green-300"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-4 h-4" />
|
||||||
|
Course Materials
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{isUserEnrolled ? (
|
||||||
|
<>
|
||||||
|
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||||
|
<Play className="w-4 h-4 mr-2" />
|
||||||
|
Continue Learning
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline">View Progress</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={() => handleEnroll(course.id)}
|
||||||
|
disabled={!selectedAccount}
|
||||||
|
>
|
||||||
|
Enroll Now
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline">View Details</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Blockchain Features */}
|
||||||
|
<Card className="mt-8 bg-gray-900 border-gray-800">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-white">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||||
|
Blockchain-Powered Education
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
Decentralized course hosting (IPFS)
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
On-chain enrollment & completion tracking
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
Points-based achievement system
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
Trust score integration
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
Transparent educator verification
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2 text-gray-300">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
||||||
|
Immutable learning records
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,461 @@
|
|||||||
|
/**
|
||||||
|
* Welati Elections & Governance Page
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - View active elections (Presidential, Parliamentary, Speaker, Constitutional Court)
|
||||||
|
* - Register as candidate
|
||||||
|
* - Cast votes
|
||||||
|
* - View proposals & vote on them
|
||||||
|
* - See government officials
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||||
|
import {
|
||||||
|
Vote,
|
||||||
|
Users,
|
||||||
|
Trophy,
|
||||||
|
Clock,
|
||||||
|
FileText,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
AlertCircle,
|
||||||
|
Crown,
|
||||||
|
Scale,
|
||||||
|
Building,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||||
|
import { useAuth } from '@/contexts/AuthContext';
|
||||||
|
import { toast } from '@/components/ui/use-toast';
|
||||||
|
import { AsyncComponent, LoadingState } from '@pezkuwi/components/AsyncComponent';
|
||||||
|
import {
|
||||||
|
getActiveElections,
|
||||||
|
getElectionCandidates,
|
||||||
|
getActiveProposals,
|
||||||
|
getCurrentOfficials,
|
||||||
|
getCurrentMinisters,
|
||||||
|
getElectionTypeLabel,
|
||||||
|
getElectionStatusLabel,
|
||||||
|
getMinisterRoleLabel,
|
||||||
|
blocksToTime,
|
||||||
|
getRemainingBlocks,
|
||||||
|
type ElectionInfo,
|
||||||
|
type CollectiveProposal,
|
||||||
|
type CandidateInfo,
|
||||||
|
} from '@pezkuwi/lib/welati';
|
||||||
|
import { handleBlockchainError, handleBlockchainSuccess } from '@pezkuwi/lib/error-handler';
|
||||||
|
import { web3FromAddress } from '@polkadot/extension-dapp';
|
||||||
|
|
||||||
|
export default function Elections() {
|
||||||
|
const { api, selectedAccount, isApiReady } = usePolkadot();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [elections, setElections] = useState<ElectionInfo[]>([]);
|
||||||
|
const [proposals, setProposals] = useState<CollectiveProposal[]>([]);
|
||||||
|
const [officials, setOfficials] = useState<any>({});
|
||||||
|
const [ministers, setMinisters] = useState<any>({});
|
||||||
|
|
||||||
|
// Fetch data
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (!api || !isApiReady) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const [electionsData, proposalsData, officialsData, ministersData] = await Promise.all([
|
||||||
|
getActiveElections(api),
|
||||||
|
getActiveProposals(api),
|
||||||
|
getCurrentOfficials(api),
|
||||||
|
getCurrentMinisters(api),
|
||||||
|
]);
|
||||||
|
|
||||||
|
setElections(electionsData);
|
||||||
|
setProposals(proposalsData);
|
||||||
|
setOfficials(officialsData);
|
||||||
|
setMinisters(ministersData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load elections data:', error);
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to load elections data',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
|
||||||
|
// Refresh every 30 seconds
|
||||||
|
const interval = setInterval(fetchData, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [api, isApiReady]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingState message="Loading elections and governance data..." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-white mb-2">Welati - Elections & Governance</h1>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Democratic governance for Digital Kurdistan. Vote, propose, and participate in building our nation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<Tabs defaultValue="elections" className="space-y-6">
|
||||||
|
<TabsList className="grid w-full grid-cols-3 lg:w-auto bg-gray-900">
|
||||||
|
<TabsTrigger value="elections">
|
||||||
|
<Vote className="w-4 h-4 mr-2" />
|
||||||
|
Elections
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="proposals">
|
||||||
|
<FileText className="w-4 h-4 mr-2" />
|
||||||
|
Proposals
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="government">
|
||||||
|
<Crown className="w-4 h-4 mr-2" />
|
||||||
|
Government
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Elections Tab */}
|
||||||
|
<TabsContent value="elections" className="space-y-6">
|
||||||
|
{elections.length === 0 ? (
|
||||||
|
<Alert>
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
No active elections at this time. Check back later for upcoming elections.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{elections.map((election) => (
|
||||||
|
<ElectionCard key={election.electionId} election={election} api={api} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Proposals Tab */}
|
||||||
|
<TabsContent value="proposals" className="space-y-6">
|
||||||
|
{proposals.length === 0 ? (
|
||||||
|
<Alert>
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
No active proposals at this time. Parliament members can submit new proposals.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{proposals.map((proposal) => (
|
||||||
|
<ProposalCard key={proposal.proposalId} proposal={proposal} api={api} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Government Tab */}
|
||||||
|
<TabsContent value="government" className="space-y-6">
|
||||||
|
<GovernmentOfficials officials={officials} ministers={ministers} />
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// ELECTION CARD
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
function ElectionCard({ election, api }: { election: ElectionInfo; api: any }) {
|
||||||
|
const [candidates, setCandidates] = useState<CandidateInfo[]>([]);
|
||||||
|
const [timeLeft, setTimeLeft] = useState<any>(null);
|
||||||
|
|
||||||
|
const typeLabel = getElectionTypeLabel(election.electionType);
|
||||||
|
const statusLabel = getElectionStatusLabel(election.status);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!api) return;
|
||||||
|
|
||||||
|
// Load candidates
|
||||||
|
getElectionCandidates(api, election.electionId).then(setCandidates);
|
||||||
|
|
||||||
|
// Update time left
|
||||||
|
const updateTime = async () => {
|
||||||
|
let targetBlock = election.votingEndBlock;
|
||||||
|
if (election.status === 'CandidacyPeriod') targetBlock = election.candidacyEndBlock;
|
||||||
|
else if (election.status === 'CampaignPeriod') targetBlock = election.campaignEndBlock;
|
||||||
|
|
||||||
|
const remaining = await getRemainingBlocks(api, targetBlock);
|
||||||
|
setTimeLeft(blocksToTime(remaining));
|
||||||
|
};
|
||||||
|
|
||||||
|
updateTime();
|
||||||
|
const interval = setInterval(updateTime, 10000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [api, election]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-2xl text-white">{typeLabel.en}</CardTitle>
|
||||||
|
<CardDescription className="text-gray-400 mt-1">{typeLabel.kmr}</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-500/10 text-green-400 border-green-500/30">
|
||||||
|
{statusLabel.en}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="bg-gray-800/50 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400 mb-1">
|
||||||
|
<Users className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Candidates</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white">{election.totalCandidates}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800/50 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400 mb-1">
|
||||||
|
<Vote className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Votes Cast</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white">{election.totalVotes.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800/50 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400 mb-1">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Time Left</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-white">
|
||||||
|
{timeLeft ? `${timeLeft.days}d ${timeLeft.hours}h` : '-'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Top Candidates */}
|
||||||
|
{candidates.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-gray-400 mb-3">Leading Candidates</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{candidates.slice(0, 5).map((candidate, idx) => (
|
||||||
|
<div
|
||||||
|
key={candidate.account}
|
||||||
|
className="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-green-500/10 border border-green-500/30 flex items-center justify-center">
|
||||||
|
<span className="text-green-400 font-bold text-sm">#{idx + 1}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-white text-sm font-medium">
|
||||||
|
{candidate.account.slice(0, 12)}...{candidate.account.slice(-8)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Trophy className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="text-white font-bold">{candidate.voteCount.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{election.status === 'CandidacyPeriod' && (
|
||||||
|
<Button className="flex-1 bg-green-600 hover:bg-green-700">
|
||||||
|
Register as Candidate
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{election.status === 'VotingPeriod' && (
|
||||||
|
<Button className="flex-1 bg-green-600 hover:bg-green-700">
|
||||||
|
<Vote className="w-4 h-4 mr-2" />
|
||||||
|
Cast Your Vote
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="outline" className="flex-1">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// PROPOSAL CARD
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
function ProposalCard({ proposal, api }: { proposal: CollectiveProposal; api: any }) {
|
||||||
|
const [timeLeft, setTimeLeft] = useState<any>(null);
|
||||||
|
|
||||||
|
const totalVotes = proposal.ayeVotes + proposal.nayVotes + proposal.abstainVotes;
|
||||||
|
const ayePercent = totalVotes > 0 ? Math.round((proposal.ayeVotes / totalVotes) * 100) : 0;
|
||||||
|
const nayPercent = totalVotes > 0 ? Math.round((proposal.nayVotes / totalVotes) * 100) : 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!api) return;
|
||||||
|
|
||||||
|
const updateTime = async () => {
|
||||||
|
const remaining = await getRemainingBlocks(api, proposal.expiresAt);
|
||||||
|
setTimeLeft(blocksToTime(remaining));
|
||||||
|
};
|
||||||
|
|
||||||
|
updateTime();
|
||||||
|
const interval = setInterval(updateTime, 10000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [api, proposal]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-xl text-white">#{proposal.proposalId} {proposal.title}</CardTitle>
|
||||||
|
<CardDescription className="text-gray-400 mt-1">{proposal.description}</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
className={
|
||||||
|
proposal.status === 'Active'
|
||||||
|
? 'bg-green-500/10 text-green-400 border-green-500/30'
|
||||||
|
: 'bg-gray-500/10 text-gray-400'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{proposal.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{/* Vote Progress */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Aye ({proposal.ayeVotes})</span>
|
||||||
|
<span className="text-gray-400">Nay ({proposal.nayVotes})</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-3 bg-gray-800 rounded-full overflow-hidden flex">
|
||||||
|
<div className="bg-green-500" style={{ width: `${ayePercent}%` }} />
|
||||||
|
<div className="bg-red-500" style={{ width: `${nayPercent}%` }} />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||||
|
<span>{ayePercent}% Aye</span>
|
||||||
|
<span>
|
||||||
|
{proposal.votesCast} / {proposal.threshold} votes cast
|
||||||
|
</span>
|
||||||
|
<span>{nayPercent}% Nay</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
{timeLeft && `${timeLeft.days}d ${timeLeft.hours}h remaining`}
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline">{proposal.decisionType}</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
{proposal.status === 'Active' && (
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<Button className="bg-green-600 hover:bg-green-700">
|
||||||
|
<CheckCircle2 className="w-4 h-4 mr-1" />
|
||||||
|
Aye
|
||||||
|
</Button>
|
||||||
|
<Button className="bg-red-600 hover:bg-red-700">
|
||||||
|
<XCircle className="w-4 h-4 mr-1" />
|
||||||
|
Nay
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline">Abstain</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// GOVERNMENT OFFICIALS
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
function GovernmentOfficials({ officials, ministers }: { officials: any; ministers: any }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Executive */}
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-white">
|
||||||
|
<Crown className="w-5 h-5 text-yellow-500" />
|
||||||
|
Executive Branch
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
{officials.serok && (
|
||||||
|
<OfficeRow title="Serok (President)" address={officials.serok} icon={Crown} />
|
||||||
|
)}
|
||||||
|
{officials.serokWeziran && (
|
||||||
|
<OfficeRow title="Serok Weziran (Prime Minister)" address={officials.serokWeziran} icon={Building} />
|
||||||
|
)}
|
||||||
|
{officials.meclisBaskanı && (
|
||||||
|
<OfficeRow title="Meclis Başkanı (Speaker)" address={officials.meclisBaskanı} icon={Scale} />
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Cabinet */}
|
||||||
|
<Card className="bg-gray-900 border-gray-800">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-white">
|
||||||
|
<Building className="w-5 h-5" />
|
||||||
|
Cabinet Ministers
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="grid gap-3">
|
||||||
|
{Object.entries(ministers).map(
|
||||||
|
([role, address]: [string, any]) =>
|
||||||
|
address && (
|
||||||
|
<OfficeRow
|
||||||
|
key={role}
|
||||||
|
title={getMinisterRoleLabel(role as any).en}
|
||||||
|
address={address}
|
||||||
|
icon={Users}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
{Object.values(ministers).every((v) => !v) && (
|
||||||
|
<div className="text-gray-400 text-sm text-center py-4">No ministers appointed yet</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function OfficeRow({ title, address, icon: Icon }: { title: string; address: string; icon: any }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Icon className="w-5 h-5 text-green-400" />
|
||||||
|
<span className="text-white font-medium">{title}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-400 text-sm font-mono">
|
||||||
|
{address.slice(0, 8)}...{address.slice(-6)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+6
-5
@@ -14,11 +14,12 @@
|
|||||||
"@pezkuwi/theme": ["../shared/theme"],
|
"@pezkuwi/theme": ["../shared/theme"],
|
||||||
"@pezkuwi/types": ["../shared/types"]
|
"@pezkuwi/types": ["../shared/types"]
|
||||||
},
|
},
|
||||||
"noImplicitAny": false,
|
"strict": true,
|
||||||
"noUnusedParameters": false,
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"allowJs": true,
|
"allowJs": false,
|
||||||
"noUnusedLocals": false,
|
"noUnusedLocals": true,
|
||||||
"strictNullChecks": false
|
"noUnusedParameters": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user