+ )
+}
\ No newline at end of file
diff --git a/challenge-3-frontend/app/yield-farm/page.tsx b/challenge-3-frontend/app/yield-farm/page.tsx
new file mode 100644
index 0000000..ff26494
--- /dev/null
+++ b/challenge-3-frontend/app/yield-farm/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+import YieldFarm from "@/components/yield-farm";
+import SigpassKit from "@/components/sigpasskit";
+import Navbar from "@/components/navbar";
+
+export default function YieldFarmPage() {
+ return (
+
+
+
+
Yield Farming
+
+
+ );
+}
diff --git a/challenge-3-frontend/components/token-vesting.tsx b/challenge-3-frontend/components/token-vesting.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/challenge-3-frontend/components/yield-farm.tsx b/challenge-3-frontend/components/yield-farm.tsx
new file mode 100644
index 0000000..18e8619
--- /dev/null
+++ b/challenge-3-frontend/components/yield-farm.tsx
@@ -0,0 +1,529 @@
+"use client";
+
+// React
+import { useState, useEffect } from "react";
+
+// Wagmi
+import {
+ type BaseError,
+ useWaitForTransactionReceipt,
+ useConfig,
+ useWriteContract,
+ useReadContracts,
+ useAccount
+} from "wagmi";
+
+// viem
+import { parseUnits, formatUnits } from "viem";
+
+// Lucide (for icons)
+import {
+ Ban,
+ ExternalLink,
+ ChevronDown,
+ X,
+ Hash,
+ LoaderCircle,
+ CircleCheck,
+ WalletMinimal,
+ HandCoins,
+} from "lucide-react";
+
+// zod (for form validation)
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+// react-hook-form (for form handling)
+import { useForm } from "react-hook-form";
+
+// UI components
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogTrigger,
+ DialogClose,
+} from "@/components/ui/dialog";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// utils imports
+import { truncateHash } from "@/lib/utils";
+
+// components imports
+import CopyButton from "@/components/copy-button";
+import { getSigpassWallet } from "@/lib/sigpass";
+
+// jotai for state management
+import { useAtomValue } from "jotai";
+import { addressAtom } from "@/components/sigpasskit";
+
+// config
+import { localConfig } from "@/app/providers";
+
+// abi for the Moonbeam SLPX contract and ERC20 token
+import { mockErc20Abi, yieldFarmingAbi } from "@/lib/abi";
+import {
+ lpTokenAddress,
+ rewardTokenAddress,
+ yieldFarmingAddress
+} from "@/lib/constants";
+
+export default function YieldFarm() {
+ // useConfig hook to get config
+ const config = useConfig();
+
+ // useAccount hook to get account
+ const account = useAccount();
+
+ // useMediaQuery hook to check if the screen is desktop
+ const isDesktop = useMediaQuery("(min-width: 768px)");
+ // useState hook to open/close dialog/drawer
+ const [open, setOpen] = useState(false);
+
+ // get the address from session storage
+ const address = useAtomValue(addressAtom);
+
+ // useWriteContract hook to write contract
+ const {
+ data: hash,
+ error,
+ isPending,
+ writeContractAsync,
+ } = useWriteContract({
+ config: address ? localConfig : config,
+ });
+
+ // form schema for sending transaction
+ const formSchema = z.object({
+ // amount is a required field
+ amount: z
+ .string()
+ .refine((val) => !isNaN(parseFloat(val)) && parseFloat(val) > 0, {
+ message: "Amount must be a positive number",
+ })
+ .refine((val) => /^\d*\.?\d{0,18}$/.test(val), {
+ message: "Amount cannot have more than 18 decimal places",
+ })
+ .superRefine((val, ctx) => {
+ if (!maxBalance || !decimals) return;
+
+ const inputAmount = parseUnits(val, decimals as number);
+
+ if (inputAmount > (maxBalance as bigint)) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "Amount exceeds available balance",
+ });
+ }
+ }),
+ });
+
+ // 1. Define your form.
+ const form = useForm>({
+ // resolver is zodResolver
+ resolver: zodResolver(formSchema),
+ // default values for address and amount
+ defaultValues: {
+ amount: "",
+ },
+ });
+
+
+
+ // useReadContracts hook to read contract
+ const { data, refetch: refetchBalance } = useReadContracts({
+ contracts: [
+ {
+ address: lpTokenAddress,
+ abi: mockErc20Abi,
+ functionName: "balanceOf",
+ args: [address ? address : account.address],
+ },
+ {
+ address: lpTokenAddress,
+ abi: mockErc20Abi,
+ functionName: "symbol",
+ },
+ {
+ address: lpTokenAddress,
+ abi: mockErc20Abi,
+ functionName: "decimals",
+ },
+ {
+ // get the allowance of the selected token
+ address: lpTokenAddress,
+ abi: mockErc20Abi,
+ functionName: "allowance",
+ args: [address ? address : account.address, yieldFarmingAddress],
+ },
+ {
+ address: yieldFarmingAddress,
+ abi: yieldFarmingAbi,
+ functionName: "pendingRewards",
+ args: [address ? address : account.address],
+ },
+ ],
+ config: address ? localConfig : config,
+ });
+
+ const isOnchainLoading = data === undefined;
+
+
+ // extract the data from the read contracts hook
+ const maxBalance = data?.[0]?.result as bigint | undefined; // balance of the selected token
+ const symbol = data?.[1]?.result as string | undefined; // symbol of the selected token
+ const decimals = data?.[2]?.result as number | undefined; // decimals of the selected token
+ const mintAllowance = data?.[3]?.result as bigint | undefined; // allowance of the selected token
+ const pendingRewards = data?.[4]?.result as bigint | undefined;
+ // extract the amount value from the form
+ const amount = form.watch("amount");
+
+ // check if the amount is greater than the mint allowance
+// const needsApprove = mintAllowance !== undefined &&
+// amount ?
+// mintAllowance < parseUnits(amount, decimals || 18) :
+// false;
+
+ const needsApprove = typeof mintAllowance === "bigint" &&typeof decimals === "number" && amount && mintAllowance < parseUnits(amount, decimals);
+
+console.log("needsApprove", needsApprove);
+ console.log("mintAllowance", mintAllowance);
+ console.log("maxBalance", maxBalance);
+
+
+ // 2. Define a submit handler.
+ async function onSubmit(values: z.infer) {
+ console.log("Submitting form with values:", values);
+ try {
+ if (needsApprove) {
+ console.log("Approving...");
+ await writeContractAsync({
+ address: lpTokenAddress,
+ abi: mockErc20Abi,
+ functionName: "approve",
+ args: [yieldFarmingAddress, parseUnits(values.amount, decimals as number)],
+ });
+ } else {
+ console.log("Staking...");
+ await writeContractAsync({
+ address: yieldFarmingAddress,
+ abi: yieldFarmingAbi,
+ functionName: "stake",
+ args: [parseUnits(values.amount, decimals as number)],
+ });
+ }
+ } catch (error) {
+ console.error("Error during transaction:", error);
+ }
+ }
+
+ // Watch for transaction hash and open dialog/drawer when received
+ useEffect(() => {
+ if (hash) {
+ setOpen(true);
+ }
+ }, [hash]);
+
+ // useWaitForTransactionReceipt hook to wait for transaction receipt
+ const { isLoading: isConfirming, isSuccess: isConfirmed } =
+ useWaitForTransactionReceipt({
+ hash,
+ config: address ? localConfig : config,
+ });
+
+ // when isConfirmed, refetch the balance of the address
+ useEffect(() => {
+ if (isConfirmed) {
+ refetchBalance();
+ }
+ }, [isConfirmed, refetchBalance]);
+
+ // Find the chain ID from the connected account
+ const chainId = account.chainId;
+
+ // Get the block explorer URL for the current chain using the config object
+ function getBlockExplorerUrl(chainId: number | undefined): string | undefined {
+ const chain = config.chains?.find(chain => chain.id === chainId);
+ return chain?.blockExplorers?.default?.url || config.chains?.[0]?.blockExplorers?.default?.url;
+ }
+
+ return (
+
+
+ Stake
+ Withdraw
+
+
+
+
+
+
+
+
+ {
+ // Desktop would be using dialog
+ isDesktop ? (
+
+ ) : (
+ // Mobile would be using drawer
+
+
+
+
+
+
+ Transaction status
+
+ Follow the transaction status below.
+
+
+