Dashboard: Reduce useThirdwebClient hook usage #7223
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThis update refactors numerous components to require an explicit Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant ThirdwebClient
participant ChildComponent
participant WalletAddress
ParentComponent->>ThirdwebClient: Instantiate or receive client
ParentComponent->>ChildComponent: Pass client as prop
ChildComponent->>WalletAddress: Pass client as prop
WalletAddress->>ThirdwebClient: Use client for address-related operations
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (56)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (54)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7223 +/- ##
=======================================
Coverage 55.62% 55.62%
=======================================
Files 908 908
Lines 58575 58575
Branches 4134 4134
=======================================
Hits 32582 32582
Misses 25887 25887
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx (1)
66-66: LGTM: Client prop propagationThe client instance is properly passed to the
ServerWalletsTablecomponent, completing the prop drilling chain from page level to components that need the client.Consider implementing a context provider pattern if the prop drilling becomes too deep across multiple component levels. This could help reduce boilerplate while maintaining explicit client dependencies.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (56)
apps/dashboard/src/@/components/blocks/wallet-address.tsx(4 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx(1 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/batchMetadata.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx(6 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx(4 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx(4 hunks)apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx(5 hunks)apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx(4 hunks)apps/dashboard/src/app/(app)/account/wallets/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/analytics-page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx(10 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts(3 hunks)apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx(2 hunks)apps/dashboard/src/components/embedded-wallets/Users/index.tsx(4 hunks)apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx(3 hunks)apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx(5 hunks)apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (32)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx (1)
packages/engine/src/client/client.gen.ts (1)
client(24-28)
apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx (1)
apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx (2)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx (1)
RoyaltyModuleUI(158-251)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx (1)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/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]/admins/components/engine-admins.tsx (1)
EngineAdmins(15-52)packages/engine/src/client/client.gen.ts (1)
client(24-28)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx (1)
apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/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]/access-tokens/components/engine-access-tokens.tsx (1)
EngineAccessTokens(27-87)packages/engine/src/client/client.gen.ts (1)
client(24-28)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx (1)
apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx (2)
packages/engine/src/client/client.gen.ts (1)
client(24-28)apps/dashboard/src/@/constants/thirdweb-client.client.ts (1)
getClientThirdwebClient(3-11)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx (1)
SmartAccountCell(199-237)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.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/components/pay/PayAnalytics/components/PayCustomersTable.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx (1)
apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.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)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx (2)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts (1)
EngineAdmin(472-476)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx (2)
apps/dashboard/src/stories/utils.tsx (1)
storybookThirdwebClient(47-50)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (1)
ModuleCardUI(206-325)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts (4)
apps/dashboard/src/app/(app)/api/lib/getAuthToken.ts (1)
getAuthToken(6-14)apps/dashboard/src/app/(app)/account/settings/getAccount.ts (1)
getValidAccount(44-53)apps/dashboard/src/@/api/team.ts (1)
getTeamBySlug(11-30)apps/dashboard/src/@/constants/thirdweb-client.client.ts (1)
getClientThirdwebClient(3-11)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (1)
ModuleCardUI(206-325)
apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx (1)
PayCustomersTable(22-81)apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx (1)
PaymentHistory(27-123)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.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/components/pay/PayAnalytics/components/PaymentHistory.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/api/universal-bridge/developer.ts (3)
PaymentsResponse(168-173)getPayments(207-250)Payment(174-205)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx (2)
apps/dashboard/src/@/api/linked-wallets.ts (1)
LinkedWallet(4-8)packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)
apps/dashboard/src/components/embedded-wallets/Users/index.tsx (2)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(21-166)packages/engine/src/client/client.gen.ts (1)
client(24-28)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (128)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx (1)
90-90: LGTM! Consistent client prop addition for Storybook testing.The addition of the
clientprop usingstorybookThirdwebClientaligns perfectly with the PR objective of reducinguseThirdwebClienthook usage. This ensures the component has direct access to the ThirdwebClient instance in the Storybook environment.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx (1)
87-87: LGTM! Consistent implementation of client prop pattern.The addition of
client={storybookThirdwebClient}follows the same pattern as other story files in this refactoring effort. This provides the component with direct access to the ThirdwebClient instance, eliminating the need for internal hook usage.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx (1)
43-43: LGTM! Consistent client prop propagation to child components.The addition of
client={contract.client}properly passes the ThirdwebClient instance to eachAccountSignercomponent. This aligns with the refactoring effort to provide direct client access throughout the component tree, replacing internal hook usage with explicit prop passing.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx (1)
76-76: LGTM! Consistent client prop implementation.The addition of the
clientprop follows the established pattern across the codebase for passing theThirdwebClientinstance explicitly to UI components. This promotes better dependency management and reduces reliance on internal hooks.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx (3)
3-3: LGTM! Proper import for client creation.The import of
getClientThirdwebClientis necessary for creating the authenticated client instance.
81-84: LGTM! Correct client instantiation.The client is properly created with the required authentication context (JWT token and team ID), which ensures proper access control for the analytics functionality.
110-110: LGTM! Consistent client prop passing.The client instance is correctly passed as a prop to the
TransactionsAnalyticsPageContentcomponent, following the established pattern for explicit client dependency management.apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx (2)
72-72: LGTM! Consistent client prop for WalletAddress component.The addition of the
clientprop to the "From" WalletAddress component follows the established pattern for passingThirdwebClientinstances explicitly.
88-88: LGTM! Consistent client prop for WalletAddress component.The addition of the
clientprop to the "To" WalletAddress component maintains consistency with the pattern applied across the codebase.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx (1)
274-274: LGTM! Consistent client prop implementation for module UI.The addition of the
clientprop toClaimableModuleUIfollows the established pattern across module components, ensuring consistent access to theThirdwebClientinstance throughout the component hierarchy.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx (1)
180-180: LGTM! Client prop correctly passed to MintableModuleUI.This change follows the consistent pattern of explicitly passing the
ThirdwebClientinstance from the contract object to the UI component, reducing reliance on theuseThirdwebClienthook as intended by the PR objectives.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx (1)
95-98: LGTM! WalletAddress component correctly updated with required client prop.The
WalletAddresscomponent now requires an explicitclientprop instead of using theuseThirdwebClienthook internally. This change correctly passes theThirdwebClientinstance from the contract object, which aligns with the refactoring pattern throughout the codebase.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx (1)
126-126: LGTM! Client prop correctly passed to TransferableModuleUI.This change maintains consistency with the refactoring pattern by explicitly passing the
ThirdwebClientinstance fromprops.contract.clientto the UI component, reducing dependency on internal hooks.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx (1)
109-109: LGTM! Storybook stories correctly updated with client prop.All three instances of
MintableModuleUIin the storybook stories are consistently updated to include the requiredclientprop usingstorybookThirdwebClient. This ensures the stories continue to work correctly with the refactored component that now requires explicit client injection.Also applies to: 130-130, 151-151
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx (1)
228-228: Excellent refactor: Client prop properly passed to WalletAddress.This change correctly passes the
clientinstance to theWalletAddresscomponent, aligning with the architectural improvement to reduceuseThirdwebClienthook usage. The client is properly obtained from the hook at the component level and passed down explicitly.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx (1)
86-86: Consistent storybook client prop implementation.All instances of
RoyaltyModuleUIhave been properly updated to receive thestorybookThirdwebClientprop. This ensures consistent client context across all story variants and aligns with the broader refactor to explicitly pass ThirdwebClient instances.Also applies to: 119-119, 125-125, 160-160
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx (2)
5-5: Import addition for storybook client.Good addition of the
storybookThirdwebClientimport to support the client prop requirements.
67-67: Systematic client prop addition to ModuleCardUI instances.All
ModuleCardUIcomponents have been consistently updated to receive thestorybookThirdwebClientprop. This maintains consistency across story variants and supports the architectural refactor to explicit client passing.Also applies to: 80-80, 98-98
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx (1)
153-153: Proper client forwarding from contract to UI component.The client is correctly passed from
props.contract.clientto theRoyaltyModuleUIcomponent. This establishes the proper client context for UI components that need access to the ThirdwebClient instance, completing the dependency chain from contract to UI.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx (1)
150-150: LGTM! Client prop correctly added to storybook configuration.The addition of
client={storybookThirdwebClient}prop toClaimableModuleUIaligns perfectly with the broader refactoring effort to makeThirdwebClientdependencies explicit. ThestorybookThirdwebClientis properly imported and configured for the storybook environment.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx (2)
237-241: LGTM! Client prop correctly passed to WalletAddress component.The
WalletAddresscomponent now receives theclientprop explicitly, which aligns with the refactoring effort to makeThirdwebClientdependencies explicit rather than relying on internal hooks.
731-731: LGTM! Client prop correctly passed to TransactionTimeline component.The
TransactionTimelinecomponent now receives theclientprop, maintaining consistency with the broader pattern of explicit client dependency injection throughout the codebase.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx (2)
201-204: LGTM! Client prop correctly added to SmartAccountCell in SelectValue.The
SmartAccountCellcomponent now receives theclient={thirdwebClient}prop for the currently selected wallet display, which is consistent with the refactoring effort to make client dependencies explicit.
215-218: LGTM! Client prop correctly added to SmartAccountCell in dropdown options.The
SmartAccountCellcomponent now receives theclient={thirdwebClient}prop for each wallet option in the dropdown, ensuring consistent client context across all wallet address renderings.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx (2)
7-7: LGTM! Client correctly destructured from engineInstancePageHandler.The
clientis now properly extracted from theengineInstancePageHandlerresult, which creates theThirdwebClientinstance using the JWT token and team ID as shown in the relevant code snippets.
13-19: LGTM! Client prop correctly passed to EngineAdmins component.The
EngineAdminscomponent now receives theclientprop, completing the dependency injection pattern. This aligns with the component's interface as shown in the relevant code snippets where it accepts and uses the client prop.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx (2)
7-7: LGTM! Correct destructuring of the client prop.The destructuring correctly extracts the
clientproperty that is now returned byengineInstancePageHandleras confirmed by the relevant code snippets.
14-18: LGTM! Proper client prop forwarding.The
clientprop is correctly passed to theEngineAccessTokenscomponent, which aligns with the refactor to reduceuseThirdwebClienthook usage throughout the dashboard.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx (3)
82-82: LGTM! Correct client prop addition for storybook.The
storybookThirdwebClientis appropriately used for the firstTransferableModuleUIinstance in the stories.
101-101: LGTM! Consistent client prop usage.The client prop is correctly added to the second
TransferableModuleUIinstance, maintaining consistency across all story variants.
131-131: LGTM! Complete client prop implementation.The third and final
TransferableModuleUIinstance correctly receives the client prop, completing the storybook refactor for this component.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx (3)
41-41: LGTM! Correct type import.The
ThirdwebClienttype import is necessary for the new client prop and follows the standard import pattern.
55-55: LGTM! Proper component interface update.The
client: ThirdwebClientprop is correctly added to the component props interface, enabling explicit client instance passing.
169-176: LGTM! Correct client prop forwarding to WalletAddress.The
WalletAddresscomponent now correctly receives theclientprop as required by its updated interface. The conditional rendering logic for the "From Address" cell is preserved appropriately.apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx (4)
3-7: LGTM! Correct import expansion.The import statement is properly expanded to include
storybookThirdwebClientalongside the existing imports, maintaining clean organization.
79-79: LGTM! Correct client prop addition.The first
LinkWalletUIinstance correctly receives thestorybookThirdwebClientas the client prop.
88-88: LGTM! Consistent client prop usage.The second
LinkWalletUIinstance maintains consistency by also receiving the client prop.
97-97: LGTM! Complete storybook refactor.The third
LinkWalletUIinstance completes the storybook refactor by receiving the client prop, ensuring all story variants are updated consistently.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx (3)
25-25: LGTM: Correct import additionThe
ThirdwebClienttype import is properly added to support the new client prop requirement.
184-184: LGTM: Proper interface extensionThe
client: ThirdwebClientprop is correctly added toModuleCardUIPropsinterface, maintaining type safety.
254-257: LGTM: Correct client prop propagationThe
WalletAddresscomponent now correctly receives theclientprop, aligning with the refactor to removeuseThirdwebClienthook usage.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx (2)
6-6: LGTM: Consistent prop drilling implementationThe changes correctly implement the client prop pattern:
- Proper type import for
ThirdwebClient- Interface extension with required
clientprop- Component parameter destructuring includes the new prop
Also applies to: 20-20, 26-26
49-53: LGTM: Correct WalletAddress prop updateThe
WalletAddresscomponent now receives theclientprop, properly following the refactor pattern to eliminateuseThirdwebClienthook dependency.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/analytics-page.tsx (2)
3-3: LGTM: Proper type import and prop additionThe
ThirdwebClienttype is correctly imported and added to the component props, maintaining type safety in the prop drilling pattern.Also applies to: 19-19
41-41: LGTM: Correct prop propagation to child componentThe
clientprop is properly passed to theTransactionsTablecomponent, continuing the explicit client propagation pattern.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx (2)
5-5: LGTM: Correct utility importThe
getClientThirdwebClientimport is properly added to support creating the authenticated client instance.
29-32: LGTM: Proper client instantiationThe client is correctly created using the authenticated token and team ID from the project context, ensuring proper authentication for downstream components.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx (2)
136-136: LGTM! Correctly passes client prop to WalletAddress.The addition of
client={contract.client}prop to theWalletAddresscomponent is correct and aligns with the component's updated interface that requires an explicitThirdwebClientinstance.
156-156: Good dependency management in useMemo.Adding
contract.clientto the dependency array ensures the table columns are properly re-memoized when the client instance changes, preventing potential stale closures.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx (1)
34-39: Good prop updates for explicit client passing.The changes correctly:
- Pass the
clientinstance to enable explicit ThirdwebClient usage- Rename
clientIdtoprojectClientIdfor better naming consistency- Maintain all existing props while adding the new client dependency
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx (1)
5-5: Clean implementation of client prop threading.The changes correctly implement the explicit client prop pattern:
- Added proper TypeScript import for
ThirdwebClient- Updated component interface to require the
clientprop- Cleanly passed the prop through to the child component
This follows the established pattern of explicit dependency injection rather than relying on internal hooks.
Also applies to: 14-14, 27-27
apps/dashboard/src/app/(app)/account/wallets/page.tsx (3)
15-22: Good authentication flow with proper redirect handling.The authentication check and client creation are well implemented:
- Proper redirect to login if auth token is missing
- Client creation with
teamId: undefinedis appropriate for account-level operations- Clean error handling flow
38-38: Correct client prop addition to LinkWallet.The
clientprop is properly passed to theLinkWalletcomponent, enabling it to have explicit access to the ThirdwebClient instance for wallet-related operations.
9-13:✅ Verification successful
Verify the getValidAccount parameter change.
The addition of the route parameter
"/account/wallets"togetValidAccountappears to be a change in the function signature. Please ensure this parameter is expected by the function.
🏁 Script executed:
#!/bin/bash # Check the getValidAccount function signature ast-grep --pattern 'export function getValidAccount($$$) { $$$ }'Length of output: 945
Verified getValidAccount Parameter Usage
The
getValidAccountfunction in
apps/dashboard/src/app/(app)/account/settings/getAccount.ts
is defined as:export async function getValidAccount(pagePath?: string) { … }so supplying
"/account/wallets"is supported and correct.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx (4)
10-14: LGTM: Proper import of ThirdwebClient typeThe import correctly adds the
ThirdwebClienttype from the thirdweb package, which is needed for the new prop interface.
127-127: LGTM: Correct client prop forwardingBoth
ListingCardscomponents correctly receive theclientprop fromcontract.client, which is the standard way to access the ThirdwebClient instance from a ThirdwebContract.Also applies to: 201-201
302-303: LGTM: Proper interface updateThe
ListingCardsPropsinterface correctly adds the requiredclientprop of typeThirdwebClient.
405-405: LGTM: WalletAddress component receives client propThe
WalletAddresscomponent now correctly receives theclientprop, which aligns with the broader refactor whereWalletAddressrequires an explicit client instead of using internal hooks.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx (1)
160-163: LGTM: Client prop correctly forwarded to WalletAddressThe
WalletAddresscomponent now receives theclientprop from the parent component's props, which is consistent with the refactor to make ThirdwebClient explicit rather than using internal hooks.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx (4)
12-12: LGTM: Proper ThirdwebClient importThe import correctly adds the
ThirdwebClienttype needed for the component interfaces.
22-23: LGTM: Interface and function parameter updatesThe
EngineAccessTokensPropsinterface and function signature correctly add theclientprop of typeThirdwebClient.Also applies to: 29-30
77-78: LGTM: Proper client prop forwarding through component hierarchyThe
clientprop is correctly passed fromEngineAccessTokenstoStandardAccessTokensPaneland properly added to the function signature.Also applies to: 92-96
118-119: LGTM: Client forwarded to AccessTokensTableThe
clientprop is correctly passed toAccessTokensTable, which will use it for rendering wallet addresses with the explicit ThirdwebClient instance.apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx (4)
7-7: LGTM: Proper ThirdwebClient importThe import correctly adds the
ThirdwebClienttype from the thirdweb package.
24-25: LGTM: Component props interface updated correctlyThe
PayCustomersTableprops interface correctly adds the requiredclientprop of typeThirdwebClient.
67-68: LGTM: Client prop correctly threaded through component hierarchyThe
clientprop is properly passed fromPayCustomersTabletoCustomerTableRowand correctly added to the function signature.Also applies to: 88-89
103-103: LGTM: WalletAddress receives client propThe
WalletAddresscomponent now correctly receives theclientprop, completing the prop threading chain and enabling client-aware wallet address rendering.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx (5)
3-3: LGTM: Good imports for authentication and client creation.The imports are correctly added for the new authentication flow and client instantiation functionality.
Also applies to: 13-14
27-27: Good performance improvement with concurrent fetching.Using
Promise.allto fetch both params and authToken concurrently is an excellent optimization that reduces the overall response time.
31-35: Authentication enforcement looks correct.The authentication check properly redirects to login if no auth token is present, maintaining the current path for redirect after login.
49-52: Client instantiation follows the expected pattern.The ThirdwebClient is correctly created with the JWT token and team ID, which aligns with the refactor objectives.
69-70:✅ Verification successful
Verify PayAnalytics component accepts these prop changes.
The prop name change from
clientIdtoprojectClientIdand the addition of theclientprop need to be verified against the PayAnalytics component interface.
🏁 Script executed:
#!/bin/bash # Description: Verify PayAnalytics component accepts the new props structure # Expected: PayAnalytics should accept projectClientId and client props ast-grep --pattern $'interface $_ { $$$ projectClientId: $_ $$$ client: $_ $$$ }' ast-grep --pattern $'type $_ = { $$$ projectClientId: $_ $$$ client: $_ $$$ }'Length of output: 182
🏁 Script executed:
#!/bin/bash # Locate PayAnalytics component definitions echo "=== PayAnalytics component definitions ===" rg -n "export (default )?(function|const|class) PayAnalytics" . # Locate any interface or type declarations for PayAnalytics props echo -e "\n=== PayAnalytics props interface/type declarations ===" rg -n "interface.*PayAnalytics" . rg -n "type.*PayAnalytics" .Length of output: 477
🏁 Script executed:
#!/bin/bash # Search for any references to PayAnalytics in the codebase echo "=== All occurrences of 'PayAnalytics' ===" rg -n "PayAnalytics" . # Locate files named PayAnalytics.tsx or containing PayAnalytics in filename echo -e "\n=== Files matching PayAnalytics*.tsx ===" fd --type f PayAnalytics --extension tsx # Search for default or named exports of PayAnalytics echo -e "\n=== Export statements for PayAnalytics ===" rg -n "export .*PayAnalytics" .Length of output: 1681
🏁 Script executed:
#!/bin/bash # Display the PayAnalytics component signature and props definition rg -n "export async function PayAnalytics" -A 20 apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsxLength of output: 716
PayAnalytics props signature is correct
The
PayAnalyticscomponent’s props include bothprojectClientId: stringandclient: ThirdwebClient, matching the usage inpage.tsx. No changes are needed.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx (5)
2-2: LGTM: Consistent imports for the refactor pattern.The imports follow the same pattern as other files in this refactor, supporting authentication and client creation.
Also applies to: 4-5
16-19: Good concurrent data fetching optimization.Using
Promise.allto fetch authToken and project data concurrently improves performance by reducing sequential wait time.
21-23: Authentication flow correctly implemented.The authentication check and redirect pattern is consistent with the other files and properly maintains the current path.
35-38: Client instantiation follows established pattern.The ThirdwebClient creation with JWT and team ID is consistent with the refactor approach.
49-49:✅ Verification successful
Verify TransactionDetailsUI accepts client prop.
Need to confirm that the TransactionDetailsUI component has been updated to accept the new
clientprop.
🏁 Script executed:
#!/bin/bash # Description: Verify TransactionDetailsUI component accepts client prop # Expected: TransactionDetailsUI should have client prop in its interface ast-grep --pattern $'interface $_ { $$$ client: ThirdwebClient $$$ }' # Also check for type definitions ast-grep --pattern $'type $_ = { $$$ client: ThirdwebClient $$$ }'Length of output: 68847
I’ll locate the
TransactionDetailsUIdefinition and its props interface:
🏁 Script executed:
#!/bin/bash # Find where TransactionDetailsUI is defined rg -n "TransactionDetailsUI" . # Look specifically for its props interface rg -n "TransactionDetailsUIProps" .Length of output: 533
🏁 Script executed:
#!/bin/bash # Display the beginning of the TransactionDetailsUI file to inspect its props sed -n '1,200p' "apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx"Length of output: 7663
TransactionDetailsUI accepts
clientprop
Confirmed thatTransactionDetailsUI’s props signature includesclient: ThirdwebClient. No further changes needed.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx (3)
4-4: LGTM: Correct type import.The ThirdwebClient type import is necessary for the new prop definition.
12-12: Good prop interface and parameter updates.The addition of the
clientprop to both the interface and component parameters is consistent with the refactor pattern.Also applies to: 18-18
47-47:✅ Verification successful
Verify AdminsTable accepts client prop.
Need to confirm that the AdminsTable component has been updated to accept and use the
clientprop.
🏁 Script executed:
#!/bin/bash # Description: Verify AdminsTable component accepts client prop # Expected: AdminsTable should accept client prop and pass it to WalletAddress ast-grep --pattern $'interface $_ { $$$ client: ThirdwebClient $$$ }' # Check for WalletAddress usage with client prop rg -A 3 -B 3 "WalletAddress.*client"Length of output: 31753
AdminsTable now accepts and forwards the
clientprop
Verified that inapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsxtheAdminsTablePropsinterface includesclient: ThirdwebClient, and eachWalletAddresscell is rendered withclient={client}.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx (4)
26-27: LGTM: Correct imports for the refactor.The
useMemoimport andThirdwebClienttype are necessary for the component changes.
37-37: Good prop interface and parameter updates.The addition of the
clientprop follows the established pattern for this refactor.Also applies to: 48-48
54-93: Excellent use of useMemo for performance optimization.Moving the columns definition inside the component and memoizing it with the
clientdependency is the correct approach. This ensures the columns are only recreated when the client changes, while allowing theWalletAddresscomponent to receive the client prop.
78-78:✅ Verification successful
Verify WalletAddress component accepts client prop.
Need to confirm that the WalletAddress component has been updated to accept the
clientprop as part of this refactor.
🏁 Script executed:
#!/bin/bash # Description: Verify WalletAddress component accepts client prop # Expected: WalletAddress should accept client: ThirdwebClient prop ast-grep --pattern $'interface $_ { $$$ client: ThirdwebClient $$$ }' # Check WalletAddress component definition rg -A 10 -B 5 "export.*WalletAddress"Length of output: 29634
WalletAddress component correctly accepts the
clientpropConfirmed that in
apps/dashboard/src/@/components/blocks/wallet-address.tsx, theWalletAddressfunction signature includes aclient: ThirdwebClientprop:export function WalletAddress(props: { address: string | undefined; shortenAddress?: boolean; className?: string; iconClassName?: string; client: ThirdwebClient; }) { … }No further changes required.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx (1)
92-135: LGTM! Excellent refactor to support explicit client dependency injection.The change correctly moves the static
tableColumnsarray inside the component usinguseMemowithcontract.clientas a dependency. This ensures proper re-rendering when the client changes and allows theWalletAddresscomponent to receive the requiredclientprop.The pattern follows best practices:
- Proper memoization to prevent unnecessary re-renders
- Correct dependency array with
contract.client- Maintains all existing column functionality
- Consistent with the broader refactor across the codebase
apps/dashboard/src/@/components/blocks/wallet-address.tsx (2)
26-26: LGTM! Clean dependency injection refactor.Adding the required
client: ThirdwebClientprop removes the internal dependency onuseThirdwebClienthook, making the component's dependencies explicit and improving testability and reusability.
42-42: LGTM! Consistent client prop usage throughout the component.All internal usages of the ThirdwebClient have been correctly updated to use
props.client:
- Line 42:
useSocialProfileshook- Line 80:
WalletAvatarcomponent prop- Line 124:
resolveSchemeWithErrorHandlerfunctionThis ensures consistent client context throughout the component and its children.
Also applies to: 80-80, 124-124
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx (3)
27-28: LGTM! Proper imports for the refactor.The addition of
useMemoimport andThirdwebClienttype import are necessary for the column memoization pattern and type safety.
37-37: LGTM! Clean interface extension and parameter addition.The
client: ThirdwebClientprop has been correctly added to theAdminsTablePropsinterface and component parameters, maintaining type safety and enabling the dependency injection pattern.Also applies to: 48-48
54-80: LGTM! Excellent memoization pattern for table columns.The static
columnsarray has been correctly moved inside the component usinguseMemowithclientas a dependency. This ensures:
- Proper re-rendering when client changes
- Access to the client prop for the
WalletAddresscomponent (line 60)- Optimal performance by preventing unnecessary column recreations
The pattern is consistent with similar changes in other table components throughout the codebase.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx (3)
20-24: LGTM! Clean import extension.The
ThirdwebClienttype has been properly added to the existing import statement from the thirdweb package, maintaining clean import organization.
72-72: LGTM! Correct client prop propagation.The
contract.clientis properly passed down to thePermissionsTableUIcomponent, ensuring the ThirdwebClient instance is available for wallet address rendering.
82-82: LGTM! Complete client prop chain implementation.The changes correctly implement the client prop chain:
- Line 82:
PermissionsTableUIinterface extended withclient: ThirdwebClient- Line 115:
WalletAddresscomponent receives the requiredclientpropThis ensures proper dependency injection throughout the component hierarchy.
Also applies to: 115-115
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx (2)
25-25: Clean type import and prop additions.The
ThirdwebClientimport and prop type additions are well-implemented and consistent with the broader refactor to make client dependencies explicit.Also applies to: 40-40, 44-44
61-61: Excellent prop threading throughout the component hierarchy.The
clientprop is properly passed fromTransactionTimeline→CancelTransactionButton→WalletAddress, ensuring consistent access to theThirdwebClientinstance throughout the component tree.Also applies to: 82-82, 191-191, 256-256
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx (3)
22-22: Clean type import and prop addition.The
ThirdwebClientimport and prop type addition follow the established pattern for the refactor.Also applies to: 46-46
88-91: Proper client prop forwarding to WalletAddress components.Both
WalletAddressinstances correctly receive theclientprop, ensuring consistent client context for wallet address rendering.Also applies to: 94-97
238-238: Correct client extraction from contract.The client is properly extracted from
props.clientContract.clientand passed down to the UI component.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx (2)
15-18: Appropriate prop type refinement.Correctly omits
"client"fromModuleCardUIPropssinceModuleInstancePropswill provide the client from itscontract.clientproperty.
55-62: Proper client prop provision to fallback component.The fallback
ModuleCardUIrender correctly receives theclientprop extracted fromprops.contract.client, ensuring the component has access to theThirdwebClientinstance for wallet address rendering.apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx (2)
30-30: Consistent client prop threading across component hierarchy.The
ThirdwebClientimport and prop additions are implemented consistently acrossLinkWallet,LinkWalletUI, andUnlinkButtoncomponents, ensuring proper client context flow.Also applies to: 36-36, 65-65, 152-152
105-105: Proper client forwarding to WalletAddress components.Both
WalletAddressinstances in the table and dialog correctly receive theclientprop, maintaining consistent client context for wallet address rendering.Also applies to: 191-191
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx (2)
16-16: LGTM: Clean refactor to explicit client prop injection.The component interface changes follow the established pattern perfectly - importing
ThirdwebClient, adding it to the props interface, and updating the function signature. This aligns well with the PR's objective to reduce hook usage in favor of explicit prop passing.Also applies to: 22-22, 26-26
184-184: Excellent client prop propagation to child components.The
clientprop is correctly passed to all components that need it:
ChainIconClientfor chain icon renderingWalletAddresscomponents for both sender and signer addressesThis ensures consistent client context throughout the component tree.
Also applies to: 206-206, 215-215
apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx (3)
17-17: Well-designed prop interface separation.The refactor correctly separates concerns by introducing:
client: ThirdwebClientfor UI components requiring client contextprojectClientId: stringfor API authenticationThis separation makes the component's dependencies explicit and improves maintainability.
Also applies to: 28-31
37-37: Proper React Query key and API call updates.The query key correctly uses
projectClientIdinstead of the oldclientId, and thegetPaymentscall is updated accordingly. This ensures proper caching behavior and API authentication.Also applies to: 40-40
86-92: Consistent client prop propagation through component hierarchy.The
clientprop is properly passed fromPaymentHistory→TableRow→WalletAddress, ensuring the ThirdwebClient context is available where needed for wallet address rendering and social profile fetching.Also applies to: 125-125, 191-191
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts (4)
1-2: Appropriate imports for team data and client creation.The new imports
getTeamBySlugandgetClientThirdwebClientare correctly added to support the enhanced functionality of creating an authenticated ThirdwebClient instance.
16-20: Efficient concurrent data fetching.Using
Promise.allto fetch auth token, account, and team data concurrently is an excellent performance optimization. This reduces the overall loading time by parallelizing independent async operations.
33-36: Proper validation of required data.The validation ensures both
instanceandteamexist before proceeding, which is crucial for creating a properly configured ThirdwebClient. ThenotFound()call provides appropriate error handling.
38-43: Well-structured client creation and return.The ThirdwebClient is properly created using the JWT token and team ID, then included in the return object alongside existing data. This follows the dependency injection pattern established throughout the PR.
apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx (2)
5-5: Consistent prop interface refactor.The component correctly adopts the established pattern by:
- Importing
ThirdwebClienttype- Replacing
clientIdwithprojectClientIdandclientprops- Maintaining backward compatibility for other existing props
This aligns perfectly with the systematic refactor across the codebase.
Also applies to: 16-22
89-89: Proper client prop propagation to child components.The
clientprop is correctly passed down to:
PayCustomersTablefor wallet address renderingPaymentHistoryalong with theprojectClientIdfor API callsThis ensures consistent client context throughout the pay analytics feature.
Also applies to: 92-96
apps/dashboard/src/components/embedded-wallets/Users/index.tsx (4)
21-22: LGTM! Proper imports for the refactor.The addition of
useMemoandThirdwebClienttype imports are correctly placed and necessary for the changes made in this component.
41-43: Good prop interface updates.The renaming from
clientIdtoprojectClientIdprovides better clarity, and the addition of theclientprop follows the established pattern for this refactor.
44-111: Excellent memoization implementation.The
useMemowrapper for columns withclientdependency is well-implemented:
- Prevents unnecessary re-renders when only other props change
- Correctly includes
clientin the dependency array- Properly passes
clientto theWalletAddresscomponent in the cell rendererThis follows React performance best practices.
117-117: Consistent prop renaming throughout.All references to
clientIdhave been correctly updated toprojectClientId, ensuring consistency across the component's usage of hooks and callbacks.Also applies to: 156-156, 177-177
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx (4)
69-70: Proper interface extension.The addition of the
client: ThirdwebClientprop to theBackendWalletsTablePropsinterface correctly extends the component's API to support explicit client passing.
152-153: Correct client prop forwarding in table cells.The
WalletAddresscomponent properly receives theclientprop in the address column cell renderer, maintaining consistency with the refactor pattern.
271-271: Comprehensive modal prop threading.All modal components (
EditModal,ReceiveFundsModal,SendFundsModal,DeleteModal) correctly receive theclientprop, ensuring consistent client context throughout the component tree.Also applies to: 278-278, 289-289, 298-298
310-310: Complete modal interface and usage updates.All modal interfaces properly include the
client: ThirdwebClientprop, and allWalletAddressusages within modals correctly receive the client prop. TheChainIconClientinSendFundsModalalso properly receives the client, showing thorough attention to all client-dependent components.Also applies to: 316-316, 373-373, 404-404, 408-408, 447-447, 540-540, 605-607, 633-633, 639-639, 705-705
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx (2)
2-2: Correct type import addition.The
ThirdwebClienttype import is properly added to support the new client prop.
14-14: Clean prop threading implementation.The
clientprop is correctly added to the component interface and properly forwarded to theServerWalletsTableUIchild component. This maintains the separation of concerns while enabling explicit client dependency injection.Also applies to: 23-23, 34-34
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx (5)
35-35: Proper type import for client prop.The
ThirdwebClienttype import is correctly added to support the new explicit client dependency.
51-51: Correct component interface update.The
client: ThirdwebClientprop is properly added to the component interface, enabling explicit dependency injection instead of hook-based client access.Also applies to: 60-60
116-116: Proper client prop forwarding in conditional rendering.Both branches of the conditional rendering correctly pass the
clientprop to their respective components (WalletAddressandSmartAccountCell), maintaining functionality while following the new pattern.Also applies to: 118-118
199-205: Clean SmartAccountCell interface update.The
SmartAccountCellcomponent interface is properly updated to accept theclientprop, following the same pattern as other components in this refactor.
213-213: Effective hook replacement with direct client usage.The direct usage of the
clientprop inpredictSmartAccountAddressand proper forwarding toWalletAddresssuccessfully replaces the previous hook-based approach while maintaining all functionality.Also applies to: 226-229
.../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx
Show resolved
Hide resolved
...rc/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx
Show resolved
Hide resolved
| @@ -2,6 +2,7 @@ import { getProject } from "@/api/projects"; | |||
| import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs"; | |||
| import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk"; | |||
| import { notFound } from "next/navigation"; | |||
| import { getClientThirdwebClient } from "../../../../../../../../../@/constants/thirdweb-client.client"; | |||
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 primarily focuses on adding a `client` prop to various components across the dashboard application, enhancing their functionality and ensuring consistent access to the `ThirdwebClient`.
### Detailed summary
- Added `client` prop to `BatchMetadata`, `Royalty`, `Mintable`, `Transferable`, `Claimable`, and other components.
- Updated `WalletAddress` component to accept `client` prop in multiple instances.
- Enhanced various tables and UI components to utilize the `client` prop for improved data handling.
- Refactored existing components to ensure compatibility with the new `client` prop, ensuring consistent client access throughout the application.
> ✨ 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**
- Enhanced all WalletAddress displays across the dashboard to accept and utilize a new client context for improved integration and consistency.
- **Refactor**
- Updated multiple components and their props to require and pass a client instance, ensuring unified client handling throughout tables, modals, and analytics views.
- Replaced static table column definitions with dynamic, memoized columns that respond to client changes.
- Standardized prop names related to client identification for clarity and maintainability.
- **Bug Fixes**
- Ensured client context is consistently propagated to all relevant child components, preventing potential rendering or data issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
05-30-dashboard_reduce_usethirdwebclient_hook_usage
branch
from
4d69067 to
0262763
Compare
graphite-app
bot
deleted the
05-30-dashboard_reduce_usethirdwebclient_hook_usage
branch
PR-Codex overview
This PR primarily focuses on enhancing various components across the dashboard by adding a
clientprop to several components, improving their integration with theThirdwebClient. This change facilitates better client management for wallet and transaction functionalities.Detailed summary
clientprop to components includingBatchMetadata,Royalty,Mintable, and others.WalletAddresscomponents to utilize theclientprop for improved functionality.clientfor better state management.clientprop integration.Summary by CodeRabbit