Skip to content

Commit 1c11f84

Browse files
committed
Dashboard: Reduce useThirdwebClient hook usage #4 (#7227)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing the `TransactionButton` component across various files by adding a `client` prop and other relevant properties to improve transaction handling and user interactions. ### Detailed summary - Added `client` prop to `TransactionButton` in multiple components for transaction management. - Included `isLoggedIn`, `txChainID`, and `transactionCount` props where applicable. - Enhanced user experience by managing loading states and enabling/disabling buttons based on conditions. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - All transaction-related buttons and components now require and receive an explicit client instance, improving reliability and consistency across the dashboard. - **Refactor** - Updated component interfaces to accept a client prop instead of relying on internal hooks. - Standardized the way client instances are passed through component hierarchies, including in forms, modals, and tables. - Renamed certain props for clarity (e.g., `clientId` to `projectClientId`). - **Style** - No user-facing visual changes. - **Chores** - Improved code maintainability by removing internal hook usage for client access. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent b84db12 commit 1c11f84

File tree

69 files changed

+253
-84
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+253
-84
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
3030
return (
3131
<div className="flex flex-col gap-3 pt-3">
3232
<TransactionButton
33+
client={contract.client}
3334
isLoggedIn={isLoggedIn}
3435
txChainID={contract.chain.id}
3536
transactionCount={1}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -659,6 +659,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
659659
Cancel
660660
</Button>
661661
<TransactionButton
662+
client={contract.client}
662663
isLoggedIn={isLoggedIn}
663664
txChainID={contract.chain.id}
664665
isPending={isFormLoading}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
658658
hasRemovedPhases ||
659659
!isMultiPhase ? (
660660
<TransactionButton
661+
client={contract.client}
661662
isLoggedIn={isLoggedIn}
662663
txChainID={contract.chain.id}
663664
transactionCount={1}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
9494
return (
9595
<AdminOnly contract={contract} fallback={<div className="pb-5" />}>
9696
<TransactionButton
97+
client={contract.client}
9798
isLoggedIn={isLoggedIn}
9899
transactionCount={1}
99100
type="button"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
4848
value={amount}
4949
/>
5050
<TransactionButton
51+
client={client}
5152
isLoggedIn={isLoggedIn}
5253
txChainID={v5Chain.id}
5354
transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
6161

6262
return (
6363
<TransactionButton
64+
client={contract.client}
6465
isLoggedIn={isLoggedIn}
6566
txChainID={contract.chain.id}
6667
onClick={() => {

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { useTxNotifications } from "hooks/useTxNotifications";
2323
import { CircleAlertIcon } from "lucide-react";
2424
import { useCallback } from "react";
2525
import { useForm } from "react-hook-form";
26-
import { sendAndConfirmTransaction } from "thirdweb";
26+
import { type ThirdwebClient, sendAndConfirmTransaction } from "thirdweb";
2727
import { BatchMetadataERC721, BatchMetadataERC1155 } from "thirdweb/modules";
2828
import { parseAttributes } from "utils/parseAttributes";
2929
import { z } from "zod";
@@ -105,6 +105,7 @@ export function BatchMetadataModuleUI(
105105
uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
106106
contractChainId: number;
107107
isLoggedIn: boolean;
108+
client: ThirdwebClient;
108109
},
109110
) {
110111
return (
@@ -122,6 +123,7 @@ export function BatchMetadataModuleUI(
122123
isLoggedIn={props.isLoggedIn}
123124
uploadMetadata={props.uploadMetadata}
124125
contractChainId={props.contractChainId}
126+
client={props.client}
125127
/>
126128
)}
127129
{!props.isOwnerAccount && (
@@ -164,6 +166,7 @@ function UploadMetadataNFTSection(props: {
164166
uploadMetadata: (values: UploadMetadataFormValues) => Promise<void>;
165167
contractChainId: number;
166168
isLoggedIn: boolean;
169+
client: ThirdwebClient;
167170
}) {
168171
const form = useForm<UploadMetadataFormValues>({
169172
resolver: zodResolver(uploadMetadataFormSchema),
@@ -262,6 +265,7 @@ function UploadMetadataNFTSection(props: {
262265

263266
<div className="flex justify-end">
264267
<TransactionButton
268+
client={props.client}
265269
isLoggedIn={props.isLoggedIn}
266270
size="sm"
267271
className="min-w-24"

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { useFieldArray, useForm } from "react-hook-form";
4141
import {
4242
NATIVE_TOKEN_ADDRESS,
4343
type PreparedTransaction,
44+
type ThirdwebClient,
4445
ZERO_ADDRESS,
4546
getContract,
4647
sendAndConfirmTransaction,
@@ -343,6 +344,7 @@ export function ClaimableModuleUI(
343344
isLoading: boolean;
344345
};
345346
isLoggedIn: boolean;
347+
client: ThirdwebClient;
346348
},
347349
) {
348350
return (
@@ -358,6 +360,7 @@ export function ClaimableModuleUI(
358360
</AccordionTrigger>
359361
<AccordionContent className="px-1">
360362
<MintNFTSection
363+
client={props.client}
361364
mint={props.mintSection.mint}
362365
name={props.name}
363366
contractChainId={props.contractChainId}
@@ -390,6 +393,7 @@ export function ClaimableModuleUI(
390393
{props.name !== "ClaimableERC1155" || props.isValidTokenId ? (
391394
props.claimConditionSection.data ? (
392395
<ClaimConditionSection
396+
client={props.client}
393397
isLoggedIn={props.isLoggedIn}
394398
isOwnerAccount={props.isOwnerAccount}
395399
claimCondition={
@@ -424,6 +428,7 @@ export function ClaimableModuleUI(
424428
<AccordionContent className="px-1">
425429
{props.primarySaleRecipientSection.data ? (
426430
<PrimarySaleRecipientSection
431+
client={props.client}
427432
isLoggedIn={props.isLoggedIn}
428433
isOwnerAccount={props.isOwnerAccount}
429434
primarySaleRecipient={
@@ -490,6 +495,7 @@ function ClaimConditionSection(props: {
490495
tokenId: string;
491496
noClaimConditionSet: boolean;
492497
isLoggedIn: boolean;
498+
client: ThirdwebClient;
493499
}) {
494500
const { idToChain } = useAllChainsData();
495501
const chain = idToChain.get(props.chainId);
@@ -741,6 +747,7 @@ function ClaimConditionSection(props: {
741747

742748
<div className="flex justify-end">
743749
<TransactionButton
750+
client={props.client}
744751
isLoggedIn={props.isLoggedIn}
745752
size="sm"
746753
className="min-w-24"
@@ -775,6 +782,7 @@ function PrimarySaleRecipientSection(props: {
775782
isOwnerAccount: boolean;
776783
contractChainId: number;
777784
isLoggedIn: boolean;
785+
client: ThirdwebClient;
778786
}) {
779787
const form = useForm<PrimarySaleRecipientFormValues>({
780788
resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -823,6 +831,7 @@ function PrimarySaleRecipientSection(props: {
823831

824832
<div className="flex justify-end">
825833
<TransactionButton
834+
client={props.client}
826835
isLoggedIn={props.isLoggedIn}
827836
size="sm"
828837
className="min-w-24 gap-2"
@@ -859,6 +868,7 @@ function MintNFTSection(props: {
859868
name: string;
860869
contractChainId: number;
861870
isLoggedIn: boolean;
871+
client: ThirdwebClient;
862872
}) {
863873
const form = useForm<MintFormValues>({
864874
resolver: zodResolver(mintFormSchema),
@@ -940,6 +950,7 @@ function MintNFTSection(props: {
940950

941951
<div className="flex justify-end">
942952
<TransactionButton
953+
client={props.client}
943954
size="sm"
944955
className="min-w-24 gap-2"
945956
disabled={mintMutation.isPending}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import { useTxNotifications } from "hooks/useTxNotifications";
2727
import { CircleAlertIcon } from "lucide-react";
2828
import { useCallback } from "react";
2929
import { useForm } from "react-hook-form";
30-
import { type PreparedTransaction, sendAndConfirmTransaction } from "thirdweb";
30+
import {
31+
type PreparedTransaction,
32+
type ThirdwebClient,
33+
sendAndConfirmTransaction,
34+
} from "thirdweb";
3135
import {
3236
MintableERC20,
3337
MintableERC721,
@@ -193,6 +197,7 @@ export function MintableModuleUI(
193197
isBatchMetadataInstalled: boolean;
194198
contractChainId: number;
195199
isLoggedIn: boolean;
200+
client: ThirdwebClient;
196201
},
197202
) {
198203
return (
@@ -216,6 +221,7 @@ export function MintableModuleUI(
216221
name={props.name}
217222
isBatchMetadataInstalled={props.isBatchMetadataInstalled}
218223
contractChainId={props.contractChainId}
224+
client={props.client}
219225
/>
220226
)}
221227
{!props.isOwnerAccount && (
@@ -243,6 +249,7 @@ export function MintableModuleUI(
243249
update={props.updatePrimaryRecipient}
244250
contractChainId={props.contractChainId}
245251
isLoggedIn={props.isLoggedIn}
252+
client={props.client}
246253
/>
247254
</AccordionContent>
248255
</AccordionItem>
@@ -263,6 +270,7 @@ function PrimarySalesSection(props: {
263270
isOwnerAccount: boolean;
264271
contractChainId: number;
265272
isLoggedIn: boolean;
273+
client: ThirdwebClient;
266274
}) {
267275
const form = useForm<UpdateFormValues>({
268276
resolver: zodResolver(primarySaleRecipientFormSchema),
@@ -312,6 +320,7 @@ function PrimarySalesSection(props: {
312320

313321
<div className="mt-4 flex justify-end">
314322
<TransactionButton
323+
client={props.client}
315324
isLoggedIn={props.isLoggedIn}
316325
size="sm"
317326
className="min-w-24"
@@ -341,6 +350,7 @@ function MintNFTSection(props: {
341350
isBatchMetadataInstalled: boolean;
342351
contractChainId: number;
343352
isLoggedIn: boolean;
353+
client: ThirdwebClient;
344354
}) {
345355
const form = useForm<MintFormValues>({
346356
resolver: zodResolver(mintFormSchema),
@@ -524,6 +534,7 @@ function MintNFTSection(props: {
524534

525535
<div className="flex justify-end">
526536
<TransactionButton
537+
client={props.client}
527538
isLoggedIn={props.isLoggedIn}
528539
size="sm"
529540
className="min-w-24"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,7 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
386386
{/* Submit */}
387387
<div className="flex justify-end">
388388
<TransactionButton
389+
client={contract.client}
389390
isLoggedIn={props.isLoggedIn}
390391
txChainID={contract.chain.id}
391392
transactionCount={1}

0 commit comments

Comments
 (0)