Dashboard: Reduce useThirdwebClient hook usage

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}
     />
   );
 }

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

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

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

@@ -87,6 +87,7 @@ function Component() {
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
             uploadMetadata={uploadMetadataStub}
+            client={storybookThirdwebClient}
             uninstallButton={{
               onClick: async () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,

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

@@ -147,6 +147,7 @@ function Component() {
         </div>
 
         <ClaimableModuleUI
+          client={storybookThirdwebClient}
           isLoggedIn={true}
           contractInfo={contractInfo}
           moduleAddress="0x0000000000000000000000000000000000000000"

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

@@ -106,6 +106,7 @@ function Component() {
 
         <BadgeContainer label="Empty Primary Sale Recipient">
           <MintableModuleUI
+            client={storybookThirdwebClient}
             isLoggedIn={true}
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
@@ -126,6 +127,7 @@ function Component() {
 
         <BadgeContainer label="Filled Primary Sale Recipient">
           <MintableModuleUI
+            client={storybookThirdwebClient}
             isLoggedIn={true}
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
@@ -146,6 +148,7 @@ function Component() {
 
         <BadgeContainer label="Pending">
           <MintableModuleUI
+            client={storybookThirdwebClient}
             isLoggedIn={true}
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"

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

@@ -2,7 +2,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { BadgeContainer } from "stories/utils";
+import { BadgeContainer, storybookThirdwebClient } from "stories/utils";
 import { ThirdwebProvider } from "thirdweb/react";
 import { ModuleCardUI } from "./module-card";
 
@@ -64,18 +64,20 @@ function Component() {
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
+            client={storybookThirdwebClient}
+            isOwnerAccount={isOwner}
             uninstallButton={{
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
-            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
         <BadgeContainer label="Update Button (disabled), No Children">
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
+            client={storybookThirdwebClient}
             uninstallButton={{
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
@@ -93,6 +95,7 @@ function Component() {
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
+            client={storybookThirdwebClient}
             uninstallButton={{
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,

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

@@ -22,6 +22,7 @@ import { Suspense, useEffect, useState } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import { toast } from "sonner";
 import {
+  type ThirdwebClient,
   type ThirdwebContract,
   getContract,
   sendTransaction,
@@ -180,6 +181,7 @@ export function ModuleCard(props: ModuleCardProps) {
 
 export type ModuleCardUIProps = {
   children?: React.ReactNode;
+  client: ThirdwebClient;
   contractInfo: {
     name: string;
     description?: string;
@@ -249,7 +251,10 @@ export function ModuleCardUI(props: ModuleCardUIProps) {
                         <p className="text-muted-foreground text-sm">
                           Published By
                         </p>
-                        <WalletAddress address={props.contractInfo.publisher} />
+                        <WalletAddress
+                          address={props.contractInfo.publisher}
+                          client={props.client}
+                        />
                       </div>
                     )}
 

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

@@ -14,7 +14,7 @@ const OpenEditionMetadataModule = lazy(() => import("./OpenEditionMetadata"));
 
 export type ModuleInstanceProps = Omit<
   ModuleCardUIProps,
-  "children" | "updateButton" | "isOwnerAccount"
+  "children" | "updateButton" | "isOwnerAccount" | "client"
 > & {
   contract: ThirdwebContract;
   ownerAccount: Account | undefined;
@@ -52,5 +52,11 @@ export function ModuleInstance(props: ModuleInstanceProps) {
     return <OpenEditionMetadataModule {...props} />;
   }
 
-  return <ModuleCardUI {...props} isOwnerAccount={!!props.ownerAccount} />;
+  return (
+    <ModuleCardUI
+      {...props}
+      isOwnerAccount={!!props.ownerAccount}
+      client={props.contract.client}
+    />
+  );
 }

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

@@ -84,6 +84,7 @@ function Component() {
               isPending: removeMutation.isPending,
             }}
             isOwnerAccount={isOwner}
+            client={storybookThirdwebClient}
             contractChainId={1}
             isLoggedIn={true}
           />