From a4406214c65d6f2443c03f9cc1c9b12deb5551dc Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 30 May 2025 18:35:01 +0000 Subject: [PATCH] Dashboard: Reduce useThirdwebClient hook usage #2 (#7224) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on enhancing the functionality of various components by integrating a `client` prop of type `ThirdwebClient` into multiple files. This change improves the interaction with the Thirdweb SDK across the application. ### Detailed summary - Added `client` prop to components like `IconUpload`, `SolidityInput`, and `CustomConnectWallet`. - Updated hooks and functions to accept `client` for better SDK integration. - Modified forms to utilize the `client` for storage uploads and contract deployments. - Enhanced `AddChainToWallet` and `EcosystemHeader` to support `client`. - Updated various fieldsets to include `client`, improving data handling and validation. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit - **New Features** - Components and forms now consistently accept and require a `client` prop, providing improved client context across wallet connection, contract deployment, network configuration, and NFT interactions. - **Refactor** - Updated numerous components and hooks to require explicit passing of the `client` instance, replacing previous internal retrieval methods. - Prop types and interfaces were extended to include the new `client` property, ensuring consistent usage throughout the app. - **Bug Fixes** - Addressed missing `client` props in several components to prevent potential issues with client-dependent functionality. --- .../react/components/connect-wallet/index.tsx | 18 +++++------ .../react/hooks/useDashboardStorageUpload.tsx | 7 ++--- .../components/client/FaucetButton.tsx | 1 + .../components/client/add-chain-to-wallet.tsx | 8 +++-- .../components/server/chain-header.tsx | 3 ++ .../(chain)/[chain_id]/(chainPage)/layout.tsx | 2 ++ .../(marketplace)/components/list-form.tsx | 1 + .../[tokenId]/components/transfer-tab.tsx | 1 + .../settings/components/platform-fees.tsx | 1 + .../settings/components/primary-sale.tsx | 1 + .../settings/components/royalties.tsx | 1 + .../tokens/components/transfer-button.tsx | 1 + .../account/components/AccountHeader.tsx | 2 +- .../src/app/(app)/drops/[slug]/mint-ui.tsx | 5 ++-- apps/dashboard/src/app/(app)/providers.tsx | 9 +++++- .../components/EcosystemSlugLayout.tsx | 7 +++++ .../components/ecosystem-header.client.tsx | 6 +++- .../team-header-logged-in.client.tsx | 4 ++- .../ConfigureNetworkForm.tsx | 1 + .../configure-networks/Form/IconUpload.tsx | 10 ++++--- .../contract-deploy-form/custom-contract.tsx | 25 ++++++++++++++-- ...ular-contract-default-modules-fieldset.tsx | 30 ++++++++++++++++--- .../contract-deploy-form/param.tsx | 4 +++ .../platform-fee-fieldset.tsx | 4 +++ .../primary-sale-fieldset.tsx | 8 ++++- .../contract-deploy-form/royalty-fieldset.tsx | 4 +++ .../sequential-token-id-fieldset.tsx | 8 ++++- .../contract-deploy-form/split-fieldset.tsx | 9 ++++-- .../trusted-forwarders-fieldset.tsx | 5 +++- .../contract-params-fieldset.tsx | 4 +++ .../impl-params-fieldset.tsx | 5 +++- .../contract-publish-form/index.tsx | 15 ++++++++-- .../landing-fieldset.tsx | 1 + .../components/solidity-inputs/index.tsx | 3 ++ .../solidity-inputs/string-input.tsx | 3 +- 35 files changed, 174 insertions(+), 43 deletions(-) diff --git a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx index 2853c01b2b3..4ef008ede47 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx +++ b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx @@ -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: { <> { 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], ); } diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx index e94668020a5..485e24dfe3d 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx +++ b/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; + client: ThirdwebClient; }; -export function useDashboardStorageUpload(options?: DashboardUploadOptions) { - const thirdwebClient = useThirdwebClient(); +export function useDashboardStorageUpload(options: DashboardUploadOptions) { return useMutation({ mutationFn: async (files: Array): Promise => { const uris = await upload({ - client: thirdwebClient, files, ...options, }); 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 6ebce9ac9e8..90b14e39694 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 @@ -407,6 +407,7 @@ function SendFundsToFaucetModalContent(props: { isLoggedIn={props.isLoggedIn} connectButtonClassName="!w-full" detailsButtonClassName="!w-full" + client={props.client} /> )} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx index d75886fd248..7a5b370dd12 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx +++ b/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 = (props) => { @@ -49,7 +50,10 @@ export const AddChainToWallet: React.FC = (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 diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx index 0aa28db09b3..8d255588f6f 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx +++ b/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 */}
@@ -210,6 +211,7 @@ The following is the user's message:
= ({ > Contract address = ({ To Address Recipient Address Recipient Address Recipient Address = ({ To Address , + connectButton: , createProject: (team: Team) => setCreateProjectDialogState({ team, diff --git a/apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx b/apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx index ff2b24b1e70..3ff3500983a 100644 --- a/apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx +++ b/apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx @@ -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) {
) : (

Your wallet address is blocked

- +
); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx index 5e17d197064..0a71a2c9271 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx @@ -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 (
, + connectButton: ( + + ), createProject: (team: Team) => { setCreateProjectDialogState({ isOpen: true, diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx index 59571e98ad4..cd8ed01da83 100644 --- a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx +++ b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx @@ -381,6 +381,7 @@ export const ConfigureNetworkForm: React.FC = ({ client={client} /> { form.setValue("icon", uri, { shouldDirty: true }); }} diff --git a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx index 13783d2894b..69559a12971 100644 --- a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx +++ b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx @@ -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) => { diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx index 6d9ae3b0079..6c027638b24 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx @@ -460,6 +460,7 @@ export const CustomContractForm: React.FC = ({ return ( = ({ ); }) .filter((x) => x !== null), - [formDeployParams, deployParams, metadata.constructorParams, shouldHide], + [ + formDeployParams, + deployParams, + metadata.constructorParams, + shouldHide, + thirdwebClient, + ], ); // mutations go here @@ -728,6 +735,7 @@ export const CustomContractForm: React.FC = ({ form.formState, ).error?.message } + client={thirdwebClient} /> )} @@ -746,6 +754,7 @@ export const CustomContractForm: React.FC = ({ form.formState, ).error?.message } + client={thirdwebClient} /> )} @@ -779,6 +788,7 @@ export const CustomContractForm: React.FC = ({ form.formState, ).error?.message, }} + client={thirdwebClient} /> )} @@ -787,13 +797,17 @@ export const CustomContractForm: React.FC = ({ form={form} isMarketplace={isMarketplace} disabled={!isFeeExempt} + client={thirdwebClient} /> )} - {isSplit && } + {isSplit && } {hasTrustedForwarders && ( - + )} {/* for StakeERC721 */} @@ -816,6 +830,7 @@ export const CustomContractForm: React.FC = ({ deployParam={deployParam} extraMetadataParam={extraMetadataParam} isRequired + client={thirdwebClient} /> ); })} @@ -843,6 +858,7 @@ export const CustomContractForm: React.FC = ({ deployParam={deployParam} extraMetadataParam={extraMetadataParam} isRequired + client={thirdwebClient} /> ); })} @@ -885,6 +901,7 @@ export const CustomContractForm: React.FC = ({ extraMetadataParam={extraMetadataParam} inputClassName="bg-card" isRequired + client={thirdwebClient} /> ); })} @@ -894,6 +911,7 @@ export const CustomContractForm: React.FC = ({ form={form} modules={modules} isTWPublisher={isTWPublisher} + client={thirdwebClient} /> )} @@ -1009,6 +1027,7 @@ export const CustomContractForm: React.FC = ({
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx index d4794f42e01..ceede8009b6 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx @@ -1,6 +1,7 @@ import { FormControl } from "@chakra-ui/react"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import { useMemo } from "react"; +import type { ThirdwebClient } from "thirdweb"; import type { FetchDeployMetadataResult } from "thirdweb/contract"; import { FormErrorMessage, FormLabel } from "tw-components"; import type { CustomContractDeploymentForm } from "./custom-contract"; @@ -20,6 +21,7 @@ export function ModularContractDefaultModulesFieldset(props: { modules: FetchDeployMetadataResult[]; form: CustomContractDeploymentForm; isTWPublisher: boolean; + client: ThirdwebClient; }) { return (
@@ -30,6 +32,7 @@ export function ModularContractDefaultModulesFieldset(props: { module={mod} isTWPublisher={props.isTWPublisher} form={props.form} + client={props.client} /> ); })} @@ -41,6 +44,7 @@ function RenderModule(props: { module: FetchDeployMetadataResult; form: CustomContractDeploymentForm; isTWPublisher: boolean; + client: ThirdwebClient; }) { const { module, form } = props; @@ -57,13 +61,23 @@ function RenderModule(props: { if (showRoyaltyFieldset(paramNames)) { return ( - + ); } if (showPrimarySaleFieldset(paramNames)) { return ( - + ); } @@ -73,6 +87,7 @@ function RenderModule(props: { module={module} form={form} isTWPublisher + client={props.client} /> ); } @@ -98,6 +113,7 @@ function RenderModule(props: { > {param.name} ); } @@ -145,8 +163,9 @@ function RenderSequentialTokenIdFieldset(props: { module: FetchDeployMetadataResult; form: CustomContractDeploymentForm; isTWPublisher: boolean; + client: ThirdwebClient; }) { - const { module, form } = props; + const { module, form, client } = props; const startTokenIdPath = `moduleData.${module.name}.startTokenId` as const; @@ -157,6 +176,7 @@ function RenderSequentialTokenIdFieldset(props: { errorMessage={ form.getFieldState(startTokenIdPath, form.formState).error?.message } + client={client} /> ); } @@ -165,6 +185,7 @@ function RenderRoyaltyFieldset(props: { module: FetchDeployMetadataResult; form: CustomContractDeploymentForm; isTWPublisher: boolean; + client: ThirdwebClient; }) { const { module, form } = props; @@ -178,6 +199,7 @@ function RenderRoyaltyFieldset(props: { return ( = ({ deployParam, isRequired, inputClassName, + client, }) => { const form = useFormContext(); @@ -58,6 +61,7 @@ export const Param: React.FC = ({ diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx index e0075ab5abb..9abfb415af3 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx @@ -2,6 +2,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { BasisPointsInput } from "components/inputs/BasisPointsInput"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import Link from "next/link"; +import type { ThirdwebClient } from "thirdweb"; import { Fieldset } from "./common"; import type { CustomContractDeploymentForm } from "./custom-contract"; @@ -9,12 +10,14 @@ interface PlatformFeeFieldsetProps { form: CustomContractDeploymentForm; isMarketplace: boolean; disabled: boolean; + client: ThirdwebClient; } export const PlatformFeeFieldset: React.FC = ({ form, isMarketplace, disabled, + client, }) => { return (
@@ -45,6 +48,7 @@ export const PlatformFeeFieldset: React.FC = ({ diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx index 5a65ce98996..bd9a12c1b8a 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx @@ -1,12 +1,14 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import type { UseFormRegisterReturn } from "react-hook-form"; +import type { ThirdwebClient } from "thirdweb"; import { Fieldset } from "./common"; interface PrimarySaleFieldsetProps { isInvalid: boolean; register: UseFormRegisterReturn; errorMessage: string | undefined; + client: ThirdwebClient; } export const PrimarySaleFieldset: React.FC = ( @@ -25,7 +27,11 @@ export const PrimarySaleFieldset: React.FC = ( } > - +
); diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx index 225a4c46d77..13084954bce 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx @@ -2,6 +2,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { BasisPointsInput } from "components/inputs/BasisPointsInput"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import type { UseFormRegisterReturn } from "react-hook-form"; +import type { ThirdwebClient } from "thirdweb"; import { Fieldset } from "./common"; export function RoyaltyFieldset(props: { @@ -21,6 +22,7 @@ export function RoyaltyFieldset(props: { register: UseFormRegisterReturn; errorMessage: string | undefined; }; + client: ThirdwebClient; }) { const bpsNumValue = Number.parseInt(props.royaltyBps.value); return ( @@ -42,6 +44,7 @@ export function RoyaltyFieldset(props: { @@ -75,6 +78,7 @@ export function RoyaltyFieldset(props: { )} diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx index f434fd6aba8..c511d25ed6c 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx @@ -2,11 +2,13 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; import { FormControl } from "@/components/ui/form"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import type { UseFormRegisterReturn } from "react-hook-form"; +import type { ThirdwebClient } from "thirdweb"; interface SequentialTokenIdFieldsetProps { isInvalid: boolean; register: UseFormRegisterReturn; errorMessage: string | undefined; + client: ThirdwebClient; } export const SequentialTokenIdFieldset: React.FC< @@ -21,7 +23,11 @@ export const SequentialTokenIdFieldset: React.FC< helperText="The starting token ID for the NFT collection." > - + ); diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx index c9d555f2405..e1e07177743 100644 --- a/apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx @@ -5,12 +5,13 @@ import { BasisPointsInput } from "components/inputs/BasisPointsInput"; import { SolidityInput } from "contract-ui/components/solidity-inputs"; import { InfoIcon, PlusIcon, Trash2Icon } from "lucide-react"; import { useFieldArray } from "react-hook-form"; -import { ZERO_ADDRESS } from "thirdweb"; +import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb"; import { Fieldset } from "./common"; import type { CustomContractDeploymentForm } from "./custom-contract"; interface SplitFieldsetProps { form: CustomContractDeploymentForm; + client: ThirdwebClient; } export interface Recipient { @@ -18,7 +19,10 @@ export interface Recipient { sharesBps: number; } -export const SplitFieldset: React.FC = ({ form }) => { +export const SplitFieldset: React.FC = ({ + form, + client, +}) => { const { fields, append, remove } = useFieldArray({ name: "recipients", control: form.control, @@ -48,6 +52,7 @@ export const SplitFieldset: React.FC = ({ form }) => { } > = ({ form }) => { +> = ({ form, client }) => { const isDynamicValue = (val: string | DynamicValue): val is DynamicValue => { return typeof val === "object" && val !== null && "dynamicValue" in val; }; @@ -45,6 +47,7 @@ export const TrustedForwardersFieldset: React.FC< } > = ({ deployParams, + client, }) => { const form = useFormContext(); const isMobile = useBreakpointValue({ base: true, md: false }); @@ -215,6 +218,7 @@ export const ContractParamsFieldset: React.FC = ({ {!isCustomInputEnabledArray[idx] ? ( = ({ implParams }) => { +> = ({ implParams, client }) => { const form = useFormContext(); const isMobile = useBreakpointValue({ base: true, md: false }); @@ -119,6 +121,7 @@ export const ImplementationParamsFieldset: React.FC< {!isCustomInputEnabled[idx] ? ( + )} {fieldsetToShow === "implParams" && implDeployParams?.length > 0 && ( - + )} {fieldsetToShow === "factory" && ( @@ -366,7 +372,10 @@ export function ContractPublishForm(props: { {!account ? ( <> - + ) : fieldsetToShow === "landing" && form.watch("deployType") === "standard" ? ( diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx index 7a7408608cc..d3161eaef2a 100644 --- a/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx +++ b/apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx @@ -258,6 +258,7 @@ export const LandingFieldset: React.FC = ({ Audit report diff --git a/apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx b/apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx index ee04d2a1d59..2a0e5fdd518 100644 --- a/apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx +++ b/apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx @@ -1,6 +1,7 @@ import { Input } from "@/components/ui/input"; import { forwardRef } from "react"; import { type UseFormReturn, useFormContext } from "react-hook-form"; +import type { ThirdwebClient } from "thirdweb"; import { SolidityAddressInput } from "./address-input"; import { SolidityBoolInput } from "./bool-input"; import { SolidityBytesInput } from "./bytes-input"; @@ -17,6 +18,7 @@ export interface SolidityInputProps extends InputProps { } export interface SolidityInputWithTypeProps extends SolidityInputProps { solidityType: string; + client: ThirdwebClient; solidityName?: string; solidityComponents?: | { @@ -31,6 +33,7 @@ export interface SolidityInputWithTypeProps extends SolidityInputProps { interface SolidityInputPropsOptionalFormProps extends InputProps { solidityType: string; solidityName?: string; + client: ThirdwebClient; solidityComponents?: | { // biome-ignore lint/suspicious/noExplicitAny: FIXME diff --git a/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx b/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx index 74bb2429de9..a6ae4e3e1f9 100644 --- a/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx +++ b/apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx @@ -12,9 +12,10 @@ export const SolidityStringInput: React.FC = ({ functionName, // eslint-disable-next-line @typescript-eslint/no-unused-vars solidityType, + client, ...inputProps }) => { - const storageUpload = useDashboardStorageUpload(); + const storageUpload = useDashboardStorageUpload({ client }); const queryClient = useQueryClient(); const { name, ...restOfInputProps } = inputProps; const inputName = name as string;