Skip to content

Dashboard: Reduce useThirdwebClient hook usage #4 #7227

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 primarily focuses on adding the client prop to various instances of the TransactionButton component across multiple files, enhancing the ability to manage transactions with a specific client context.

Detailed summary

  • Added client prop to TransactionButton in numerous components to ensure transaction management is client-specific.
  • Updated several components including Transferable, deposit-native, launch-token, and various NFT-related components.
  • Modified storybook and various UI components to include the client prop for consistency.
  • Enhanced transaction handling across different modules by integrating the client prop in buttons related to transactions and actions.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

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.

Copy link

changeset-bot bot commented May 30, 2025

⚠️ No Changeset found

Latest commit: 1c11f84

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:44pm
4 Skipped Deployments
Name Status Preview Comments Updated (UTC)
docs-v2 ⬜️ Skipped (Inspect) May 30, 2025 6:44pm
login ⬜️ Skipped (Inspect) May 30, 2025 6:44pm
thirdweb_playground ⬜️ Skipped (Inspect) May 30, 2025 6:44pm
wallet-ui ⬜️ Skipped (Inspect) May 30, 2025 6:44pm

@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 30, 2025 16:35 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 30, 2025 16:35 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 May 30, 2025 16:35 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 update standardizes the explicit passing of a ThirdwebClient instance as a client prop to various React components, especially TransactionButton and related transaction or contract interaction components across the dashboard and nebula-app codebase. Internal usages of the useThirdwebClient hook are removed, and all affected components now require the client prop to be provided externally.

Changes

File(s) / Path(s) (grouped) Change Summary
apps/dashboard/src/components/buttons/TransactionButton.tsx, MismatchButton.tsx Added a required client: ThirdwebClient prop to TransactionButton and MismatchButton, removing internal useThirdwebClient usage and passing the client explicitly.
apps/dashboard/src/components/buttons/TransactionButton.stories.tsx Passed storybookThirdwebClient as the new client prop to TransactionButton in stories.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/... (multiple component files) Added client={contract.client} as a prop to all TransactionButton usages and other transaction-related components throughout the dashboard, ensuring explicit client passing. No other logic changes.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx,
Claimable.tsx,
Mintable.tsx,
OpenEditionMetadata.tsx,
Royalty.tsx
Updated component and function signatures to require a client: ThirdwebClient prop; passed the client through nested components and to all TransactionButton usages.
apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx Added client: ThirdwebClient to the props interface and passed it to TransactionButton within BatchLazyMint.
apps/dashboard/src/app/(app)/team/[team_slug]/.../engine/dedicated/(instance)/[engineId]/contract-subscriptions/... Removed internal useThirdwebClient usage; updated all relevant components (EngineContractSubscriptions, ContractSubscriptionTable, AddContractSubscriptionButton, etc.) to require and pass a client: ThirdwebClient prop explicitly through the component tree.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/... Removed internal useThirdwebClient usage; updated EngineRelayer, RelayersTable, AddRelayerButton, and related modals to require and pass client: ThirdwebClient as a prop.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/... Renamed clientId to projectClientId for clarity; introduced client: ThirdwebClient as a required prop, passing it to all relevant components (WebhooksTable, CreateWebhookModal, FilterDetailsStep). Replaced internal hook usage with explicit prop passing.
apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx,
apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx,
Swap/SwapCards.tsx,
login/NebulaConnectEmbedLogin.tsx
Removed internal useThirdwebClient usage. Added and threaded client: ThirdwebClient as a required prop to all relevant components and their children.
apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx,
[session_id]/page.tsx,
(app)/page.tsx
Imported nebulaAppThirdwebClient and passed it as the client prop to ChatPageContent.

Sequence Diagram(s)

sequenceDiagram
    participant ParentComponent
    participant TransactionButton
    participant MismatchButton
    participant ThirdwebClient

    ParentComponent->>TransactionButton: Render with client={clientInstance}
    TransactionButton->>MismatchButton: Render with client={clientInstance}
    MismatchButton->>ThirdwebClient: Use clientInstance for transactions
Loading
sequenceDiagram
    participant Page
    participant EngineOverview
    participant BackendWalletsSection
    participant RelayersTable
    participant ThirdwebClient

    Page->>EngineOverview: Pass client={clientInstance}
    EngineOverview->>BackendWalletsSection: Pass client={clientInstance}
    EngineOverview->>RelayersTable: Pass client={clientInstance}
    BackendWalletsSection->>ThirdwebClient: Use clientInstance
    RelayersTable->>ThirdwebClient: Use clientInstance
Loading

Suggested reviewers

  • MananTank

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

@vercel vercel bot temporarily deployed to Preview – wallet-ui May 30, 2025 16:35 Inactive
@MananTank MananTank marked this pull request as ready for review May 30, 2025 16:35
@MananTank MananTank requested review from a team as code owners May 30, 2025 16:35
@github-actions github-actions bot added the Dashboard Involves changes to the Dashboard. label May 30, 2025
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 (b84db12) to head (1c11f84).
Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7227   +/-   ##
=======================================
  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%) 279 ms (+33.7% 🔺) 1.6 s
thirdweb (cjs) 344.83 KB (0%) 6.9 s (0%) 1.6 s (+7.95% 🔺) 8.5 s
thirdweb (minimal + tree-shaking) 5.7 KB (0%) 114 ms (0%) 47 ms (+236.85% 🔺) 161 ms
thirdweb/chains (tree-shaking) 531 B (0%) 11 ms (0%) 16 ms (+282.85% 🔺) 26 ms
thirdweb/react (minimal + tree-shaking) 19.52 KB (0%) 391 ms (0%) 79 ms (+142.69% 🔺) 469 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: 1

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 759d325 and 5fc9198.

📒 Files selected for processing (69)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx (1 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]/_components/claim-conditions/claim-conditions-form/index.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx (5 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx (11 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx (8 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx (4 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx (10 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.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]/nfts/[tokenId]/components/update-metadata-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.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]/split/components/distribute-button.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-form.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.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)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/allowed-operations-section.tsx (4 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx (10 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (4 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/page.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx (7 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/page.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx (7 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (5 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx (4 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx (2 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx (2 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx (4 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx (1 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.tsx (2 hunks)
  • apps/dashboard/src/app/nebula-app/(app)/page.tsx (2 hunks)
  • apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx (3 hunks)
  • apps/dashboard/src/components/buttons/MismatchButton.tsx (5 hunks)
  • apps/dashboard/src/components/buttons/TransactionButton.stories.tsx (1 hunks)
  • apps/dashboard/src/components/buttons/TransactionButton.tsx (4 hunks)
  • apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx (1 hunks)
  • apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx (3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (17)
apps/dashboard/src/components/buttons/TransactionButton.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
  • storybookThirdwebClient (47-50)
apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx (1)
apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts (1)
  • nebulaAppThirdwebClient (46-46)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/page.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts (1)
  • engineInstancePageHandler (9-44)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/nebula-app/(app)/page.tsx (1)
apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts (1)
  • nebulaAppThirdwebClient (46-46)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts (1)
  • engineInstancePageHandler (9-44)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx (1)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx (1)
apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts (1)
  • nebulaAppThirdwebClient (46-46)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts (1)
  • engineInstancePageHandler (9-44)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx (1)
  • EngineRelayer (15-58)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx (1)
  • AddRelayerButton (38-68)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx (2)
apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts (1)
  • nebulaAppThirdwebClient (46-46)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
packages/engine/src/client/client.gen.ts (1)
  • client (24-28)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • ThirdwebClient (26-26)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: Graphite / mergeability_check
  • GitHub Check: Graphite / mergeability_check
🔇 Additional comments (110)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx (1)

165-165: LGTM! Clean dependency injection refactor.

The addition of client={contract.client} to the TransactionButton follows the established pattern of explicitly passing ThirdwebClient instances instead of relying on internal hooks. The contract prop is already validated and available, making this a safe and consistent change.

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

104-104: LGTM! Consistent with refactor pattern.

The explicit client prop addition to TransactionButton maintains consistency with the broader refactor to standardize ThirdwebClient dependency injection. The implementation correctly sources the client from the contract prop.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx (1)

71-71: LGTM! Proper client prop propagation.

The addition of client={contract.client} to the BatchLazyMint component correctly propagates the ThirdwebClient instance down the component tree. This maintains consistency with the refactor pattern, even though the client is ultimately used by an internal TransactionButton within BatchLazyMint.

apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx (1)

7-7: LGTM! Proper use of pre-configured client.

The import and usage of nebulaAppThirdwebClient correctly implements the dependency injection pattern for the nebula app context. Using a pre-configured client from the utils module is appropriate for this page component and aligns with the broader refactor to eliminate internal useThirdwebClient hook usage.

Also applies to: 23-23

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

147-147: LGTM! Consistent client prop addition.

The addition of client={contract.client} to the TransactionButton follows the expected pattern for this refactor. The change is consistent with how contract.client is already being used elsewhere in the component (line 130) and supports the goal of making ThirdwebClient dependencies explicit.

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

186-186: LGTM! Proper client prop integration.

The client={contract.client} prop addition is correctly implemented and consistent with the established pattern. The component already uses contract.client for the SolidityInput component (line 144), confirming the client property is properly available.

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

101-101: LGTM! Client prop correctly added.

The addition of client={contract.client} maintains consistency with the refactor pattern. The contract object is already being used extensively throughout the component for ERC20 operations, confirming the client property is available and the change is appropriate.

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

64-64: LGTM! Consistent with refactor pattern.

The client={contract.client} prop addition follows the established pattern and is consistent with the systematic refactor to make ThirdwebClient dependencies explicit. The contract object is already used throughout the component for ERC4337 operations, ensuring the client property is properly available.

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

333-333: LGTM! Proper client dependency injection.

The addition of client={contract.client} correctly makes the ThirdwebClient dependency explicit for the TransactionButton component. This aligns with the PR objective to reduce useThirdwebClient hook usage and improves dependency management.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx (1)

129-129: LGTM! Consistent client prop implementation.

The addition of client={contract.client} properly passes the ThirdwebClient instance to the TransactionButton component. This maintains consistency with the broader refactoring effort to make client dependencies explicit.

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

110-110: LGTM! Proper client dependency management.

The explicit passing of client={contract.client} to the TransactionButton component correctly implements the dependency injection pattern. This enhances the component's explicitness about its ThirdwebClient dependency.

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

156-156: LGTM! Completes the consistent client prop pattern.

The addition of client={contract.client} to the TransactionButton component properly implements the explicit client dependency pattern. This change aligns perfectly with the PR's objective to reduce useThirdwebClient hook usage across the dashboard.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (1)

389-389: LGTM! Excellent architectural improvement.

The explicit passing of client={props.contract.client} to the TransactionButton improves dependency management by making the ThirdwebClient dependency explicit rather than relying on internal hooks. This enhances testability and maintainability.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx (1)

293-293: LGTM! Consistent implementation.

The addition of client={contract.client} follows the established pattern for this refactoring. The explicit client prop improves code clarity and dependency management.

apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx (1)

543-543: LGTM! Solid architectural improvement.

Adding client={contract.client} to the TransactionButton makes the client dependency explicit and improves the component's testability. This change aligns perfectly with the codebase-wide refactoring effort.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx (1)

133-133: LGTM! Completes the consistent refactoring pattern.

The addition of client={contract.client} to the TransactionButton is correct and maintains consistency with the architectural improvements being made across the codebase. This explicit dependency management enhances code clarity and maintainability.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx (1)

127-127: LGTM: Proper client prop addition to TransactionButton

The addition of client={contract.client} is consistent with the refactoring effort to explicitly pass the ThirdwebClient instance to TransactionButton components. This improves dependency management by making the client dependency explicit rather than relying on internal hooks.

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

179-179: LGTM: Consistent client prop addition

The addition of client={contract.client} maintains consistency with the broader refactoring effort. The change is correctly placed within the AdminOnly wrapper and follows the established pattern.

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

389-389: LGTM: Client prop addition aligns with existing usage

The addition of client={contract.client} is consistent with existing usage of contract.client elsewhere in this file (lines 183, 256), confirming the property is available and properly accessible.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx (1)

134-134: LGTM: Client prop addition consistent with existing usage

The addition of client={contract.client} aligns with existing usage of contract.client on line 106, demonstrating that the client property is properly available on the ThirdwebContract instance.

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

140-140: LGTM! Client prop addition is correct and consistent.

The addition of client={contract.client} to all three TransactionButton instances properly provides the required client instance for transaction execution. This change aligns perfectly with the broader refactoring effort to explicitly pass ThirdwebClient instances rather than relying on internal hooks.

Also applies to: 155-155, 171-171

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (1)

164-164: LGTM! Proper client instance provided for transaction execution.

The addition of client={contract.client} to the uninstall TransactionButton correctly provides the required client instance. This maintains the existing functionality while conforming to the new component API requirements.

apps/dashboard/src/components/buttons/TransactionButton.stories.tsx (1)

193-193: LGTM! Appropriate client instance for Storybook environment.

The addition of client={storybookThirdwebClient} properly provides the required client instance for the Storybook story. Using the dedicated storybook client ensures the component renders correctly in the testing environment while conforming to the new API requirements.

apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx (1)

132-132: LGTM! Correct client prop forwarding from parent component.

The addition of client={props.client} properly forwards the client instance from the parent component to the TransactionButton. This maintains the existing transaction execution flow while conforming to the new component API that requires explicit client passing.

apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx (1)

9-9: LGTM! Clean dependency injection pattern.

The import and explicit passing of nebulaAppThirdwebClient as a prop follows the established pattern of reducing useThirdwebClient hook usage in favor of explicit dependency injection. This improves testability and makes dependencies more transparent.

Also applies to: 38-38

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

41-41: LGTM! Consistent client prop passing.

The addition of client={contract.client} to the TransactionButton aligns with the standardization effort to pass ThirdwebClient instances explicitly. This change maintains the existing functionality while improving dependency management.

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

188-188: LGTM! Proper client prop propagation.

The addition of client={props.client} correctly passes the client instance from the component props to the TransactionButton. This maintains the clean prop flow established in the parent component where contract.client is passed down as the client prop.

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

138-138: LGTM! Consistent with the standardization effort.

The addition of client={contract.client} to the TransactionButton follows the established pattern throughout this PR. This change ensures that the transaction button receives the client instance explicitly, improving dependency management and consistency across the codebase.

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

662-662: LGTM! Consistent client prop addition.

This change correctly adds the client prop to the TransactionButton component, passing the ThirdwebClient instance from contract.client. This aligns with the PR's objective of standardizing the explicit passing of the client instance to reduce useThirdwebClient hook usage.

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

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

The addition of client={contract.client} follows the same standardization pattern established across the codebase. The change maintains all existing functionality while ensuring the TransactionButton receives the ThirdwebClient instance explicitly.

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

368-368: LGTM! Proper client prop integration.

The addition of client={contract.client} maintains the consistent pattern of explicitly passing the ThirdwebClient instance to TransactionButton components. This change integrates well with the existing contract usage throughout the component.

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

109-109: LGTM! Completes the consistent client prop standardization.

The addition of client={contract.client} maintains the established pattern across all reviewed files. This change successfully standardizes how the ThirdwebClient instance is passed to TransactionButton components, supporting the PR's objective of reducing useThirdwebClient hook usage.

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

97-97: LGTM: Explicit client prop passing improves dependency management.

The addition of client={contract.client} properly passes the ThirdwebClient instance from the contract to the TransactionButton component. This change aligns with the PR's objective to reduce useThirdwebClient hook usage and makes dependencies more explicit and testable.

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

130-130: LGTM: Consistent client prop pattern for transaction handling.

The addition of client={contract.client} follows the same pattern as other components in this PR, explicitly providing the ThirdwebClient instance to the TransactionButton. This improves dependency injection and reduces reliance on internal hooks.

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

97-97: LGTM: Proper client dependency injection for transaction button.

The addition of client={contract.client} maintains consistency with the broader refactoring effort. The client is correctly sourced from the contract instance and passed explicitly to the TransactionButton component.

apps/dashboard/src/app/nebula-app/(app)/page.tsx (2)

8-8: LGTM: Proper import of nebula-specific client.

The import of nebulaAppThirdwebClient from the utils module follows good practices for dependency management in the nebula app context.


32-32: LGTM: Explicit client prop passing to ChatPageContent.

The addition of client={nebulaAppThirdwebClient} properly passes the nebula-specific ThirdwebClient instance to the ChatPageContent component, maintaining consistency with the PR's objective to explicitly inject client dependencies rather than using internal hooks.

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

127-127: LGTM! Client prop correctly passed to TransactionButton.

The explicit passing of contract.client to the TransactionButton component aligns perfectly with the PR objective to reduce useThirdwebClient hook usage and standardize transaction management. The client instance is readily available from the contract prop.

apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.tsx (2)

95-95: LGTM! Client prop correctly passed in SwapTransactionCardLayout.

The explicit passing of props.client to the TransactionButton ensures consistent transaction handling with the provided ThirdwebClient instance.


215-215: LGTM! Client prop correctly passed in ApproveTransactionCardLayout.

The explicit passing of props.client to the TransactionButton maintains consistency with the transaction management pattern across both swap and approve transaction flows.

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

51-51: LGTM! Client prop correctly passed to TransactionButton.

The explicit passing of the client prop to the TransactionButton component properly implements the architectural improvement to make client dependencies explicit rather than relying on internal hooks.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx (1)

410-410: LGTM! Client prop correctly passed to TransactionButton.

The explicit passing of contract.client to the TransactionButton component successfully implements the standardized pattern for client dependency injection, improving transaction management consistency across the NFT metadata update flow.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx (1)

344-344: LGTM! Correct implementation of client prop injection.

The addition of client={contract.client} to the TransactionButton follows the refactoring pattern to explicitly pass the ThirdwebClient instance rather than relying on internal hooks. This improves dependency injection and component testability.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (1)

177-177: LGTM! Proper client prop forwarding.

The addition of client={props.client} correctly forwards the ThirdwebClient instance from the component props to the TransactionButton, maintaining consistency with the refactoring pattern.

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

80-80: LGTM! Consistent client prop implementation across both TransactionButton instances.

Both TransactionButton components are correctly updated with client={contract.client}, ensuring consistent behavior in both the error state and normal rendering paths. This maintains the dependency injection pattern throughout the component.

Also applies to: 104-104

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx (1)

7-7: LGTM! Correct client extraction and forwarding.

The changes properly destructure the client from the engineInstancePageHandler result and forward it to the EngineContractSubscriptions component. This maintains the dependency injection pattern for the ThirdwebClient instance.

Also applies to: 17-17

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

661-661: LGTM! Clean refactoring to explicit client passing.

The addition of client={contract.client} to the TransactionButton follows the established pattern of explicitly passing ThirdwebClient instances rather than relying on internal hooks. This improves dependency clarity and aligns with the broader codebase refactor.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/page.tsx (2)

7-7: LGTM! Proper client extraction from handler.

The destructuring of client from engineInstancePageHandler correctly implements the explicit client passing pattern. The relevant code snippets confirm that the handler now returns a properly configured ThirdwebClient instance.


19-19: LGTM! Correct client propagation to child component.

Passing the client prop to the EngineOverview component maintains the explicit dependency injection pattern and ensures the client is available for transaction operations in child components.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/page.tsx (2)

7-7: LGTM! Consistent client extraction pattern.

The destructuring of client from engineInstancePageHandler follows the same pattern as other engine pages, maintaining consistency across the codebase.


13-19: LGTM! Proper client propagation to EngineRelayer.

The client prop is correctly passed to the EngineRelayer component, which will forward it to child components like RelayersTable and AddRelayerButton as shown in the relevant code snippets.

apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx (3)

22-22: LGTM! Proper type import for ThirdwebClient.

Adding the ThirdwebClient type import is necessary for the interface update and maintains type safety.


57-57: LGTM! Interface correctly updated with client prop.

The addition of client: ThirdwebClient to the BatchLazyMintEVMProps interface properly requires explicit client passing and maintains type safety.


267-267: LGTM! Client correctly passed to TransactionButton.

The client={props.client} prop ensures the TransactionButton has access to the ThirdwebClient instance for transaction execution, completing the explicit dependency injection pattern.

apps/dashboard/src/components/buttons/TransactionButton.tsx (1)

15-15: LGTM! Clean refactoring to explicit client prop.

The addition of the explicit client prop to TransactionButton improves the component's API by making dependencies explicit rather than hidden behind hooks. This enhances testability and makes the component's requirements clearer.

Also applies to: 34-34, 45-45, 70-70

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx (1)

4-4: LGTM! Consistent client prop propagation.

The changes correctly implement the explicit client prop pattern, receiving the ThirdwebClient instance and passing it down to both RelayersTable and AddRelayerButton components. This maintains consistency with the broader refactoring effort.

Also applies to: 12-12, 18-18, 49-55

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx (1)

10-10: LGTM! Proper client prop implementation.

The changes correctly implement the explicit client prop pattern for the contract subscriptions component. The ThirdwebClient instance is properly typed, received, and passed down to child components that require it for transaction operations.

Also applies to: 14-14, 19-19, 65-65, 70-70

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

26-26: LGTM! Excellent client prop threading pattern.

The changes demonstrate a clean implementation of the client prop propagation pattern:

  1. BatchMetadataModule extracts contract.client and passes it to the UI component
  2. BatchMetadataModuleUI receives and forwards the client to the section component
  3. UploadMetadataNFTSection passes the client to TransactionButton

This creates a clear dependency chain that makes the client requirement explicit at each level, improving maintainability and testability.

Also applies to: 97-97, 108-108, 126-126, 169-169, 268-268

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (2)

19-19: LGTM! Clean interface updates and consistent prop naming.

The addition of the ThirdwebClient import and the interface updates are well-structured. The renaming from clientId to projectClientId provides better clarity, and the new client prop follows the established pattern for explicit client dependency injection.

Also applies to: 35-37, 42-43


47-47: Consistent prop usage throughout the component.

The renamed projectClientId and new client prop are correctly used in all the appropriate places - hook calls, API calls, and child component props. The prop threading is properly implemented.

Also applies to: 55-55, 222-224

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx (2)

28-28: Proper type imports and interface updates.

The ThirdwebClient type import and interface updates are correctly implemented. The new client prop is properly added to the AddRelayerButtonProps interface and function signature.

Also applies to: 35-35, 41-41


63-63: Excellent prop threading through component hierarchy.

The client prop is correctly passed from AddRelayerButton to AddModal and then to SingleNetworkSelector. The interface for AddModal is properly updated to include the client parameter.

Also applies to: 82-82, 87-87, 161-161

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

103-103: Proper client prop implementation for SetSharedMetadataSection.

The SetSharedMetadataSection component correctly receives and uses the client prop. The interface is properly updated and the prop is correctly passed to the TransactionButton.

Also applies to: 126-126, 218-218

apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx (2)

12-12: Good use of domain-specific client instance.

The import of nebulaAppThirdwebClient and its consistent usage ensures that the Nebula app uses its specific client configuration rather than a generic one. This is a good architectural decision.

Also applies to: 19-19, 105-105, 110-110


116-116: Proper interface update and prop usage.

The CustomConnectEmbed component's interface is correctly updated to include the client prop, and it's properly passed to the ConnectEmbed component.

Also applies to: 176-176

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (1)

25-25: LGTM! Clean implementation of client prop injection.

The changes correctly implement the systematic refactoring to replace useThirdwebClient hook usage with explicit prop passing. The ThirdwebClient type is properly imported, the interface is extended appropriately, and the client is correctly threaded through to the MultiNetworkSelector component.

Also applies to: 48-48, 133-133, 178-178

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx (1)

23-23: LGTM! Proper client prop implementation throughout component hierarchy.

The changes correctly implement the client prop injection pattern:

  • EngineOverviewProps interface properly extended with client: ThirdwebClient
  • Client prop is systematically passed down through the component tree: EngineOverviewBackendWalletsSectionSingleNetworkSelector/BackendWalletsTable
  • All type annotations are consistent and correct
  • The refactoring maintains the existing component structure while making client dependency explicit

Also applies to: 31-31, 40-40, 48-48, 59-59, 137-137, 152-152

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx (1)

8-8: LGTM! Excellent implementation with multiple improvements.

This refactoring introduces several beneficial changes:

Performance Enhancement:

  • Promise.all for concurrent fetching of auth token and params improves page load time

Improved Error Handling:

  • Added notFound() call when project or auth token is missing
  • Enhanced try-catch wrapper for webhook fetching operations

Code Clarity:

  • Renamed clientId to projectClientId for better semantic meaning
  • Explicit client creation using getClientThirdwebClient with JWT and team ID

Architecture Consistency:

  • Proper client prop threading to WebhooksTable and CreateWebhookModal components
  • Follows the established pattern of explicit client dependency injection

The implementation maintains existing functionality while making the code more robust and consistent with the broader refactoring objectives.

Also applies to: 10-10, 21-24, 31-33, 35-35, 37-54, 56-59, 97-98, 110-111

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (2)

58-58: LGTM: Proper client prop addition and parameter threading.

The addition of the client: ThirdwebClient prop to the interface and component signature follows the systematic pattern of externalizing client dependencies. The prop is correctly typed and integrated into the component.

Also applies to: 72-72


89-89: Excellent client prop forwarding throughout the component hierarchy.

The client prop is consistently and correctly forwarded to all child components that require it:

  • ChainIconClient components (lines 89, 419)
  • ChainLastBlock component (line 217)
  • RemoveModal component (line 251)
  • ChainLastBlockTimestamp component (line 331)

This ensures proper client usage without any missing dependencies.

Also applies to: 217-217, 251-251, 331-331, 419-419

apps/dashboard/src/components/buttons/MismatchButton.tsx (3)

88-88: LGTM: Proper client prop addition to component interface.

The addition of client: ThirdwebClient to MistmatchButtonProps correctly externalizes the client dependency, making it explicit rather than relying on internal hooks.


114-114: Excellent client prop usage and forwarding.

The client prop is properly used for wallet balance fetching (line 114) and correctly forwarded to child components:

  • NoFundsDialogContent (line 279)
  • PayEmbed (line 285)

This ensures consistent client usage throughout the component tree.

Also applies to: 279-279, 285-285


573-573: Well-executed function signature update for GetLocalHostTestnetFunds.

The conversion from a parameterless React.FC to a function component accepting props: { client: ThirdwebClient } is handled correctly. The client is properly used in:

  • privateKeyToAccount (line 581)
  • prepareTransaction (line 586)

This maintains the function's behavior while externalizing the client dependency.

Also applies to: 581-581, 586-586

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx (3)

43-43: Excellent naming improvement and client prop addition.

The renaming from clientId to projectClientId improves code clarity by clearly distinguishing between the project's client ID (string) and the actual ThirdwebClient instance. The addition of the client: ThirdwebClient prop follows the systematic pattern of externalizing client dependencies.

Also applies to: 45-45


87-87: Proper client prop forwarding to dependent components.

The client prop is correctly forwarded to:

  • useAbiMultiFetch for event ABI fetching (line 87)
  • useAbiMultiFetch for transaction ABI fetching (line 96)
  • FilterDetailsStep component (line 266)

This ensures consistent client usage across all blockchain interactions.

Also applies to: 96-96, 266-266


131-131: Correct usage of renamed projectClientId parameter.

The renamed projectClientId is properly used in:

  • createWebhook function call (line 131)
  • useTestWebhook hook (line 217)

The naming change helps distinguish this string identifier from the ThirdwebClient instance.

Also applies to: 217-217

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx (3)

52-52: LGTM: Proper client prop addition to RelayersTable.

The addition of client: ThirdwebClient to the RelayersTableProps interface and component parameter correctly externalizes the client dependency, following the systematic pattern across the codebase.

Also applies to: 63-63


80-80: Excellent client prop forwarding throughout the component hierarchy.

The client prop is consistently and correctly forwarded to all components that require it:

  • ChainIconClient for chain icons (lines 80, 426)
  • EditModal and RemoveModal for editing/removing relayers (lines 195, 204)
  • SingleNetworkSelector for network selection (line 299)

This ensures proper client usage across all child components without any missing dependencies.

Also applies to: 195-195, 204-204, 299-299, 426-426


216-216: Proper client parameter addition to modal components.

The modal components (EditModal and RemoveModal) correctly accept the client: ThirdwebClient parameter in their props interfaces and function signatures. This maintains consistency with the external client dependency pattern.

Also applies to: 222-222, 362-362, 368-368

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

26-26: LGTM: Proper import of ThirdwebClient type

The import correctly adds the ThirdwebClient type needed for the prop threading refactor.


153-153: LGTM: Client prop correctly extracted from contract

The client is properly extracted from props.contract.client and passed to the UI component, maintaining the dependency chain.


190-190: LGTM: Consistent client prop threading

The client prop is consistently threaded through all child components (RoyaltyInfoPerTokenSection, DefaultRoyaltyInfoSection, and TransferValidatorSection).

Also applies to: 214-214, 238-238


356-356: LGTM: TransactionButton components receive client prop

All TransactionButton components now receive the client prop explicitly, replacing the previous implicit client access pattern.

Also applies to: 462-462, 542-542

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx (3)

14-14: LGTM: Proper import addition

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


38-38: LGTM: Component interface updated with client prop

The client: ThirdwebClient prop is properly added to the component interface, replacing internal client creation.


347-347: LGTM: Client prop threaded to child components

The client prop is consistently passed to both Chats and ChatBar components that require ThirdwebClient access.

Also applies to: 361-361

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

44-44: LGTM: Correct type import

The ThirdwebClient type is properly imported alongside other thirdweb imports.


275-275: LGTM: Client extracted from contract

The client is correctly extracted from props.contract.client and passed to the UI component.


363-363: LGTM: Consistent prop threading to child components

The client prop is systematically passed to all child components that require ThirdwebClient access.

Also applies to: 396-396, 431-431


750-750: LGTM: TransactionButton components updated

All TransactionButton instances now receive the client prop, completing the dependency injection chain.

Also applies to: 834-834, 953-953

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

30-34: LGTM: Proper import structure

The ThirdwebClient type is correctly added to the existing import statement from thirdweb.


184-184: LGTM: Client prop correctly passed from contract

The client is properly extracted from contract.client and passed to the MintableModuleUI component.


224-224: LGTM: Client prop threaded to child components

The client prop is consistently passed to both MintNFTSection and PrimarySalesSection components.

Also applies to: 252-252


323-323: LGTM: TransactionButton components receive client prop

Both TransactionButton instances now receive the client prop, completing the dependency injection pattern.

Also applies to: 537-537

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx (10)

34-34: LGTM: Proper import addition for explicit client typing.

The addition of ThirdwebClient type import aligns with the architectural change to explicit dependency injection.


47-47: LGTM: Client prop addition improves dependency management.

Adding the client prop to the component interface and destructuring it in the function signature makes the ThirdwebClient dependency explicit rather than relying on internal hook usage. This improves testability and makes the component's requirements clearer.

Also applies to: 52-52


73-73: LGTM: Proper client prop forwarding.

The client prop is correctly passed down to the AddModal component, maintaining the dependency chain.


94-94: LGTM: AddModal component updated for client prop passing.

The component interface and destructuring are updated to accept and use the client prop, continuing the pattern of explicit dependency injection.

Also applies to: 99-99


180-180: LGTM: Client prop forwarded to modal body components.

Both ModalBodyInputContract and ModalBodyInputData receive the client prop, ensuring all child components have access to the ThirdwebClient instance.

Also applies to: 186-186


197-197: LGTM: ModalBodyInputContract properly receives client prop.

The component interface is updated to include the client prop with proper TypeScript typing.

Also applies to: 201-201


293-293: LGTM: ModalBodyInputData properly receives client prop.

The component interface is updated to include the client prop with proper TypeScript typing, maintaining consistency with the sibling component.

Also applies to: 297-297


389-389: LGTM: Client prop passed to FilterSelector components.

Both FilterSelector instances receive the client prop, enabling them to create contract instances without relying on internal hooks.

Also applies to: 446-446


483-483: LGTM: FilterSelector component updated for explicit client usage.

The component interface is properly updated to accept the ThirdwebClient prop, replacing the previous implicit dependency on useThirdwebClient hook.

Also applies to: 490-490


494-504: LGTM: Contract instantiation now uses explicit client.

The getContract call now uses the explicit client prop instead of relying on the useThirdwebClient hook. This change improves the component's testability and makes dependencies explicit. The dependency array correctly includes the client parameter.

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/allowed-operations-section.tsx (6)

28-33: LGTM! Clean interface update for explicit client dependency.

The addition of the client: ThirdwebClient prop to the interface properly supports the refactoring from implicit hook usage to explicit prop passing.


35-40: LGTM! Function signature correctly updated.

The function signature properly includes the new client parameter, maintaining consistency with the updated interface.


165-170: LGTM! Consistent prop threading.

The client prop is correctly passed down to the PersonalSignRestrictions component, maintaining the explicit dependency pattern.


452-460: LGTM! Component signature properly updated.

The PersonalSignRestrictions function signature correctly includes the client parameter with proper TypeScript typing.


531-536: LGTM! Consistent client prop passing.

The client prop is correctly passed to the UserOpTransactions component, maintaining the explicit dependency pattern throughout the component tree.


578-588: LGTM! Final component signature updated correctly.

The UserOpTransactions function signature properly includes the client parameter, completing the consistent refactoring pattern across all affected components in this file.

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 `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 -->
@graphite-app graphite-app bot force-pushed the 05-30-dashboard_reduce_usethirdwebclient_hook_usage_3 branch from 759d325 to b84db12 Compare May 30, 2025 18:36
@graphite-app graphite-app bot force-pushed the 05-30-dashboard_reduce_usethirdwebclient_hook_usage_4 branch from 5fc9198 to 1c11f84 Compare May 30, 2025 18:36
@vercel vercel bot temporarily deployed to Preview – wallet-ui May 30, 2025 18:36 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 30, 2025 18:36 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 May 30, 2025 18:36 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 30, 2025 18:36 Inactive
Base automatically changed from 05-30-dashboard_reduce_usethirdwebclient_hook_usage_3 to main May 30, 2025 18:46
@graphite-app graphite-app bot merged commit 1c11f84 into main May 30, 2025
22 checks passed
@graphite-app graphite-app bot deleted the 05-30-dashboard_reduce_usethirdwebclient_hook_usage_4 branch May 30, 2025 18:47
@vercel vercel bot temporarily deployed to Production – thirdweb_playground May 30, 2025 18:47 Inactive
@vercel vercel bot temporarily deployed to Production – login May 30, 2025 18:47 Inactive
@vercel vercel bot temporarily deployed to Production – wallet-ui May 30, 2025 18:47 Inactive
@vercel vercel bot temporarily deployed to Production – docs-v2 May 30, 2025 18:47 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