Dashboard: Reduce useThirdwebClient hook usage #3 (#7226)

<!--

## 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 primarily focuses on updating the usage of the `client` prop throughout various components in the application, replacing instances of `useThirdwebClient` with a more consistent approach using `getClientThirdwebClient`.

### Detailed summary
- Added `client` prop to multiple components including `AccountPage`, `DeployedContractsPage`, and `FaucetButton`.
- Replaced `useThirdwebClient` with `getClientThirdwebClient` in various files.
- Ensured consistency in passing the `client` prop across components.
- Updated the `ProfileHeader`, `PayModalButton`, and `SendTestTransaction` to accept `client` as a prop.
- Modified forms and sections to utilize the `client` prop for better integration with Thirdweb services.

> ✨ 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

- **Refactor**
  - Updated various components to receive a client instance as a prop instead of obtaining it internally, improving consistency and making client usage more explicit throughout the app.
  - Enhanced component interfaces to require a client prop where necessary, ensuring proper client context is passed across the dashboard.
  - Adjusted authentication and layout flows to support explicit client instantiation and propagation.

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

Author: MananTank

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

@@ -23,7 +23,6 @@ import {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,
 } from "@/constants/public-envs";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Turnstile } from "@marsidev/react-turnstile";
@@ -77,13 +76,14 @@ export function FaucetButton({
   chain,
   amount,
   isLoggedIn,
+  client,
 }: {
   chain: ChainMetadata;
   amount: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const pathname = usePathname();
-  const client = useThirdwebClient();
   const address = useActiveAccount()?.address;
   const chainId = chain.chainId;
   // do not include local overrides for chain pages

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

@@ -1,16 +1,19 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useTrack } from "hooks/analytics/useTrack";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useTheme } from "next-themes";
+import type { ThirdwebClient } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
 import { getSDKTheme } from "../../../../../../components/sdk-component-theme";
 
-export function PayModalButton(props: { chainId: number; label: string }) {
+export function PayModalButton(props: {
+  chainId: number;
+  label: string;
+  client: ThirdwebClient;
+}) {
   const { theme } = useTheme();
-  const client = useThirdwebClient();
   const trackEvent = useTrack();
   return (
     <Dialog>
@@ -35,7 +38,7 @@ export function PayModalButton(props: { chainId: number; label: string }) {
         dialogCloseClassName="focus:ring-0"
       >
         <PayEmbed
-          client={client}
+          client={props.client}
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{

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

@@ -1,5 +1,6 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { PayModalButton } from "../client/PayModal";
@@ -8,6 +9,7 @@ import { SectionTitle } from "./SectionTitle";
 
 export function BuyFundsSection(props: {
   chain: ChainMetadata;
+  client: ThirdwebClient;
 }) {
   const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();
 
@@ -45,6 +47,7 @@ export function BuyFundsSection(props: {
           <PayModalButton
             chainId={props.chain.chainId}
             label={`Bridge to ${sanitizedChainName}`}
+            client={props.client}
           />
 
           <div className="h-4" />

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

@@ -1,3 +1,4 @@
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getFaucetClaimAmount } from "../../../../../../api/testnet-faucet/claim/claim-amount";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -8,8 +9,9 @@ import { SectionTitle } from "./SectionTitle";
 export async function FaucetSection(props: {
   chain: ChainMetadata;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
-  const { chain, isLoggedIn } = props;
+  const { chain, isLoggedIn, client } = props;
 
   // Check eligibility.
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
@@ -44,6 +46,7 @@ export async function FaucetSection(props: {
           <div className="h-8" />
 
           <FaucetButton
+            client={client}
             chain={chain}
             amount={amountToGive}
             isLoggedIn={isLoggedIn}

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

@@ -1,4 +1,5 @@
 import { CircleAlertIcon } from "lucide-react";
+import { getClientThirdwebClient } from "../../../../../../@/constants/thirdweb-client.client";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { getChain, getChainMetadata } from "../../utils";
 import NextSteps from "./components/client/NextSteps";
@@ -16,6 +17,7 @@ export default async function Page(props: {
   const params = await props.params;
   const chain = await getChain(params.chain_id);
   const chainMetadata = await getChainMetadata(chain.chainId);
+  const client = getClientThirdwebClient();
   const isDeprecated = chain.status === "deprecated";
 
   const account = await getRawAccount();
@@ -42,9 +44,9 @@ export default async function Page(props: {
 
       {/* Faucet / Buy Funds */}
       {chain.testnet ? (
-        <FaucetSection chain={chain} isLoggedIn={!!account} />
+        <FaucetSection chain={chain} isLoggedIn={!!account} client={client} />
       ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
-        <BuyFundsSection chain={chain} />
+        <BuyFundsSection chain={chain} client={client} />
       ) : null}
 
       {/* Chain Overview */}

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

@@ -41,6 +41,7 @@ export const AccountPage: React.FC<AccountPageProps> = ({
           address={contract.address}
           symbol={symbol}
           chain={chainMetadata}
+          client={contract.client}
         />
       )}
 

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

@@ -1,12 +1,11 @@
 "use client";
 
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { type ChangeEvent, useState } from "react";
 import type { StoredChain } from "stores/chainStores";
-import { prepareTransaction, toWei } from "thirdweb";
+import { type ThirdwebClient, prepareTransaction, toWei } from "thirdweb";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { Card } from "tw-components";
 
@@ -15,15 +14,16 @@ interface DepositNativeProps {
   symbol: string;
   chain: StoredChain;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }
 
 export const DepositNative: React.FC<DepositNativeProps> = ({
   address,
   symbol,
   chain,
   isLoggedIn,
+  client,
 }) => {
-  const client = useThirdwebClient();
   const { mutate: transfer, isPending } = useSendAndConfirmTransaction();
   const [amount, setAmount] = useState("");
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { FormControl, Input, Select, Skeleton, Spacer } from "@chakra-ui/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
@@ -60,7 +59,6 @@ type InstallModuleFormProps = {
 export type InstallModuleForm = UseFormReturn<FormData>;
 
 export const InstallModuleForm = (props: InstallModuleFormProps) => {
-  const client = useThirdwebClient();
   const form = useForm<FormData>({
     defaultValues: {
       publisherAddress: "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024", // thirdweb publisher address
@@ -182,7 +180,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         moduleAddress.map(async (address) => {
           const result = await resolveImplementation(
             getContract({
-              client,
+              client: contract.client,
               address,
               chain: contract.chain,
             }),
@@ -231,7 +229,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         moduleInfo: {
           bytecodeUri: selectedModule.metadata.bytecodeUri,
         },
-        client,
+        client: contract.client,
       });
     },
     retry: false,
@@ -255,6 +253,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
   const moduleInstallParams = useModuleInstallParams({
     module: selectedModuleMeta,
     isQueryEnabled: !!selectedModule && !!isModuleCompatibleQuery.data,
+    client: contract.client,
   });
 
   return (

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx

@@ -1,7 +1,7 @@
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { FormControl } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
+import type { ThirdwebClient } from "thirdweb";
 import invariant from "tiny-invariant";
 import { FormErrorMessage, FormLabel } from "tw-components";
 import type { InstallModuleForm } from "./ModuleForm";
@@ -20,9 +20,9 @@ export type ModuleMeta = {
 export function useModuleInstallParams(props: {
   module?: ModuleMeta;
   isQueryEnabled: boolean;
+  client: ThirdwebClient;
 }) {
-  const client = useThirdwebClient();
-  const { module, isQueryEnabled } = props;
+  const { module, isQueryEnabled, client } = props;
   return useQuery({
     queryKey: ["useModuleInstallParams", module],
     queryFn: async () => {

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

@@ -16,7 +16,6 @@ import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useChainSlug } from "hooks/chains/chainSlug";
 import { ExternalLinkIcon } from "lucide-react";
@@ -78,8 +77,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     accountAddress,
   });
 
-  const client = useThirdwebClient();
-
   const { data: nft, isPending } = useReadContract(
     isErc721 ? getErc721NFT : getErc1155NFT,
     {
@@ -175,7 +172,9 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           />
 
           {/* tab contents */}
-          {tab === "Details" && <NFTDetailsTab nft={nft} client={client} />}
+          {tab === "Details" && (
+            <NFTDetailsTab nft={nft} client={contract.client} />
+          )}
 
           {tabs.map((tb) => {
             return (

apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx

@@ -1,19 +1,25 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { fetchPublishedContracts } from "components/contract-components/fetchPublishedContracts";
 import { Suspense } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { serverThirdwebClient } from "../../../../../@/constants/thirdweb-client.server";
 import { ProfileHeader } from "./components/profile-header";
 import { PublishedContracts } from "./components/published-contracts";
 
 export function ProfileUI(props: {
   profileAddress: string;
   ensName: string | undefined;
+  client: ThirdwebClient;
 }) {
   const { profileAddress, ensName } = props;
 
   return (
     <div className="container pt-8 pb-20">
-      <ProfileHeader profileAddress={profileAddress} ensName={ensName} />
+      <ProfileHeader
+        profileAddress={profileAddress}
+        ensName={ensName}
+        client={props.client}
+      />
       <div className="h-8" />
 
       <div>

apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Skeleton } from "@/components/ui/skeleton";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { replaceDeployerAddress } from "lib/publisher-utils";
+import type { ThirdwebClient } from "thirdweb";
 import {
   AccountAddress,
   AccountAvatar,
@@ -15,10 +15,10 @@ import { shortenIfAddress } from "utils/usedapp-external";
 export function ProfileHeader(props: {
   profileAddress: string;
   ensName: string | undefined;
+  client: ThirdwebClient;
 }) {
-  const client = useThirdwebClient();
   return (
-    <AccountProvider address={props.profileAddress} client={client}>
+    <AccountProvider address={props.profileAddress} client={props.client}>
       <div className="flex w-full flex-col items-center justify-between gap-4 border-border border-b pb-6 md:flex-row">
         <div className="flex w-full items-center gap-4">
           <AccountAvatar

apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/page.tsx

@@ -1,8 +1,9 @@
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { replaceDeployerAddress } from "lib/publisher-utils";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { shortenIfAddress } from "utils/usedapp-external";
-import { serverThirdwebClient } from "../../../../../@/constants/thirdweb-client.server";
 import { ProfileUI } from "./ProfileUI";
 import { resolveAddressAndEns } from "./resolveAddressAndEns";
 
@@ -27,6 +28,7 @@ export default async function Page(props: PageProps) {
     <ProfileUI
       ensName={replaceDeployerAddress(resolvedInfo.ensName || "")}
       profileAddress={resolvedInfo.address}
+      client={getClientThirdwebClient()}
     />
   );
 }

apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -8,7 +8,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { ArrowDownIcon, WalletIcon } from "lucide-react";
@@ -25,6 +24,7 @@ import {
 import { resolveContractAbi } from "thirdweb/contract";
 import { useActiveAccount } from "thirdweb/react";
 import { parseAbiParams } from "thirdweb/utils";
+import { getClientThirdwebClient } from "../../../../../../@/constants/thirdweb-client.client";
 import { ShareButton } from "../../components/share";
 
 export type SimulateTransactionForm = {
@@ -61,8 +61,7 @@ export const TransactionSimulator = (props: {
   const chain = useV5DashboardChain(
     Number.isInteger(Number(chainId)) ? chainId : undefined,
   );
-  const client = useThirdwebClient();
-
+  const client = getClientThirdwebClient();
   async function handleSimulation(data: SimulateTransactionForm) {
     try {
       setIsPending(true);