[TOOL-2876] Improve Transaction error toast messages

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -18,6 +18,7 @@ import { CurrencySelector } from "components/shared/CurrencySelector";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
@@ -125,6 +126,15 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
     walletAddress: account?.address,
   });
   const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const listingNotifications = useTxNotifications(
+    "NFT listed Successfully",
+    "Failed to list NFT",
+  );
+
+  const auctionNotifications = useTxNotifications(
+    "Auction created successfully",
+    "Failed to create an auction",
+  );
 
   const form = useForm<ListForm>({
     defaultValues:
@@ -351,14 +361,11 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
               endTimestamp,
             });
 
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => setOpen(false),
             });
-            toast.promise(promise, {
-              loading: "Listing NFT",
-              success: "NFT listed successfully",
-              error: "Failed to list NFT",
-            });
+
+            listingNotifications.onSuccess();
           } else if (formData.listingType === "auction") {
             let minimumBidAmountWei: bigint;
             let buyoutBidAmountWei: bigint;
@@ -403,7 +410,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
               buyoutBidAmountWei: buyoutBidAmountWei * selectedQuantity,
             });
 
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
                 trackEvent({
                   category: "marketplace",
@@ -423,15 +430,15 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                 });
               },
             });
-            toast.promise(promise, {
-              loading: "Creating auction",
-              success: "Auction created successfully",
-              error: "Failed to create auction",
-            });
+            auctionNotifications.onSuccess();
           }
         } catch (err) {
           console.error(err);
-          toast.error("Failed to list NFT");
+          if (formData.listingType === "auction") {
+            auctionNotifications.onError(err);
+          } else {
+            listingNotifications.onError(err);
+          }
         }
 
         setIsFormLoading(false);

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx

@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import { UploadIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -49,6 +50,10 @@ const AirdropTab: React.FC<AirdropTabProps> = ({
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const addresses = watch("addresses");
   const [open, setOpen] = useState(false);
+  const airdropNotifications = useTxNotifications(
+    "NFTs airdropped successfully",
+    "Failed to airdrop NFTs",
+  );
 
   return (
     <div className="flex w-full flex-col gap-2">
@@ -86,7 +91,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({
               }),
             );
             const transaction = multicall({ contract, data });
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
                 trackEvent({
                   category: "nft",
@@ -108,14 +113,11 @@ const AirdropTab: React.FC<AirdropTabProps> = ({
                 });
               },
             });
-            toast.promise(promise, {
-              loading: "Airdropping NFTs",
-              success: "Airdropped successfully",
-              error: "Failed to airdrop",
-            });
+
+            airdropNotifications.onSuccess();
           } catch (err) {
             console.error(err);
-            toast.error("Failed to airdrop NFTs");
+            airdropNotifications.onError(err);
           }
         })}
       >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx

@@ -18,6 +18,7 @@ import { PropertiesFormControl } from "components/contract-pages/forms/propertie
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -166,12 +167,16 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
     watch("animation_url") instanceof File ||
     watch("external_url") instanceof File;
   const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const updateMetadataNotifications = useTxNotifications(
+    "NFT metadata updated successfully",
+    "Failed to update NFT metadata",
+  );
 
   return (
     <form
       className="flex flex-col gap-6"
       id={UPDATE_METADATA_FORM_ID}
-      onSubmit={handleSubmit((data) => {
+      onSubmit={handleSubmit(async (data) => {
         if (!address) {
           toast.error("Please connect your wallet to update metadata.");
           return;
@@ -217,7 +222,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
                   tokenId: BigInt(nft.id),
                   newMetadata,
                 });
-          const promise = sendAndConfirmTx.mutateAsync(transaction, {
+          await sendAndConfirmTx.mutateAsync(transaction, {
             onSuccess: () => {
               trackEvent({
                 category: "nft",
@@ -237,13 +242,10 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
             },
           });
 
-          toast.promise(promise, {
-            error: "Failed to update NFT metadata",
-            success: "NFT metadata updated successfully",
-          });
+          updateMetadataNotifications.onSuccess();
         } catch (err) {
           console.error(err);
-          toast.error("Failed to update NFT metadata");
+          updateMetadataNotifications.onError(err);
         }
       })}
     >

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

@@ -12,6 +12,7 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import { GemIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -46,6 +47,10 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const account = useActiveAccount();
   const [open, setOpen] = useState(false);
+  const claimNFTNotifications = useTxNotifications(
+    "NFT claimed successfully",
+    "Failed to claim NFT",
+  );
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -135,7 +140,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
                   await promise;
                 }
 
-                const promise = sendAndConfirmTx.mutateAsync(transaction, {
+                await sendAndConfirmTx.mutateAsync(transaction, {
                   onSuccess: () => {
                     trackEvent({
                       category: "nft",
@@ -154,14 +159,10 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
                   },
                 });
 
-                toast.promise(promise, {
-                  loading: "Claiming NFT(s)",
-                  success: "NFT(s) claimed successfully",
-                  error: "Failed to claim NFT(s)",
-                });
+                claimNFTNotifications.onSuccess();
               } catch (error) {
                 console.error(error);
-                toast.error((error as Error).message || "Error claiming NFT");
+                claimNFTNotifications.onError(error);
                 trackEvent({
                   category: "nft",
                   action: "claim",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx

@@ -19,6 +19,7 @@ import { PropertiesFormControl } from "components/contract-pages/forms/propertie
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -134,6 +135,11 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
     watch("animation_url") instanceof File ||
     watch("external_url") instanceof File;
 
+  const lazyMintNotifications = useTxNotifications(
+    "NFT lazy minted successfully",
+    "Failed to lazy mint NFT",
+  );
+
   return (
     <>
       <form
@@ -155,7 +161,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
               ? lazyMint721({ contract, nfts })
               : lazyMint1155({ contract, nfts });
 
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
                 trackEvent({
                   category: "nft",
@@ -174,14 +180,10 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
               },
             });
 
-            toast.promise(promise, {
-              loading: "Lazy minting NFT",
-              error: "Failed to lazy mint NFT",
-              success: "Lazy minted successfully",
-            });
+            lazyMintNotifications.onSuccess();
           } catch (err) {
             console.error(err);
-            toast.error("Failed to lazy mint NFT");
+            lazyMintNotifications.onError(err);
           }
         })}
       >

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

@@ -18,6 +18,7 @@ import { PropertiesFormControl } from "components/contract-pages/forms/propertie
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -133,13 +134,17 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
     watch("external_url") instanceof File;
 
   const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const nftMintNotifications = useTxNotifications(
+    "NFT minted successfully",
+    "Failed to mint NFT",
+  );
 
   return (
     <>
       <form
         className="mt-6 flex flex-col gap-6"
         id={MINT_FORM_ID}
-        onSubmit={handleSubmit((data) => {
+        onSubmit={handleSubmit(async (data) => {
           if (!address) {
             toast.error("Please connect your wallet to mint.");
             return;
@@ -166,7 +171,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                   nft,
                   supply: BigInt(data.supply),
                 });
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
                 trackEvent({
                   category: "nft",
@@ -186,14 +191,10 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
               },
             });
 
-            toast.promise(promise, {
-              loading: "Minting NFT",
-              success: "NFT minted successfully",
-              error: "Failed to mint NFT",
-            });
+            nftMintNotifications.onSuccess();
           } catch (err) {
+            nftMintNotifications.onError(err);
             console.error(err);
-            toast.error("Failed to mint NFT");
           }
         })}
       >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx

@@ -16,6 +16,7 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { useTxNotifications } from "hooks/useTxNotifications";
 import type { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -116,12 +117,17 @@ export const SharedMetadataForm: React.FC<{
     watch("animation_url") instanceof File ||
     watch("external_url") instanceof File;
 
+  const setSharedMetaNotifications = useTxNotifications(
+    "Shared metadata updated successfully",
+    "Failed to update shared metadata",
+  );
+
   return (
     <>
       <form
         className="mt-6 flex flex-col gap-6"
         id={SHARED_METADATA_FORM_ID}
-        onSubmit={handleSubmit((data) => {
+        onSubmit={handleSubmit(async (data) => {
           if (!address) {
             toast.error("Please connect your wallet.");
             return;
@@ -143,7 +149,7 @@ export const SharedMetadataForm: React.FC<{
               contract,
               nft: parseAttributes(dataWithCustom),
             });
-            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+            await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
                 trackEvent({
                   category: "nft",
@@ -163,14 +169,10 @@ export const SharedMetadataForm: React.FC<{
               },
             });
 
-            toast.promise(promise, {
-              loading: "Setting shared metadata",
-              error: "Error setting NFT metadata",
-              success: "Shared metadata updated successfully",
-            });
+            setSharedMetaNotifications.onSuccess();
           } catch (err) {
             console.error(err);
-            toast.error("Failed to set shared metadata");
+            setSharedMetaNotifications.onError(err);
           }
         })}
       >