update

Author: kien-ngo

apps/dashboard/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx

@@ -16,7 +16,7 @@ import { GemIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { type ThirdwebContract, ZERO_ADDRESS, isAddress } from "thirdweb";
 import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc721";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
@@ -62,7 +62,19 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
           <div className="flex w-full flex-col gap-6 md:flex-row">
             <FormControl isRequired isInvalid={!!errors.to}>
               <FormLabel>To Address</FormLabel>
-              <Input placeholder={ZERO_ADDRESS} {...register("to")} />
+              <Input
+                placeholder={ZERO_ADDRESS}
+                {...register("to", {
+                  validate: (value) => {
+                    if (!value) {
+                      return "Enter a recipient address";
+                    }
+                    if (!isAddress(value.trim())) {
+                      return "Invalid EVM address";
+                    }
+                  },
+                })}
+              />
               <FormHelperText>Enter the address to claim to.</FormHelperText>
               <FormErrorMessage>{errors.to?.message}</FormErrorMessage>
             </FormControl>
@@ -110,7 +122,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
 
                 const transaction = claimTo({
                   contract,
-                  to: d.to,
+                  to: d.to.trim(),
                   quantity: BigInt(d.amount),
                   from: account.address,
                 });