Dashboard: Reduce useThirdwebClient hook usage (#7223)

<!--

## 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 adding a `client` prop to various components across the dashboard application, enhancing their functionality and ensuring consistent access to the `ThirdwebClient`.

### Detailed summary
- Added `client` prop to `BatchMetadata`, `Royalty`, `Mintable`, `Transferable`, `Claimable`, and other components.
- Updated `WalletAddress` component to accept `client` prop in multiple instances.
- Enhanced various tables and UI components to utilize the `client` prop for improved data handling.
- Refactored existing components to ensure compatibility with the new `client` prop, ensuring consistent client access throughout the application.

> ✨ 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**
  - Enhanced all WalletAddress displays across the dashboard to accept and utilize a new client context for improved integration and consistency.
- **Refactor**
  - Updated multiple components and their props to require and pass a client instance, ensuring unified client handling throughout tables, modals, and analytics views.
  - Replaced static table column definitions with dynamic, memoized columns that respond to client changes.
  - Standardized prop names related to client identification for clarity and maintainability.
- **Bug Fixes**
  - Ensured client context is consistently propagated to all relevant child components, preventing potential rendering or data issues.

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

Author: MananTank

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -5,7 +5,6 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
@@ -24,8 +23,8 @@ export function WalletAddress(props: {
   shortenAddress?: boolean;
   className?: string;
   iconClassName?: string;
+  client: ThirdwebClient;
 }) {
-  const thirdwebClient = useThirdwebClient();
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
 
@@ -40,7 +39,7 @@ export function WalletAddress(props: {
 
   const profiles = useSocialProfiles({
     address: address,
-    client: thirdwebClient,
+    client: props.client,
   });
 
   const { onCopy, hasCopied } = useClipboard(address, 2000);
@@ -78,7 +77,7 @@ export function WalletAddress(props: {
             <WalletAvatar
               address={address}
               profiles={profiles.data || []}
-              thirdwebClient={thirdwebClient}
+              thirdwebClient={props.client}
               iconClassName={props.iconClassName}
             />
           )}
@@ -122,7 +121,7 @@ export function WalletAddress(props: {
           ) : (
             profiles.data?.map((profile) => {
               const walletAvatarLink = resolveSchemeWithErrorHandler({
-                client: thirdwebClient,
+                client: props.client,
                 uri: profile.avatar,
               });
 

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

@@ -92,7 +92,10 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                 <p className="font-bold">Seller</p>
               </GridItem>
               <GridItem colSpan={9}>
-                <WalletAddress address={renderData.creatorAddress} />
+                <WalletAddress
+                  address={renderData.creatorAddress}
+                  client={contract.client}
+                />
               </GridItem>
               <GridItem colSpan={3}>
                 <p className="font-bold">Listing ID</p>

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

@@ -40,49 +40,6 @@ import { min } from "thirdweb/utils";
 import { ListingDrawer } from "./listing-drawer";
 import { LISTING_STATUS } from "./types";
 
-const tableColumns: Column<DirectListing | EnglishAuction>[] = [
-  {
-    Header: "Listing Id",
-    accessor: (row) => row.id.toString(),
-  },
-  {
-    Header: "Media",
-    accessor: (row) => row.asset.metadata,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: (cell: any) => <MediaCell cell={cell} />,
-  },
-  {
-    Header: "Name",
-    accessor: (row) => row.asset.metadata.name ?? "N/A",
-  },
-  {
-    Header: "Creator",
-    accessor: (row) => row.creatorAddress,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: ({ cell }: { cell: Cell<any, string> }) => (
-      <WalletAddress address={cell.value} />
-    ),
-  },
-  {
-    Header: "Price",
-    accessor: (row) =>
-      (row as DirectListing)?.currencyValuePerToken ||
-      (row as EnglishAuction)?.buyoutCurrencyValue,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: ({ cell }: { cell: Cell<any, any> }) => {
-      return (
-        <p className="whitespace-nowrap text-muted-foreground">
-          {cell.value.displayValue} {cell.value.symbol}
-        </p>
-      );
-    },
-  },
-  {
-    Header: "Status",
-    accessor: (row) => LISTING_STATUS[row.status],
-  },
-];
-
 interface MarketplaceTableProps {
   contract: ThirdwebContract;
   getAllQueryResult: UseQueryResult<DirectListing[] | EnglishAuction[]>;
@@ -132,6 +89,51 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
     return getValidQueryResult?.data || prevData;
   }, [getAllQueryResult, getValidQueryResult, listingsToShow, prevData]);
 
+  const tableColumns: Column<DirectListing | EnglishAuction>[] = useMemo(() => {
+    return [
+      {
+        Header: "Listing Id",
+        accessor: (row) => row.id.toString(),
+      },
+      {
+        Header: "Media",
+        accessor: (row) => row.asset.metadata,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: (cell: any) => <MediaCell cell={cell} />,
+      },
+      {
+        Header: "Name",
+        accessor: (row) => row.asset.metadata.name ?? "N/A",
+      },
+      {
+        Header: "Creator",
+        accessor: (row) => row.creatorAddress,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: ({ cell }: { cell: Cell<any, string> }) => (
+          <WalletAddress address={cell.value} client={contract.client} />
+        ),
+      },
+      {
+        Header: "Price",
+        accessor: (row) =>
+          (row as DirectListing)?.currencyValuePerToken ||
+          (row as EnglishAuction)?.buyoutCurrencyValue,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: ({ cell }: { cell: Cell<any, any> }) => {
+          return (
+            <p className="whitespace-nowrap text-muted-foreground">
+              {cell.value.displayValue} {cell.value.symbol}
+            </p>
+          );
+        },
+      },
+      {
+        Header: "Status",
+        accessor: (row) => LISTING_STATUS[row.status],
+      },
+    ];
+  }, [contract.client]);
+
   const {
     getTableProps,
     getTableBodyProps,

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

@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react";
 import { formatDistance } from "date-fns/formatDistance";
 import { useAllChainsData } from "hooks/chains/allChains";
+import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import { Card, Heading, Text } from "tw-components";
 
@@ -16,11 +17,13 @@ export type AccountSignerType = {
 interface AccountSignerProps {
   item: AccountSignerType;
   contractChainId: number;
+  client: ThirdwebClient;
 }
 
 export const AccountSigner: React.FC<AccountSignerProps> = ({
   item,
   contractChainId,
+  client,
 }) => {
   const address = useActiveAccount()?.address;
   const { idToChain } = useAllChainsData();
@@ -43,7 +46,11 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
             flexDir={{ base: "column", lg: "row" }}
           >
             <Heading size="label.lg">
-              <WalletAddress shortenAddress={isMobile} address={signer} />
+              <WalletAddress
+                shortenAddress={isMobile}
+                address={signer}
+                client={client}
+              />
             </Heading>
             <div className="flex flex-row gap-2">
               {isAdmin ? <Badge>Admin Key</Badge> : <Badge>Scoped key</Badge>}

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

@@ -40,6 +40,7 @@ export const AccountSigners: React.FC<AccountSignersProps> = ({ contract }) => {
           <AccountSigner
             key={item.signer}
             item={item}
+            client={contract.client}
             contractChainId={contract.chain.id}
           />
         ))}

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

@@ -94,6 +94,7 @@ function BatchMetadataModule(props: ModuleInstanceProps) {
       uploadMetadata={uploadMetadata}
       isOwnerAccount={!!ownerAccount}
       contractChainId={contract.chain.id}
+      client={contract.client}
     />
   );
 }

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

@@ -271,6 +271,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
   return (
     <ClaimableModuleUI
       {...props}
+      client={props.contract.client}
       primarySaleRecipientSection={{
         data: primarySaleRecipientQuery.data
           ? { primarySaleRecipient: primarySaleRecipientQuery.data }

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

@@ -177,6 +177,7 @@ function MintableModule(props: ModuleInstanceProps) {
       name={props.contractInfo.name}
       isBatchMetadataInstalled={isBatchMetadataInstalled}
       contractChainId={contract.chain.id}
+      client={contract.client}
     />
   );
 }

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

@@ -73,6 +73,7 @@ function OpenEditionMetadataModule(props: ModuleInstanceProps) {
       setSharedMetadata={setSharedMetadata}
       isOwnerAccount={!!props.ownerAccount}
       contractChainId={props.contract.chain.id}
+      client={props.contract.client}
     />
   );
 }

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

@@ -150,6 +150,7 @@ function RoyaltyModule(props: ModuleInstanceProps) {
       setRoyaltyInfoForToken={setRoyaltyInfoForToken}
       isOwnerAccount={!!ownerAccount}
       contractChainId={props.contract.chain.id}
+      client={props.contract.client}
     />
   );
 }