thirdweb-dev · graphite-app · May 30, 2025 · May 30, 2025
@@ -198,6 +198,7 @@ export const CustomConnectWallet = (props: {
         open={isNetworkConfigModalOpen}
         onOpenChange={setIsNetworkConfigModalOpen}
         editChain={editChain}
+        client={client}
       />
     </>
   );

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

@@ -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"

@@ -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",

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

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

@@ -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;

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

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

@@ -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),

@@ -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),
           ),

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

@@ -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({

@@ -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 })

@@ -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:

@@ -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">

@@ -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} />
         ),
       },
       {

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

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

@@ -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;
       }

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

@@ -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 } =

@@ -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 })