Skip to content

Dashboard: Reduce useThirdwebClient hook usage #3 #7226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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={{
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -8,6 +9,7 @@ import { SectionTitle } from "./SectionTitle";

export function BuyFundsSection(props: {
chain: ChainMetadata;
client: ThirdwebClient;
}) {
const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();

Expand Down Expand Up @@ -45,6 +47,7 @@ export function BuyFundsSection(props: {
<PayModalButton
chainId={props.chain.chainId}
label={`Bridge to ${sanitizedChainName}`}
client={props.client}
/>

<div className="h-4" />
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -44,6 +46,7 @@ export async function FaucetSection(props: {
<div className="h-8" />

<FaucetButton
client={client}
chain={chain}
amount={amountToGive}
isLoggedIn={isLoggedIn}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { CircleAlertIcon } from "lucide-react";
import { getClientThirdwebClient } from "../../../../../../@/constants/thirdweb-client.client";
import { getRawAccount } from "../../../../account/settings/getAccount";
import { getChain, getChainMetadata } from "../../utils";
import NextSteps from "./components/client/NextSteps";
Expand All @@ -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();
Expand All @@ -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 */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const AccountPage: React.FC<AccountPageProps> = ({
address={contract.address}
symbol={symbol}
chain={chainMetadata}
client={contract.client}
/>
)}

Expand Down
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -15,15 +14,16 @@ interface DepositNativeProps {
symbol: string;
chain: StoredChain;
isLoggedIn: boolean;
client: ThirdwebClient;
}

export const DepositNative: React.FC<DepositNativeProps> = ({
address,
symbol,
chain,
isLoggedIn,
client,
}) => {
const client = useThirdwebClient();
const { mutate: transfer, isPending } = useSendAndConfirmTransaction();
const [amount, setAmount] = useState("");
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
}),
Expand Down Expand Up @@ -231,7 +229,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
moduleInfo: {
bytecodeUri: selectedModule.metadata.bytecodeUri,
},
client,
client: contract.client,
});
},
retry: false,
Expand All @@ -255,6 +253,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
const moduleInstallParams = useModuleInstallParams({
module: selectedModuleMeta,
isQueryEnabled: !!selectedModule && !!isModuleCompatibleQuery.data,
client: contract.client,
});

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -78,8 +77,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
accountAddress,
});

const client = useThirdwebClient();

const { data: nft, isPending } = useReadContract(
isErc721 ? getErc721NFT : getErc1155NFT,
{
Expand Down Expand Up @@ -175,7 +172,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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
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";

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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 (
<AccountProvider address={props.profileAddress} client={client}>
<AccountProvider address={props.profileAddress} client={props.client}>
<div className="flex w-full flex-col items-center justify-between gap-4 border-border border-b pb-6 md:flex-row">
<div className="flex w-full items-center gap-4">
<AccountAvatar
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
import { replaceDeployerAddress } from "lib/publisher-utils";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { shortenIfAddress } from "utils/usedapp-external";
import { serverThirdwebClient } from "../../../../../@/constants/thirdweb-client.server";
import { ProfileUI } from "./ProfileUI";
import { resolveAddressAndEns } from "./resolveAddressAndEns";

Expand All @@ -27,6 +28,7 @@ export default async function Page(props: PageProps) {
<ProfileUI
ensName={replaceDeployerAddress(resolvedInfo.ensName || "")}
profileAddress={resolvedInfo.address}
client={getClientThirdwebClient()}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 = {
Expand Down Expand Up @@ -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);
Expand Down
Loading
Loading