Dashboard: Reduce useThirdwebClient hook usage #4 (#7227)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `TransactionButton` component across various files by adding a `client` prop and other relevant properties to improve transaction handling and user interactions.

### Detailed summary
- Added `client` prop to `TransactionButton` in multiple components for transaction management.
- Included `isLoggedIn`, `txChainID`, and `transactionCount` props where applicable.
- Enhanced user experience by managing loading states and enabling/disabling buttons based on conditions.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - All transaction-related buttons and components now require and receive an explicit client instance, improving reliability and consistency across the dashboard.
- **Refactor**
  - Updated component interfaces to accept a client prop instead of relying on internal hooks.
  - Standardized the way client instances are passed through component hierarchies, including in forms, modals, and tables.
  - Renamed certain props for clarity (e.g., `clientId` to `projectClientId`).
- **Style**
  - No user-facing visual changes.
- **Chores**
  - Improved code maintainability by removing internal hook usage for client access.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

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

@@ -30,6 +30,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   return (
     <div className="flex flex-col gap-3 pt-3">
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         txChainID={contract.chain.id}
         transactionCount={1}

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

@@ -659,6 +659,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           isPending={isFormLoading}

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

@@ -658,6 +658,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   hasRemovedPhases ||
                   !isMultiPhase ? (
                     <TransactionButton
+                      client={contract.client}
                       isLoggedIn={isLoggedIn}
                       txChainID={contract.chain.id}
                       transactionCount={1}

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

@@ -94,6 +94,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
   return (
     <AdminOnly contract={contract} fallback={<div className="pb-5" />}>
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         transactionCount={1}
         type="button"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx

@@ -48,6 +48,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
         value={amount}
       />
       <TransactionButton
+        client={client}
         isLoggedIn={isLoggedIn}
         txChainID={v5Chain.id}
         transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx

@@ -61,6 +61,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
 
   return (
     <TransactionButton
+      client={contract.client}
       isLoggedIn={isLoggedIn}
       txChainID={contract.chain.id}
       onClick={() => {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx

@@ -23,7 +23,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { sendAndConfirmTransaction } from "thirdweb";
+import { type ThirdwebClient, sendAndConfirmTransaction } from "thirdweb";
 import { BatchMetadataERC721, BatchMetadataERC1155 } from "thirdweb/modules";
 import { parseAttributes } from "utils/parseAttributes";
 import { z } from "zod";
@@ -105,6 +105,7 @@ export function BatchMetadataModuleUI(
     uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
     contractChainId: number;
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -122,6 +123,7 @@ export function BatchMetadataModuleUI(
                   isLoggedIn={props.isLoggedIn}
                   uploadMetadata={props.uploadMetadata}
                   contractChainId={props.contractChainId}
+                  client={props.client}
                 />
               )}
               {!props.isOwnerAccount && (
@@ -164,6 +166,7 @@ function UploadMetadataNFTSection(props: {
   uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<UploadMetadataFormValues>({
     resolver: zodResolver(uploadMetadataFormSchema),
@@ -262,6 +265,7 @@ function UploadMetadataNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               isLoggedIn={props.isLoggedIn}
               size="sm"
               className="min-w-24"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx

@@ -41,6 +41,7 @@ import { useFieldArray, useForm } from "react-hook-form";
 import {
   NATIVE_TOKEN_ADDRESS,
   type PreparedTransaction,
+  type ThirdwebClient,
   ZERO_ADDRESS,
   getContract,
   sendAndConfirmTransaction,
@@ -343,6 +344,7 @@ export function ClaimableModuleUI(
       isLoading: boolean;
     };
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -358,6 +360,7 @@ export function ClaimableModuleUI(
             </AccordionTrigger>
             <AccordionContent className="px-1">
               <MintNFTSection
+                client={props.client}
                 mint={props.mintSection.mint}
                 name={props.name}
                 contractChainId={props.contractChainId}
@@ -390,6 +393,7 @@ export function ClaimableModuleUI(
               {props.name !== "ClaimableERC1155" || props.isValidTokenId ? (
                 props.claimConditionSection.data ? (
                   <ClaimConditionSection
+                    client={props.client}
                     isLoggedIn={props.isLoggedIn}
                     isOwnerAccount={props.isOwnerAccount}
                     claimCondition={
@@ -424,6 +428,7 @@ export function ClaimableModuleUI(
             <AccordionContent className="px-1">
               {props.primarySaleRecipientSection.data ? (
                 <PrimarySaleRecipientSection
+                  client={props.client}
                   isLoggedIn={props.isLoggedIn}
                   isOwnerAccount={props.isOwnerAccount}
                   primarySaleRecipient={
@@ -490,6 +495,7 @@ function ClaimConditionSection(props: {
   tokenId: string;
   noClaimConditionSet: boolean;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const { idToChain } = useAllChainsData();
   const chain = idToChain.get(props.chainId);
@@ -741,6 +747,7 @@ function ClaimConditionSection(props: {
 
               <div className="flex justify-end">
                 <TransactionButton
+                  client={props.client}
                   isLoggedIn={props.isLoggedIn}
                   size="sm"
                   className="min-w-24"
@@ -775,6 +782,7 @@ function PrimarySaleRecipientSection(props: {
   isOwnerAccount: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<PrimarySaleRecipientFormValues>({
     resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -823,6 +831,7 @@ function PrimarySaleRecipientSection(props: {
 
         <div className="flex justify-end">
           <TransactionButton
+            client={props.client}
             isLoggedIn={props.isLoggedIn}
             size="sm"
             className="min-w-24 gap-2"
@@ -859,6 +868,7 @@ function MintNFTSection(props: {
   name: string;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<MintFormValues>({
     resolver: zodResolver(mintFormSchema),
@@ -940,6 +950,7 @@ function MintNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               size="sm"
               className="min-w-24 gap-2"
               disabled={mintMutation.isPending}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx

@@ -27,7 +27,11 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { type PreparedTransaction, sendAndConfirmTransaction } from "thirdweb";
+import {
+  type PreparedTransaction,
+  type ThirdwebClient,
+  sendAndConfirmTransaction,
+} from "thirdweb";
 import {
   MintableERC20,
   MintableERC721,
@@ -193,6 +197,7 @@ export function MintableModuleUI(
     isBatchMetadataInstalled: boolean;
     contractChainId: number;
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -216,6 +221,7 @@ export function MintableModuleUI(
                     name={props.name}
                     isBatchMetadataInstalled={props.isBatchMetadataInstalled}
                     contractChainId={props.contractChainId}
+                    client={props.client}
                   />
                 )}
                 {!props.isOwnerAccount && (
@@ -243,6 +249,7 @@ export function MintableModuleUI(
                   update={props.updatePrimaryRecipient}
                   contractChainId={props.contractChainId}
                   isLoggedIn={props.isLoggedIn}
+                  client={props.client}
                 />
               </AccordionContent>
             </AccordionItem>
@@ -263,6 +270,7 @@ function PrimarySalesSection(props: {
   isOwnerAccount: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<UpdateFormValues>({
     resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -312,6 +320,7 @@ function PrimarySalesSection(props: {
 
         <div className="mt-4 flex justify-end">
           <TransactionButton
+            client={props.client}
             isLoggedIn={props.isLoggedIn}
             size="sm"
             className="min-w-24"
@@ -341,6 +350,7 @@ function MintNFTSection(props: {
   isBatchMetadataInstalled: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<MintFormValues>({
     resolver: zodResolver(mintFormSchema),
@@ -524,6 +534,7 @@ function MintNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               isLoggedIn={props.isLoggedIn}
               size="sm"
               className="min-w-24"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx

@@ -386,6 +386,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         {/* Submit */}
         <div className="flex justify-end">
           <TransactionButton
+            client={contract.client}
             isLoggedIn={props.isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}