Skip to content

Dashboard: Reduce useThirdwebClient hook usage #2 #7224

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

Conversation

MananTank
Copy link
Member

@MananTank MananTank commented May 30, 2025


PR-Codex overview

This PR focuses on integrating the client prop of type ThirdwebClient into various components and hooks across the dashboard application, enhancing their functionality and allowing them to interact with the Thirdweb SDK.

Detailed summary

  • Added client prop to components like IconUpload, SolidityInput, and various Fieldset components.
  • Updated useDashboardStorageUpload to accept client as an argument.
  • Modified CustomConnectWallet to utilize the client prop.
  • Enhanced several forms and buttons to support client for better SDK integration.
  • Updated components to ensure they pass client where necessary for improved functionality.

✨ 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.

Copy link

changeset-bot bot commented May 30, 2025

⚠️ No Changeset found

Latest commit: a440621

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented May 30, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
thirdweb-www ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 30, 2025 6:43pm
4 Skipped Deployments
Name Status Preview Comments Updated (UTC)
docs-v2 ⬜️ Skipped (Inspect) May 30, 2025 6:43pm
login ⬜️ Skipped (Inspect) May 30, 2025 6:43pm
thirdweb_playground ⬜️ Skipped (Inspect) May 30, 2025 6:43pm
wallet-ui ⬜️ Skipped (Inspect) May 30, 2025 6:43pm

@vercel vercel bot temporarily deployed to Preview – wallet-ui May 30, 2025 15:32 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 May 30, 2025 15:32 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 30, 2025 15:32 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 30, 2025 15:32 Inactive
Copy link
Contributor

coderabbitai bot commented May 30, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This change refactors multiple components and hooks to require a ThirdwebClient instance to be passed explicitly as a prop or parameter, rather than being accessed internally via hooks. All affected components, hooks, and input fields now receive the client directly, ensuring consistent client context throughout the application.

Changes

Files/Groups Change Summary
.../connect-wallet/index.tsx, .../useDashboardStorageUpload.tsx Require client prop/parameter; remove internal useThirdwebClient usage; update signatures accordingly.
.../configure-networks/Form/IconUpload.tsx, .../configure-networks/ConfigureNetworkForm.tsx Add required client prop to IconUpload and pass it in parent form.
.../team/.../ecosystem-header.client.tsx, .../ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx Add required client prop to EcosystemHeader and pass from parent layout.
.../contract-components/contract-deploy-form/, .../contract-publish-form/, .../solidity-inputs/* Add required client prop to various fieldsets, parameter components, and input types; update prop interfaces.
.../contract-components/contract-deploy-form/custom-contract.tsx Pass client prop to all relevant child components and fieldsets.
.../contract-components/contract-publish-form/index.tsx Pass client prop to ContractParamsFieldset, ImplementationParamsFieldset, and CustomConnectWallet.
.../contract-ui/components/solidity-inputs/index.tsx, .../string-input.tsx Add client prop to input interfaces and components; pass to storage upload hook.
.../account/components/AccountHeader.tsx, .../team/components/TeamHeader/team-header-logged-in.client.tsx Pass client prop to CustomConnectWallet in account and team header components.
.../providers.tsx Create client instance and pass to CustomConnectWallet in sanctioned address checker.
.../drops/[slug]/mint-ui.tsx Remove internal useThirdwebClient; use client from props for wallet and media components.
.../app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx, .../server/chain-header.tsx, .../layout.tsx Add and propagate client prop through chain page components and headers.
.../app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx Pass client prop to CustomConnectWallet in faucet modal.
.../app/(dashboard)/(chain)/[chain_id]/[contractAddress]/* Pass client prop to SolidityInput components in listing, transfer, settings, and token forms.

Sequence Diagram(s)

sequenceDiagram
    participant ParentComponent
    participant ChildComponent
    participant SolidityInput
    participant ThirdwebClient

    ParentComponent->>ChildComponent: Render with client=ThirdwebClient
    ChildComponent->>SolidityInput: Render with client=ThirdwebClient
    SolidityInput->>ThirdwebClient: Use client for operations (e.g., validation, upload)
Loading

Possibly related PRs

Suggested labels

SDK


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the Dashboard Involves changes to the Dashboard. label May 30, 2025
@MananTank MananTank marked this pull request as ready for review May 30, 2025 15:32
Copy link
Member Author

MananTank commented May 30, 2025


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copy link

codecov bot commented May 30, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 55.62%. Comparing base (0262763) to head (a440621).
Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7224   +/-   ##
=======================================
  Coverage   55.62%   55.62%           
=======================================
  Files         908      908           
  Lines       58575    58575           
  Branches     4134     4134           
=======================================
  Hits        32582    32582           
  Misses      25887    25887           
  Partials      106      106           
Flag Coverage Δ
packages 55.62% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

github-actions bot commented May 30, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 62.14 KB (0%) 1.3 s (0%) 208 ms (+147.22% 🔺) 1.5 s
thirdweb (cjs) 344.83 KB (0%) 6.9 s (0%) 651 ms (+5.67% 🔺) 7.6 s
thirdweb (minimal + tree-shaking) 5.7 KB (0%) 114 ms (0%) 72 ms (+1154.41% 🔺) 186 ms
thirdweb/chains (tree-shaking) 531 B (0%) 11 ms (0%) 15 ms (+503.57% 🔺) 26 ms
thirdweb/react (minimal + tree-shaking) 19.52 KB (0%) 391 ms (0%) 66 ms (+478.87% 🔺) 457 ms

Copy link
Member

jnsdls commented May 30, 2025

@coderabbitai review

Copy link
Contributor

coderabbitai bot commented May 30, 2025

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (1)

152-152: ⚠️ Potential issue

Inconsistent client usage - should use props.client consistently.

The component has mixed client usage patterns:

  • Lines 169-171: Uses props.client for storage upload (✓ correct)
  • Line 152: Still uses useThirdwebClient() hook
  • Line 158: Uses the hook-derived client for resolveSchemeWithErrorHandler

This contradicts the PR objective of reducing useThirdwebClient hook usage.

Apply this diff to use props.client consistently:

-  const client = useThirdwebClient();
-
   const ecosystem = fetchedEcosystem ?? props.ecosystem;

   const ecosystemImageLink = resolveSchemeWithErrorHandler({
     uri: ecosystem.imageUrl,
-    client,
+    client: props.client,
   });

And remove the unused import if no longer needed:

- import { useThirdwebClient } from "@/constants/thirdweb.client";

Also applies to: 158-158

🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx (1)

41-44: Consider adding error handling for client creation.

The client creation looks correct with proper authentication context (teamId and JWT), but consider adding error handling in case getClientThirdwebClient fails.

  const client = getClientThirdwebClient({
    teamId: team.id,
    jwt: authToken,
  });

Could be enhanced with error handling:

+ try {
    const client = getClientThirdwebClient({
      teamId: team.id,
      jwt: authToken,
    });
+ } catch (error) {
+   console.error('Failed to create Thirdweb client:', error);
+   redirect(ecosystemLayoutPath);
+ }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d69067 and 6d2fef0.

📒 Files selected for processing (35)
  • apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx (6 hunks)
  • apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/providers.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx (1 hunks)
  • apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx (1 hunks)
  • apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx (1 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx (11 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx (13 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/param.tsx (3 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx (4 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-deploy-form/trusted-forwarders-fieldset.tsx (3 hunks)
  • apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx (2 hunks)
  • apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx (1 hunks)
  • apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx (3 hunks)
  • apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (13)
apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx (1)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx (1)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (1)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx (2)
apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx (1)
  • CustomConnectWallet (32-204)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx (1)
  • useDashboardStorageUpload (11-26)
apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx (1)
apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx (1)
  • SolidityInput (51-121)
apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx (3)
apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx (1)
  • ContractParamsFieldset (23-313)
apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx (1)
  • ImplementationParamsFieldset (17-179)
apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx (1)
  • CustomConnectWallet (32-204)
apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx (1)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx (1)
  • useDashboardStorageUpload (11-26)
apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx (1)
apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx (1)
  • CustomConnectWallet (32-204)
apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx (1)
  • SolidityInput (51-121)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx (1)
  • useDashboardStorageUpload (11-26)
apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx (2)
apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx (1)
  • SplitFieldset (22-129)
apps/dashboard/src/components/contract-components/contract-deploy-form/trusted-forwarders-fieldset.tsx (1)
  • TrustedForwardersFieldset (15-60)
apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: Graphite / mergeability_check
  • GitHub Check: Graphite / mergeability_check
  • GitHub Check: Graphite / mergeability_check
  • GitHub Check: Graphite / mergeability_check
🔇 Additional comments (57)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx (1)

106-106: LGTM: Client prop correctly added to SolidityInput

The addition of client={contract.client} properly provides the ThirdwebClient instance to the SolidityInput component, aligning with the refactoring objective to explicitly pass client instances rather than relying on internal hooks.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1)

130-130: LGTM: Consistent client prop implementation

The addition of client={contract.client} follows the same pattern as other components in this refactor, correctly providing the ThirdwebClient instance to SolidityInput for proper SDK integration.

apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx (1)

261-261: LGTM: Client prop correctly passed from hook

The addition of client={client} properly provides the ThirdwebClient instance obtained from the useThirdwebClient() hook to the SolidityInput component. This follows the refactoring pattern of explicitly passing the client instance for string input handling.

apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx (1)

384-384: LGTM: Client prop added to IconUpload component

The addition of client={client} correctly provides the ThirdwebClient instance to the IconUpload component, maintaining consistency with the nearby ChainIconClient component and supporting the refactoring objective to explicitly pass client instances.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1)

132-132: LGTM: Consistent with client prop refactoring pattern

The addition of client={contract.client} prop to SolidityInput correctly follows the established pattern of explicitly passing the ThirdwebClient instance instead of relying on internal hooks.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx (1)

75-75: LGTM: Proper client prop addition for address input

The client={contract.client} prop addition ensures the SolidityInput component has access to the ThirdwebClient instance for proper address validation and blockchain interaction.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx (1)

410-410: LGTM: Client prop correctly passed to CustomConnectWallet

The addition of client={props.client} ensures the CustomConnectWallet component receives the necessary ThirdwebClient instance for wallet connection functionality, consistent with the refactoring to remove internal hook usage.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1)

144-144: LGTM: Consistent client prop implementation

The client={contract.client} prop addition to SolidityInput aligns with the broader refactoring effort to explicitly provide ThirdwebClient instances to components that require blockchain interaction capabilities.

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

488-488: LGTM! Client prop correctly added to SolidityInput.

The change appropriately passes the client from the contract instance to the SolidityInput component, aligning with the broader architectural refactor to explicitly pass the ThirdwebClient instead of relying on internal hooks.

apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx (1)

52-52: LGTM! Client prop correctly added to CustomConnectWallet.

The change properly passes the client instance obtained from the useThirdwebClient() hook to the CustomConnectWallet component, which is required based on the component's updated interface. This aligns with the architectural refactor to explicitly pass the ThirdwebClient instance.

apps/dashboard/src/components/contract-components/contract-deploy-form/royalty-fieldset.tsx (1)

5-5: LGTM! Complete client prop integration.

The changes systematically update the RoyaltyFieldset component to:

  • Import the ThirdwebClient type
  • Accept a client prop in the component interface
  • Pass the client prop to both SolidityInput components

This follows the established pattern across the codebase for explicitly passing the ThirdwebClient instance rather than relying on internal hooks.

Also applies to: 25-25, 47-47, 81-81

apps/dashboard/src/app/(app)/providers.tsx (1)

17-17: LGTM! Client integration for sanctioned addresses checker.

The changes properly integrate the ThirdwebClient:

  • Import getClientThirdwebClient function
  • Create a module-level client instance
  • Pass the client to CustomConnectWallet in the blocked wallet UI

This ensures the sanctioned addresses checker has proper client context and follows the established pattern of explicit client prop passing.

Also applies to: 69-69, 86-90

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx (2)

75-75: LGTM: Client creation is properly positioned.

The client is created at the layout level, which is an appropriate place for centralized client management that can be passed down to child components.


167-167: LGTM: Consistent client prop passing.

The client is properly passed to both ChainHeader and AddChainToWallet components, maintaining consistency with the refactoring pattern to explicitly provide ThirdwebClient instances rather than relying on internal hooks.

Also applies to: 214-214

apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx (1)

57-59: LGTM: Client prop properly passed to CustomConnectWallet.

The change correctly passes the client prop to the CustomConnectWallet component, aligning with the refactoring pattern to explicitly provide ThirdwebClient instances. This improves dependency visibility and component testability.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx (3)

4-4: LGTM: Proper type import added.

The ThirdwebClient type import is correctly added to support the new client prop.


14-14: LGTM: Props interface properly extended.

The ChainHeaderProps type correctly includes the required client prop with proper TypeScript typing.


56-56: LGTM: Client prop properly passed to child component.

The client is correctly passed to the AddChainToWallet component, maintaining consistency with the refactoring pattern and ensuring the child component receives the ThirdwebClient instance it requires.

apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx (3)

9-9: LGTM: Proper type import added.

The ThirdwebClient type import is correctly added to support the new client prop.


11-14: LGTM: Component signature properly updated.

The component props are correctly updated to include the required client prop with proper TypeScript typing. The arrow function syntax with explicit typing provides good type safety.


15-15: LGTM: Hook usage updated to accept explicit client.

The useDashboardStorageUpload hook now receives the client explicitly through the options object, which aligns with the refactoring pattern to make dependencies explicit rather than relying on internal hook calls.

apps/dashboard/src/contract-ui/components/solidity-inputs/index.tsx (1)

4-4: LGTM! Proper type addition for client prop.

The addition of the ThirdwebClient import and the client prop to both interfaces correctly supports the refactor to explicit client passing. The SolidityInput component properly forwards this prop to specialized input components via the spread operator.

Also applies to: 21-21, 36-36

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (1)

169-171: LGTM! Correct implementation of explicit client passing.

The storage upload hook correctly uses the explicit client prop instead of relying on internal hook calls, which aligns with the PR objectives.

apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx (1)

15-15: LGTM! Proper implementation of explicit client prop.

The component correctly receives the client prop and passes it to useDashboardStorageUpload, following the established pattern for reducing useThirdwebClient hook usage.

Also applies to: 18-18

apps/dashboard/src/components/contract-components/contract-deploy-form/primary-sale-fieldset.tsx (1)

4-4: LGTM! Consistent implementation of client prop pattern.

The changes correctly:

  • Import the ThirdwebClient type
  • Add the client prop to the interface
  • Pass the client prop to the SolidityInput component

This follows the established pattern for the refactor and ensures proper client context propagation.

Also applies to: 11-11, 33-33

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx (2)

3-3: LGTM: Import addition supports the dependency injection pattern.

The import of getClientThirdwebClient aligns with the PR objective to reduce useThirdwebClient hook usage by explicitly passing client instances.


49-49: LGTM: Client prop properly passed to EcosystemHeader.

The client instance is correctly passed down to the EcosystemHeader component, following the dependency injection pattern established in this refactor.

apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx (2)

5-5: LGTM: Type import and interface extension are correct.

The addition of ThirdwebClient import and the client property to the SequentialTokenIdFieldsetProps interface follows the established pattern for this refactor.

Also applies to: 11-11


26-30: LGTM: Client prop correctly passed to SolidityInput.

The client prop is properly threaded through to the SolidityInput component, maintaining consistency with the dependency injection pattern being implemented across the codebase.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx (2)

9-9: LGTM: Type import and props interface updated correctly.

The addition of ThirdwebClient to the imports and the client property to AddChainToWalletProps follows the established pattern for this refactor.

Also applies to: 19-19


53-56: LGTM: Client properly passed to customConnectModal.

The client is correctly passed to customConnectModal when no account is present, ensuring the connection modal has the proper client context for wallet operations.

apps/dashboard/src/components/contract-components/contract-deploy-form/param.tsx (2)

5-5: LGTM: Type import, interface, and component signature updated correctly.

The addition of ThirdwebClient import, the client property to ParamProps interface, and the parameter in the component destructuring all follow the established pattern for this refactor.

Also applies to: 11-11, 28-28


64-64: LGTM: Client prop correctly passed to SolidityInput.

The client prop is properly passed to the SolidityInput component, ensuring it has access to the Thirdweb client context for blockchain interactions and input validation.

apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx (1)

335-338: LGTM! Proper client prop propagation.

The client instance is correctly passed down to child components that require it. This change aligns well with the broader refactoring goal of reducing useThirdwebClient hook usage in favor of explicit prop passing, improving component testability and reducing coupling.

Also applies to: 342-345, 375-378

apps/dashboard/src/app/(app)/drops/[slug]/mint-ui.tsx (1)

101-101: LGTM! Cleaner client usage pattern.

Using props.contract.client instead of a local useThirdwebClient() hook is more explicit and follows the single source of truth principle. This reduces the component's dependencies and improves maintainability.

Also applies to: 226-226

apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx (1)

15-15: LGTM! Consistent client prop implementation.

The changes properly extend the component interface and pass the client down to SolidityInput. This follows the established pattern for the refactoring and maintains type safety while improving explicit client management.

Also applies to: 21-21, 25-25, 221-221

apps/dashboard/src/components/contract-components/contract-deploy-form/trusted-forwarders-fieldset.tsx (1)

3-3: LGTM! Consistent refactoring pattern applied.

The changes follow the same clean pattern as other components in this refactor - adding the client prop to the interface and passing it down to SolidityInput. The implementation is minimal and maintains existing functionality while improving client management consistency.

Also applies to: 12-12, 17-17, 50-50

apps/dashboard/src/components/contract-components/contract-deploy-form/platform-fee-fieldset.tsx (1)

5-5: LGTM! Clean implementation of explicit client prop injection.

The addition of the client prop follows the established pattern for this refactor perfectly. The type import, interface update, parameter destructuring, and prop forwarding to SolidityInput are all correctly implemented.

Also applies to: 13-13, 20-20, 51-51

apps/dashboard/src/components/contract-components/contract-deploy-form/split-fieldset.tsx (1)

8-8: Excellent implementation of the client prop pattern.

The changes are well-structured and consistent:

  • Clean import organization combining ThirdwebClient with existing imports
  • Proper interface extension with the required client prop
  • Correct prop destructuring and forwarding to SolidityInput

Also applies to: 14-14, 22-25, 55-55

apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx (1)

10-10: Perfect adherence to the established refactor pattern.

The implementation correctly follows the systematic approach:

  • Proper type import for ThirdwebClient
  • Interface extension with required client prop
  • Clean parameter destructuring
  • Appropriate prop forwarding to SolidityInput

Also applies to: 15-15, 19-19, 124-124

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx (3)

14-14: Excellent refactor removing internal hook dependency.

The component now properly receives the ThirdwebClient instance as a prop instead of using the useThirdwebClient hook internally. This improves explicit dependency management and aligns with the broader refactor goals.

Also applies to: 38-38, 41-41


144-144: Proper client prop forwarding to child components.

The client prop is correctly passed to both ConnectButton and CustomChainRenderer components, ensuring consistent client context throughout the component tree.

Also applies to: 179-179


282-284: Well-implemented hook parameter update.

The useCustomConnectModal hook correctly requires the client as a parameter and the dependency array is properly updated to exclude the client since it's now a parameter rather than a captured variable.

Also applies to: 302-302

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardStorageUpload.tsx (1)

2-2: LGTM: Clean dependency injection refactor

The changes properly implement explicit client dependency injection:

  • Added ThirdwebClient import and type annotation
  • Made options parameter required with the new client property
  • Eliminated internal hook dependency in favor of explicit parameter passing

This is a clean breaking change that improves testability and dependency management.

Also applies to: 8-8, 11-11

apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx (5)

4-4: LGTM: Proper type import and interface update

The import of ThirdwebClient and addition to the component props follows the established pattern for this refactor.

Also applies to: 24-24


35-36: LGTM: Consistent client prop propagation

The client prop is correctly passed down to the RenderModule component and added to its interface, maintaining the chain of dependency injection.

Also applies to: 47-47


64-70: LGTM: Systematic client propagation to render functions

All three render functions (RenderRoyaltyFieldset, RenderPrimarySaleFieldset, RenderSequentialTokenIdFieldset) correctly receive and pass the client prop to their respective fieldset components.

Also applies to: 75-81, 86-92


116-116: LGTM: SolidityInput receives client prop

The SolidityInput component correctly receives the client prop for the generic parameter rendering case.


140-142: LGTM: All specialized render components properly handle client prop

All render components (RenderPrimarySaleFieldset, RenderSequentialTokenIdFieldset, RenderRoyaltyFieldset) correctly:

  • Accept the client prop in their interfaces
  • Destructure it from props where needed
  • Pass it to their respective fieldset components

The prop threading is consistent and follows the established pattern.

Also applies to: 157-158, 166-168, 179-180, 188-188, 202-202

apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx (8)

463-463: LGTM: Client prop added to Param component

The client prop is correctly passed to the Param component in the advanced parameters section.


474-480: LGTM: Critical useMemo dependency update

Adding thirdwebClient to the dependency array is essential for correctness since the Param components now depend on the client prop. This ensures the advanced parameters are properly re-rendered when the client changes.


738-738: LGTM: Client prop added to PrimarySaleFieldset components

Both primary sale fieldset instances correctly receive the client prop for their respective form fields (_saleRecipient and _primarySaleRecipient).

Also applies to: 757-757


791-791: LGTM: Client prop added to RoyaltyFieldset and PlatformFeeFieldset

Both fieldset components correctly receive the client prop for their respective functionality.

Also applies to: 800-800


804-804: LGTM: Client prop added to SplitFieldset and TrustedForwardersFieldset

Both components properly receive the client prop. The formatting is consistent with the established pattern.

Also applies to: 807-810


833-833: LGTM: Client prop added to all Param components

All Param components in the rewards section, voting section, and main parameter rendering correctly receive the client prop.

Also applies to: 861-861, 904-904


914-914: LGTM: Client prop added to ModularContractDefaultModulesFieldset

The modular contract fieldset correctly receives the client prop for handling module-specific parameters.


1030-1030: LGTM: Client prop added to SolidityInput for salt input

The SolidityInput component for the saltForCreate2 field correctly receives the client prop.

Copy link
Contributor

graphite-app bot commented May 30, 2025

Merge activity

<!--

## 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 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}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
@graphite-app graphite-app bot force-pushed the 05-30-dashboard_reduce_usethirdwebclient_hook_usage branch from 4d69067 to 0262763 Compare May 30, 2025 18:35
@graphite-app graphite-app bot force-pushed the 05-30-dashboard_reduce_usethirdwebclient_hook_usage_2 branch from 6d2fef0 to a440621 Compare May 30, 2025 18:35
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 30, 2025 18:35 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 May 30, 2025 18:35 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 30, 2025 18:35 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui May 30, 2025 18:35 Inactive
Base automatically changed from 05-30-dashboard_reduce_usethirdwebclient_hook_usage to main May 30, 2025 18:43
@graphite-app graphite-app bot merged commit a440621 into main May 30, 2025
22 checks passed
@graphite-app graphite-app bot deleted the 05-30-dashboard_reduce_usethirdwebclient_hook_usage_2 branch May 30, 2025 18:44
@vercel vercel bot temporarily deployed to Production – login May 30, 2025 18:44 Inactive
@vercel vercel bot temporarily deployed to Production – wallet-ui May 30, 2025 18:44 Inactive
@vercel vercel bot temporarily deployed to Production – thirdweb_playground May 30, 2025 18:44 Inactive
@vercel vercel bot temporarily deployed to Production – docs-v2 May 30, 2025 18:44 Inactive
@vercel vercel bot temporarily deployed to Production – thirdweb-www May 30, 2025 18:57 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dashboard Involves changes to the Dashboard.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants