Dashboard: Reduce useThirdwebClient hook usage #2 (#7224)

<!--

## 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 functionality of various components by integrating a `client` prop of type `ThirdwebClient` into multiple files. This change improves the interaction with the Thirdweb SDK across the application.

### Detailed summary
- Added `client` prop to components like `IconUpload`, `SolidityInput`, and `CustomConnectWallet`.
- Updated hooks and functions to accept `client` for better SDK integration.
- Modified forms to utilize the `client` for storage uploads and contract deployments.
- Enhanced `AddChainToWallet` and `EcosystemHeader` to support `client`.
- Updated various fieldsets to include `client`, improving data handling and validation.

> ✨ 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**
  - Components and forms now consistently accept and require a `client` prop, providing improved client context across wallet connection, contract deployment, network configuration, and NFT interactions.

- **Refactor**
  - Updated numerous components and hooks to require explicit passing of the `client` instance, replacing previous internal retrieval methods.
  - Prop types and interfaces were extended to include the new `client` property, ensuring consistent usage throughout the app.

- **Bug Fixes**
  - Addressed missing `client` props in several components to prevent potential issues with client-dependent functionality.

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

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
@@ -12,7 +11,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   ConnectButton,
   type NetworkSelectorProps,
@@ -36,9 +35,11 @@ export const CustomConnectWallet = (props: {
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
   chain?: Chain;
+  client: ThirdwebClient;
   isLoggedIn: boolean;
 }) => {
-  const thirdwebClient = useThirdwebClient();
+  const client = props.client;
+
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
 
@@ -140,7 +141,7 @@ export const CustomConnectWallet = (props: {
     <>
       <ConnectButton
         theme={getSDKTheme(t)}
-        client={thirdwebClient}
+        client={client}
         connectModal={{
           privacyPolicyUrl: "/privacy-policy",
           termsOfServiceUrl: "/terms",
@@ -175,7 +176,7 @@ export const CustomConnectWallet = (props: {
             renderChain(props) {
               return (
                 <CustomChainRenderer
-                  client={thirdwebClient}
+                  client={client}
                   {...props}
                   openEditChainModal={(c) => {
                     setIsNetworkConfigModalOpen(true);
@@ -276,12 +277,11 @@ function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
   const { connect } = useConnectModal();
   const { theme } = useTheme();
-  const thirdwebClient = useThirdwebClient();
 
   return useCallback(
-    (options?: { chain?: Chain }) => {
+    (options: { chain?: Chain; client: ThirdwebClient }) => {
       return connect({
-        client: thirdwebClient,
+        client: options.client,
         appMetadata: {
           name: "thirdweb",
           logoUrl: "https://thirdweb.com/favicon.ico",
@@ -299,7 +299,7 @@ export function useCustomConnectModal() {
         theme: getSDKTheme(theme === "light" ? "light" : "dark"),
       });
     },
-    [connect, theme, thirdwebClient],
+    [connect, theme],
   );
 }
 

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx

@@ -1,18 +1,17 @@
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useMutation } from "@tanstack/react-query";
+import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
 
 type DashboardUploadOptions = {
   uploadWithoutDirectory?: boolean;
   metadata?: Record<string, string>;
+  client: ThirdwebClient;
 };
 
-export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
-  const thirdwebClient = useThirdwebClient();
+export function useDashboardStorageUpload(options: DashboardUploadOptions) {
   return useMutation({
     mutationFn: async (files: Array<File | string>): Promise<string[]> => {
       const uris = await upload({
-        client: thirdwebClient,
         files,
         ...options,
       });

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

@@ -407,6 +407,7 @@ function SendFundsToFaucetModalContent(props: {
             isLoggedIn={props.isLoggedIn}
             connectButtonClassName="!w-full"
             detailsButtonClassName="!w-full"
+            client={props.client}
           />
         )}
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx

@@ -6,7 +6,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useCustomConnectModal } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   useActiveAccount,
   useActiveWalletChain,
@@ -16,6 +16,7 @@ import { useDebounce } from "use-debounce";
 
 type AddChainToWalletProps = {
   chain: Chain;
+  client: ThirdwebClient;
 };
 
 export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
@@ -49,7 +50,10 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
         onClick={() => {
           // Connect directly to this chain
           if (!account) {
-            return customConnectModal({ chain: props.chain });
+            return customConnectModal({
+              chain: props.chain,
+              client: props.client,
+            });
           }
 
           // switch to this chain

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { mapV4ChainToV5Chain } from "../../../../../../../../contexts/map-chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -10,6 +11,7 @@ type ChainHeaderProps = {
   headerImageUrl?: string;
   logoUrl?: string;
   chain: ChainMetadata;
+  client: ThirdwebClient;
 };
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
@@ -51,6 +53,7 @@ export function ChainHeader(props: ChainHeaderProps) {
           {/* Desktop only */}
           <div className="hidden flex-row gap-2 lg:flex">
             <AddChainToWallet
+              client={props.client}
               chain={
                 // Do not include chain overrides for chain pages
                 // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -164,6 +164,7 @@ The following is the user's message:
             headerImageUrl={chainMetadata?.headerImgUrl}
             logoUrl={chain.icon?.url}
             chain={chain}
+            client={client}
           />
 
           <div className="h-4 md:h-8" />
@@ -210,6 +211,7 @@ The following is the user's message:
             <div className="w-full sm:hidden">
               <div className="grid grid-cols-2 gap-2">
                 <AddChainToWallet
+                  client={client}
                   chain={
                     // Do not include chain overrides for chain pages
                     // eslint-disable-next-line no-restricted-syntax

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

@@ -485,6 +485,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                 >
                   <FormLabel>Contract address</FormLabel>
                   <SolidityInput
+                    client={contract.client}
                     solidityType="address"
                     formContext={form}
                     {...form.register("selected.contractAddress", {

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

@@ -103,6 +103,7 @@ const TransferTab: React.FC<TransferTabProps> = ({
             <FormControl isRequired isInvalid={!!form.formState.errors.to}>
               <FormLabel>To Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 placeholder={ZERO_ADDRESS}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

@@ -129,6 +129,7 @@ export const SettingsPlatformFees = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 {...form.register("platform_fee_recipient")}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

@@ -127,6 +127,7 @@ export const SettingsPrimarySale = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 disabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}