Version Packages (#7231)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/dashboard/src/@/api/analytics.ts

@@ -426,7 +426,7 @@ export async function getUniversalBridgeWalletUsage(args: {
     console.error(
       `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
     );
-    return null;
+    return [];
   }
 
   const json = await res.json();

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -3,10 +3,10 @@
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { useCallback, useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { ChainIconClient } from "../../../components/icons/ChainIcon";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
   return chainName.replace("Mainnet", "");

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -1,3 +1,5 @@
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTokensData } from "hooks/tokens/tokens";
 import { useCallback, useMemo } from "react";
 import {
   NATIVE_TOKEN_ADDRESS,
@@ -5,8 +7,6 @@ import {
   getAddress,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
-import { useTokensData } from "../../../hooks/tokens/tokens";
 import { replaceIpfsUrl } from "../../../lib/sdk";
 import { fallbackChainIcon } from "../../../utils/chain-icons";
 import type { TokenMetadata } from "../../api/universal-bridge/tokens";

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -15,14 +15,14 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { formatDate } from "date-fns";
-import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { cn } from "@/lib/utils";
 import {
   EmptyChartState,
   LoadingChartState,
-} from "../../../../components/analytics/empty-chart-state";
-import { cn } from "../../../lib/utils";
+} from "components/analytics/empty-chart-state";
+import { formatDate } from "date-fns";
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   header?: {

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -17,13 +17,13 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { formatDate } from "date-fns";
-import { useMemo } from "react";
+import { cn } from "@/lib/utils";
 import {
   EmptyChartState,
   LoadingChartState,
-} from "../../../../components/analytics/empty-chart-state";
-import { cn } from "../../../lib/utils";
+} from "components/analytics/empty-chart-state";
+import { formatDate } from "date-fns";
+import { useMemo } from "react";
 
 type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   // metadata

apps/dashboard/src/@/components/blocks/dismissible-alert.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { useLocalStorage } from "hooks/useLocalStorage";
 import { XIcon } from "lucide-react";
-import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { Button } from "../ui/button";
 
 export function DismissibleAlert(props: {

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -4,13 +4,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { RenewSubscriptionButton } from "components/settings/Account/Billing/renew-subscription/renew-subscription-button";
+import { useTrack } from "hooks/analytics/useTrack";
 import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
+import { remainingDays } from "utils/date-utils";
 import { TEAM_PLANS } from "utils/pricing";
-import { RenewSubscriptionButton } from "../../../components/settings/Account/Billing/renew-subscription/renew-subscription-button";
-import { useTrack } from "../../../hooks/analytics/useTrack";
-import { remainingDays } from "../../../utils/date-utils";
 import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";
 

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/@/components/ui/NavLink.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useTrack } from "hooks/analytics/useTrack";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useTrack } from "../../../hooks/analytics/useTrack";
 
 export type NavButtonProps = {
   className?: string;

apps/dashboard/src/@/components/ui/code/code.server.tsx

@@ -6,13 +6,17 @@ export type CodeProps = {
   code: string;
   lang: BundledLanguage;
   className?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeServer: React.FC<CodeProps> = async ({
   code,
   lang,
   className,
+  ignoreFormattingErrors,
 }) => {
-  const { html, formattedCode } = await getCodeHtml(code, lang);
+  const { html, formattedCode } = await getCodeHtml(code, lang, {
+    ignoreFormattingErrors,
+  });
   return <RenderCode code={formattedCode} html={html} className={className} />;
 };

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

@@ -1,51 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { useActiveAccount } from "thirdweb/react";
-import type { GetAuthTokenResponse } from "../../app/(app)/api/auth/get-auth-token/route";
-import { LAST_USED_TEAM_ID } from "../../constants/cookies";
-import { getCookie } from "../../lib/cookie";
-import { getClientThirdwebClient } from "./thirdweb-client.client";
-
-// returns a thirdweb client with optional JWT passed i
-
-export function useThirdwebClient(jwt?: string) {
-  const account = useActiveAccount();
-  const lastUsedTeamId = getCookie(LAST_USED_TEAM_ID);
-
-  const query = useQuery({
-    queryKey: ["jwt", account?.address],
-    // only enable the query if there is an account and no JWT is passed in directly
-    enabled: !!account && !jwt,
-    retry: false,
-    queryFn: async () => {
-      if (!account) {
-        throw new Error("No account");
-      }
-      const res = await fetch(
-        `/api/auth/get-auth-token?address=${account.address}`,
-      );
-      if (!res.ok) {
-        throw new Error("Failed to get auth token");
-      }
-      const json = (await res.json()) as GetAuthTokenResponse;
-      if (!json.jwt) {
-        throw new Error("No JWT in response");
-      }
-      return json.jwt;
-    },
-  });
-
-  return useMemo(
-    // prefer jwt from props over the one from the token query if it exists
-    () =>
-      getClientThirdwebClient({
-        jwt: jwt || query.data,
-        teamId: lastUsedTeamId,
-      }),
-    [jwt, query.data, lastUsedTeamId],
-  );
-}
-
-/**
- * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
- */

apps/dashboard/src/@/lib/time.ts

@@ -1,9 +1,9 @@
-import { differenceInCalendarDays } from "date-fns";
 import {
   type DurationId,
   type Range,
   getLastNDaysRange,
-} from "../../components/analytics/date-range-selector";
+} from "components/analytics/date-range-selector";
+import { differenceInCalendarDays } from "date-fns";
 
 export function normalizeTime(date: Date) {
   const newDate = new Date(date);

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

@@ -1,18 +1,19 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
+import { LazyConfigureNetworkModal } from "components/configure-networks/LazyConfigureNetworkModal";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   ConnectButton,
   type NetworkSelectorProps,
@@ -21,8 +22,6 @@ import {
 } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../../../app/(app)/(dashboard)/(chain)/components/client/star-button";
 import { doLogout } from "../../../../app/(app)/login/auth-actions";
-import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
-import { useAllChainsData } from "../../../../hooks/chains/allChains";
 import {
   type StoredChain,
   addRecentlyUsedChainId,
@@ -36,9 +35,11 @@ export const CustomConnectWallet = (props: {
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
   chain?: Chain;
+  client: ThirdwebClient;
   isLoggedIn: boolean;
 }) => {
-  const thirdwebClient = useThirdwebClient();
+  const client = props.client;
+
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
 
@@ -140,7 +141,7 @@ export const CustomConnectWallet = (props: {
     <>
       <ConnectButton
         theme={getSDKTheme(t)}
-        client={thirdwebClient}
+        client={client}
         connectModal={{
           privacyPolicyUrl: "/privacy-policy",
           termsOfServiceUrl: "/terms",
@@ -175,7 +176,7 @@ export const CustomConnectWallet = (props: {
             renderChain(props) {
               return (
                 <CustomChainRenderer
-                  client={thirdwebClient}
+                  client={client}
                   {...props}
                   openEditChainModal={(c) => {
                     setIsNetworkConfigModalOpen(true);
@@ -197,6 +198,7 @@ export const CustomConnectWallet = (props: {
         open={isNetworkConfigModalOpen}
         onOpenChange={setIsNetworkConfigModalOpen}
         editChain={editChain}
+        client={client}
       />
     </>
   );
@@ -276,12 +278,11 @@ function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
   const { connect } = useConnectModal();
   const { theme } = useTheme();
-  const thirdwebClient = useThirdwebClient();
 
   return useCallback(
-    (options?: { chain?: Chain }) => {
+    (options: { chain?: Chain; client: ThirdwebClient }) => {
       return connect({
-        client: thirdwebClient,
+        client: options.client,
         appMetadata: {
           name: "thirdweb",
           logoUrl: "https://thirdweb.com/favicon.ico",
@@ -299,7 +300,7 @@ export function useCustomConnectModal() {
         theme: getSDKTheme(theme === "light" ? "light" : "dark"),
       });
     },
-    [connect, theme, thirdwebClient],
+    [connect, theme],
   );
 }
 

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx

@@ -1,18 +1,17 @@
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useMutation } from "@tanstack/react-query";
+import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
 
 type DashboardUploadOptions = {
   uploadWithoutDirectory?: boolean;
   metadata?: Record<string, string>;
+  client: ThirdwebClient;
 };
 
-export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
-  const thirdwebClient = useThirdwebClient();
+export function useDashboardStorageUpload(options: DashboardUploadOptions) {
   return useMutation({
     mutationFn: async (files: Array<File | string>): Promise<string[]> => {
       const uris = await upload({
-        client: thirdwebClient,
         files,
         ...options,
       });

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx

@@ -1,8 +1,8 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
-import { serverThirdwebClient } from "../../../../../../../@/constants/thirdweb-client.server";
 
 type RouteListCardProps = {
   originChainId: number;

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
@@ -407,6 +407,7 @@ function SendFundsToFaucetModalContent(props: {
             isLoggedIn={props.isLoggedIn}
             connectButtonClassName="!w-full"
             detailsButtonClassName="!w-full"
+            client={props.client}
           />
         )}
 

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/client/add-chain-to-wallet.tsx

@@ -6,7 +6,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useCustomConnectModal } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   useActiveAccount,
   useActiveWalletChain,
@@ -16,6 +16,7 @@ import { useDebounce } from "use-debounce";
 
 type AddChainToWalletProps = {
   chain: Chain;
+  client: ThirdwebClient;
 };
 
 export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
@@ -49,7 +50,10 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
         onClick={() => {
           // Connect directly to this chain
           if (!account) {
-            return customConnectModal({ chain: props.chain });
+            return customConnectModal({
+              chain: props.chain,
+              client: props.client,
+            });
           }
 
           // switch to this chain

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)/components/server/chain-header.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { mapV4ChainToV5Chain } from "../../../../../../../../contexts/map-chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -10,6 +11,7 @@ type ChainHeaderProps = {
   headerImageUrl?: string;
   logoUrl?: string;
   chain: ChainMetadata;
+  client: ThirdwebClient;
 };
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
@@ -51,6 +53,7 @@ export function ChainHeader(props: ChainHeaderProps) {
           {/* Desktop only */}
           <div className="hidden flex-row gap-2 lg:flex">
             <AddChainToWallet
+              client={props.client}
               chain={
                 // Do not include chain overrides for chain pages
                 // eslint-disable-next-line no-restricted-syntax

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

@@ -164,6 +164,7 @@ The following is the user's message:
             headerImageUrl={chainMetadata?.headerImgUrl}
             logoUrl={chain.icon?.url}
             chain={chain}
+            client={client}
           />
 
           <div className="h-4 md:h-8" />
@@ -210,6 +211,7 @@ The following is the user's message:
             <div className="w-full sm:hidden">
               <div className="grid grid-cols-2 gap-2">
                 <AddChainToWallet
+                  client={client}
                   chain={
                     // Do not include chain overrides for chain pages
                     // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx

@@ -1,7 +1,7 @@
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { ImageResponse } from "next/og";
 import { download } from "thirdweb/storage";
 import { fetchChain } from "utils/fetchChain";
-import { serverThirdwebClient } from "../../../../../../@/constants/thirdweb-client.server";
 
 // Route segment config
 export const runtime = "edge";

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

@@ -1,3 +1,4 @@
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { getChain, getChainMetadata } from "../../utils";
@@ -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]/(marketplace)/components/cancel-tab.tsx

@@ -30,6 +30,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   return (
     <div className="flex flex-col gap-3 pt-3">
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         txChainID={contract.chain.id}
         transactionCount={1}

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

@@ -485,6 +485,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                 >
                   <FormLabel>Contract address</FormLabel>
                   <SolidityInput
+                    client={contract.client}
                     solidityType="address"
                     formContext={form}
                     {...form.register("selected.contractAddress", {
@@ -558,6 +559,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                           width="140px"
                           height="140px"
                           requireInteraction
+                          client={contract.client}
                         />
                       </Box>
                     </Tooltip>
@@ -658,6 +660,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           isPending={isFormLoading}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.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"
@@ -92,7 +93,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} client={contract.client} />,
+      },
+      {
+        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,
@@ -235,7 +237,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                   </Th>
                 ))}
                 {/* // Need to add an empty header for the drawer button */}
-                <Th border="none" />
+                <Th border="none" key="drawer" />
               </Tr>
             ))}
           </Thead>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.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/claim-conditions/claim-conditions-form/index.tsx

@@ -528,6 +528,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     form.setValue(`phases.${index}.snapshot`, snapshot)
                   }
                   isDisabled={!canEditForm}
+                  client={contract.client}
                 />
 
                 <ClaimsConditionFormContext.Provider
@@ -658,6 +659,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   hasRemovedPhases ||
                   !isMultiPhase ? (
                     <TransactionButton
+                      client={contract.client}
                       isLoggedIn={isLoggedIn}
                       txChainID={contract.chain.id}
                       transactionCount={1}

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

@@ -94,6 +94,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
   return (
     <AdminOnly contract={contract} fallback={<div className="pb-5" />}>
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         transactionCount={1}
         type="button"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.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]/_layout/ConfigureCustomChain.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/contract-metadata.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]/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]/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,6 +14,7 @@ interface DepositNativeProps {
   symbol: string;
   chain: StoredChain;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }
 
 export const DepositNative: React.FC<DepositNativeProps> = ({
@@ -22,8 +22,8 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
   symbol,
   chain,
   isLoggedIn,
+  client,
 }) => {
-  const client = useThirdwebClient();
   const { mutate: transfer, isPending } = useSendAndConfirmTransaction();
   const [amount, setAmount] = useState("");
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -48,6 +48,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
         value={amount}
       />
       <TransactionButton
+        client={client}
         isLoggedIn={isLoggedIn}
         txChainID={v5Chain.id}
         transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.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]/accounts/components/create-account-button.tsx

@@ -61,6 +61,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
 
   return (
     <TransactionButton
+      client={contract.client}
       isLoggedIn={isLoggedIn}
       txChainID={contract.chain.id}
       onClick={() => {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.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]/layout.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]/modules/components/BatchMetadata.tsx

@@ -23,7 +23,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { sendAndConfirmTransaction } from "thirdweb";
+import { type ThirdwebClient, sendAndConfirmTransaction } from "thirdweb";
 import { BatchMetadataERC721, BatchMetadataERC1155 } from "thirdweb/modules";
 import { parseAttributes } from "utils/parseAttributes";
 import { z } from "zod";
@@ -94,6 +94,7 @@ function BatchMetadataModule(props: ModuleInstanceProps) {
       uploadMetadata={uploadMetadata}
       isOwnerAccount={!!ownerAccount}
       contractChainId={contract.chain.id}
+      client={contract.client}
     />
   );
 }
@@ -104,6 +105,7 @@ export function BatchMetadataModuleUI(
     uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
     contractChainId: number;
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -121,6 +123,7 @@ export function BatchMetadataModuleUI(
                   isLoggedIn={props.isLoggedIn}
                   uploadMetadata={props.uploadMetadata}
                   contractChainId={props.contractChainId}
+                  client={props.client}
                 />
               )}
               {!props.isOwnerAccount && (
@@ -163,6 +166,7 @@ function UploadMetadataNFTSection(props: {
   uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<UploadMetadataFormValues>({
     resolver: zodResolver(uploadMetadataFormSchema),
@@ -261,6 +265,7 @@ function UploadMetadataNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               isLoggedIn={props.isLoggedIn}
               size="sm"
               className="min-w-24"

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

@@ -41,6 +41,7 @@ import { useFieldArray, useForm } from "react-hook-form";
 import {
   NATIVE_TOKEN_ADDRESS,
   type PreparedTransaction,
+  type ThirdwebClient,
   ZERO_ADDRESS,
   getContract,
   sendAndConfirmTransaction,
@@ -271,6 +272,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
   return (
     <ClaimableModuleUI
       {...props}
+      client={props.contract.client}
       primarySaleRecipientSection={{
         data: primarySaleRecipientQuery.data
           ? { primarySaleRecipient: primarySaleRecipientQuery.data }
@@ -342,6 +344,7 @@ export function ClaimableModuleUI(
       isLoading: boolean;
     };
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -357,6 +360,7 @@ export function ClaimableModuleUI(
             </AccordionTrigger>
             <AccordionContent className="px-1">
               <MintNFTSection
+                client={props.client}
                 mint={props.mintSection.mint}
                 name={props.name}
                 contractChainId={props.contractChainId}
@@ -389,6 +393,7 @@ export function ClaimableModuleUI(
               {props.name !== "ClaimableERC1155" || props.isValidTokenId ? (
                 props.claimConditionSection.data ? (
                   <ClaimConditionSection
+                    client={props.client}
                     isLoggedIn={props.isLoggedIn}
                     isOwnerAccount={props.isOwnerAccount}
                     claimCondition={
@@ -423,6 +428,7 @@ export function ClaimableModuleUI(
             <AccordionContent className="px-1">
               {props.primarySaleRecipientSection.data ? (
                 <PrimarySaleRecipientSection
+                  client={props.client}
                   isLoggedIn={props.isLoggedIn}
                   isOwnerAccount={props.isOwnerAccount}
                   primarySaleRecipient={
@@ -489,6 +495,7 @@ function ClaimConditionSection(props: {
   tokenId: string;
   noClaimConditionSet: boolean;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const { idToChain } = useAllChainsData();
   const chain = idToChain.get(props.chainId);
@@ -740,6 +747,7 @@ function ClaimConditionSection(props: {
 
               <div className="flex justify-end">
                 <TransactionButton
+                  client={props.client}
                   isLoggedIn={props.isLoggedIn}
                   size="sm"
                   className="min-w-24"
@@ -774,6 +782,7 @@ function PrimarySaleRecipientSection(props: {
   isOwnerAccount: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<PrimarySaleRecipientFormValues>({
     resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -822,6 +831,7 @@ function PrimarySaleRecipientSection(props: {
 
         <div className="flex justify-end">
           <TransactionButton
+            client={props.client}
             isLoggedIn={props.isLoggedIn}
             size="sm"
             className="min-w-24 gap-2"
@@ -858,6 +868,7 @@ function MintNFTSection(props: {
   name: string;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<MintFormValues>({
     resolver: zodResolver(mintFormSchema),
@@ -939,6 +950,7 @@ function MintNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               size="sm"
               className="min-w-24 gap-2"
               disabled={mintMutation.isPending}

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

@@ -27,7 +27,11 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { type PreparedTransaction, sendAndConfirmTransaction } from "thirdweb";
+import {
+  type PreparedTransaction,
+  type ThirdwebClient,
+  sendAndConfirmTransaction,
+} from "thirdweb";
 import {
   MintableERC20,
   MintableERC721,
@@ -177,6 +181,7 @@ function MintableModule(props: ModuleInstanceProps) {
       name={props.contractInfo.name}
       isBatchMetadataInstalled={isBatchMetadataInstalled}
       contractChainId={contract.chain.id}
+      client={contract.client}
     />
   );
 }
@@ -192,6 +197,7 @@ export function MintableModuleUI(
     isBatchMetadataInstalled: boolean;
     contractChainId: number;
     isLoggedIn: boolean;
+    client: ThirdwebClient;
   },
 ) {
   return (
@@ -215,6 +221,7 @@ export function MintableModuleUI(
                     name={props.name}
                     isBatchMetadataInstalled={props.isBatchMetadataInstalled}
                     contractChainId={props.contractChainId}
+                    client={props.client}
                   />
                 )}
                 {!props.isOwnerAccount && (
@@ -242,6 +249,7 @@ export function MintableModuleUI(
                   update={props.updatePrimaryRecipient}
                   contractChainId={props.contractChainId}
                   isLoggedIn={props.isLoggedIn}
+                  client={props.client}
                 />
               </AccordionContent>
             </AccordionItem>
@@ -262,6 +270,7 @@ function PrimarySalesSection(props: {
   isOwnerAccount: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<UpdateFormValues>({
     resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -311,6 +320,7 @@ function PrimarySalesSection(props: {
 
         <div className="mt-4 flex justify-end">
           <TransactionButton
+            client={props.client}
             isLoggedIn={props.isLoggedIn}
             size="sm"
             className="min-w-24"
@@ -340,6 +350,7 @@ function MintNFTSection(props: {
   isBatchMetadataInstalled: boolean;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<MintFormValues>({
     resolver: zodResolver(mintFormSchema),
@@ -523,6 +534,7 @@ function MintNFTSection(props: {
 
           <div className="flex justify-end">
             <TransactionButton
+              client={props.client}
               isLoggedIn={props.isLoggedIn}
               size="sm"
               className="min-w-24"

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
@@ -71,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(() => {
@@ -90,6 +89,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
   const allVersions = useAllVersions(
     watch("publisherAddress"),
     watch("moduleContract"),
+    contract.client,
   );
 
   const installMutation = useMutation({
@@ -182,7 +182,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 +231,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         moduleInfo: {
           bytecodeUri: selectedModule.metadata.bytecodeUri,
         },
-        client,
+        client: contract.client,
       });
     },
     retry: false,
@@ -255,6 +255,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
   const moduleInstallParams = useModuleInstallParams({
     module: selectedModuleMeta,
     isQueryEnabled: !!selectedModule && !!isModuleCompatibleQuery.data,
+    client: contract.client,
   });
 
   return (
@@ -387,6 +388,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         {/* Submit */}
         <div className="flex justify-end">
           <TransactionButton
+            client={contract.client}
             isLoggedIn={props.isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

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

@@ -23,7 +23,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { sendAndConfirmTransaction } from "thirdweb";
+import { type ThirdwebClient, sendAndConfirmTransaction } from "thirdweb";
 import { OpenEditionMetadataERC721 } from "thirdweb/modules";
 import { z } from "zod";
 import { ModuleCardUI, type ModuleCardUIProps } from "./module-card";
@@ -73,6 +73,7 @@ function OpenEditionMetadataModule(props: ModuleInstanceProps) {
       setSharedMetadata={setSharedMetadata}
       isOwnerAccount={!!props.ownerAccount}
       contractChainId={props.contract.chain.id}
+      client={props.contract.client}
     />
   );
 }
@@ -99,6 +100,7 @@ export function OpenEditionMetadataModuleUI(
                 setSharedMetadata={props.setSharedMetadata}
                 contractChainId={props.contractChainId}
                 isLoggedIn={props.isLoggedIn}
+                client={props.client}
               />
             )}
             {!props.isOwnerAccount && (
@@ -121,6 +123,7 @@ function SetSharedMetadataSection(props: {
   setSharedMetadata: (values: SetSharedMetadataFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<SetSharedMetadataFormValues>({
     resolver: zodResolver(setSharedMetadataFormSchema),
@@ -212,6 +215,7 @@ function SetSharedMetadataSection(props: {
           <div className="flex justify-end">
             <TransactionButton
               size="sm"
+              client={props.client}
               className="min-w-24"
               disabled={setSharedMetadataMutation.isPending}
               type="submit"

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

@@ -23,7 +23,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import { sendAndConfirmTransaction } from "thirdweb";
+import { type ThirdwebClient, sendAndConfirmTransaction } from "thirdweb";
 import { RoyaltyERC721, RoyaltyERC1155 } from "thirdweb/modules";
 import { useReadContract } from "thirdweb/react";
 import { z } from "zod";
@@ -150,6 +150,7 @@ function RoyaltyModule(props: ModuleInstanceProps) {
       setRoyaltyInfoForToken={setRoyaltyInfoForToken}
       isOwnerAccount={!!ownerAccount}
       contractChainId={props.contract.chain.id}
+      client={props.contract.client}
     />
   );
 }
@@ -186,6 +187,7 @@ export function RoyaltyModuleUI(
                   setRoyaltyInfoForToken={props.setRoyaltyInfoForToken}
                   contractChainId={props.contractChainId}
                   isLoggedIn={props.isLoggedIn}
+                  client={props.client}
                 />
               ) : (
                 <Alert variant="info">
@@ -209,6 +211,7 @@ export function RoyaltyModuleUI(
                   defaultRoyaltyInfo={props.defaultRoyaltyInfo}
                   contractChainId={props.contractChainId}
                   isLoggedIn={props.isLoggedIn}
+                  client={props.client}
                 />
               ) : (
                 <Alert variant="info">
@@ -232,6 +235,7 @@ export function RoyaltyModuleUI(
                   transferValidator={props.transferValidator}
                   contractChainId={props.contractChainId}
                   isLoggedIn={props.isLoggedIn}
+                  client={props.client}
                 />
               ) : (
                 <Alert variant="info">
@@ -269,6 +273,7 @@ function RoyaltyInfoPerTokenSection(props: {
   setRoyaltyInfoForToken: (values: RoyaltyInfoFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<RoyaltyInfoFormValues>({
     resolver: zodResolver(royaltyInfoFormSchema),
@@ -348,6 +353,7 @@ function RoyaltyInfoPerTokenSection(props: {
 
           <div className="mt-4 flex justify-end">
             <TransactionButton
+              client={props.client}
               isLoggedIn={props.isLoggedIn}
               size="sm"
               className="min-w-24"
@@ -383,6 +389,7 @@ function DefaultRoyaltyInfoSection(props: {
   update: (values: DefaultRoyaltyFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const [defaultRoyaltyRecipient, defaultRoyaltyPercentage] =
     props.defaultRoyaltyInfo || [];
@@ -452,6 +459,7 @@ function DefaultRoyaltyInfoSection(props: {
 
           <div className="mt-4 flex justify-end">
             <TransactionButton
+              client={props.client}
               size="sm"
               className="min-w-24"
               disabled={updateMutation.isPending}
@@ -483,6 +491,7 @@ function TransferValidatorSection(props: {
   update: (values: TransferValidatorFormValues) => Promise<void>;
   contractChainId: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const form = useForm<TransferValidatorFormValues>({
     resolver: zodResolver(transferValidatorFormSchema),
@@ -530,6 +539,7 @@ function TransferValidatorSection(props: {
 
         <div className="mt-4 flex justify-end">
           <TransactionButton
+            client={props.client}
             isLoggedIn={props.isLoggedIn}
             size="sm"
             className="min-w-24 gap-2"

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}
     />
   );
 }
@@ -184,6 +185,7 @@ export function TransferableModuleUI(
           updateButton={() => {
             return (
               <TransactionButton
+                client={props.client}
                 size="sm"
                 className="min-w-24 gap-2"
                 type="submit"

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/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]/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,11 +64,12 @@ function Component() {
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
+            client={storybookThirdwebClient}
+            isOwnerAccount={isOwner}
             uninstallButton={{
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
-            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
@@ -76,6 +77,7 @@ function Component() {
           <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,
@@ -160,6 +161,7 @@ export function ModuleCard(props: ModuleCardProps) {
               </Button>
 
               <TransactionButton
+                client={contract.client}
                 isLoggedIn={props.isLoggedIn}
                 txChainID={contract.chain.id}
                 transactionCount={1}
@@ -180,6 +182,7 @@ export function ModuleCard(props: ModuleCardProps) {
 
 export type ModuleCardUIProps = {
   children?: React.ReactNode;
+  client: ThirdwebClient;
   contractInfo: {
     name: string;
     description?: string;
@@ -249,7 +252,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}
           />

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

@@ -83,6 +83,7 @@ function Component() {
 
         <BadgeContainer label="Empty Transfer Validator & Default Royalty Info">
           <RoyaltyModuleUI
+            client={storybookThirdwebClient}
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
             isPending={false}
@@ -115,11 +116,13 @@ function Component() {
             isOwnerAccount={isOwner}
             contractChainId={1}
             isLoggedIn={true}
+            client={storybookThirdwebClient}
           />
         </BadgeContainer>
 
         <BadgeContainer label="Non-Empty Transfer Validator & Empty Default Royalty Info">
           <RoyaltyModuleUI
+            client={storybookThirdwebClient}
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
             isPending={false}
@@ -154,6 +157,7 @@ function Component() {
             isOwnerAccount={isOwner}
             contractChainId={1}
             isLoggedIn={true}
+            client={storybookThirdwebClient}
           />
         </BadgeContainer>
       </div>

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

@@ -79,6 +79,7 @@ function Component() {
         <BadgeContainer label="Empty AllowList, Not Restricted">
           <TransferableModuleUI
             contractInfo={contractInfo}
+            client={storybookThirdwebClient}
             moduleAddress="0x0000000000000000000000000000000000000000"
             isPending={false}
             isRestricted={false}
@@ -97,6 +98,7 @@ function Component() {
         <BadgeContainer label="Empty AllowList, Restricted">
           <TransferableModuleUI
             contractInfo={contractInfo}
+            client={storybookThirdwebClient}
             moduleAddress="0x0000000000000000000000000000000000000000"
             isPending={false}
             isRestricted={true}
@@ -126,6 +128,7 @@ function Component() {
             }}
             isOwnerAccount={isOwner}
             contractChainId={1}
+            client={storybookThirdwebClient}
             isLoggedIn={true}
           />
         </BadgeContainer>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.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 })
@@ -162,6 +163,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({
             more, please do it in multiple transactions.
           </p>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

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

@@ -130,6 +130,7 @@ const BurnTab: React.FC<BurnTabProps> = ({ contract, tokenId, isLoggedIn }) => {
             </Text>
           )}
           <TransactionButton
+            client={contract.client}
             transactionCount={1}
             isPending={isPending}
             disabled={checking1155 || checking721 || isPending || !account}

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

@@ -124,6 +124,7 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({
         </Flex>
 
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           transactionCount={1}

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

@@ -126,6 +126,7 @@ const MintSupplyTab: React.FC<MintSupplyTabProps> = ({
         />
 
         <TransactionButton
+          client={contract.client}
           txChainID={contract.chain.id}
           transactionCount={1}
           isPending={sendAndConfirmTx.isPending}

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

@@ -103,6 +103,7 @@ const TransferTab: React.FC<TransferTabProps> = ({
             <FormControl isRequired isInvalid={!!form.formState.errors.to}>
               <FormLabel>To Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 placeholder={ZERO_ADDRESS}
@@ -130,6 +131,7 @@ const TransferTab: React.FC<TransferTabProps> = ({
             )}
           </div>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.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:
@@ -407,6 +408,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           transactionCount={1}

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,
     {
@@ -129,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">
@@ -175,7 +176,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 (
@@ -225,6 +228,7 @@ function NFTDetailsTab(props: {
             <div>
               <p className="mb-1 text-muted-foreground text-sm">Owner</p>
               <WalletAddress
+                client={client}
                 address={nft.owner}
                 className="h-auto rounded-full border bg-card px-2 py-1 pr-4 text-foreground text-sm"
               />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx

@@ -68,6 +68,7 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
           </SheetHeader>
           <BatchLazyMint
             isLoggedIn={isLoggedIn}
+            client={contract.client}
             chainId={contract.chain.id}
             onSubmit={async ({ revealType, data }) => {
               // nice, we can set up everything the same for both the only thing that changes is the action string

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

@@ -107,6 +107,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
         </form>
         <div className="mt-4 flex justify-end">
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx

@@ -341,6 +341,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           transactionCount={1}

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

@@ -365,6 +365,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
         </Button>
         <TransactionButton
           txChainID={contract.chain.id}
+          client={contract.client}
           transactionCount={1}
           isPending={sendAndConfirmTx.isPending}
           form={MINT_FORM_ID}

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

@@ -153,6 +153,7 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
           </form>
           <div className="mt-4 flex justify-end">
             <TransactionButton
+              client={contract.client}
               isLoggedIn={isLoggedIn}
               txChainID={contract.chain.id}
               transactionCount={1}

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

@@ -290,6 +290,7 @@ export const SharedMetadataForm: React.FC<{
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           txChainID={contract.chain.id}
           transactionCount={1}
           isPending={sendAndConfirmTx.isPending}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.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} />
         ),
       },
       {
@@ -133,7 +133,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
         Header: "Owner",
         accessor: (row) => row.owner,
         Cell: (cell: CellProps<NFT, string>) => (
-          <WalletAddress address={cell.value} />
+          <WalletAddress address={cell.value} client={contract.client} />
         ),
       });
     }
@@ -153,7 +153,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
       });
     }
     return cols;
-  }, [isErc721, isErc1155]);
+  }, [isErc721, isErc1155, contract.client]);
 
   const [queryParams, setQueryParams] = useState({ count: 50, start: 0 });
 
@@ -278,7 +278,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                   </Th>
                 ))}
                 {/* Need to add an empty header for the drawer button */}
-                <Th border="none" />
+                <Th border="none" key="drawer" />
               </Tr>
             ))}
           </Thead>

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

@@ -7,7 +7,11 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ArrowRightIcon } from "lucide-react";
 import { useMemo } from "react";
-import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import {
+  type ThirdwebClient,
+  type ThirdwebContract,
+  ZERO_ADDRESS,
+} from "thirdweb";
 import {
   type DirectListing,
   type EnglishAuction,
@@ -120,6 +124,7 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
           chainSlug={chainSlug}
           contractAddress={contract.address}
           projectMeta={projectMeta}
+          client={contract.client}
         />
       </div>
     </div>
@@ -193,6 +198,7 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
       </div>
       <div className="p-6">
         <ListingCards
+          client={contract.client}
           listings={auctions}
           isPending={auctionsQuery.isPending}
           trackingCategory={trackingCategory}
@@ -293,6 +299,7 @@ interface ListingCardsProps {
   chainSlug: string;
   contractAddress: string;
   projectMeta: ProjectMeta | undefined;
+  client: ThirdwebClient;
 }
 const ListingCards: React.FC<ListingCardsProps> = ({
   listings,
@@ -302,6 +309,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
   chainSlug,
   contractAddress,
   projectMeta,
+  client,
 }) => {
   const contractLayout = buildContractPagePath({
     projectMeta,
@@ -336,6 +344,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
               render={(v) => {
                 return (
                   <NFTMediaWithEmptyState
+                    client={client}
                     metadata={v}
                     requireInteraction
                     width="100%"
@@ -394,6 +403,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
                   <WalletAddress
                     className="relative z-[1] self-start text-xs"
                     address={v}
+                    client={client}
                   />
                 </div>
               )}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.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/PermissionsTable.tsx

@@ -17,7 +17,11 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { getAllRoleMembers } from "contract-ui/hooks/permissions";
 import { ArrowRightIcon } from "lucide-react";
 import { useMemo } from "react";
-import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import {
+  type ThirdwebClient,
+  type ThirdwebContract,
+  ZERO_ADDRESS,
+} from "thirdweb";
 import { useReadContract } from "thirdweb/react";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
@@ -65,6 +69,7 @@ export function PermissionsTable(props: {
       isPending={allRoleMembers.isPending}
       viewMoreLink={permissionsHref}
       trackingCategory={props.trackingCategory}
+      client={props.contract.client}
     />
   );
 }
@@ -74,6 +79,7 @@ export function PermissionsTableUI(props: {
   trackingCategory: string;
   members: { member: string; roles: string[] }[];
   isPending: boolean;
+  client: ThirdwebClient;
 }) {
   return (
     <div className="rounded-lg border bg-card">
@@ -106,7 +112,7 @@ export function PermissionsTableUI(props: {
             {props.members.map((data) => (
               <TableRow key={data.member}>
                 <TableCell>
-                  <WalletAddress address={data.member} />
+                  <WalletAddress address={data.member} client={props.client} />
                 </TableCell>
                 <TableCell>
                   <div className="flex w-max flex-wrap gap-2">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by-ui.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.server.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]/permissions/components/index.tsx

@@ -127,6 +127,7 @@ export function Permissions({
           </Button>
           <TransactionButton
             isLoggedIn={isLoggedIn}
+            client={contract.client}
             txChainID={contract.chain.id}
             transactionCount={1}
             disabled={!form.formState.isDirty}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx

@@ -38,6 +38,7 @@ export const DelegateButton: React.FC<VoteButtonProps> = ({
   return (
     <ToolTipLabel label="You need to delegate tokens to this contract before you can make proposals and vote.">
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         txChainID={contract.chain.id}
         transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx

@@ -106,6 +106,7 @@ export const ProposalButton: React.FC<VoteButtonProps> = ({
             Cancel
           </Button>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx

@@ -137,6 +137,7 @@ export const Proposal: React.FC<IProposal> = ({
       tokensDelegatedQuery.data ? (
         <div className="mt-6 flex gap-2">
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             size="sm"
@@ -151,6 +152,7 @@ export const Proposal: React.FC<IProposal> = ({
             </div>
           </TransactionButton>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             size="sm"
@@ -166,6 +168,7 @@ export const Proposal: React.FC<IProposal> = ({
             </div>
           </TransactionButton>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             size="sm"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx

@@ -5,10 +5,12 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { cn } from "@/lib/utils";
 import { ChainIconClient } from "components/icons/ChainIcon";
+import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
 import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
+import { TelegramIcon } from "components/icons/brand-icons/TelegramIcon";
 import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
 import { XIcon as TwitterXIcon } from "components/icons/brand-icons/XIcon";
 import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
@@ -17,8 +19,6 @@ import Link from "next/link";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
-import { DiscordIcon } from "../../../../../../../../../components/icons/brand-icons/DiscordIcon";
-import { TelegramIcon } from "../../../../../../../../../components/icons/brand-icons/TelegramIcon";
 
 const platformToIcons: Record<string, React.FC<{ className?: string }>> = {
   twitter: TwitterXIcon,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx

@@ -19,7 +19,7 @@ import {
   ExternalLinkIcon,
 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { type ThirdwebContract, toTokens } from "thirdweb";
+import { type ThirdwebClient, type ThirdwebContract, toTokens } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
   type TokenTransfersData,
@@ -43,6 +43,7 @@ function RecentTransfersUI(props: {
   page: number;
   setPage: (page: number) => void;
   explorerUrl: string;
+  client: ThirdwebClient;
 }) {
   return (
     <div>
@@ -84,10 +85,16 @@ function RecentTransfersUI(props: {
                     }
                   >
                     <TableCell className="text-sm">
-                      <WalletAddress address={transfer.from_address} />
+                      <WalletAddress
+                        address={transfer.from_address}
+                        client={props.client}
+                      />
                     </TableCell>
                     <TableCell className="text-sm">
-                      <WalletAddress address={transfer.to_address} />
+                      <WalletAddress
+                        address={transfer.to_address}
+                        client={props.client}
+                      />
                     </TableCell>
                     <TableCell className="text-sm ">
                       <div className="flex items-center gap-1.5">
@@ -228,6 +235,7 @@ export function RecentTransfers(props: {
         data={tokenQuery.data ?? []}
         isPending={tokenQuery.isPending && !hasFetchedOnce}
         rowsPerPage={rowsPerPage}
+        client={props.clientContract.client}
         tokenMetadata={{
           decimals: props.decimals,
           symbol: props.tokenSymbol,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx

@@ -386,6 +386,7 @@ export function ClaimTokenCardUI(props: {
 
           {account ? (
             <TransactionButton
+              client={props.contract.client}
               transactionCount={undefined}
               checkBalance={false}
               isLoggedIn={true}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx

@@ -330,6 +330,7 @@ export const SettingsMetadata = ({
 
         <AdminOnly contract={contract}>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

@@ -129,6 +129,7 @@ export const SettingsPlatformFees = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 {...form.register("platform_fee_recipient")}
@@ -175,6 +176,7 @@ export const SettingsPlatformFees = ({
         </Flex>
         <AdminOnly contract={contract}>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

@@ -127,6 +127,7 @@ export const SettingsPrimarySale = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 disabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}
@@ -143,6 +144,7 @@ export const SettingsPrimarySale = ({
         </Flex>
         <AdminOnly contract={contract}>
           <TransactionButton
+            client={contract.client}
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx

@@ -141,6 +141,7 @@ export const SettingsRoyalties = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 {...form.register("fee_recipient")}
@@ -182,6 +183,7 @@ export const SettingsRoyalties = ({
         </Flex>
         <AdminOnly contract={contract}>
           <TransactionButton
+            client={contract.client}
             txChainID={contract.chain.id}
             transactionCount={1}
             disabled={query.isPending || !form.formState.isDirty}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.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]/split/components/distribute-button.tsx

@@ -77,6 +77,7 @@ export const DistributeButton: React.FC<DistributeButtonProps> = ({
     return (
       <TransactionButton
         isLoggedIn={isLoggedIn}
+        client={contract.client}
         isPending={mutation.isPending}
         onClick={distributeFunds}
         txChainID={contract.chain.id}
@@ -100,6 +101,7 @@ export const DistributeButton: React.FC<DistributeButtonProps> = ({
   return (
     <TransactionButton
       isLoggedIn={isLoggedIn}
+      client={contract.client}
       transactionCount={numTransactions}
       isPending={mutation.isPending}
       onClick={distributeFunds}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-form.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 })
@@ -135,6 +136,7 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
                 </Text>
               )}
               <TransactionButton
+                client={contract.client}
                 isLoggedIn={isLoggedIn}
                 transactionCount={1}
                 isPending={sendTransaction.isPending}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx

@@ -7,7 +7,7 @@ import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, UploadIcon } from "lucide-react";
 import { useMemo, useRef } from "react";
 import type { Column } from "react-table";
-import { ZERO_ADDRESS } from "thirdweb";
+import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { Button, Heading, Text } from "tw-components";
 import { CsvDataTable } from "../../_components/csv-data-table";
 
@@ -19,6 +19,7 @@ export interface AirdropAddressInput {
 interface AirdropUploadProps {
   setAirdrop: (airdrop: AirdropAddressInput[]) => void;
   onClose: () => void;
+  client: ThirdwebClient;
 }
 
 const csvParser = (items: AirdropAddressInput[]): AirdropAddressInput[] => {
@@ -33,6 +34,7 @@ const csvParser = (items: AirdropAddressInput[]): AirdropAddressInput[] => {
 export const AirdropUpload: React.FC<AirdropUploadProps> = ({
   setAirdrop,
   onClose,
+  client,
 }) => {
   const {
     normalizeQuery,
@@ -43,7 +45,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
     noCsv,
     reset,
     removeInvalid,
-  } = useCsvUpload<AirdropAddressInput>({ csvParser });
+  } = useCsvUpload<AirdropAddressInput>({ csvParser, client });
   const paginationPortalRef = useRef<HTMLDivElement>(null);
 
   const normalizeData = normalizeQuery.data;

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx

@@ -98,6 +98,7 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
         <SheetFooter className="mt-10">
           <TransactionButton
             isLoggedIn={isLoggedIn}
+            client={contract.client}
             txChainID={contract.chain.id}
             transactionCount={1}
             form={BURN_FORM_ID}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx

@@ -94,6 +94,7 @@ export const TokenClaimButton: React.FC<TokenClaimButtonProps> = ({
           <TransactionButton
             isLoggedIn={isLoggedIn}
             txChainID={contract.chain.id}
+            client={contract.client}
             transactionCount={1}
             form={CLAIM_FORM_ID}
             isPending={form.formState.isSubmitting}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx

@@ -124,6 +124,7 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
           </form>
           <SheetFooter className="mt-10">
             <TransactionButton
+              client={contract.client}
               isLoggedIn={isLoggedIn}
               txChainID={contract.chain.id}
               transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx

@@ -72,6 +72,7 @@ export const TokenTransferButton: React.FC<TokenTransferButtonProps> = ({
             <FormControl isRequired isInvalid={!!form.formState.errors.to}>
               <FormLabel>To Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 formContext={form}
                 solidityType="address"
                 placeholder={ZERO_ADDRESS}
@@ -100,6 +101,7 @@ export const TokenTransferButton: React.FC<TokenTransferButtonProps> = ({
         </form>
         <SheetFooter className="mt-10">
           <TransactionButton
+            client={contract.client}
             txChainID={contract.chain.id}
             transactionCount={1}
             isLoggedIn={isLoggedIn}

apps/dashboard/src/app/(app)/(dashboard)/contracts/deploy/[compiler_uri]/page.tsx

@@ -1,6 +1,6 @@
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { notFound } from "next/navigation";
 import { fetchDeployMetadata } from "thirdweb/contract";
-import { serverThirdwebClient } from "../../../../../../@/constants/thirdweb-client.server";
 import { DeployContractInfo } from "../../../published-contract/components/contract-info";
 import { DeployFormForUri } from "../../../published-contract/components/uri-based-deploy";
 

apps/dashboard/src/app/(app)/(dashboard)/contracts/publish/[publish_uri]/page.tsx

@@ -1,10 +1,11 @@
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { getActiveAccountCookie, getJWTCookie } from "@/constants/cookie";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { ContractPublishForm } from "components/contract-components/contract-publish-form";
 import { revalidatePath } from "next/cache";
 import { notFound, redirect } from "next/navigation";
 import { fetchDeployMetadata } from "thirdweb/contract";
-import { serverThirdwebClient } from "../../../../../../@/constants/thirdweb-client.server";
 import { getLatestPublishedContractsWithPublisherMapping } from "../../../published-contract/[publisher]/[contract_id]/utils/getPublishedContractsWithPublisherMapping";
 
 type DirectDeployPageProps = {
@@ -71,7 +72,7 @@ export default async function PublishContractPage(
     <div className="container flex max-w-[1130px] flex-col gap-8 py-8">
       <ChakraProviderSetup>
         <ContractPublishForm
-          jwt={token}
+          isLoggedIn={!!token}
           publishMetadata={publishMetadata}
           onPublishSuccess={async () => {
             "use server";
@@ -82,6 +83,10 @@ export default async function PublishContractPage(
               "layout",
             );
           }}
+          client={getClientThirdwebClient({
+            jwt: token,
+            teamId: undefined,
+          })}
         />
       </ChakraProviderSetup>
     </div>

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

@@ -1,19 +1,25 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { fetchPublishedContracts } from "components/contract-components/fetchPublishedContracts";
 import { Suspense } from "react";
-import { serverThirdwebClient } from "../../../../../@/constants/thirdweb-client.server";
+import type { ThirdwebClient } from "thirdweb";
 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>