Admin dashboard

apps/frontend/src/App.tsx

@@ -3,12 +3,13 @@ import { createBrowserRouter, RouterProvider, Outlet, useLocation } from "react-
 import { Proposal } from "./pages/Proposal/Proposal";
 import { Proposals } from "./pages/Proposals";
 import { CreateProposal } from "./pages/CreateProposal/CreateProposal";
+import { AdminDashboard } from "./pages/Admin/AdminDashboard";
 import { Footer } from "./components/footer/Footer";
 import { ScrollToTop } from "./components/ui/ScrollToTop";
 import { useVoteCastInvalidate } from "./hooks/useVoteCastInvalidate";
 import { useProposalCreatedInvalidate } from "./hooks/useProposalCreatedInvalidate";
 
-const excludedRoutes = ["/create-proposal"];
+const excludedRoutes = ["/create-proposal", "/admin"];
 
 function Layout() {
   const { pathname } = useLocation();
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
         path: "create-proposal",
         element: <CreateProposal />,
       },
+      {
+        path: "admin",
+        element: <AdminDashboard />,
+      },
     ],
   },
 ]);

apps/frontend/src/components/ui/InputMessage.tsx

@@ -15,5 +15,9 @@ export const InputMessage = ({ error, message }: InputMessageProps) => {
         <Text fontSize={"12px"}>{error}</Text>
       </FormErrorMessage>
     );
-  return <FormHelperText fontSize={"12px"}>{message}</FormHelperText>;
+  return (
+    <FormHelperText fontSize={"12px"} whiteSpace={"pre"}>
+      {message}
+    </FormHelperText>
+  );
 };

apps/frontend/src/constants.tsx

@@ -14,3 +14,5 @@ export const IconByVote = {
   [SingleChoiceEnum.FOR]: ThumbsUpIcon,
   [SingleChoiceEnum.ABSTAIN]: AbstainIcon,
 };
+
+export const VALIDATOR_STAKED_VET_REQUIREMENT = BigInt("25000000000000000000000000"); // 25 million VET

apps/frontend/src/hooks/useAdminUserRoles.ts

@@ -0,0 +1,69 @@
+import { executeMultipleClauses } from "@/utils/contract";
+import { getConfig } from "@repo/config";
+import { VeVote__factory } from "@vechain/vevote-contracts";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+const ROLES = [
+  "DEFAULT_ADMIN_ROLE",
+  "EXECUTOR_ROLE",
+  "SETTINGS_MANAGER_ROLE",
+  "NODE_WEIGHT_MANAGER_ROLE",
+  "UPGRADER_ROLE",
+  "WHITELISTED_ROLE",
+  "WHITELIST_ADMIN_ROLE",
+] as const;
+
+const contractAddress = getConfig(import.meta.env.VITE_APP_ENV).vevoteContractAddress;
+const contractInterface = VeVote__factory.createInterface();
+
+export const useUserAdminRoles = (userAddress: string) => {
+  const checkUserRoles = useCallback(async () => {
+    try {
+      const roleHashMethods = ROLES.map(role => ({
+        method: role,
+        args: [],
+      }));
+
+      const roleHashResults = await executeMultipleClauses({
+        contractAddress,
+        contractInterface,
+        methodsWithArgs: roleHashMethods,
+      });
+
+      const roleHashes = roleHashResults
+        .map((result, index) => ({
+          name: ROLES[index],
+          hash: result?.success ? result.result.plain : null,
+        }))
+        .filter(role => role.hash);
+
+      const hasRoleMethods = roleHashes.map(role => ({
+        method: "hasRole" as const,
+        args: [role.hash, userAddress],
+      }));
+
+      const hasRoleResults = await executeMultipleClauses({
+        contractAddress,
+        contractInterface,
+        methodsWithArgs: hasRoleMethods,
+      });
+
+      const userRoles = roleHashes
+        .filter((_, index) => hasRoleResults[index]?.success && hasRoleResults[index].result.plain === true)
+        .map(role => role.name);
+
+      return userRoles;
+    } catch (error) {
+      console.error("Error checking user roles:", error);
+      return [];
+    }
+  }, [userAddress]);
+
+  return useQuery({
+    queryKey: ["userRoles", userAddress],
+    queryFn: checkUserRoles,
+    enabled: Boolean(userAddress),
+    staleTime: 30000,
+  });
+};

apps/frontend/src/hooks/useContractRoles.ts

@@ -0,0 +1,85 @@
+import { executeMultipleClauses } from "@/utils/contract";
+import { getConfig } from "@repo/config";
+import { VeVote__factory } from "@vechain/vevote-contracts";
+import { NodeManagement__factory, StargateNFT__factory } from "@vechain/vevote-contracts/typechain-types";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useWallet } from "@vechain/vechain-kit";
+import { CONTRACT_CONFIGS, ContractType } from "@/pages/Admin/constants/contracts";
+
+const getContractInterface = (contractType: ContractType) => {
+  switch (contractType) {
+    case "vevote":
+      return VeVote__factory.createInterface();
+    case "nodeManagement":
+      return NodeManagement__factory.createInterface();
+    case "stargate":
+      return StargateNFT__factory.createInterface();
+    default:
+      return VeVote__factory.createInterface();
+  }
+};
+
+export const useContractRoles = (contractType: ContractType = "vevote") => {
+  const { account } = useWallet();
+  const config = CONTRACT_CONFIGS[contractType];
+  const contractAddress = getConfig(import.meta.env.VITE_APP_ENV)[config.addressKey];
+  const contractInterface = getContractInterface(contractType);
+
+  const checkUserRoles = useCallback(async () => {
+    if (!account?.address) return [];
+
+    try {
+      const roleHashMethods = config.roles.map(role => ({
+        method: role,
+        args: [],
+      }));
+
+      const roleHashResults = await executeMultipleClauses({
+        contractAddress,
+        contractInterface,
+        methodsWithArgs: roleHashMethods,
+      });
+
+      const roleHashes = roleHashResults
+        .map((result, index) => ({
+          name: config.roles[index],
+          hash: result?.success ? result.result.plain : null,
+        }))
+        .filter(role => role.hash);
+
+      const hasRoleMethods = roleHashes.map(role => ({
+        method: "hasRole" as const,
+        args: [role.hash, account.address],
+      }));
+
+      const hasRoleResults = await executeMultipleClauses({
+        contractAddress,
+        contractInterface,
+        methodsWithArgs: hasRoleMethods,
+      });
+
+      const userRoles = roleHashes
+        .filter((_, index) => hasRoleResults[index]?.success && hasRoleResults[index].result.plain === true)
+        .map(role => role.name);
+
+      return userRoles;
+    } catch (error) {
+      console.error("Error checking user roles:", error);
+      return [];
+    }
+  }, [account?.address, contractAddress, config.roles, contractInterface]);
+
+  const query = useQuery({
+    queryKey: ["contractRoles", contractType, account?.address],
+    queryFn: checkUserRoles,
+    enabled: Boolean(account?.address),
+    staleTime: 30000,
+  });
+
+  return {
+    defaultRoles: config.roles,
+    roles: query.data || [],
+    isLoading: query.isLoading,
+  };
+};

apps/frontend/src/hooks/useFormatTime.ts

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import { useI18nContext } from "@/i18n/i18n-react";
+
+dayjs.extend(duration);
+
+export const useFormatTime = () => {
+  const { LL } = useI18nContext();
+
+  const formatTime = useCallback((seconds: number) => {
+    if (seconds < 60) {
+      return LL.common.time.seconds({ count: seconds });
+    } else if (seconds < 3600) {
+      const minutes = Math.floor(seconds / 60);
+      return LL.common.time.minutes({ count: minutes });
+    } else if (seconds < 86400) {
+      const hours = Math.floor(seconds / 3600);
+      return LL.common.time.hours({ count: hours });
+    } else {
+      const days = Math.floor(seconds / 86400);
+      return LL.common.time.days({ count: days });
+    }
+  }, [LL.common.time]);
+
+  return {
+    formatTime,
+  };
+};

apps/frontend/src/hooks/useGovernanceSettings.ts

@@ -0,0 +1,94 @@
+import { getConfig } from "@repo/config";
+import { VeVote__factory } from "@vechain/vevote-contracts";
+import { EnhancedClause } from "@vechain/vechain-kit";
+import { useVevoteSendTransaction } from "@/utils/hooks/useVevoteSendTransaction";
+import { useCallback } from "react";
+
+type GovernanceSettingsProps = {
+  updateQuorumNumerator?: number;
+  setMinVotingDelay?: number;
+  setMinVotingDuration?: number;
+  setMaxVotingDuration?: number;
+  setMinStakedVetAmount?: bigint;
+};
+
+const contractAddress = getConfig(import.meta.env.VITE_APP_ENV).vevoteContractAddress;
+const contractInterface = VeVote__factory.createInterface();
+
+export const useGovernanceSettings = () => {
+  const buildClauses = useCallback((props: GovernanceSettingsProps) => {
+    const clauses: EnhancedClause[] = [];
+
+    try {
+      const baseClause = {
+        to: contractAddress,
+        value: 0,
+      };
+
+      if (props.updateQuorumNumerator !== undefined) {
+        const clause = {
+          ...baseClause,
+          data: contractInterface.encodeFunctionData("updateQuorumNumerator", [props.updateQuorumNumerator]),
+          abi: JSON.parse(JSON.stringify(contractInterface.getFunction("updateQuorumNumerator"))),
+          comment: `Update quorum numerator to ${props.updateQuorumNumerator}`,
+        };
+        clauses.push(clause as EnhancedClause);
+      }
+
+      if (props.setMinVotingDelay !== undefined) {
+        const blocksValue = Math.floor(props.setMinVotingDelay / 10);
+        const clause = {
+          ...baseClause,
+          data: contractInterface.encodeFunctionData("setMinVotingDelay", [blocksValue]),
+          abi: JSON.parse(JSON.stringify(contractInterface.getFunction("setMinVotingDelay"))),
+          comment: `Set min voting delay to ${props.setMinVotingDelay} seconds (${blocksValue} blocks)`,
+        };
+        clauses.push(clause as EnhancedClause);
+      }
+
+      if (props.setMinVotingDuration !== undefined) {
+        const blocksValue = Math.floor(props.setMinVotingDuration / 10);
+        const clause = {
+          ...baseClause,
+          data: contractInterface.encodeFunctionData("setMinVotingDuration", [blocksValue]),
+          abi: JSON.parse(JSON.stringify(contractInterface.getFunction("setMinVotingDuration"))),
+          comment: `Set min voting duration to ${props.setMinVotingDuration} seconds (${blocksValue} blocks)`,
+        };
+        clauses.push(clause as EnhancedClause);
+      }
+
+      if (props.setMaxVotingDuration !== undefined) {
+        const blocksValue = Math.floor(props.setMaxVotingDuration / 10);
+        const clause = {
+          ...baseClause,
+          data: contractInterface.encodeFunctionData("setMaxVotingDuration", [blocksValue]),
+          abi: JSON.parse(JSON.stringify(contractInterface.getFunction("setMaxVotingDuration"))),
+          comment: `Set max voting duration to ${props.setMaxVotingDuration} seconds (${blocksValue} blocks)`,
+        };
+        clauses.push(clause as EnhancedClause);
+      }
+
+      if (props.setMinStakedVetAmount !== undefined) {
+        const clause = {
+          ...baseClause,
+          data: contractInterface.encodeFunctionData("setMinStakedVetAmount", [props.setMinStakedVetAmount]),
+          abi: JSON.parse(JSON.stringify(contractInterface.getFunction("setMinStakedVetAmount"))),
+          comment: `Set minimum staked VET amount to ${props.setMinStakedVetAmount.toString()}`,
+        };
+        clauses.push(clause as EnhancedClause);
+      }
+
+      return clauses;
+    } catch (error) {
+      console.error(error);
+      return [];
+    }
+  }, []);
+
+  return useVevoteSendTransaction({
+    clauseBuilder: buildClauses,
+    delayedRefetchKeys: [["veVoteInfo"]],
+    refetchDelay: 500,
+    maxRetries: 1,
+  });
+};

apps/frontend/src/hooks/useLevelMultipliers.ts

@@ -0,0 +1,45 @@
+import { getConfig } from "@repo/config";
+import { VeVote__factory } from "@vechain/vevote-contracts";
+import { EnhancedClause } from "@vechain/vechain-kit";
+import { useVevoteSendTransaction } from "@/utils/hooks/useVevoteSendTransaction";
+import { useCallback } from "react";
+
+type LevelMultipliersProps = {
+  updateLevelIdMultipliers: number[];
+};
+
+const contractAddress = getConfig(import.meta.env.VITE_APP_ENV).vevoteContractAddress;
+const contractInterface = VeVote__factory.createInterface();
+
+export const useLevelMultipliers = () => {
+  const buildClauses = useCallback((props: LevelMultipliersProps) => {
+    const clauses: EnhancedClause[] = [];
+
+    try {
+      const baseClause = {
+        to: contractAddress,
+        value: 0,
+      };
+
+      const clause = {
+        ...baseClause,
+        data: contractInterface.encodeFunctionData("updateLevelIdMultipliers", [props.updateLevelIdMultipliers]),
+        abi: JSON.parse(JSON.stringify(contractInterface.getFunction("updateLevelIdMultipliers"))),
+        comment: `Update level ID multipliers: [${props.updateLevelIdMultipliers.join(", ")}]`,
+      };
+      clauses.push(clause as EnhancedClause);
+
+      return clauses;
+    } catch (error) {
+      console.error(error);
+      return [];
+    }
+  }, []);
+
+  return useVevoteSendTransaction({
+    clauseBuilder: buildClauses,
+    delayedRefetchKeys: [["veVoteInfo"], ["levelMultipliers"]],
+    refetchDelay: 500,
+    maxRetries: 1,
+  });
+};