feat: Phase 1B complete - Perwerde & ValidatorPool UI

Perwerde (Education Platform): - Add hybrid backend (Supabase + Blockchain + IPFS) - Implement CourseList, CourseCreator, StudentDashboard - Create courses table with RLS policies - Add IPFS upload utility - Integrate with pallet-perwerde extrinsics ValidatorPool: - Add validator pool management UI - Implement PoolCategorySelector with 3 categories - Add ValidatorPoolDashboard with pool stats - Integrate with pallet-validator-pool extrinsics - Add to StakingDashboard as new tab Technical: - Fix all toast imports (sonner) - Fix IPFS File upload (Blob conversion) - Fix RLS policies (wallet_address → auth.uid) - Add error boundaries - Add loading states Status: UI complete, blockchain integration pending VPS deployment
2026-04-24 11:57:56 +00:00 · 2025-11-17 05:04:51 +03:00
parent 3fe0572e40
commit c488cfc3bc
17 changed files with 1929 additions and 779 deletions
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { ValidatorPoolCategory } from '@shared/lib/validator-pool';
+
+interface PoolCategorySelectorProps {
+  currentCategory?: ValidatorPoolCategory;
+  onCategoryChange: (category: ValidatorPoolCategory) => void;
+  disabled?: boolean;
+}
+
+const POOL_CATEGORIES = Object.values(ValidatorPoolCategory);
+
+export function PoolCategorySelector({ currentCategory, onCategoryChange, disabled }: PoolCategorySelectorProps) {
+  const [selectedCategory, setSelectedCategory] = useState<ValidatorPoolCategory>(currentCategory || POOL_CATEGORIES[0]);
+
+  const handleSubmit = () => {
+    onCategoryChange(selectedCategory);
+  };
+
+  return (
+    <div className="space-y-4">
+      <Select value={selectedCategory} onValueChange={(value) => setSelectedCategory(value as ValidatorPoolCategory)} disabled={disabled}>
+        <SelectTrigger className="w-full bg-gray-800 border-gray-700 text-white">
+          <SelectValue placeholder="Select a pool category..." />
+        </SelectTrigger>
+        <SelectContent>
+          {POOL_CATEGORIES.map(cat => (
+            <SelectItem key={cat} value={cat}>{cat.replace(/([A-Z])/g, ' $1').trim()}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button onClick={handleSubmit} disabled={disabled || !selectedCategory} className="w-full">
+        {disabled && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {currentCategory ? 'Switch Category' : 'Join Pool'}
+      </Button>
+    </div>
+  );
+}
@@ -10,7 +10,7 @@ import { TrendingUp, Coins, Lock, Clock, Award, AlertCircle, CheckCircle2 } from
 import { useTranslation } from 'react-i18next';
 import { usePolkadot } from '@/contexts/PolkadotContext';
 import { useWallet } from '@/contexts/WalletContext';
-import { toast } from '@/components/ui/use-toast';
+import { toast } from 'sonner';
 import { web3FromAddress } from '@polkadot/extension-dapp';
 import {
  getStakingInfo,
@@ -22,6 +22,7 @@ import {
  type StakingInfo
 } from '@pezkuwi/lib/staking';
 import { LoadingState } from '@pezkuwi/components/AsyncComponent';
+import { ValidatorPoolDashboard } from './ValidatorPoolDashboard';
 import { handleBlockchainError, handleBlockchainSuccess } from '@pezkuwi/lib/error-handler';

 export const StakingDashboard: React.FC = () => {
@@ -71,11 +72,7 @@ export const StakingDashboard: React.FC = () => {
        }
      } catch (error) {
        console.error('Failed to fetch staking data:', error);
-        toast({
-          title: 'Error',
-          description: 'Failed to fetch staking information',
-          variant: 'destructive',
-        });
+        toast.error('Failed to fetch staking information');
      } finally {
        setIsLoadingData(false);
      }
@@ -140,11 +137,7 @@ export const StakingDashboard: React.FC = () => {
      );
    } catch (error: any) {
      console.error('Bond failed:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to bond tokens',
-        variant: 'destructive',
-      });
+      toast.error(error.message || 'Failed to bond tokens');
      setIsLoading(false);
    }
  };
@@ -153,11 +146,7 @@ export const StakingDashboard: React.FC = () => {
    if (!api || !selectedAccount || selectedValidators.length === 0) return;

    if (!stakingInfo || parseFloat(stakingInfo.bonded) === 0) {
-      toast({
-        title: 'Error',
-        description: 'You must bond tokens before nominating validators',
-        variant: 'destructive',
-      });
+      toast.error('You must bond tokens before nominating validators');
      return;
    }

@@ -190,11 +179,7 @@ export const StakingDashboard: React.FC = () => {
      );
    } catch (error: any) {
      console.error('Nomination failed:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to nominate validators',
-        variant: 'destructive',
-      });
+      toast.error(error.message || 'Failed to nominate validators');
      setIsLoading(false);
    }
  };
@@ -239,11 +224,7 @@ export const StakingDashboard: React.FC = () => {
      );
    } catch (error: any) {
      console.error('Unbond failed:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to unbond tokens',
-        variant: 'destructive',
-      });
+      toast.error(error.message || 'Failed to unbond tokens');
      setIsLoading(false);
    }
  };
@@ -252,10 +233,7 @@ export const StakingDashboard: React.FC = () => {
    if (!api || !selectedAccount) return;

    if (!stakingInfo || parseFloat(stakingInfo.redeemable) === 0) {
-      toast({
-        title: 'Info',
-        description: 'No tokens available to withdraw',
-      });
+      toast.info('No tokens available to withdraw');
      return;
    }

@@ -277,17 +255,10 @@ export const StakingDashboard: React.FC = () => {
                const decoded = api.registry.findMetaError(dispatchError.asModule);
                errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs.join(' ')}`;
              }
-              toast({
-                title: 'Error',
-                description: errorMessage,
-                variant: 'destructive',
-              });
+              toast.error(errorMessage);
              setIsLoading(false);
            } else {
-              toast({
-                title: 'Success',
-                description: `Withdrew ${stakingInfo.redeemable} HEZ`,
-              });
+              toast.success(`Withdrew ${stakingInfo.redeemable} HEZ`);
              refreshBalances();
              setTimeout(() => {
                if (api && selectedAccount) {
@@ -301,11 +272,7 @@ export const StakingDashboard: React.FC = () => {
      );
    } catch (error: any) {
      console.error('Withdrawal failed:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to withdraw tokens',
-        variant: 'destructive',
-      });
+      toast.error(error.message || 'Failed to withdraw tokens');
      setIsLoading(false);
    }
  };
@@ -314,11 +281,7 @@ export const StakingDashboard: React.FC = () => {
    if (!api || !selectedAccount) return;

    if (!stakingInfo || parseFloat(stakingInfo.bonded) === 0) {
-      toast({
-        title: 'Error',
-        description: 'You must bond tokens before starting score tracking',
-        variant: 'destructive',
-      });
+      toast.error('You must bond tokens before starting score tracking');
      return;
    }

@@ -338,17 +301,10 @@ export const StakingDashboard: React.FC = () => {
                const decoded = api.registry.findMetaError(dispatchError.asModule);
                errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs.join(' ')}`;
              }
-              toast({
-                title: 'Error',
-                description: errorMessage,
-                variant: 'destructive',
-              });
+              toast.error(errorMessage);
              setIsLoading(false);
            } else {
-              toast({
-                title: 'Success',
-                description: 'Score tracking started successfully! Your staking score will now accumulate over time.',
-              });
+              toast.success('Score tracking started successfully! Your staking score will now accumulate over time.');
              // Refresh staking data after a delay
              setTimeout(() => {
                if (api && selectedAccount) {
@@ -362,11 +318,7 @@ export const StakingDashboard: React.FC = () => {
      );
    } catch (error: any) {
      console.error('Start score tracking failed:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to start score tracking',
-        variant: 'destructive',
-      });
+      toast.error(error.message || 'Failed to start score tracking');
      setIsLoading(false);
    }
  };
@@ -378,10 +330,7 @@ export const StakingDashboard: React.FC = () => {
      } else {
        // Max 16 nominations
        if (prev.length >= 16) {
-          toast({
-            title: 'Limit Reached',
-            description: 'Maximum 16 validators can be nominated',
-          });
+          toast.info('Maximum 16 validators can be nominated');
          return prev;
        }
        return [...prev, validator];
@@ -492,10 +441,7 @@ export const StakingDashboard: React.FC = () => {
                <Button
                  size="sm"
                  onClick={() => {
-                    toast({
-                      title: 'Coming Soon',
-                      description: 'Claim PEZ rewards functionality will be available soon',
-                    });
+                    toast.info('Claim PEZ rewards functionality will be available soon');
                  }}
                  disabled={isLoading}
                  className="mt-2 w-full bg-orange-600 hover:bg-orange-700"
@@ -520,16 +466,17 @@ export const StakingDashboard: React.FC = () => {
      {/* Main Staking Interface */}
      <Card className="bg-gray-900 border-gray-800">
        <CardHeader>
-          <CardTitle className="text-xl text-white">Validator Nomination Staking</CardTitle>
+          <CardTitle className="text-xl text-white">Staking</CardTitle>
          <CardDescription className="text-gray-400">
-            Bond HEZ and nominate validators to earn staking rewards
+            Stake HEZ to secure the network and earn rewards.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="stake">
-            <TabsList className="grid w-full grid-cols-3">
+            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="stake">Stake</TabsTrigger>
              <TabsTrigger value="nominate">Nominate</TabsTrigger>
+              <TabsTrigger value="pool">Validator Pool</TabsTrigger>
              <TabsTrigger value="unstake">Unstake</TabsTrigger>
            </TabsList>

@@ -618,6 +565,11 @@ export const StakingDashboard: React.FC = () => {
              </Button>
            </TabsContent>

+            {/* VALIDATOR POOL TAB */}
+            <TabsContent value="pool" className="space-y-4">
+              <ValidatorPoolDashboard />
+            </TabsContent>
+
            {/* UNSTAKE TAB */}
            <TabsContent value="unstake" className="space-y-4">
              <Alert className="bg-yellow-900/20 border-yellow-500">
@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { usePolkadot } from '@/contexts/PolkadotContext';
+import { toast } from 'sonner';
+import { 
+  getPoolMember, 
+  getPoolSize, 
+  getCurrentValidatorSet, 
+  joinValidatorPool, 
+  leaveValidatorPool, 
+  updateValidatorCategory,
+  ValidatorPoolCategory 
+} from '@shared/lib/validator-pool';
+import { Loader2, Users, UserCheck, UserX } from 'lucide-react';
+import { PoolCategorySelector } from './PoolCategorySelector';
+
+export function ValidatorPoolDashboard() {
+  const { api, selectedAccount } = usePolkadot();
+  const [poolMember, setPoolMember] = useState<ValidatorPoolCategory | null>(null);
+  const [poolSize, setPoolSize] = useState(0);
+  const [validatorCount, setValidatorCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    if (!api) return;
+    try {
+      setLoading(true);
+      
+      const [size, validatorSet] = await Promise.all([
+        getPoolSize(api),
+        getCurrentValidatorSet(api),
+      ]);
+      
+      setPoolSize(size);
+      
+      // Calculate total validator count
+      if (validatorSet) {
+        const total = validatorSet.stake_validators.length + 
+                     validatorSet.parliamentary_validators.length + 
+                     validatorSet.merit_validators.length;
+        setValidatorCount(total);
+      }
+
+      if (selectedAccount) {
+        const memberData = await getPoolMember(api, selectedAccount.address);
+        setPoolMember(memberData);
+      }
+    } catch (error) {
+      console.error('Failed to fetch validator pool data:', error);
+      toast.error('Failed to fetch pool data');
+    } finally {
+      setLoading(false);
+    }
+  }, [api, selectedAccount]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleJoin = async (category: ValidatorPoolCategory) => {
+    if (!api || !selectedAccount) return;
+    setActionLoading(true);
+    try {
+      await joinValidatorPool(api, selectedAccount, category);
+      toast.success(`Joined the ${category} pool`);
+      fetchData();
+    } catch (error: any) {
+      console.error('Join pool error:', error);
+      // Error toast already shown in joinValidatorPool
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleLeave = async () => {
+    if (!api || !selectedAccount) return;
+    setActionLoading(true);
+    try {
+      await leaveValidatorPool(api, selectedAccount);
+      toast.success('Left the validator pool');
+      fetchData();
+    } catch (error: any) {
+      console.error('Leave pool error:', error);
+      // Error toast already shown in leaveValidatorPool
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleCategorySwitch = async (newCategory: ValidatorPoolCategory) => {
+    if (!api || !selectedAccount) return;
+    setActionLoading(true);
+    try {
+      await updateValidatorCategory(api, selectedAccount, newCategory);
+      toast.success(`Switched to ${newCategory}`);
+      fetchData();
+    } catch (error: any) {
+      console.error('Switch category error:', error);
+      // Error toast already shown in updateValidatorCategory
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card className="bg-gray-900 border-gray-800">
+        <CardContent className="p-12 text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-green-500 mx-auto mb-4" />
+          <p className="text-gray-400">Loading validator pool info...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-gray-900 border-gray-800">
+      <CardHeader>
+        <CardTitle className="text-white">Validator Pool</CardTitle>
+        <CardDescription>Join a pool to support the network and earn rewards.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-gray-800 rounded-lg">
+            <div className="flex items-center text-gray-400 mb-2">
+              <Users className="w-4 h-4 mr-2" />
+              Pool Size
+            </div>
+            <div className="text-2xl font-bold text-white">{poolSize}</div>
+          </div>
+          <div className="p-4 bg-gray-800 rounded-lg">
+            <div className="flex items-center text-gray-400 mb-2">
+              <UserCheck className="w-4 h-4 mr-2" />
+              Active Validators
+            </div>
+            <div className="text-2xl font-bold text-white">{validatorCount}</div>
+          </div>
+        </div>
+
+        {selectedAccount ? (
+          poolMember ? (
+            <div className="space-y-4">
+              <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+                <p className="text-green-400">
+                  You are in the <span className="font-bold">{poolMember}</span> pool
+                </p>
+              </div>
+              <PoolCategorySelector
+                currentCategory={poolMember}
+                onCategoryChange={handleCategorySwitch}
+                disabled={actionLoading}
+              />
+              <Button 
+                onClick={handleLeave} 
+                variant="destructive" 
+                disabled={actionLoading} 
+                className="w-full"
+              >
+                {actionLoading ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <UserX className="mr-2 h-4 w-4" />
+                )}
+                Leave Pool
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+                <p className="text-yellow-400">You are not currently in a validator pool</p>
+              </div>
+              <PoolCategorySelector 
+                onCategoryChange={handleJoin} 
+                disabled={actionLoading} 
+              />
+            </div>
+          )
+        ) : (
+          <div className="p-6 text-center">
+            <p className="text-gray-400">Please connect your wallet to manage pool membership</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}