Dashboard: Remove useThirdwebClient hook (#7228)

<!--

## 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 integrating the `ThirdwebClient` into various components and functions across the application, enhancing the client functionality for better interaction with smart contracts and improving the overall architecture.

### Detailed summary
- Added `client` prop to multiple components for better contract interactions.
- Updated functions to utilize the `contract.client` instead of a generic client.
- Removed redundant imports of `useThirdwebClient`.
- Enhanced several UI components to accept and use the `client` prop.
- Modified API calls to pass the `client` where necessary for fetching data.
- Improved handling of ENS queries by passing the `client` directly.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx`, `apps/dashboard/src/components/embedded-wallets/Configure/index.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx`

> ✨ 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**
  - Many components now accept a client instance as a prop, enabling more explicit and flexible client management throughout the dashboard.
- **Refactor**
  - Shifted from internal client initialization to explicit client prop injection across the app, affecting forms, tables, media components, contract publishing, and wallet settings.
  - Updated hooks and utility functions to require a client parameter instead of relying on internal context.
- **Chores**
  - Removed unused files and internal hooks related to client management.
- **Bug Fixes**
  - Improved consistency and reliability when handling authentication and client context in user flows.

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

Author: MananTank

apps/dashboard/src/@/constants/thirdweb.client.ts

@@ -198,6 +198,7 @@ export const CustomConnectWallet = (props: {
         open={isNetworkConfigModalOpen}
         onOpenChange={setIsNetworkConfigModalOpen}
         editChain={editChain}
+        client={client}
       />
     </>
   );

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

@@ -559,6 +559,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                           width="140px"
                           height="140px"
                           requireInteraction
+                          client={contract.client}
                         />
                       </Box>
                     </Tooltip>

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

@@ -51,6 +51,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
         <div className="flex flex-row gap-6">
           <NFTMediaWithEmptyState
             metadata={renderData.asset.metadata}
+            client={contract.client}
             requireInteraction
             width="150px"
             height="150px"

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

@@ -99,7 +99,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
         Header: "Media",
         accessor: (row) => row.asset.metadata,
         // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: (cell: any) => <MediaCell cell={cell} />,
+        Cell: (cell: any) => <MediaCell cell={cell} client={contract.client} />,
       },
       {
         Header: "Name",

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

@@ -1,7 +1,7 @@
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMemo } from "react";
-import { type NFT, ZERO_ADDRESS } from "thirdweb";
+import { type NFT, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../_utils/contract-page-path";
@@ -32,6 +32,7 @@ interface NFTCardsProps {
   isPending: boolean;
   allNfts?: boolean;
   projectMeta: ProjectMeta | undefined;
+  client: ThirdwebClient;
 }
 
 export const NFTCards: React.FC<NFTCardsProps> = ({
@@ -40,6 +41,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
   isPending,
   allNfts,
   projectMeta,
+  client,
 }) => {
   const dummyData = useMemo(() => {
     return Array.from({
@@ -73,6 +75,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
                       requireInteraction
                       width="100%"
                       height="100%"
+                      client={client}
                     />
                   );
                 }}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx

@@ -528,6 +528,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     form.setValue(`phases.${index}.snapshot`, snapshot)
                   }
                   isDisabled={!canEditForm}
+                  client={contract.client}
                 />
 
                 <ClaimsConditionFormContext.Provider

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

@@ -14,7 +14,7 @@ import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, DownloadIcon, UploadIcon } from "lucide-react";
 import { useRef } from "react";
 import type { Column } from "react-table";
-import { ZERO_ADDRESS } from "thirdweb";
+import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { CsvDataTable } from "../csv-data-table";
 
 interface SnapshotAddressInput {
@@ -30,6 +30,7 @@ interface SnapshotUploadProps {
   isDisabled: boolean;
   value?: SnapshotAddressInput[] | undefined;
   onClose: () => void;
+  client: ThirdwebClient;
 }
 
 const csvParser = (items: SnapshotAddressInput[]): SnapshotAddressInput[] => {
@@ -49,6 +50,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
   isDisabled,
   value,
   onClose,
+  client,
 }) => {
   const {
     normalizeQuery,
@@ -59,7 +61,11 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
     noCsv,
     reset,
     removeInvalid,
-  } = useCsvUpload<SnapshotAddressInput>({ csvParser, defaultRawData: value });
+  } = useCsvUpload<SnapshotAddressInput>({
+    csvParser,
+    defaultRawData: value,
+    client,
+  });
 
   const paginationPortalRef = useRef<HTMLDivElement>(null);
   const normalizeData = normalizeQuery.data;

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

@@ -6,9 +6,11 @@ import { ConfigureNetworks } from "components/configure-networks/ConfigureNetwor
 import { CheckIcon, CircleAlertIcon, RotateCcwIcon } from "lucide-react";
 import { useState } from "react";
 import { addChainOverrides } from "stores/chainStores";
+import type { ThirdwebClient } from "thirdweb";
 
 export function ConfigureCustomChain(props: {
   chainSlug: string;
+  client: ThirdwebClient;
 }) {
   const { chainSlug } = props;
   const isSlugNumber = Number.isInteger(Number(chainSlug));
@@ -61,6 +63,7 @@ export function ConfigureCustomChain(props: {
             }
           }}
           editChain={undefined}
+          client={props.client}
         />
       </div>
     </div>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/ConfigureCustomChain.tsx

@@ -43,7 +43,6 @@ export async function getContractMetadataHeaderData(
     fetchDashboardContractMetadata(contract),
     fetchPublishedContractsFromDeploy({
       contract,
-      client: contract.client,
     }),
   ]);
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-metadata.tsx

@@ -27,6 +27,7 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({
 
   return nfts.length !== 0 ? (
     <NFTCards
+      client={contract.client}
       projectMeta={projectMeta}
       nfts={nfts.map((nft) => ({
         id: BigInt(nft.id),

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

@@ -183,7 +183,6 @@ export async function SharedCrossChainPage(props: {
     coreMetadata = (
       await fetchPublishedContractsFromDeploy({
         contract: serverContract,
-        client: serverContract.client,
       })
     ).at(-1) as FetchDeployMetadataResult;
   } catch {}
@@ -256,7 +255,6 @@ export async function SharedCrossChainPage(props: {
                   client: serverContract.client,
                   address: m,
                 }),
-                client: serverContract.client,
               })
             ).at(-1),
           ),

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import {
   SharedContractLayout,
   generateContractLayoutMetadata,
@@ -11,12 +12,13 @@ export default async function Layout(props: {
   }>;
   children: React.ReactNode;
 }) {
-  const params = await props.params;
+  const [params, authToken] = await Promise.all([props.params, getAuthToken()]);
   return (
     <SharedContractLayout
       contractAddress={params.contractAddress}
       chainIdOrSlug={params.chain_id}
       projectMeta={undefined}
+      authToken={authToken}
     >
       {props.children}
     </SharedContractLayout>

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

@@ -69,9 +69,10 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
   const { contract, account } = props;
   const { errors } = formState;
 
-  const { data, isPending, isFetching } = usePublishedContractsQuery(
-    watch("publisherAddress"),
-  );
+  const { data, isPending, isFetching } = usePublishedContractsQuery({
+    client: contract.client,
+    address: watch("publisherAddress"),
+  });
 
   // filter out all the contracts that AREN'T modules
   const modulesOnly = useMemo(() => {
@@ -88,6 +89,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
   const allVersions = useAllVersions(
     watch("publisherAddress"),
     watch("moduleContract"),
+    contract.client,
   );
 
   const installMutation = useMutation({

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

@@ -135,6 +135,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({
                   </SheetTitle>
                 </SheetHeader>
                 <AirdropUpload
+                  client={contract.client}
                   onClose={() => setOpen(false)}
                   setAirdrop={(value) =>
                     setValue("addresses", value, { shouldDirty: true })

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

@@ -252,6 +252,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
         <div className="flex flex-row flex-wrap gap-3">
           {nft?.metadata && !mediaFileUrl && (
             <NFTMediaWithEmptyState
+              client={contract.client}
               metadata={{
                 name: nft.metadata.name,
                 animation_url:

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

@@ -126,7 +126,11 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           {/* border */}
           <div className="absolute inset-0 z-0 rounded-lg border" />
           {/* media */}
-          <NFTMediaWithEmptyState metadata={nftMetadata} className="z-10" />
+          <NFTMediaWithEmptyState
+            metadata={nftMetadata}
+            className="z-10"
+            client={contract.client}
+          />
         </div>
 
         <div className="flex w-full flex-col gap-6">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -75,7 +75,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
         Header: "Media",
         accessor: (row) => row.metadata,
         Cell: (cell: CellProps<NFT, NFT["metadata"]>) => (
-          <MediaCell cell={cell} />
+          <MediaCell cell={cell} client={contract.client} />
         ),
       },
       {

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

@@ -344,6 +344,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
               render={(v) => {
                 return (
                   <NFTMediaWithEmptyState
+                    client={client}
                     metadata={v}
                     requireInteraction
                     width="100%"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx

@@ -67,6 +67,7 @@ export function NFTDetails({
       {/* cards */}
       <div className="p-6">
         <NFTCards
+          client={contract.client}
           projectMeta={projectMeta}
           nfts={displayableNFTs.map((t) => ({
             ...t,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx

@@ -2,7 +2,7 @@ import { fetchPublishedContractsFromDeploy } from "components/contract-component
 import { ContractCard } from "components/explore/contract-card";
 import { THIRDWEB_DEPLOYER_ADDRESS } from "constants/addresses";
 import { resolveEns } from "lib/ens";
-import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import { polygon } from "thirdweb/chains";
 import { getBytecode, getContract } from "thirdweb/contract";
 import { getPublishedUriFromCompilerUri } from "thirdweb/extensions/thirdweb";
@@ -20,13 +20,11 @@ type ModuleMetadataPickedKeys = {
 export async function getPublishedByCardProps(params: {
   address: string | null;
   contract: ThirdwebContract;
-  client: ThirdwebClient;
 }) {
-  const { address, contract, client } = params;
+  const { address, contract } = params;
 
   const publishedContractsFromDeploy = await fetchPublishedContractsFromDeploy({
     contract,
-    client,
   });
 
   const reversedPublishedContractsFromDeploy = [
@@ -54,7 +52,10 @@ export async function getPublishedByCardProps(params: {
   let publisherAddressOrEns = publishedContractToShow.publisher;
   if (!isValidENSName(publishedContractToShow.publisher)) {
     try {
-      const res = await resolveEns(publishedContractToShow.publisher, client);
+      const res = await resolveEns(
+        publishedContractToShow.publisher,
+        contract.client,
+      );
       if (res.ensName) {
         publisherAddressOrEns = res.ensName;
       }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by-ui.tsx

@@ -11,7 +11,6 @@ export const PublishedBy: React.FC<PublishedByProps> = async ({ contract }) => {
   const props = await getPublishedByCardProps({
     address,
     contract,
-    client: contract.client,
   });
 
   if (!props) {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by.server.tsx

@@ -1,5 +1,6 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import type { MinimalTeamsAndProjects } from "components/contract-components/contract-deploy-form/add-to-project-card";
 import { resolveFunctionSelectors } from "lib/selectors";
 import type { Metadata } from "next";
@@ -27,6 +28,7 @@ export async function SharedContractLayout(props: {
   chainIdOrSlug: string;
   projectMeta: ProjectMeta | undefined;
   children: React.ReactNode;
+  authToken: string | undefined | null;
 }) {
   if (!isAddress(props.contractAddress)) {
     return notFound();
@@ -43,7 +45,15 @@ export async function SharedContractLayout(props: {
   ]);
 
   if (!info) {
-    return <ConfigureCustomChain chainSlug={props.chainIdOrSlug} />;
+    return (
+      <ConfigureCustomChain
+        chainSlug={props.chainIdOrSlug}
+        client={getClientThirdwebClient({
+          jwt: props.authToken,
+          teamId: props.projectMeta?.teamId,
+        })}
+      />
+    );
   }
 
   const { clientContract, serverContract, chainMetadata, isLocalhostChain } =

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx

@@ -97,6 +97,7 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
           <div className="mb-3 flex w-full flex-col gap-6 md:flex-row">
             {airdropFormOpen ? (
               <AirdropUpload
+                client={contract.client}
                 onClose={() => setAirdropFormOpen(false)}
                 setAirdrop={(value) =>
                   setValue("addresses", value, { shouldDirty: true })