diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx index 90b14e39694..9a6175bf37d 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx +++ b/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 diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx index 3efd3dc94cc..af540eb8257 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx +++ b/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 ( @@ -35,7 +38,7 @@ export function PayModalButton(props: { chainId: number; label: string }) { dialogCloseClassName="focus:ring-0" >
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx index 49f76af8f6a..07a3537267c 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx +++ b/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: {
+ ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? ( - + ) : null} {/* Chain Overview */} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx index 0c7b581bc80..ded8db2b720 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx @@ -41,6 +41,7 @@ export const AccountPage: React.FC = ({ address={contract.address} symbol={symbol} chain={chainMetadata} + client={contract.client} /> )} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx index 87b3c2544af..e706e342dd2 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx +++ b/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 = ({ @@ -22,8 +22,8 @@ export const DepositNative: React.FC = ({ symbol, chain, isLoggedIn, + client, }) => { - const client = useThirdwebClient(); const { mutate: transfer, isPending } = useSendAndConfirmTransaction(); const [amount, setAmount] = useState(""); const handleChange = (e: ChangeEvent) => { diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx index dac2d324e53..09f99194d05 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx +++ b/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; export const InstallModuleForm = (props: InstallModuleFormProps) => { - const client = useThirdwebClient(); const form = useForm({ defaultValues: { publisherAddress: "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024", // thirdweb publisher address @@ -182,7 +180,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 +229,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => { moduleInfo: { bytecodeUri: selectedModule.metadata.bytecodeUri, }, - client, + client: contract.client, }); }, retry: false, @@ -255,6 +253,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => { const moduleInstallParams = useModuleInstallParams({ module: selectedModuleMeta, isQueryEnabled: !!selectedModule && !!isModuleCompatibleQuery.data, + client: contract.client, }); return ( diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx index c43bc0981b6..f3bd83c86ba 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx +++ b/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 () => { diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx index 1800214d45b..dd391320d73 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx +++ b/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 = ({ accountAddress, }); - const client = useThirdwebClient(); - const { data: nft, isPending } = useReadContract( isErc721 ? getErc721NFT : getErc1155NFT, { @@ -175,7 +172,9 @@ export const TokenIdPage: React.FC = ({ /> {/* tab contents */} - {tab === "Details" && } + {tab === "Details" && ( + + )} {tabs.map((tb) => { return ( diff --git a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx index 457b1278b4d..6d3a36bd3ab 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx @@ -1,6 +1,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner"; import { fetchPublishedContracts } from "components/contract-components/fetchPublishedContracts"; import { Suspense } from "react"; +import type { ThirdwebClient } from "thirdweb"; import { serverThirdwebClient } from "../../../../../@/constants/thirdweb-client.server"; import { ProfileHeader } from "./components/profile-header"; import { PublishedContracts } from "./components/published-contracts"; @@ -8,12 +9,17 @@ import { PublishedContracts } from "./components/published-contracts"; export function ProfileUI(props: { profileAddress: string; ensName: string | undefined; + client: ThirdwebClient; }) { const { profileAddress, ensName } = props; return (
- +
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx index eb381c98354..5c8673e807d 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx @@ -1,8 +1,8 @@ "use client"; import { Skeleton } from "@/components/ui/skeleton"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { replaceDeployerAddress } from "lib/publisher-utils"; +import type { ThirdwebClient } from "thirdweb"; import { AccountAddress, AccountAvatar, @@ -15,10 +15,10 @@ import { shortenIfAddress } from "utils/usedapp-external"; export function ProfileHeader(props: { profileAddress: string; ensName: string | undefined; + client: ThirdwebClient; }) { - const client = useThirdwebClient(); return ( - +
); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx index d06c805b53d..ada6f442ee9 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx @@ -8,7 +8,6 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { ToolTipLabel } from "@/components/ui/tooltip"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import type { Abi, AbiFunction } from "abitype"; import { useV5DashboardChain } from "lib/v5-adapter"; import { ArrowDownIcon, WalletIcon } from "lucide-react"; @@ -25,6 +24,7 @@ import { import { resolveContractAbi } from "thirdweb/contract"; import { useActiveAccount } from "thirdweb/react"; import { parseAbiParams } from "thirdweb/utils"; +import { getClientThirdwebClient } from "../../../../../../@/constants/thirdweb-client.client"; import { ShareButton } from "../../components/share"; export type SimulateTransactionForm = { @@ -61,8 +61,7 @@ export const TransactionSimulator = (props: { const chain = useV5DashboardChain( Number.isInteger(Number(chainId)) ? chainId : undefined, ); - const client = useThirdwebClient(); - + const client = getClientThirdwebClient(); async function handleSimulation(data: SimulateTransactionForm) { try { setIsPending(true); diff --git a/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx b/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx index 9d6eb77921c..79f115622f1 100644 --- a/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx +++ b/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx @@ -2,12 +2,12 @@ import type { Project } from "@/api/projects"; import type { Team } from "@/api/team"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { useDashboardRouter } from "@/lib/DashboardRouter"; import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog"; import { useCallback, useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import { useActiveWallet, useDisconnect } from "thirdweb/react"; import { doLogout } from "../../login/auth-actions"; import { @@ -23,6 +23,7 @@ import { export function AccountHeader(props: { teamsAndProjects: Array<{ team: Team; projects: Project[] }>; account: Account; + client: ThirdwebClient; accountAddress: string; }) { const router = useDashboardRouter(); @@ -30,7 +31,6 @@ export function AccountHeader(props: { { team: Team; isOpen: true } | { isOpen: false } >({ isOpen: false }); - const client = useThirdwebClient(); const wallet = useActiveWallet(); const { disconnect } = useDisconnect(); @@ -49,14 +49,16 @@ export function AccountHeader(props: { const headerProps: AccountHeaderCompProps = { teamsAndProjects: props.teamsAndProjects, logout: logout, - connectButton: , + connectButton: ( + + ), createProject: (team: Team) => setCreateProjectDialogState({ team, isOpen: true, }), account: props.account, - client, + client: props.client, accountAddress: props.accountAddress, getInboxNotifications: getInboxNotifications, markNotificationAsRead: markNotificationAsRead, diff --git a/apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx b/apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx index 5303d934e21..46015f7d9e7 100644 --- a/apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx +++ b/apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx @@ -2,24 +2,24 @@ import { Button } from "@/components/ui/button"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { ImportModal } from "components/contract-components/import-contract/modal"; import { useTrack } from "hooks/analytics/useTrack"; import { DownloadIcon, PlusIcon } from "lucide-react"; import { useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; export function DeployedContractsPageHeader(props: { teamId: string; projectId: string; + client: ThirdwebClient; }) { const [importModalOpen, setImportModalOpen] = useState(false); - const client = useThirdwebClient(); const trackEvent = useTrack(); return (
{ setImportModalOpen(false); diff --git a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx index f6773cc4135..7633e341bf0 100644 --- a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx +++ b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx @@ -2,25 +2,25 @@ import { Button } from "@/components/ui/button"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { ImportModal } from "components/contract-components/import-contract/modal"; import { useTrack } from "hooks/analytics/useTrack"; import { ArrowUpRightIcon, DownloadIcon } from "lucide-react"; import { useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; export function DeployViaCLIOrImportCard(props: { teamId: string; projectId: string; + client: ThirdwebClient; }) { const trackEvent = useTrack(); const [importModalOpen, setImportModalOpen] = useState(false); - const client = useThirdwebClient(); return (
{ setImportModalOpen(false); diff --git a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx index 7aa25eafee8..140f0779ce5 100644 --- a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx +++ b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx @@ -20,6 +20,7 @@ export function DeployedContractsPage(props: {
@@ -28,6 +29,7 @@ export function DeployedContractsPage(props: {
diff --git a/apps/dashboard/src/app/(app)/account/layout.tsx b/apps/dashboard/src/app/(app)/account/layout.tsx index 0176102bb83..5c9842db322 100644 --- a/apps/dashboard/src/app/(app)/account/layout.tsx +++ b/apps/dashboard/src/app/(app)/account/layout.tsx @@ -5,7 +5,12 @@ import { TabPathLinks } from "@/components/ui/tabs"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import { AnnouncementBanner } from "components/notices/AnnouncementBanner"; import type React from "react"; -import { getAuthTokenWalletAddress } from "../api/lib/getAuthToken"; +import type { ThirdwebClient } from "thirdweb"; +import { getClientThirdwebClient } from "../../../@/constants/thirdweb-client.client"; +import { + getAuthToken, + getAuthTokenWalletAddress, +} from "../api/lib/getAuthToken"; import { TWAutoConnect } from "../components/autoconnect"; import { loginRedirect } from "../login/loginRedirect"; import { AccountHeader } from "./components/AccountHeader"; @@ -14,16 +19,22 @@ import { getValidAccount } from "./settings/getAccount"; export default async function AccountLayout(props: { children: React.ReactNode; }) { - const [teams, account, accountAddress] = await Promise.all([ + const [teams, account, accountAddress, authToken] = await Promise.all([ getTeams(), getValidAccount("/account"), getAuthTokenWalletAddress(), + getAuthToken(), ]); - if (!teams || !accountAddress) { + if (!teams || !accountAddress || !authToken) { loginRedirect("/account"); } + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: undefined, + }); + return (
@@ -31,6 +42,7 @@ export default async function AccountLayout(props: { teams={teams} twAccount={account} accountAddress={accountAddress} + client={client} /> {props.children}
@@ -44,6 +56,7 @@ async function HeaderAndNav(props: { teams: Team[]; twAccount: Account; accountAddress: string; + client: ThirdwebClient; }) { const teamsAndProjects = await Promise.all( props.teams.map(async (team) => ({ @@ -59,6 +72,7 @@ async function HeaderAndNav(props: { teamsAndProjects={teamsAndProjects} account={props.twAccount} accountAddress={props.accountAddress} + client={props.client} /> @@ -118,6 +119,7 @@ export function LoginAndOnboardingPage(props: {
@@ -254,6 +258,7 @@ function LoginAndOnboardingPageContent(props: { ); @@ -262,9 +267,9 @@ function LoginAndOnboardingPageContent(props: { function CustomConnectEmbed(props: { onLogin: () => void; loginWithInAppWallet: boolean; + client: ThirdwebClient; }) { const { theme } = useTheme(); - const client = useThirdwebClient(); const [turnstileToken, setTurnstileToken] = useState( undefined, ); @@ -320,7 +325,7 @@ function CustomConnectEmbed(props: { wallets={ props.loginWithInAppWallet ? inAppWalletLoginOptions : loginOptions } - client={client} + client={props.client} modalSize="wide" theme={getSDKTheme(theme === "light" ? "light" : "dark")} className="shadow-lg" diff --git a/apps/dashboard/src/app/(app)/login/page.tsx b/apps/dashboard/src/app/(app)/login/page.tsx index 8275995b0a5..7af7619e384 100644 --- a/apps/dashboard/src/app/(app)/login/page.tsx +++ b/apps/dashboard/src/app/(app)/login/page.tsx @@ -1,3 +1,4 @@ +import { getClientThirdwebClient } from "../../../@/constants/thirdweb-client.client"; import { getRawAccount } from "../account/settings/getAccount"; import { LoginAndOnboardingPage } from "./LoginPage"; import { isValidEncodedRedirectPath } from "./isValidEncodedRedirectPath"; @@ -27,6 +28,7 @@ export default async function Page(props: { account={account} redirectPath={redirectPath} loginWithInAppWallet={searchParams["in-app-wallet"] === "true"} + client={getClientThirdwebClient()} /> ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx index e3e4ef93aab..b3b96656dca 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx @@ -25,7 +25,6 @@ import { import { ImageUpload } from "@/components/ui/image-upload"; import { Input } from "@/components/ui/input"; import { Skeleton } from "@/components/ui/skeleton"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { useDashboardRouter } from "@/lib/DashboardRouter"; import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler"; import { cn } from "@/lib/utils"; @@ -149,13 +148,12 @@ export function EcosystemHeader(props: { refetchOnWindowFocus: false, initialData: props.ecosystem, }); - const client = useThirdwebClient(); const ecosystem = fetchedEcosystem ?? props.ecosystem; const ecosystemImageLink = resolveSchemeWithErrorHandler({ uri: ecosystem.imageUrl, - client, + client: props.client, }); // ------------------- Image Upload Logic ------------------- diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx index 743b6bbbb76..83cba19471e 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx @@ -1,4 +1,5 @@ import { getTeamBySlug } from "@/api/team"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { notFound } from "next/navigation"; import { getAuthToken } from "../../../../../../../../../api/lib/getAuthToken"; import { loginRedirect } from "../../../../../../../../../login/loginRedirect"; @@ -27,6 +28,11 @@ export default async function AddPartnerPage({ const teamSlug = team_slug; const ecosystemSlug = slug; + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: team.id, + }); + try { const ecosystem = await fetchEcosystem({ teamIdOrSlug: teamSlug, @@ -44,6 +50,7 @@ export default async function AddPartnerPage({ ecosystem={ecosystem} authToken={authToken} teamId={team.id} + client={client} />
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx index 71fdafa816b..37ac59fee0b 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx @@ -2,6 +2,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter"; import { useParams } from "next/navigation"; import { toast } from "sonner"; +import type { ThirdwebClient } from "thirdweb"; import type { Ecosystem, Partner } from "../../../../../types"; import { useAddPartner } from "../../hooks/use-add-partner"; import { PartnerForm, type PartnerFormValues } from "./partner-form.client"; @@ -10,10 +11,12 @@ export function AddPartnerForm({ ecosystem, authToken, teamId, + client, }: { ecosystem: Ecosystem; authToken: string; teamId: string; + client: ThirdwebClient; }) { const router = useDashboardRouter(); const params = useParams(); @@ -64,6 +67,7 @@ export function AddPartnerForm({ return ( ; enabled: boolean; onToggle: (checked: boolean) => void; + client: ThirdwebClient; }; export function AllowedOperationsSection({ control, enabled, onToggle, + client, }: AllowedOperationsSectionProps) { // Setup field array for allowed operations const allowedOperationsFields = useFieldArray({ @@ -142,12 +145,20 @@ export function AllowedOperationsSection({ {/* Render different fields based on the signature method */} {allowedOperationsFields.fields[index]?.signMethod === "eth_signTransaction" && ( - + )} {allowedOperationsFields.fields[index]?.signMethod === "eth_signTypedData_v4" && ( - + )} {allowedOperationsFields.fields[index]?.signMethod === @@ -182,11 +193,12 @@ export function AllowedOperationsSection({ function TransactionRestrictions({ control, index, + client, }: { control: Control; index: number; + client: ThirdwebClient; }) { - const client = useThirdwebClient(); const transactionsArray = useFieldArray({ control, name: `accessControl.allowedOperations.${index}.allowedTransactions`, @@ -312,11 +324,12 @@ function TransactionRestrictions({ function TypedDataRestrictions({ control, index, + client, }: { control: Control; index: number; + client: ThirdwebClient; }) { - const client = useThirdwebClient(); const typedDataArray = useFieldArray({ control, name: `accessControl.allowedOperations.${index}.allowedTypedData`, diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx index d3695860cf2..59e25166c8b 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx @@ -17,6 +17,7 @@ import { cn } from "@/lib/utils"; import { zodResolver } from "@hookform/resolvers/zod"; import { PlusIcon, Trash2Icon } from "lucide-react"; import { useFieldArray, useForm } from "react-hook-form"; +import type { ThirdwebClient } from "thirdweb"; import type { z } from "zod"; import type { Partner } from "../../../../../types"; import { partnerFormSchema } from "../../constants"; @@ -32,6 +33,7 @@ type PartnerFormProps = { ) => void; isSubmitting: boolean; submitLabel: string; + client: ThirdwebClient; }; export function PartnerForm({ @@ -39,6 +41,7 @@ export function PartnerForm({ onSubmit, isSubmitting, submitLabel, + client, }: PartnerFormProps) { // Check if partner has accessControl and serverVerifier const hasAccessControl = partner ? !!partner.accessControl : false; @@ -342,6 +345,7 @@ export function PartnerForm({ {/* Allowed Operations Section */} { diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx index a64c9a18155..27cab617241 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx @@ -2,6 +2,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter"; import { useParams } from "next/navigation"; import { toast } from "sonner"; +import type { ThirdwebClient } from "thirdweb"; import type { Ecosystem, Partner } from "../../../../../types"; import { useUpdatePartner } from "../../hooks/use-update-partner"; import { PartnerForm, type PartnerFormValues } from "./partner-form.client"; @@ -11,11 +12,13 @@ export function UpdatePartnerForm({ partner, authToken, teamId, + client, }: { ecosystem: Ecosystem; partner: Partner; authToken: string; teamId: string; + client: ThirdwebClient; }) { const router = useDashboardRouter(); const params = useParams(); @@ -68,6 +71,7 @@ export function UpdatePartnerForm({ return (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx index d20d6cef9e2..a4ebaa98f49 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx @@ -1,23 +1,24 @@ "use client"; import type { Team } from "@/api/team"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { cn } from "@/lib/utils"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import { usePathname } from "next/navigation"; import { useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import { TeamSettingsSidebar } from "./_components/sidebar/TeamSettingsSidebar"; import { TeamSettingsMobileNav } from "./_components/sidebar/TeamsMobileNav"; import { getTeamSettingsLinks } from "./_components/sidebar/getTeamSettingsLinks"; // on the /~/settings page // - On desktop: show the general settings as usual -// - On mobile: show the full nav instead of page content and when user clicks on the "General Settings" ( first link ) - hide the full nav and show the page content +// - On mobile: show the full nav instead of page content and when user clicks on the "General Settings" ( first link ) - hide the full nav and show the page content export function SettingsLayout(props: { team: Team; children: React.ReactNode; account: Account; + client: ThirdwebClient; }) { const [_showFullNavOnMobile, setShowFullNavOnMobile] = useState(true); const pathname = usePathname(); @@ -25,7 +26,6 @@ export function SettingsLayout(props: { const showFullNavOnMobile = _showFullNavOnMobile && isSettingsOverview; const links = getTeamSettingsLinks(props.team.slug); const activeLink = links.find((link) => pathname === link.href); - const client = useThirdwebClient(); return (
@@ -51,7 +51,7 @@ export function SettingsLayout(props: {
+ {props.children} ); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx index d59dd9e4211..4cb64be7a9b 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx @@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"; import { type Step, StepsCard } from "components/dashboard/StepsCard"; import Link from "next/link"; import { useMemo, useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import CreateServerWallet from "../server-wallets/components/create-server-wallet.client"; import type { Wallet } from "../server-wallets/wallet-table/types"; import CreateVaultAccountButton from "../vault/components/create-vault-account.client"; @@ -17,6 +18,7 @@ interface Props { hasTransactions: boolean; teamSlug: string; testTxWithWallet?: string | undefined; + client: ThirdwebClient; } export const EngineChecklist: React.FC = (props) => { @@ -61,6 +63,7 @@ export const EngineChecklist: React.FC = (props) => { @@ -77,6 +80,7 @@ export const EngineChecklist: React.FC = (props) => { props.hasTransactions, userAccessToken, props.teamSlug, + props.client, ]); const isComplete = useMemo( @@ -89,6 +93,7 @@ export const EngineChecklist: React.FC = (props) => { {selectedWallet.metadata.label} @@ -214,7 +214,7 @@ export function SendTestTransaction(props: {
{wallet.metadata.label} @@ -236,7 +236,7 @@ export function SendTestTransaction(props: { chain.stackType !== "zksync_stack", ) .map((chain) => chain.chainId)} - client={thirdwebClient} + client={props.client} chainId={form.watch("chainId")} onChange={(chainId) => { form.setValue("chainId", chainId); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx index 863ef305e44..4847bed4365 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx @@ -28,7 +28,6 @@ import { TableRow, } from "@/components/ui/table"; import { ToolTipLabel } from "@/components/ui/tooltip"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { useDashboardRouter } from "@/lib/DashboardRouter"; import { keepPreviousData, useQuery } from "@tanstack/react-query"; import { ChainIconClient } from "components/icons/ChainIcon"; @@ -156,7 +155,10 @@ export function TransactionsTableUI(props: { {/* Chain Id */} - + {/* Status */} @@ -301,10 +303,12 @@ function SkeletonRow() { ); } -function TxChainCell(props: { chainId: string | undefined }) { +function TxChainCell(props: { + chainId: string | undefined; + client: ThirdwebClient; +}) { const { chainId } = props; const { idToChain } = useAllChainsData(); - const thirdwebClient = useThirdwebClient(); if (!chainId) { return "N/A"; } @@ -319,7 +323,7 @@ function TxChainCell(props: { chainId: string | undefined }) {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx index 9a184cd991c..8e6575b3807 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx @@ -92,6 +92,7 @@ export default async function TransactionsAnalyticsPage(props: { project={project} wallets={wallets ?? []} testTxWithWallet={searchParams.testTxWithWallet as string | undefined} + client={client} /> {hasTransactions && !searchParams.testTxWithWallet && ( setDialog(undefined)} isLoggedIn={props.isLoggedIn} + client={client} /> )} @@ -333,6 +339,7 @@ function NoFundsDialogContent(props: { openPayModal: () => void; onCloseModal: () => void; isLoggedIn: boolean; + client: ThirdwebClient; }) { const chainWithServiceInfoQuery = useQuery({ queryKey: ["chain-with-services", props.chain.id], @@ -391,6 +398,7 @@ function NoFundsDialogContent(props: { ) : chainWithServiceInfoQuery.data.services.find( (x) => x.enabled && x.service === "pay", @@ -431,6 +439,7 @@ function NoFundsDialogContent(props: { function GetFundsFromFaucet(props: { chain: ChainMetadata; isLoggedIn: boolean; + client: ThirdwebClient; }) { const amountToGive = getFaucetClaimAmount(props.chain.chainId); @@ -461,6 +470,7 @@ function GetFundsFromFaucet(props: {