+
+
+
+
+ Token Vesting Portal
+
+ {/*
+
+ {!isConnected ? (
+
+
+ Connect your wallet to continue
+
+
+ You need to connect your wallet to interact with the vesting
+ contract
+
+
+ ) : (
+
+
+
+ {isAdmin ? "Administrator Panel" : "Beneficiary Dashboard"}
+
+
+ Switch to {isAdmin ? "Beneficiary" : "Admin"} View
+
+
+
+
+
+ Overview
+ {isAdmin && (
+ Create Schedule
+ )}
+ {isAdmin && (
+ Manage Beneficiaries
+ )}
+ {!isAdmin && (
+ Claim Tokens
+ )}
+
+
+
+ {isAdmin ? (
+
+
+ {isAdmin && (
+
+
+ )}
+
+ {isAdmin && (
+
+
+ )}
+
+ {!isAdmin && (
+
+
+ )}
+
+
+ )}
+
+
+
+
+
-
-
-
Wallet
-
+
);
}
\ No newline at end of file
diff --git a/challenge-3-frontend/components/navbar.tsx b/challenge-3-frontend/components/navbar.tsx
index d212169..d96ace8 100644
--- a/challenge-3-frontend/components/navbar.tsx
+++ b/challenge-3-frontend/components/navbar.tsx
@@ -1,32 +1,137 @@
+"use client";
+
import Link from "next/link";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+// import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useEffect, useState } from "react";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { Wallet } from "lucide-react";
+import PortfolioCard from "./portfolio-card";
export default function Navbar() {
+ const { address, isConnected } = useAccount();
+ const { disconnect } = useDisconnect();
+ const [mounted, setMounted] = useState(false);
+
+ // This effect is to prevent hydration mismatch
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ // Format address for display
+ const formatAddress = (addr: string) => {
+ if (!addr) return "";
+ return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+ };
+
+ // Get initials for avatar
+ const getInitials = (addr: string) => {
+ if (!addr) return "";
+ return addr.slice(0, 2);
+ };
+
return (
-
-
- Home
-
-
- Wallet
-
-
- Send transaction
-
-
- Write contract
-
-
- Mint/Redeem LST Bifrost
-
+
+
+
+
+ {mounted && (
+
+ {isConnected ? (
+
+
+
+
+ {getInitials(address || "")}
+
+
+ {formatAddress(address || "")}
+
+
+
+
+ My Account
+ {
+ navigator.clipboard.writeText(address || "");
+ }}
+ >
+ Copy Address
+
+ disconnect()}
+ >
+ Disconnect
+
+
+
+ ) : (
+
+ {({
+ account,
+ chain,
+ openAccountModal,
+ openChainModal,
+ openConnectModal,
+ mounted: rainbowMounted,
+ }) => (
+
+
+ )}
+
+ )}
+
+ )}
);
}
diff --git a/challenge-3-frontend/components/token-vesting/admin-panel.tsx b/challenge-3-frontend/components/token-vesting/admin-panel.tsx
new file mode 100644
index 0000000..5672e99
--- /dev/null
+++ b/challenge-3-frontend/components/token-vesting/admin-panel.tsx
@@ -0,0 +1,840 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Address, parseUnits, formatUnits } from "viem";
+import {
+ useAccount,
+ useWriteContract,
+ useWaitForTransactionReceipt,
+} from "wagmi";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/hooks/use-toast";
+import { abi as TokenVestingAbi } from "@/abis/TokenVesting.json";
+import { abi as TokenAbi } from "@/abis/Token.json";
+import {
+ BeneficiaryInfo,
+ VestingFormData,
+ WhitelistFormData,
+} from "@/lib/types";
+import {
+ Table,
+ TableHeader,
+ TableBody,
+ TableHead,
+ TableRow,
+ TableCell,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { formatDate } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { reverse } from "dns";
+
+interface AdminPanelProps {
+ contractAddress: Address;
+ tokenAddress: Address;
+ view: "overview" | "create" | "manage";
+}
+
+export default function AdminPanel({
+ contractAddress,
+ tokenAddress,
+ view,
+}: AdminPanelProps) {
+ const { address } = useAccount();
+ const { toast } = useToast();
+
+ // State for vesting form
+ const [vestingForm, setVestingForm] = useState
({
+ beneficiary: "",
+ amount: "",
+ cliffDuration: "",
+ vestDuration: "",
+ startTimestamp: "",
+ });
+
+ // State for whitelist form
+ const [whitelistForm, setWhitelistForm] = useState({
+ beneficiary: "",
+ });
+
+ // State for beneficiaries
+ const [beneficiaries, setBeneficiaries] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [pendingRemoval, setPendingRemoval] = useState(null);
+ const [pendingRevoke, setPendingRevoke] = useState(null);
+
+ // Contract write operations
+ const { data: approveHash, writeContract: approveToken } = useWriteContract();
+ const { data: createHash, writeContract: createSchedule } =
+ useWriteContract();
+ const { data: whitelistHash, writeContract: addToWhitelist } =
+ useWriteContract();
+ const { data: removeHash, writeContract: removeFromWhitelist } =
+ useWriteContract();
+ const { data: revokeHash, writeContract: revokeVesting } = useWriteContract();
+
+ // Handle transaction receipts
+ const { isLoading: isApproveLoading, status: approveStatus } =
+ useWaitForTransactionReceipt({
+ hash: approveHash,
+ });
+
+ useEffect(() => {
+ if (isApproveLoading) {
+ return;
+ }
+ if (approveStatus === "success") {
+ toast({
+ title: "Approval successful",
+ description: "You can now create the vesting schedule",
+ });
+ handleCreateSchedule();
+ }
+ }, [approveStatus]);
+
+ const { isLoading: isCreateLoading, status: createStatus } =
+ useWaitForTransactionReceipt({
+ hash: createHash,
+ });
+
+ useEffect(() => {
+ if (isCreateLoading) {
+ return;
+ }
+ if (createStatus === "success") {
+ toast({
+ title: "Success!",
+ description: "Vesting schedule created successfully",
+ });
+
+ // Add/update the beneficiary with vesting schedule in localStorage
+ const currentTime = Math.floor(Date.now() / 1000);
+ const startTime = vestingForm.startTimestamp
+ ? parseInt(vestingForm.startTimestamp)
+ : currentTime + 60;
+
+ const newBeneficiary: BeneficiaryInfo = {
+ address: vestingForm.beneficiary as Address,
+ isWhitelisted: true, // When creating a vesting schedule, beneficiary is automatically whitelisted
+ vestingSchedule: {
+ totalAmount: parseUnits(vestingForm.amount, 18),
+ startTime: BigInt(startTime),
+ cliffDuration: BigInt(
+ parseInt(vestingForm.cliffDuration) * 24 * 60 * 60
+ ),
+ vestDuration: BigInt(
+ parseInt(vestingForm.vestDuration) * 24 * 60 * 60
+ ),
+ amountClaimed: BigInt(0),
+ revoked: false,
+ },
+ vestedAmount: BigInt(0),
+ claimableAmount: BigInt(0),
+ };
+
+ // Update or add the beneficiary
+ const updatedBeneficiaries = [...beneficiaries];
+ const existingIndex = updatedBeneficiaries.findIndex(
+ (b) => b.address === newBeneficiary.address
+ );
+
+ if (existingIndex >= 0) {
+ updatedBeneficiaries[existingIndex] = {
+ ...updatedBeneficiaries[existingIndex],
+ ...newBeneficiary,
+ };
+ } else {
+ updatedBeneficiaries.push(newBeneficiary);
+ }
+
+ // Persist to localStorage
+ try {
+ localStorage.setItem(
+ "vestingBeneficiaries",
+ JSON.stringify(
+ updatedBeneficiaries,
+ (key, value) => {
+ // Convert bigint to string
+ return typeof value === "bigint" ? String(value) : value;
+ },
+ 2
+ )
+ );
+ console.log("Updated vesting schedules stored in localStorage");
+ } catch (err) {
+ console.error(
+ "Failed to store vesting schedules in localStorage:",
+ err
+ );
+ }
+
+ resetVestingForm();
+ fetchBeneficiaries(); // Refresh the beneficiaries list
+ } else if (createStatus === "error") {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to create vesting schedule",
+ });
+ }
+ }, [createStatus]);
+
+ const { isLoading: isWhitelistLoading, status: whitelistStatus } =
+ useWaitForTransactionReceipt({
+ hash: whitelistHash,
+ });
+
+ useEffect(() => {
+ if (isWhitelistLoading) {
+ return;
+ }
+ if (whitelistStatus === "success") {
+ toast({
+ title: "Success!",
+ description: "Beneficiary added to whitelist",
+ });
+
+ // Create new beneficiary object
+ const newBeneficiary: BeneficiaryInfo = {
+ address: whitelistForm.beneficiary as Address,
+ isWhitelisted: true,
+ };
+
+ // Check if the beneficiary already exists in the array
+ const updatedBeneficiaries = [...beneficiaries];
+ const existingIndex = updatedBeneficiaries.findIndex(
+ (b) => b.address === newBeneficiary.address
+ );
+
+ // If exists, update it, otherwise add it
+ if (existingIndex >= 0) {
+ updatedBeneficiaries[existingIndex] = {
+ ...updatedBeneficiaries[existingIndex],
+ isWhitelisted: true,
+ };
+ } else {
+ updatedBeneficiaries.push(newBeneficiary);
+ }
+
+ // Persist to localStorage for later retrieval
+ try {
+ localStorage.setItem(
+ "vestingBeneficiaries",
+ JSON.stringify(
+ updatedBeneficiaries,
+ (key, value) => {
+ // Convert bigint to string
+ return typeof value === "bigint" ? String(value) : value;
+ },
+ 2
+ )
+ );
+ console.log("Beneficiaries stored in localStorage");
+ } catch (err) {
+ console.error("Failed to store beneficiaries in localStorage:", err);
+ }
+
+ // Clear whitelist input form
+ setWhitelistForm((prev) => ({ ...prev, beneficiary: "" }));
+ } else if (whitelistStatus === "error") {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to add to whitelist",
+ });
+ }
+ fetchBeneficiaries(); // Refresh the beneficiaries list
+ }, [whitelistStatus]);
+
+ const { isLoading: isRemoveLoading, status: removeStatus } =
+ useWaitForTransactionReceipt({
+ hash: removeHash,
+ });
+
+ useEffect(() => {
+ if (isRemoveLoading) {
+ return;
+ }
+ if (removeStatus === "success") {
+ // Changed from revokeStatus to removeStatus
+ toast({
+ title: "Success!",
+ description: "Beneficiary removed from whitelist",
+ });
+
+ // Update localStorage to mark the beneficiary as not whitelisted
+ const updatedBeneficiaries = beneficiaries.map((ben) => {
+ if (ben.address === pendingRemoval) {
+ return {
+ ...ben,
+ isWhitelisted: false,
+ };
+ }
+ return ben;
+ });
+
+ // Persist to localStorage
+ try {
+ localStorage.setItem(
+ "vestingBeneficiaries",
+ JSON.stringify(
+ updatedBeneficiaries,
+ (key, value) => {
+ // Convert bigint to string
+ return typeof value === "bigint" ? String(value) : value;
+ },
+ 2
+ )
+ );
+ console.log("Updated whitelist stored in localStorage");
+ } catch (err) {
+ console.error("Failed to store whitelist in localStorage:", err);
+ }
+
+ fetchBeneficiaries(); // Refresh the beneficiaries list
+ } else if (removeStatus === "error") {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to remove from whitelist",
+ });
+ }
+ }, [removeStatus]);
+
+ const { isLoading: isRevokeLoading, status: revokeStatus } =
+ useWaitForTransactionReceipt({
+ hash: revokeHash,
+ });
+
+ useEffect(() => {
+ if (isRevokeLoading) {
+ return;
+ }
+ if (revokeStatus === "success") {
+ toast({
+ title: "Success!",
+ description: "Vesting schedule revoked",
+ });
+
+ // Update localStorage to mark the schedule as revoked
+ const updatedBeneficiaries = beneficiaries.map((ben) => {
+ if (ben.address === pendingRevoke) {
+ return {
+ ...ben,
+ vestingSchedule: ben.vestingSchedule
+ ? {
+ ...ben.vestingSchedule,
+ revoked: true,
+ }
+ : undefined,
+ };
+ }
+ return ben;
+ });
+
+ // Persist to localStorage
+ try {
+ localStorage.setItem(
+ "vestingBeneficiaries",
+ JSON.stringify(
+ updatedBeneficiaries,
+ (key, value) => {
+ // Convert bigint to string
+ return typeof value === "bigint" ? String(value) : value;
+ },
+ 2
+ )
+ );
+ console.log("Updated vesting schedules stored in localStorage");
+ } catch (err) {
+ console.error(
+ "Failed to store vesting schedules in localStorage:",
+ err
+ );
+ }
+
+ fetchBeneficiaries(); // Refresh the beneficiaries list
+ }
+ }, [revokeStatus]);
+
+ // Helper function to fetch beneficiary data
+ const fetchBeneficiaries = async () => {
+ // In a real implementation, you would query events or use a subgraph
+ // For this demo, we'll just use a mock
+ let mockBeneficiaries: BeneficiaryInfo[] = [];
+
+ try {
+ const storedData = localStorage.getItem("vestingBeneficiaries");
+ if (storedData && storedData !== "") {
+ mockBeneficiaries = JSON.parse(storedData, (key, value) => {
+ // Convert string to bigint
+ return key === "totalAmount" ||
+ key === "startTime" ||
+ key === "cliffDuration" ||
+ key === "vestDuration" ||
+ key === "amountClaimed" ||
+ key === "vestedAmount" ||
+ key === "claimableAmount"
+ ? BigInt(value)
+ : value;
+ });
+ }
+ } catch (error) {
+ console.error("Error parsing localStorage data:", error);
+ }
+
+ if (mockBeneficiaries.length === 0) {
+ mockBeneficiaries = [
+ {
+ address: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" as Address,
+ isWhitelisted: true,
+ vestingSchedule: {
+ totalAmount: parseUnits("10000", 18),
+ startTime: BigInt(Math.floor(Date.now() / 100)),
+ cliffDuration: BigInt(30 * 24 * 60 * 60), // 30 days
+ vestDuration: BigInt(365 * 24 * 60 * 60), // 1 year
+ amountClaimed: BigInt(0),
+ revoked: false,
+ },
+ vestedAmount: parseUnits("2000", 18),
+ claimableAmount: parseUnits("2000", 18),
+ },
+ {
+ address: "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC" as Address,
+ isWhitelisted: true,
+ vestingSchedule: undefined,
+ },
+ {
+ address: "0x90F79bf6EB2c4f870365E785982E1f101E93b906" as Address,
+ isWhitelisted: false,
+ },
+ ];
+ }
+
+ setBeneficiaries(mockBeneficiaries);
+ };
+
+ useEffect(() => {
+ fetchBeneficiaries();
+ }, []);
+
+ const handleInputChange = (
+ e: React.ChangeEvent,
+ formType: "vesting" | "whitelist"
+ ) => {
+ const { name, value } = e.target;
+ if (formType === "vesting") {
+ setVestingForm((prev) => ({ ...prev, [name]: value }));
+ } else {
+ setWhitelistForm((prev) => ({ ...prev, [name]: value }));
+ }
+ };
+
+ const resetVestingForm = () => {
+ setVestingForm({
+ beneficiary: "",
+ amount: "",
+ cliffDuration: "",
+ vestDuration: "",
+ startTimestamp: "",
+ });
+ };
+
+ const handleSubmitVesting = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ try {
+ // In a real implementation, validate the form first
+
+ // First approve tokens for the vesting contract
+ approveToken({
+ address: tokenAddress,
+ abi: TokenAbi,
+ functionName: "approve",
+ args: [
+ contractAddress,
+ parseUnits(vestingForm.amount, 18), // Assuming token has 18 decimals
+ ],
+ });
+ } catch (error) {
+ console.error("Error creating vesting schedule:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to create vesting schedule",
+ });
+ }
+ };
+
+ const handleCreateSchedule = () => {
+ const currentTime = Math.floor(Date.now() / 1000);
+ const startTime = vestingForm.startTimestamp
+ ? parseInt(vestingForm.startTimestamp)
+ : currentTime + 60; // Default to 1 minute from now
+
+ createSchedule({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "createVestingSchedule",
+ args: [
+ vestingForm.beneficiary as Address,
+ parseUnits(vestingForm.amount, 18), // Assuming token has 18 decimals
+ BigInt(parseInt(vestingForm.cliffDuration) * 24 * 60 * 60), // Convert days to seconds
+ BigInt(parseInt(vestingForm.vestDuration) * 24 * 60 * 60), // Convert days to seconds
+ BigInt(startTime),
+ ],
+ });
+ };
+
+ const handleWhitelistSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ try {
+ addToWhitelist({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "addToWhitelist",
+ args: [whitelistForm.beneficiary as Address],
+ });
+ } catch (error) {
+ console.error("Error adding to whitelist:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to add to whitelist",
+ });
+ }
+ };
+
+ const handleRemoveFromWhitelist = (beneficiaryAddress: Address) => {
+ try {
+ setPendingRemoval(beneficiaryAddress);
+ removeFromWhitelist({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "removeFromWhitelist",
+ args: [beneficiaryAddress],
+ });
+ } catch (error) {
+ console.error("Error removing from whitelist:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to remove from whitelist",
+ });
+ setPendingRemoval(null);
+ }
+ };
+
+ const handleRevokeVesting = (beneficiaryAddress: Address) => {
+ try {
+ setPendingRevoke(beneficiaryAddress);
+ revokeVesting({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "revokeVesting",
+ args: [beneficiaryAddress],
+ });
+ } catch (error) {
+ console.error("Error revoking vesting:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to revoke vesting",
+ });
+ setPendingRevoke(null);
+ }
+ };
+ return (
+
+ {view === "overview" && (
+
+
+ Vesting Schedule Overview
+ View all active vesting schedules
+
+
+
+
+
+ Beneficiary
+ Whitelist Status
+ Total Amount
+ Vested Amount
+ Status
+ Actions
+
+
+
+ {beneficiaries.map((beneficiary) => (
+
+
+ {beneficiary.address}
+
+
+ {beneficiary.isWhitelisted ? (
+ Whitelisted
+ ) : (
+ Not Whitelisted
+ )}
+
+
+ {beneficiary.vestingSchedule
+ ? formatUnits(
+ beneficiary.vestingSchedule.totalAmount,
+ 18
+ )
+ : "-"}
+
+
+ {beneficiary.vestedAmount
+ ? formatUnits(beneficiary.vestedAmount, 18)
+ : "-"}
+
+
+ {beneficiary.vestingSchedule?.revoked ? (
+ Revoked
+ ) : beneficiary.vestingSchedule ? (
+ Active
+ ) : (
+ No Schedule
+ )}
+
+
+
+ {beneficiary.isWhitelisted ? (
+
+ handleRemoveFromWhitelist(beneficiary.address)
+ }
+ disabled={isRemoveLoading}
+ >
+ Remove
+
+ ) : (
+ {
+ setWhitelistForm({
+ beneficiary: beneficiary.address,
+ });
+ handleWhitelistSubmit(new Event("click") as any);
+ }}
+ disabled={isWhitelistLoading}
+ >
+ Whitelist
+
+ )}
+
+ {beneficiary.vestingSchedule &&
+ !beneficiary.vestingSchedule.revoked && (
+
+ handleRevokeVesting(beneficiary.address)
+ }
+ disabled={isRevokeLoading}
+ >
+ Revoke
+
+ )}
+
+
+
+ ))}
+
+ {beneficiaries.length === 0 && (
+
+
+ No beneficiaries found
+
+
+ )}
+
+
+
+
+ )}
+
+ {view === "create" && (
+
+
+ Create Vesting Schedule
+
+ Set up a new token vesting schedule for a beneficiary
+
+
+
+
+
+
+ )}
+
+ {view === "manage" && (
+
+
+ Manage Beneficiaries
+
+ Add or remove beneficiaries from the whitelist
+
+
+
+
+
+
+
Current Whitelist
+
+ {beneficiaries
+ .filter((b) => b.isWhitelisted)
+ .map((beneficiary) => (
+
+
+ {beneficiary.address}
+
+
+ handleRemoveFromWhitelist(beneficiary.address)
+ }
+ disabled={isRemoveLoading}
+ >
+ Remove
+
+
+ ))}
+
+ {beneficiaries.filter((b) => b.isWhitelisted).length === 0 && (
+
+ No whitelisted beneficiaries
+
+ )}
+
+
+
+ )}
+
(null);
+ const [vestingSchedule, setVestingSchedule] =
+ useState(null);
+ const [vestedAmount, setVestedAmount] = useState(null);
+ const [claimableAmount, setClaimableAmount] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [refetchNow, setRefetchNow] = useState(false);
+
+ // For scrolling to claim card
+ const claimCardRef = useRef(null);
+
+ // Contract write operation
+ const { data: claimHash, writeContract: claimTokens } = useWriteContract();
+
+ // Handle transaction receipt
+ const { isLoading: isClaimLoading, status: claimStatus } =
+ useWaitForTransactionReceipt({
+ hash: claimHash,
+ });
+
+ useEffect(() => {
+ if (isClaimLoading) {
+ return;
+ }
+ if (claimStatus === "success") {
+ toast({
+ title: "Success!",
+ description: "Tokens claimed successfully",
+ });
+ setRefetchNow(true);
+ fetchBeneficiaryData(); // Refresh data after claiming
+
+ return () => {
+ setRefetchNow(false);
+ };
+ }
+ }, [claimStatus]);
+
+ // Fetch vesting schedule with better error handling and logging
+ const REFETCH_INTERVAL = 1000; // Miliseconds
+ const {
+ data: schedule,
+ error: scheduleError,
+ isLoading: scheduleLoading,
+ } = useReadContract({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "vestingSchedules",
+ args: [address],
+ chainId: sepolia.id,
+ query: {
+ refetchInterval(query) {
+ return refetchNow ? 0 : REFETCH_INTERVAL;
+ },
+ },
+ });
+
+ // Log both successful data and errors
+ useEffect(() => {
+ if (scheduleError) {
+ console.error("Schedule fetch error:", scheduleError);
+ }
+ if (schedule) {
+ console.log("Raw schedule data received:", schedule);
+ // Log structure to understand the format
+ console.log("Schedule data type:", typeof schedule);
+ if (typeof schedule === "object") {
+ console.log("Schedule keys:", Object.keys(schedule));
+ }
+ }
+ }, [schedule, scheduleError]);
+
+ // Similar for the whitelist check
+ const { data: whitelisted, error: whitelistError } = useReadContract({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "whitelist",
+ args: [address],
+ chainId: sepolia.id,
+ query: {
+ refetchInterval(query) {
+ return refetchNow ? 0 : REFETCH_INTERVAL;
+ },
+ },
+ });
+
+ // Log whitelist errors
+ useEffect(() => {
+ if (whitelistError) {
+ console.error("Whitelist fetch error:", whitelistError);
+ }
+ }, [whitelistError]);
+
+ // Fetch vested amount
+ const { data: vested } = useReadContract({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "calculateVestedAmount",
+ args: [address],
+ chainId: sepolia.id,
+ query: {
+ refetchInterval(query) {
+ return refetchNow ? 0 : REFETCH_INTERVAL;
+ },
+ },
+ });
+
+ // Helper function to fetch all beneficiary data
+ const fetchBeneficiaryData = async () => {
+ setIsLoading(true);
+
+ try {
+ // Set whitelist status
+ setIsWhitelisted(
+ whitelisted !== undefined ? (whitelisted as boolean) : false
+ );
+
+ // Set vesting schedule if there's one, handling both array and object formats
+ console.log("Processing schedule data:", schedule);
+
+ if (schedule) {
+ let scheduleData;
+
+ // Handle if schedule is returned as an array (tuple)
+ if (Array.isArray(schedule)) {
+ console.log("Schedule is an array with length:", schedule.length);
+ // Map the tuple to our expected object structure
+ scheduleData = {
+ totalAmount: schedule[0],
+ startTime: schedule[1],
+ cliffDuration: schedule[2],
+ vestDuration: schedule[3],
+ amountClaimed: schedule[4],
+ revoked: schedule[5],
+ };
+ } else {
+ scheduleData = schedule as any;
+ }
+
+ // Check if we have a valid schedule with a non-zero amount
+ if (
+ scheduleData &&
+ scheduleData.totalAmount &&
+ scheduleData.totalAmount > 0
+ ) {
+ console.log("Valid schedule found:", scheduleData);
+
+ setVestingSchedule({
+ totalAmount: scheduleData.totalAmount,
+ startTime: scheduleData.startTime,
+ cliffDuration: scheduleData.cliffDuration,
+ vestDuration: scheduleData.vestDuration,
+ amountClaimed: scheduleData.amountClaimed,
+ revoked: scheduleData.revoked,
+ });
+
+ // Set vested amount if available
+ if (vested !== undefined) {
+ setVestedAmount(vested as bigint);
+ // Calculate claimable amount
+ const claimable = (vested as bigint) - scheduleData.amountClaimed;
+ setClaimableAmount(claimable);
+ } else {
+ // Calculate vested amount based on current time
+ const currentTime = BigInt(Math.floor(Date.now() / 1000));
+ const startTime = scheduleData.startTime;
+ const cliffTime = startTime + scheduleData.cliffDuration;
+ const endTime = startTime + scheduleData.vestDuration;
+
+ if (currentTime < cliffTime) {
+ // During cliff period, nothing is vested
+ setVestedAmount(BigInt(0));
+ setClaimableAmount(BigInt(0));
+ } else if (currentTime >= endTime) {
+ // After vesting period, everything is vested
+ setVestedAmount(scheduleData.totalAmount);
+ setClaimableAmount(
+ BigInt(scheduleData.totalAmount) -
+ BigInt(scheduleData.amountClaimed)
+ );
+ } else {
+ // Linear vesting during the vesting period
+ const timeFromCliff = currentTime - cliffTime;
+ const vestingPeriod = endTime - cliffTime;
+ // Convert all values to bigint to avoid type mismatch in division
+ const vestedAmt =
+ (scheduleData.totalAmount * timeFromCliff) /
+ BigInt(vestingPeriod);
+
+ setVestedAmount(vestedAmt);
+ setClaimableAmount(
+ BigInt(vestedAmt) - BigInt(scheduleData.amountClaimed)
+ );
+ }
+ }
+ } else {
+ console.log("Schedule exists but has zero amount or is invalid");
+ setVestingSchedule(null);
+ setVestedAmount(null);
+ setClaimableAmount(null);
+ }
+ } else {
+ console.info("No schedule data received from contract");
+ setVestingSchedule(null);
+ setVestedAmount(null);
+ setClaimableAmount(null);
+ }
+ } catch (error) {
+ console.error("Error in fetchBeneficiaryData:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to fetch vesting data",
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchBeneficiaryData();
+ }, [address, whitelisted, schedule, vested]);
+
+ const handleClaimTokens = () => {
+ try {
+ claimTokens({
+ address: contractAddress,
+ abi: TokenVestingAbi,
+ functionName: "claimVestedTokens",
+ });
+ } catch (error) {
+ console.error("Error claiming tokens:", error);
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to claim tokens",
+ });
+ }
+ };
+
+ const formatTimestamp = (timestamp: bigint) => {
+ return new Date(Number(timestamp) * 1000).toLocaleString();
+ };
+
+ const calculateProgress = () => {
+ if (!vestingSchedule || !vestedAmount) return 0;
+ return Number((vestedAmount * BigInt(100)) / vestingSchedule.totalAmount);
+ };
+
+ const isCliffPeriod = () => {
+ if (!vestingSchedule) return false;
+ const currentTime = BigInt(Math.floor(Date.now() / 1000));
+ return (
+ currentTime < vestingSchedule.startTime + vestingSchedule.cliffDuration
+ );
+ };
+
+ const isVestingComplete = () => {
+ if (!vestingSchedule) return false;
+ const currentTime = BigInt(Math.floor(Date.now() / 1000));
+ return (
+ currentTime >= vestingSchedule.startTime + vestingSchedule.vestDuration
+ );
+ };
+
+ useEffect(() => {
+ if (!view) return;
+
+ console.log("view value changed to: ", view);
+ if (view === "claim") {
+ // Add a small delay to ensure the DOM is updated
+ setTimeout(() => {
+ console.log("Attempting to scroll to claim card...");
+ if (claimCardRef.current) {
+ claimCardRef.current.scrollIntoView({ behavior: "smooth" });
+ } else {
+ console.log("claimCardRef still not defined after delay");
+ }
+ }, 100);
+ }
+ }, [view]);
+
+ return (
+
+ {schedule as any}
+ {isLoading ? (
+
+
+
+
+
+
+ ) : !isWhitelisted ? (
+
+
+ Not Whitelisted
+
+ Your address has not been whitelisted by the administrator yet
+
+
+
+
+
+
+ You need to be whitelisted by the administrator to participate
+ in the token vesting program.
+
+
+
+ ) : !vestingSchedule ? (
+
+
+ No Vesting Schedule
+
+ You are whitelisted but don't have an active vesting schedule
+
+
+
+
+
+
+ Contact the administrator to create a vesting schedule for your
+ address.
+
+
+
+ ) : (
+
+
+
+
+ Your Vesting Schedule
+ {vestingSchedule.revoked && (
+ Revoked
+ )}
+ {isVestingComplete() && (
+ Completed
+ )}
+ {isCliffPeriod() && (
+ In Cliff Period
+ )}
+
+
+ Track the progress of your token vesting schedule
+
+
+
+
+
+
+ Progress
+ {calculateProgress()}%
+
+
+
+
+
+
+
+ Total Amount
+
+
+ {formatUnits(vestingSchedule.totalAmount, 18)} tokens
+
+
+
+
+
+ Vested Amount
+
+
+ {vestedAmount ? formatUnits(vestedAmount, 18) : "0"}{" "}
+ tokens
+
+
+
+
+
+ Claimed Amount
+
+
+ {formatUnits(vestingSchedule.amountClaimed, 18)} tokens
+
+
+
+
+
+ Claimable Now
+
+
+ {claimableAmount ? formatUnits(claimableAmount, 18) : "0"}{" "}
+ tokens
+
+
+
+
+
+
+
+
+ Start Date
+
+
+ {formatTimestamp(vestingSchedule.startTime)}
+
+
+
+
+
+ Cliff End Date
+
+
+ {formatTimestamp(
+ vestingSchedule.startTime +
+ vestingSchedule.cliffDuration
+ )}
+
+
+
+
+
+ Vesting End Date
+
+
+ {formatTimestamp(
+ vestingSchedule.startTime +
+ vestingSchedule.vestDuration
+ )}
+
+
+
+
+
+
+
+ {view === "claim" && (
+
+
+ Claim Tokens
+ Claim your vested tokens
+
+
+
+
+
+
+
+ Claimable Amount
+
+
+ {claimableAmount
+ ? formatUnits(claimableAmount, 18)
+ : "0"}{" "}
+ tokens
+
+
+
+ {vestingSchedule.revoked && (
+
+ Vesting Revoked
+
+ )}
+
+ {isCliffPeriod() && (
+
+ In Cliff Period
+
+ )}
+
+
+
+
+
+ {isClaimLoading ? "Claiming..." : "Claim Tokens"}
+
+
+ {(!claimableAmount || claimableAmount <= 0) &&
+ !isCliffPeriod() &&
+ !vestingSchedule.revoked && (
+
+ You don't have any tokens to claim at the moment.
+
+ )}
+
+ {isCliffPeriod() && (
+
+ You are still in the cliff period. Tokens will be
+ available to claim after{" "}
+ {formatTimestamp(
+ vestingSchedule.startTime +
+ vestingSchedule.cliffDuration
+ )}
+
+ )}
+
+ {vestingSchedule.revoked && (
+
+ Your vesting schedule has been revoked by the
+ administrator.
+
+ )}
+
+
+
+ )}
+
+ )}
+
,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/challenge-3-frontend/components/ui/card.tsx b/challenge-3-frontend/components/ui/card.tsx
new file mode 100644
index 0000000..0e899e9
--- /dev/null
+++ b/challenge-3-frontend/components/ui/card.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardDescription,
+ CardContent,
+};
diff --git a/challenge-3-frontend/components/ui/dropdown-menu.tsx b/challenge-3-frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..f69a0d6
--- /dev/null
+++ b/challenge-3-frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
\ No newline at end of file
diff --git a/challenge-3-frontend/components/ui/table.tsx b/challenge-3-frontend/components/ui/table.tsx
new file mode 100644
index 0000000..bb0650a
--- /dev/null
+++ b/challenge-3-frontend/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+ toast: Partial
}
| {
type: ActionType["DISMISS_TOAST"]
- toastId?: ToasterToast["id"]
+ toastId?: string
}
| {
type: ActionType["REMOVE_TOAST"]
- toastId?: ToasterToast["id"]
+ toastId?: string
}
interface State {
- toasts: ToasterToast[]
+ toasts: ToasterToastProps[]
}
const toastTimeouts = new Map>()
@@ -93,8 +90,6 @@ export const reducer = (state: State, action: Action): State => {
case "DISMISS_TOAST": {
const { toastId } = action
- // ! Side effects ! - This could be extracted into a dismissToast() action,
- // but I'll keep it here for simplicity
if (toastId) {
addToRemoveQueue(toastId)
} else {
@@ -129,7 +124,7 @@ export const reducer = (state: State, action: Action): State => {
}
}
-const listeners: Array<(state: State) => void> = []
+const listeners: ((state: State) => void)[] = []
let memoryState: State = { toasts: [] }
@@ -140,12 +135,12 @@ function dispatch(action: Action) {
})
}
-type Toast = Omit
+type Toast = Omit
function toast({ ...props }: Toast) {
const id = genId()
- const update = (props: ToasterToast) =>
+ const update = (props: ToasterToastProps) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
diff --git a/challenge-3-frontend/lib/types.ts b/challenge-3-frontend/lib/types.ts
new file mode 100644
index 0000000..b28dbfb
--- /dev/null
+++ b/challenge-3-frontend/lib/types.ts
@@ -0,0 +1,30 @@
+import { Address } from "viem";
+
+export interface VestingSchedule {
+ totalAmount: bigint;
+ startTime: bigint;
+ cliffDuration: bigint;
+ vestDuration: bigint;
+ amountClaimed: bigint;
+ revoked: boolean;
+}
+
+export interface BeneficiaryInfo {
+ address: Address;
+ isWhitelisted: boolean;
+ vestingSchedule?: VestingSchedule;
+ vestedAmount?: bigint;
+ claimableAmount?: bigint;
+}
+
+export interface VestingFormData {
+ beneficiary: string;
+ amount: string;
+ cliffDuration: string;
+ vestDuration: string;
+ startTimestamp: string;
+}
+
+export interface WhitelistFormData {
+ beneficiary: string;
+}
diff --git a/challenge-3-frontend/lib/utils.ts b/challenge-3-frontend/lib/utils.ts
index d47db6e..be9cb8b 100644
--- a/challenge-3-frontend/lib/utils.ts
+++ b/challenge-3-frontend/lib/utils.ts
@@ -1,10 +1,19 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs));
}
-export function truncateHash(hash: string, startLength: number = 6, endLength: number = 4) {
+export function truncateHash(
+ hash: string,
+ startLength: number = 6,
+ endLength: number = 4
+) {
return `${hash.slice(0, startLength)}...${hash.slice(-endLength)}`;
}
+
+export function formatDate(timestamp: number | bigint): string {
+ const date = new Date(Number(timestamp) * 1000);
+ return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+}
diff --git a/challenge-3-frontend/package-lock.json b/challenge-3-frontend/package-lock.json
index dec4c63..be75dff 100644
--- a/challenge-3-frontend/package-lock.json
+++ b/challenge-3-frontend/package-lock.json
@@ -10,7 +10,10 @@
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@radix-ui/react-dialog": "^1.1.3",
+ "@radix-ui/react-dropdown-menu": "^2.1.6",
+ "@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.1",
+ "@radix-ui/react-progress": "^1.1.2",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
@@ -1274,6 +1277,76 @@
}
}
},
+ "node_modules/@radix-ui/react-dropdown-menu": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
+ "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-id": "1.1.0",
+ "@radix-ui/react-menu": "2.1.6",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-controllable-state": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+ "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-focus-guards": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -1314,6 +1387,15 @@
}
}
},
+ "node_modules/@radix-ui/react-icons": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+ "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+ }
+ },
"node_modules/@radix-ui/react-id": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -1355,6 +1437,300 @@
}
}
},
+ "node_modules/@radix-ui/react-menu": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+ "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-collection": "1.1.2",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-direction": "1.1.0",
+ "@radix-ui/react-dismissable-layer": "1.1.5",
+ "@radix-ui/react-focus-guards": "1.1.1",
+ "@radix-ui/react-focus-scope": "1.1.2",
+ "@radix-ui/react-id": "1.1.0",
+ "@radix-ui/react-popper": "1.2.2",
+ "@radix-ui/react-portal": "1.1.4",
+ "@radix-ui/react-presence": "1.1.2",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-roving-focus": "1.1.2",
+ "@radix-ui/react-slot": "1.1.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.6.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-arrow": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+ "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-collection": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+ "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+ "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-escape-keydown": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-scope": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+ "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+ "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.0.0",
+ "@radix-ui/react-arrow": "1.1.2",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-layout-effect": "1.1.0",
+ "@radix-ui/react-use-rect": "1.1.0",
+ "@radix-ui/react-use-size": "1.1.0",
+ "@radix-ui/rect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+ "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-layout-effect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+ "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-roving-focus": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
+ "integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-collection": "1.1.2",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-direction": "1.1.0",
+ "@radix-ui/react-id": "1.1.0",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-controllable-state": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
+ "version": "2.6.3",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+ "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "react-remove-scroll-bar": "^2.3.7",
+ "react-style-singleton": "^2.2.3",
+ "tslib": "^2.1.0",
+ "use-callback-ref": "^1.3.3",
+ "use-sidecar": "^1.1.3"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-popper": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -1458,6 +1834,71 @@
}
}
},
+ "node_modules/@radix-ui/react-progress": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.2.tgz",
+ "integrity": "sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+ "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-roving-focus": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
diff --git a/challenge-3-frontend/package.json b/challenge-3-frontend/package.json
index f4b780e..407d534 100644
--- a/challenge-3-frontend/package.json
+++ b/challenge-3-frontend/package.json
@@ -11,7 +11,10 @@
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@radix-ui/react-dialog": "^1.1.3",
+ "@radix-ui/react-dropdown-menu": "^2.1.6",
+ "@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.1",
+ "@radix-ui/react-progress": "^1.1.2",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",