[MNY-129] Dashboard: Use useSendAndConfirmTx everywhere, Replace createToken with prepareCreateToken

Author: MananTank

apps/dashboard/.eslintrc.js

@@ -95,6 +95,30 @@ module.exports = {
               'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',
             name: "posthog-js",
           },
+          {
+            importNames: ["useSendTransaction"],
+            message:
+              'Use `import { useSendTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["useSendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["sendTransaction"],
+            message:
+              'Use `import { useSendTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
+          {
+            importNames: ["sendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
         ],
         patterns: [
           {

apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx

@@ -20,7 +20,7 @@ import {
   toSerializableTransaction,
   toWei,
 } from "thirdweb";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { parseAbiParams, stringify, toFunctionSelector } from "thirdweb/utils";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
@@ -34,6 +34,7 @@ import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 function formatResponseData(data: unknown): {
   type: "json" | "text";
@@ -264,7 +265,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
     data: mutationData,
     error: mutationError,
     isPending: mutationLoading,
-  } = useSendAndConfirmTransaction();
+  } = useSendAndConfirmTx();
 
   const {
     mutate: readFn,

apps/dashboard/src/@/components/tx-button/MismatchButton.tsx

@@ -12,6 +12,7 @@ import { forwardRef, useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
   prepareTransaction,
+  // eslint-disable-next-line no-restricted-imports
   sendTransaction,
   type ThirdwebClient,
   toWei,

apps/dashboard/src/@/hooks/useSendTx.ts

@@ -0,0 +1,19 @@
+import { useTheme } from "next-themes";
+import {
+  type SendTransactionConfig,
+  // eslint-disable-next-line no-restricted-imports
+  useSendAndConfirmTransaction,
+} from "thirdweb/react";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+
+export function useSendAndConfirmTx(config?: SendTransactionConfig) {
+  const { theme } = useTheme();
+  const sendAndConfirmTransaction = useSendAndConfirmTransaction({
+    payModal: {
+      theme: getSDKTheme(theme === "light" ? "light" : "dark"),
+    },
+    ...config,
+  });
+
+  return sendAndConfirmTransaction;
+}

apps/dashboard/src/@/hooks/useSplit.ts

@@ -9,7 +9,6 @@ import {
   type Chain,
   getAddress,
   NATIVE_TOKEN_ADDRESS,
-  sendAndConfirmTransaction,
   type ThirdwebClient,
   type ThirdwebContract,
 } from "thirdweb";
@@ -21,6 +20,7 @@ import { getWalletBalance } from "thirdweb/wallets";
 import invariant from "tiny-invariant";
 import { parseError } from "../utils/errorParser";
 import { tryCatch } from "../utils/try-catch";
+import { useSendAndConfirmTx } from "./useSendTx";
 
 function getTokenBalancesQuery(params: {
   ownerAddress: string;
@@ -79,6 +79,7 @@ export function useOwnedTokenBalances(params: {
 export function useSplitDistributeFunds(contract: ThirdwebContract) {
   const account = useActiveAccount();
   const queryClient = useQueryClient();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   const params = {
     ownerAddress: contract.address, // because we want to fetch the balance of split contract
@@ -106,10 +107,7 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
                   contract,
                   tokenAddress: currency.tokenAddress,
                 });
-          const promise = sendAndConfirmTransaction({
-            account,
-            transaction,
-          });
+          const promise = sendAndConfirmTx.mutateAsync(transaction);
 
           toast.promise(promise, {
             error: (err) => ({

apps/dashboard/src/@/hooks/useVote.ts

@@ -8,9 +8,9 @@ import {
 } from "thirdweb";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as VoteExt from "thirdweb/extensions/vote";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
 import type { Account } from "thirdweb/wallets";
 import invariant from "tiny-invariant";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 export async function tokensDelegated(
   options: BaseTransactionOptions<{ account: Account | undefined }>,
@@ -81,7 +81,7 @@ export async function votingTokenDecimals(options: BaseTransactionOptions) {
 }
 
 export function useDelegateMutation() {
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   return useMutation({
     mutationFn: async (contract: ThirdwebContract) => {
@@ -97,7 +97,7 @@ export function useDelegateMutation() {
         contract: tokenContract,
         delegatee: contract.address,
       });
-      return await mutateAsync(transaction);
+      return await sendAndConfirmTx.mutateAsync(transaction);
     },
   });
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -17,7 +17,6 @@ import type { Chain, ChainMetadata } from "thirdweb/chains";
 import {
   useActiveAccount,
   useActiveWalletChain,
-  useSendTransaction,
   useSwitchActiveWalletChain,
   useWalletBalance,
 } from "thirdweb/react";
@@ -48,6 +47,7 @@ import {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,
 } from "@/constants/public-envs";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { parseError } from "@/utils/errorParser";
 import { mapV4ChainToV5Chain } from "@/utils/map-chains";
 
@@ -310,7 +310,7 @@ function SendFundsToFaucetModalContent(props: {
   const account = useActiveAccount();
   const activeChain = useActiveWalletChain();
   const switchActiveWalletChain = useSwitchActiveWalletChain();
-  const sendTxMutation = useSendTransaction({
+  const sendAndConfirmTx = useSendAndConfirmTx({
     payModal: false,
   });
   const switchChainMutation = useMutation({
@@ -334,7 +334,7 @@ function SendFundsToFaucetModalContent(props: {
       value: toWei(values.amount.toString()),
     });
 
-    const promise = sendTxMutation.mutateAsync(sendNativeTokenTx);
+    const promise = sendAndConfirmTx.mutateAsync(sendNativeTokenTx);
 
     toast.promise(promise, {
       error: `Failed to send ${values.amount} ${props.chainMeta.nativeCurrency.symbol} to faucet`,
@@ -404,11 +404,11 @@ function SendFundsToFaucetModalContent(props: {
             {activeChain.id === props.chain.id ? (
               <Button
                 className="mt-4 w-full gap-2"
-                disabled={sendTxMutation.isPending}
+                disabled={sendAndConfirmTx.isPending}
                 key="submit"
                 type="submit"
               >
-                {sendTxMutation.isPending && <Spinner className="size-4" />}
+                {sendAndConfirmTx.isPending && <Spinner className="size-4" />}
                 Send funds to faucet
               </Button>
             ) : (

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

@@ -2,8 +2,8 @@
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 
 interface CancelTabProps {
   id: string;
@@ -21,15 +21,15 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   const transaction = isAuction
     ? cancelAuction({ auctionId: BigInt(id), contract })
     : cancelListing({ contract, listingId: BigInt(id) });
-  const cancelQuery = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
   return (
     <TransactionButton
       className="self-end"
       client={contract.client}
       isLoggedIn={isLoggedIn}
-      isPending={cancelQuery.isPending}
+      isPending={sendAndConfirmTx.isPending}
       onClick={() => {
-        const promise = cancelQuery.mutateAsync(transaction, {
+        const promise = sendAndConfirmTx.mutateAsync(transaction, {
           onError: (error) => {
             console.error(error);
           },

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

@@ -28,7 +28,7 @@ import type {
   CreateListingParams,
 } from "thirdweb/extensions/marketplace";
 import { createAuction, createListing } from "thirdweb/extensions/marketplace";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { shortenAddress } from "thirdweb/utils";
 import { CurrencySelector } from "@/components/blocks/CurrencySelector";
 import { NFTMediaWithEmptyState } from "@/components/blocks/nft-media";
@@ -54,6 +54,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useDashboardOwnedNFTs } from "@/hooks/useDashboardOwnedNFTs";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import { useOwnedNFTsInsight } from "@/hooks/useWalletNFTs";
 import { cn } from "@/lib/utils";
@@ -122,7 +123,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
     chain: contract.chain,
   });
 
-  const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
   const listingNotifications = useTxNotifications(
     "NFT listed Successfully",
     "Failed to list NFT",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -28,11 +28,7 @@ import {
   ZERO_ADDRESS,
 } from "thirdweb";
 import { decimals } from "thirdweb/extensions/erc20";
-import {
-  useActiveAccount,
-  useReadContract,
-  useSendAndConfirmTransaction,
-} from "thirdweb/react";
+import { useActiveAccount, useReadContract } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import * as z from "zod";
 import { ZodError } from "zod";
@@ -49,6 +45,7 @@ import { Form } from "@/components/ui/form";
 import { Spinner } from "@/components/ui/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useIsAdmin } from "@/hooks/useContractRoles";
+import { useSendAndConfirmTx } from "@/hooks/useSendTx";
 import { useTxNotifications } from "@/hooks/useTxNotifications";
 import {
   type ClaimConditionInput,
@@ -222,7 +219,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     Record<number, SnapshotEntry[] | undefined>
   >({});
 
-  const sendTx = useSendAndConfirmTransaction();
+  const sendAndConfirmTx = useSendAndConfirmTx();
 
   const tokenDecimals = useReadContract(decimals, {
     contract,
@@ -305,7 +302,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
 
   const isFetchingData =
     claimConditionsQuery.isFetching ||
-    sendTx.isPending ||
+    sendAndConfirmTx.isPending ||
     // Need to make sure the tokenDecimals.data is present when interacting with ERC20 claim conditions
     (isErc20 && tokenDecimals.isLoading);
 
@@ -428,7 +425,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
         },
         phasesWithSnapshots,
       );
-      await sendTx.mutateAsync(tx);
+      await sendAndConfirmTx.mutateAsync(tx);
 
       saveClaimPhaseNotification.onSuccess();
     } catch (error) {
@@ -559,7 +556,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
               >
                 <ClaimConditionsPhase
                   contract={contract}
-                  isPending={sendTx.isPending}
+                  isPending={sendAndConfirmTx.isPending}
                   onRemove={() => {
                     formFields.remove(index);
                     // Clean up snapshot when phase is removed
@@ -594,7 +591,8 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 <DropdownMenuTrigger asChild>
                   <Button
                     disabled={
-                      sendTx.isPending || (!isMultiPhase && phases?.length > 0)
+                      sendAndConfirmTx.isPending ||
+                      (!isMultiPhase && phases?.length > 0)
                     }
                     size="sm"
                     variant="outline"
@@ -649,7 +647,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 client={contract.client}
                 disabled={claimConditionsQuery.isPending}
                 isLoggedIn={isLoggedIn}
-                isPending={sendTx.isPending}
+                isPending={sendAndConfirmTx.isPending}
                 transactionCount={undefined}
                 txChainID={contract.chain.id}
                 type="submit"