- );
-}
\ No newline at end of file
diff --git a/challenge-3-frontend/app/write-contract/loading.tsx b/challenge-3-frontend/app/write-contract/loading.tsx
deleted file mode 100644
index 6493637..0000000
--- a/challenge-3-frontend/app/write-contract/loading.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-
-export default function Loading() {
- // You can add any UI inside Loading, including a Skeleton.
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/challenge-3-frontend/app/write-contract/page.tsx b/challenge-3-frontend/app/write-contract/page.tsx
deleted file mode 100644
index 1947eea..0000000
--- a/challenge-3-frontend/app/write-contract/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-import WriteContract from "@/components/write-contract";
-import SigpassKit from "@/components/sigpasskit";
-import Navbar from "@/components/navbar";
-
-export default function SendTransactionPage() {
- return (
-
-
-
-
Write Contract
-
-
- );
-}
diff --git a/challenge-3-frontend/app/yield-farming/loading.tsx b/challenge-3-frontend/app/yield-farming/loading.tsx
new file mode 100644
index 0000000..4faa271
--- /dev/null
+++ b/challenge-3-frontend/app/yield-farming/loading.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function loading() {
+ return (
+
loading
+ )
+}
diff --git a/challenge-3-frontend/app/yield-farming/owner/loading.tsx b/challenge-3-frontend/app/yield-farming/owner/loading.tsx
new file mode 100644
index 0000000..4faa271
--- /dev/null
+++ b/challenge-3-frontend/app/yield-farming/owner/loading.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function loading() {
+ return (
+
loading
+ )
+}
diff --git a/challenge-3-frontend/app/yield-farming/owner/page.tsx b/challenge-3-frontend/app/yield-farming/owner/page.tsx
new file mode 100644
index 0000000..fd95929
--- /dev/null
+++ b/challenge-3-frontend/app/yield-farming/owner/page.tsx
@@ -0,0 +1,13 @@
+import BackButton from '@/components/back-button'
+import YieldFarmingOwnerTabs from '@/components/yield-farming/yield-farming-owner-tabs'
+import React from 'react'
+
+
+export default function YieldFarmingOwnerPage() {
+ return (
+
+
+
+
+
)
+}
diff --git a/challenge-3-frontend/app/yield-farming/page.tsx b/challenge-3-frontend/app/yield-farming/page.tsx
new file mode 100644
index 0000000..3ac7de2
--- /dev/null
+++ b/challenge-3-frontend/app/yield-farming/page.tsx
@@ -0,0 +1,16 @@
+import YieldFarmingDetails from '@/components/yield-farming/yield-farming-details'
+import YieldFarmingTabs from '@/components/yield-farming/yield-farming-tabs'
+import React from 'react'
+import YieldFarmingTitle from '../../components/yield-farming/yield-farming-title';
+
+export default function YieldFarmingPage() {
+ return (
+
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/challenge-3-frontend/components/mint-redeem-lst-bifrost.tsx b/challenge-3-frontend/components/mint-redeem-lst-bifrost.tsx
index 54672c7..263dab5 100644
--- a/challenge-3-frontend/components/mint-redeem-lst-bifrost.tsx
+++ b/challenge-3-frontend/components/mint-redeem-lst-bifrost.tsx
@@ -1,649 +1,647 @@
-"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 {erc20Abi , moonbeamSlpxAbi} from "@/lib/abi";
-
-export default function MintRedeemLstBifrost() {
- // 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,
- });
-
- const XCDOT_CONTRACT_ADDRESS = "0xFfFFfFff1FcaCBd218EDc0EbA20Fc2308C778080";
- const XCASTR_CONTRACT_ADDRESS = "0xFfFFFfffA893AD19e540E172C10d78D4d479B5Cf";
-
- // GLMR is both the native token of Moonbeam and an ERC20 token
- const GLMR_CONTRACT_ADDRESS = "0x0000000000000000000000000000000000000802";
- const BIFROST_SLPX_CONTRACT_ADDRESS =
- "0xF1d4797E51a4640a76769A50b57abE7479ADd3d8";
-
- // Get the contract address based on selected token
- const getContractAddress = (token: string) => {
- switch (token) {
- case "xcdot":
- return XCDOT_CONTRACT_ADDRESS;
- case "xcastr":
- return XCASTR_CONTRACT_ADDRESS;
- case "glmr":
- return GLMR_CONTRACT_ADDRESS;
- default:
- return XCDOT_CONTRACT_ADDRESS;
- }
- };
-
- // form schema for sending transaction
- const formSchema = z.object({
- // token is a required field selected from a list
- token: z.enum(["xcdot", "glmr", "xcastr"], {
- required_error: "Please select a token",
- }),
- // 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: {
- token: "xcdot",
- amount: "",
- },
- });
-
-
- // Extract the token value using watch instead of getValues
- const selectedToken = form.watch("token");
-
-
-
- // useReadContracts hook to read contract
- const { data, refetch: refetchBalance } = useReadContracts({
- contracts: [
- {
- // get the balance of the selected token
- address: getContractAddress(selectedToken),
- abi: erc20Abi,
- functionName: "balanceOf",
- args: [address ? address : account.address],
- },
- {
- // get the symbol of the selected token
- address: getContractAddress(selectedToken),
- abi: erc20Abi,
- functionName: "symbol",
- },
- {
- // get the decimals of the selected token
- address: getContractAddress(selectedToken),
- abi: erc20Abi,
- functionName: "decimals",
- },
- {
- // get the allowance of the selected token
- address: getContractAddress(selectedToken),
- abi: erc20Abi,
- functionName: "allowance",
- args: [
- address ? address : account.address,
- BIFROST_SLPX_CONTRACT_ADDRESS,
- ],
- },
- ],
- config: address ? localConfig : config,
- });
-
-
- // 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
-
- // 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;
-
-
- // 2. Define a submit handler.
- async function onSubmit(values: z.infer) {
- // if the user has a sigpass wallet, and the token is not GLMR, approve the token
- if (address) {
- if (needsApprove) {
- writeContractAsync({
- account: await getSigpassWallet(),
- address: getContractAddress(values.token),
- abi: erc20Abi,
- functionName: "approve",
- args: [BIFROST_SLPX_CONTRACT_ADDRESS, parseUnits(values.amount, decimals as number)],
- });
- }
- }
-
- // if the user does not have a sigpass wallet, and the token is not GLMR, mint the token
- if (!address) {
- if (needsApprove) {
- writeContractAsync({
- address: getContractAddress(values.token),
- abi: erc20Abi,
- functionName: "approve",
- args: [BIFROST_SLPX_CONTRACT_ADDRESS, parseUnits(values.amount, decimals as number)],
- });
- }
- }
-
- /**
- * @dev Create order to mint vAsset or redeem vAsset on bifrost chain
- * @param assetAddress The address of the asset to mint or redeem
- * @param amount The amount of the asset to mint or redeem
- * @param dest_chain_id When order is executed on Bifrost, Asset/vAsset will be transferred to this chain
- * @param receiver The receiver address on the destination chain, 20 bytes for EVM, 32 bytes for Substrate
- * @param remark The remark of the order, less than 32 bytes. For example, "OmniLS"
- * @param channel_id The channel id of the order, you can set it. Bifrost chain will use it to share reward.
- **/
- if (!address && !needsApprove && selectedToken !== "glmr") {
- writeContractAsync({
- address: BIFROST_SLPX_CONTRACT_ADDRESS,
- abi: moonbeamSlpxAbi,
- functionName: "create_order",
- args: [
- getContractAddress(values.token),
- parseUnits(values.amount, decimals as number),
- 1284, // Moonbeam chain id
- account.address, // receiver
- "dotui", // remark
- 0, // channel_id
- ],
- });
- }
-
- if (!address && !needsApprove && selectedToken === "glmr") {
- writeContractAsync({
- address: BIFROST_SLPX_CONTRACT_ADDRESS,
- abi: moonbeamSlpxAbi,
- functionName: "create_order",
- args: [
- getContractAddress(values.token),
- parseUnits(values.amount, decimals as number),
- 1284, // Moonbeam chain id
- account.address, // receiver
- "dotui", // remark
- 0, // channel_id
- ],
- value: parseUnits(values.amount, decimals as number),
- });
- }
- }
-
- // 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 (
-
-
- Mint
- Redeem
-
-
-
-
-
- {
- // Desktop would be using dialog
- isDesktop ? (
-
- ) : (
- // Mobile would be using drawer
-
-
-
-
-
-
- Transaction status
-
- Follow the transaction status below.
-
-
-
- Error:{" "}
- {(error as BaseError).shortMessage || error.message}
-
- )}
-
-
-
-
-
-
-
-
- )
- }
-
-
- placeholder
-
- );
-}
+// "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 { erc20Abi, moonbeamSlpxAbi } from "@/lib/abi";
+
+// export default function MintRedeemLstBifrost() {
+// // 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,
+// });
+
+// const XCDOT_CONTRACT_ADDRESS = "0xFfFFfFff1FcaCBd218EDc0EbA20Fc2308C778080";
+// const XCASTR_CONTRACT_ADDRESS = "0xFfFFFfffA893AD19e540E172C10d78D4d479B5Cf";
+
+// // GLMR is both the native token of Moonbeam and an ERC20 token
+// const GLMR_CONTRACT_ADDRESS = "0x0000000000000000000000000000000000000802";
+// const BIFROST_SLPX_CONTRACT_ADDRESS =
+// "0xF1d4797E51a4640a76769A50b57abE7479ADd3d8";
+
+// // Get the contract address based on selected token
+// const getContractAddress = (token: string) => {
+// switch (token) {
+// case "xcdot":
+// return XCDOT_CONTRACT_ADDRESS;
+// case "xcastr":
+// return XCASTR_CONTRACT_ADDRESS;
+// case "glmr":
+// return GLMR_CONTRACT_ADDRESS;
+// default:
+// return XCDOT_CONTRACT_ADDRESS;
+// }
+// };
+
+// // form schema for sending transaction
+// const formSchema = z.object({
+// // token is a required field selected from a list
+// token: z.enum(["xcdot", "glmr", "xcastr"], {
+// required_error: "Please select a token",
+// }),
+// // 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: {
+// token: "xcdot",
+// amount: "",
+// },
+// });
+
+
+// // Extract the token value using watch instead of getValues
+// const selectedToken = form.watch("token");
+
+// // useReadContracts hook to read contract
+// const { data, refetch: refetchBalance } = useReadContracts({
+// contracts: [
+// {
+// // get the balance of the selected token
+// address: getContractAddress(selectedToken),
+// abi: erc20Abi,
+// functionName: "balanceOf",
+// args: [address ? address : account.address],
+// },
+// {
+// // get the symbol of the selected token
+// address: getContractAddress(selectedToken),
+// abi: erc20Abi,
+// functionName: "symbol",
+// },
+// {
+// // get the decimals of the selected token
+// address: getContractAddress(selectedToken),
+// abi: erc20Abi,
+// functionName: "decimals",
+// },
+// {
+// // get the allowance of the selected token
+// address: getContractAddress(selectedToken),
+// abi: erc20Abi,
+// functionName: "allowance",
+// args: [
+// address ? address : account.address,
+// BIFROST_SLPX_CONTRACT_ADDRESS,
+// ],
+// },
+// ],
+// config: address ? localConfig : config,
+// });
+
+
+// // 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
+
+// // 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;
+
+
+// // 2. Define a submit handler.
+// async function onSubmit(values: z.infer) {
+// // if the user has a sigpass wallet, and the token is not GLMR, approve the token
+// if (address) {
+// if (needsApprove) {
+// writeContractAsync({
+// account: await getSigpassWallet(),
+// address: getContractAddress(values.token),
+// abi: erc20Abi,
+// functionName: "approve",
+// args: [BIFROST_SLPX_CONTRACT_ADDRESS, parseUnits(values.amount, decimals as number)],
+// });
+// }
+// }
+
+// // if the user does not have a sigpass wallet, and the token is not GLMR, mint the token
+// if (!address) {
+// if (needsApprove) {
+// writeContractAsync({
+// address: getContractAddress(values.token),
+// abi: erc20Abi,
+// functionName: "approve",
+// args: [BIFROST_SLPX_CONTRACT_ADDRESS, parseUnits(values.amount, decimals as number)],
+// });
+// }
+// }
+
+// /**
+// * @dev Create order to mint vAsset or redeem vAsset on bifrost chain
+// * @param assetAddress The address of the asset to mint or redeem
+// * @param amount The amount of the asset to mint or redeem
+// * @param dest_chain_id When order is executed on Bifrost, Asset/vAsset will be transferred to this chain
+// * @param receiver The receiver address on the destination chain, 20 bytes for EVM, 32 bytes for Substrate
+// * @param remark The remark of the order, less than 32 bytes. For example, "OmniLS"
+// * @param channel_id The channel id of the order, you can set it. Bifrost chain will use it to share reward.
+// **/
+// if (!address && !needsApprove && selectedToken !== "glmr") {
+// writeContractAsync({
+// address: BIFROST_SLPX_CONTRACT_ADDRESS,
+// abi: moonbeamSlpxAbi,
+// functionName: "create_order",
+// args: [
+// getContractAddress(values.token),
+// parseUnits(values.amount, decimals as number),
+// 1284, // Moonbeam chain id
+// account.address, // receiver
+// "dotui", // remark
+// 0, // channel_id
+// ],
+// });
+// }
+
+// if (!address && !needsApprove && selectedToken === "glmr") {
+// writeContractAsync({
+// address: BIFROST_SLPX_CONTRACT_ADDRESS,
+// abi: moonbeamSlpxAbi,
+// functionName: "create_order",
+// args: [
+// getContractAddress(values.token),
+// parseUnits(values.amount, decimals as number),
+// 1284, // Moonbeam chain id
+// account.address, // receiver
+// "dotui", // remark
+// 0, // channel_id
+// ],
+// value: parseUnits(values.amount, decimals as number),
+// });
+// }
+// }
+
+// // 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 (
+//
+//
+// Mint
+// Redeem
+//
+//
+//
+//
+//
+// {
+// // Desktop would be using dialog
+// isDesktop ? (
+//
+// ) : (
+// // Mobile would be using drawer
+//
+//
+//
+//
+//
+//
+// Transaction status
+//
+// Follow the transaction status below.
+//
+//
+//
+// Error:{" "}
+// {(error as BaseError).shortMessage || error.message}
+//
+// )}
+//
+//
+//
+//
+//
+//
+//
+//
+// )
+// }
+//
+//
+// placeholder
+//
+// );
+// }
diff --git a/challenge-3-frontend/components/send-transaction.tsx b/challenge-3-frontend/components/send-transaction.tsx
index edff6a0..30458c1 100644
--- a/challenge-3-frontend/components/send-transaction.tsx
+++ b/challenge-3-frontend/components/send-transaction.tsx
@@ -1,346 +1,346 @@
-"use client";
+// "use client";
-import { useState, useEffect } from "react";
-import {
- type BaseError,
- useSendTransaction,
- useWaitForTransactionReceipt,
- useConfig
-} from "wagmi";
-import { parseEther, isAddress, Address } from "viem";
-import {
- Ban,
- ExternalLink,
- ChevronDown,
- X,
- Hash,
- LoaderCircle,
- CircleCheck,
-} from "lucide-react";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { Button } from "@/components/ui/button";
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form";
-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 { truncateHash } from "@/lib/utils";
-import CopyButton from "@/components/copy-button";
-import { getSigpassWallet } from "@/lib/sigpass";
-import { westendAssetHub } from "@/app/providers";
-import { useAtomValue } from 'jotai';
-import { addressAtom } from '@/components/sigpasskit';
-import { localConfig } from '@/app/providers';
+// import { useState, useEffect } from "react";
+// import {
+// type BaseError,
+// useSendTransaction,
+// useWaitForTransactionReceipt,
+// useConfig
+// } from "wagmi";
+// import { parseEther, isAddress, Address } from "viem";
+// import {
+// Ban,
+// ExternalLink,
+// ChevronDown,
+// X,
+// Hash,
+// LoaderCircle,
+// CircleCheck,
+// } from "lucide-react";
+// import { z } from "zod";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import { useForm } from "react-hook-form";
+// import { Button } from "@/components/ui/button";
+// import {
+// Form,
+// FormControl,
+// FormDescription,
+// FormField,
+// FormItem,
+// FormLabel,
+// FormMessage,
+// } from "@/components/ui/form";
+// 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 { truncateHash } from "@/lib/utils";
+// import CopyButton from "@/components/copy-button";
+// import { getSigpassWallet } from "@/lib/sigpass";
+// import { westendAssetHub } from "@/app/providers";
+// import { useAtomValue } from 'jotai';
+// import { addressAtom } from '@/components/sigpasskit';
+// import { localConfig } from '@/app/providers';
-// form schema for sending transaction
-const formSchema = z.object({
- // address is a required field
- address: z
- .string()
- .min(2)
- .max(50)
- .refine((val) => val === "" || isAddress(val), {
- message: "Invalid Ethereum address format",
- }) as z.ZodType,
- // 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",
- }),
-});
+// // form schema for sending transaction
+// const formSchema = z.object({
+// // address is a required field
+// address: z
+// .string()
+// .min(2)
+// .max(50)
+// .refine((val) => val === "" || isAddress(val), {
+// message: "Invalid Ethereum address format",
+// }) as z.ZodType,
+// // 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",
+// }),
+// });
-export default function SendTransaction() {
+// export default function SendTransaction() {
- // useConfig hook to get config
- const config = useConfig();
+// // useConfig hook to get config
+// const config = useConfig();
- // 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);
+// // 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)
+// // get the address from session storage
+// const address = useAtomValue(addressAtom)
- // useSendTransaction hook to send transaction
- const {
- data: hash,
- error,
- isPending,
- sendTransactionAsync,
- } = useSendTransaction({
- config: address ? localConfig : config,
- });
+// // useSendTransaction hook to send transaction
+// const {
+// data: hash,
+// error,
+// isPending,
+// sendTransactionAsync,
+// } = useSendTransaction({
+// config: address ? localConfig : config,
+// });
- // 1. Define your form.
- const form = useForm>({
- // resolver is zodResolver
- resolver: zodResolver(formSchema),
- // default values for address and amount
- defaultValues: {
- address: "",
- amount: "",
- },
- });
+// // 1. Define your form.
+// const form = useForm>({
+// // resolver is zodResolver
+// resolver: zodResolver(formSchema),
+// // default values for address and amount
+// defaultValues: {
+// address: "",
+// amount: "",
+// },
+// });
- // 2. Define a submit handler.
- async function onSubmit(values: z.infer) {
- if (address) {
- sendTransactionAsync({
- account: await getSigpassWallet(),
- to: values.address as Address,
- value: parseEther(values.amount),
- chainId: westendAssetHub.id,
- });
- } else {
- // Fallback to connected wallet
- sendTransactionAsync({
- to: values.address as Address,
- value: parseEther(values.amount),
- });
- }
- }
+// // 2. Define a submit handler.
+// async function onSubmit(values: z.infer) {
+// if (address) {
+// sendTransactionAsync({
+// account: await getSigpassWallet(),
+// to: values.address as Address,
+// value: parseEther(values.amount),
+// chainId: westendAssetHub.id,
+// });
+// } else {
+// // Fallback to connected wallet
+// sendTransactionAsync({
+// to: values.address as Address,
+// value: parseEther(values.amount),
+// });
+// }
+// }
- // Watch for transaction hash and open dialog/drawer when received
- useEffect(() => {
- if (hash) {
- setOpen(true);
- }
- }, [hash]);
+// // 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,
- });
+// // useWaitForTransactionReceipt hook to wait for transaction receipt
+// const { isLoading: isConfirming, isSuccess: isConfirmed } =
+// useWaitForTransactionReceipt({
+// hash,
+// config: address ? localConfig : config,
+// });
- return (
-
-
-
- {
- // Desktop would be using dialog
- isDesktop ? (
-
- ) : (
- // Mobile would be using drawer
-
-
-
-
-
-
- Transaction status
-
- Follow the transaction status below.
-
-
-
- Error:{" "}
- {(error as BaseError).shortMessage || error.message}
-
- )}
-
-
-
-
-
-
-
-
- )
- }
-
- );
-}
+// return (
+//
+//
+//
+// {
+// // Desktop would be using dialog
+// isDesktop ? (
+//
+// ) : (
+// // Mobile would be using drawer
+//
+//
+//
+//
+//
+//
+// Transaction status
+//
+// Follow the transaction status below.
+//
+//
+//