thirdweb-dev · graphite-app · May 30, 2025 · May 30, 2025
@@ -1,7 +1,6 @@
 "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 { CustomChainRenderer } from "components/selects/CustomChainRenderer";
@@ -12,7 +11,7 @@ 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,
@@ -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);
@@ -276,12 +277,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 +299,7 @@ export function useCustomConnectModal() {
         theme: getSDKTheme(theme === "light" ? "light" : "dark"),
       });
     },
-    [connect, theme, thirdwebClient],
+    [connect, theme],
   );
 }
 

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

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

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

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

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

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

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

@@ -129,6 +129,7 @@ export const SettingsPlatformFees = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 {...form.register("platform_fee_recipient")}

@@ -127,6 +127,7 @@ export const SettingsPrimarySale = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 disabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}

@@ -141,6 +141,7 @@ export const SettingsRoyalties = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
+                client={contract.client}
                 solidityType="address"
                 formContext={form}
                 {...form.register("fee_recipient")}

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

@@ -49,7 +49,7 @@ export function AccountHeader(props: {
   const headerProps: AccountHeaderCompProps = {
     teamsAndProjects: props.teamsAndProjects,
     logout: logout,
-    connectButton: <CustomConnectWallet isLoggedIn={true} />,
+    connectButton: <CustomConnectWallet isLoggedIn={true} client={client} />,
     createProject: (team: Team) =>
       setCreateProjectDialogState({
         team,

@@ -6,7 +6,6 @@ import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { MinusIcon, PlusIcon } from "lucide-react";
@@ -46,7 +45,6 @@ export function NftMint(props: Props) {
   const [useCustomAddress, setUseCustomAddress] = useState(false);
   const [customAddress, setCustomAddress] = useState("");
   const account = useActiveAccount();
-  const client = useThirdwebClient();
 
   const decreaseQuantity = () => {
     setQuantity((prev) => Math.max(1, prev - 1));
@@ -100,7 +98,7 @@ export function NftMint(props: Props) {
         <CardContent className="pt-6">
           <div className="relative mb-4 aspect-square overflow-hidden rounded-lg">
             <MediaRenderer
-              client={client}
+              client={props.contract.client}
               className="h-full w-full object-cover"
               alt=""
               src={props.thumbnail}
@@ -225,6 +223,7 @@ export function NftMint(props: Props) {
             </ClaimButton>
           ) : (
             <CustomConnectWallet
+              client={props.contract.client}
               loginRequired={false}
               isLoggedIn={true}
               connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"

@@ -14,6 +14,7 @@ import {
   useActiveAccount,
   useConnectionManager,
 } from "thirdweb/react";
+import { getClientThirdwebClient } from "../../@/constants/thirdweb-client.client";
 import { TWAutoConnect } from "./components/autoconnect";
 
 const queryClient = new QueryClient();
@@ -65,6 +66,8 @@ function SyncChainDefinitionsToConnectionManager() {
   return null;
 }
 
+const client = getClientThirdwebClient();
+
 const SanctionedAddressesChecker = ({
   children,
 }: {
@@ -80,7 +83,11 @@ const SanctionedAddressesChecker = ({
       <div className="fixed inset-0 flex items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
           <p> Your wallet address is blocked </p>
-          <CustomConnectWallet loginRequired={false} isLoggedIn={true} />
+          <CustomConnectWallet
+            loginRequired={false}
+            isLoggedIn={true}
+            client={client}
+          />
         </div>
       </div>
     );

@@ -1,5 +1,6 @@
 import { getTeamBySlug } from "@/api/team";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../../../../../../api/lib/getAuthToken";
 import { fetchEcosystem } from "../../../utils/fetchEcosystem";
@@ -37,9 +38,15 @@ export async function EcosystemLayoutSlug({
     redirect(ecosystemLayoutPath);
   }
 
+  const client = getClientThirdwebClient({
+    teamId: team.id,
+    jwt: authToken,
+  });
+
   return (
     <div className="flex grow flex-col">
       <EcosystemHeader
+        client={client}
         ecosystem={ecosystem}
         ecosystemLayoutPath={ecosystemLayoutPath}
         teamIdOrSlug={params.team_slug}

@@ -41,6 +41,7 @@ import {
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 import { useEcosystemList } from "../../../hooks/use-ecosystem-list";
 import type { Ecosystem } from "../../../types";
 import { useUpdateEcosystem } from "../configuration/hooks/use-update-ecosystem";
@@ -134,6 +135,7 @@ export function EcosystemHeader(props: {
   teamIdOrSlug: string;
   authToken: string;
   teamId: string;
+  client: ThirdwebClient;
 }) {
   const { data: fetchedEcosystem } = useEcosystem({
     teamIdOrSlug: props.teamIdOrSlug,
@@ -164,7 +166,9 @@ export function EcosystemHeader(props: {
   const [isNameDialogOpen, setIsNameDialogOpen] = useState(false);
   const [tempName, setTempName] = useState(ecosystem.name);
 
-  const storageUpload = useDashboardStorageUpload();
+  const storageUpload = useDashboardStorageUpload({
+    client: props.client,
+  });
   const router = useDashboardRouter();
 
   const { mutateAsync: updateEcosystem, isPending: isUpdating } =

@@ -54,7 +54,9 @@ export function TeamHeaderLoggedIn(props: {
     teamsAndProjects: props.teamsAndProjects,
     account: props.account,
     logout: logout,
-    connectButton: <CustomConnectWallet isLoggedIn={true} />,
+    connectButton: (
+      <CustomConnectWallet isLoggedIn={true} client={props.client} />
+    ),
     createProject: (team: Team) => {
       setCreateProjectDialogState({
         isOpen: true,

@@ -381,6 +381,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
                 client={client}
               />
               <IconUpload
+                client={client}
                 onUpload={(uri) => {
                   form.setValue("icon", uri, { shouldDirty: true });
                 }}

@@ -6,11 +6,13 @@ import { PINNED_FILES_QUERY_KEY_ROOT } from "app/(app)/team/[team_slug]/(team)/~
 import { FileInput } from "components/shared/FileInput";
 import { UploadIcon } from "lucide-react";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 
-export const IconUpload: React.FC<{ onUpload: (url: string) => void }> = ({
-  onUpload,
-}) => {
-  const storageUpload = useDashboardStorageUpload();
+export const IconUpload: React.FC<{
+  onUpload: (url: string) => void;
+  client: ThirdwebClient;
+}> = ({ onUpload, client }) => {
+  const storageUpload = useDashboardStorageUpload({ client });
   const queryClient = useQueryClient();
 
   const handleIconUpload = (file: File) => {