Dashboard: Reduce useThirdwebClient hook usage #3 #7226
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis change refactors the usage of the Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant getClientThirdwebClient
participant ChildComponent
participant SubComponent
ParentComponent->>getClientThirdwebClient: Obtain client
ParentComponent->>ChildComponent: Pass client as prop
ChildComponent->>SubComponent: Pass client as prop
SubComponent->>Thirdweb API: Use client for blockchain operation
Suggested reviewers
🪧 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 #7226 +/- ##
=======================================
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 review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/allowed-operations-section.tsx (1)
581-581: 🛠️ Refactor suggestionInconsistent client usage pattern detected.
The
UserOpTransactionscomponent withinPersonalSignRestrictionsstill uses theuseThirdwebClient()hook, which is inconsistent with the refactoring pattern applied to other components in this file.For consistency, consider passing the client prop through
PersonalSignRestrictionstoUserOpTransactions:function PersonalSignRestrictions({ control, index, + client, }: { control: Control<PartnerFormValues>; index: number; + client: ThirdwebClient; }) { // ... existing code ... // Then update UserOpTransactions call to: <UserOpTransactions control={control} opIndex={index} signIndex={signIndex} + client={client} /> // And update UserOpTransactions function: function UserOpTransactions({ control, opIndex, signIndex, + client, }: { control: Control<PartnerFormValues>; opIndex: number; signIndex: number; + client: ThirdwebClient; }) { - const client = useThirdwebClient(); // ... rest of the component }Also update the parent component call:
<PersonalSignRestrictions control={control} index={index} + client={client} />
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/partners/[partner_id]/edit/page.tsx (1)
3-3: Long import path follows project structureWhile the relative import path is quite long, it appears to follow the established directory structure of the project. Consider if this could benefit from a path alias configuration for better maintainability.
apps/dashboard/src/app/(app)/account/layout.tsx (1)
22-27: Good implementation of client creation at layout level.The refactor correctly fetches the auth token and creates the client instance at the layout level. However, consider improving the error handling to provide more specific feedback about which authentication requirement failed.
Consider this improvement for better error handling:
- if (!teams || !accountAddress || !authToken) { - loginRedirect("/account"); - } + if (!teams) { + console.error("Failed to fetch teams"); + loginRedirect("/account"); + } + if (!accountAddress || !authToken) { + console.error("Authentication failed - missing token or address"); + loginRedirect("/account"); + }Also applies to: 29-31
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (36)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/page.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx(2 hunks)apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx(3 hunks)apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx(2 hunks)apps/dashboard/src/app/(app)/account/layout.tsx(4 hunks)apps/dashboard/src/app/(app)/components/autoconnect.tsx(1 hunks)apps/dashboard/src/app/(app)/login/LoginPage.tsx(8 hunks)apps/dashboard/src/app/(app)/login/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx(3 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]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/partners/[partner_id]/edit/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/layout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx(5 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/page.tsx(1 hunks)apps/dashboard/src/components/buttons/MismatchButton.tsx(6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (13)
apps/dashboard/src/app/(app)/login/page.tsx (1)
apps/dashboard/src/@/constants/thirdweb-client.client.ts (1)
getClientThirdwebClient(3-11)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/partners/[partner_id]/edit/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)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.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)/(dashboard)/profile/[addressOrEns]/page.tsx (1)
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/page.tsx (1)
packages/engine/src/client/client.gen.ts (1)
client(24-28)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/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)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx (1)
apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx (1)
ProfileHeader(15-55)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx (2)
apps/dashboard/src/@/api/team.ts (1)
Team(9-9)packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)
apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/hooks/analytics/useTrack.ts (1)
useTrack(13-45)apps/dashboard/src/components/contract-components/import-contract/modal.tsx (1)
ImportModal(44-76)
apps/dashboard/src/app/(app)/components/autoconnect.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)/account/contracts/DeployedContractsPageHeader.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)apps/dashboard/src/hooks/analytics/useTrack.ts (1)
useTrack(13-45)apps/dashboard/src/components/contract-components/import-contract/modal.tsx (1)
ImportModal(44-76)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/allowed-operations-section.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx (1)
PartnerFormValues(26-26)packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)
apps/dashboard/src/components/buttons/MismatchButton.tsx (2)
packages/engine/src/client/client.gen.ts (1)
client(24-28)packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(26-26)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
🔇 Additional comments (57)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx (1)
44-44: LGTM! Consistent with the client prop refactoring pattern.The addition of
client={contract.client}to theDepositNativecomponent follows the established pattern of explicitly passing ThirdwebClient instances as props instead of using theuseThirdwebClienthook internally. Usingcontract.clientas the source is logical and maintains consistency.apps/dashboard/src/app/(app)/login/page.tsx (2)
1-1: LGTM! Proper import addition for client refactoring.The import of
getClientThirdwebClientis necessary to support the new client prop pattern.
31-31: LGTM! Appropriate client usage for login context.Calling
getClientThirdwebClient()without parameters is correct for the login page since users aren't authenticated yet. The function handles undefined JWT and team ID gracefully.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx (2)
81-84: LGTM! Proper authenticated client creation.The client is correctly created using
getClientThirdwebClientwith bothjwt(authToken) andteamIdparameters, which is appropriate for this authenticated context.
95-95: LGTM! Consistent client prop passing.The
clientprop is correctly passed to theEngineChecklistcomponent, following the established refactoring pattern of explicit client prop injection.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx (3)
2-2: LGTM! Required import for client refactoring.The import of
getClientThirdwebClientsupports the new client prop pattern being implemented across the dashboard.
31-34: LGTM! Proper authenticated client creation.The client is correctly instantiated with both
jwt(authToken) andteamId(team.id) parameters, which is appropriate for this authenticated ecosystem management context.
53-53: LGTM! Consistent client prop injection.The
clientprop is correctly passed to theAddPartnerFormcomponent, aligning with the broader refactoring to standardize ThirdwebClient usage across dashboard components.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx (1)
175-177: LGTM! Consistent client usage from contract object.The change from using a local
clientvariable (obtained viauseThirdwebClient()) to usingcontract.clientis correct and aligns with the refactoring objectives. This ensures the same client instance is used consistently and avoids duplicate client creation.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx (2)
3-3: LGTM! Proper type import and props interface update.The addition of the
ThirdwebClienttype import and theclientprop to the component interface follows the refactoring pattern correctly and maintains proper TypeScript typing.Also applies to: 12-12
50-50: LGTM! Correct client prop passing.The client prop is properly passed down to the
PayModalButtoncomponent, following the established pattern of explicit client propagation through the component tree.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (1)
156-156: LGTM! Consistent use of client from props.The change from using a local
clientvariable (obtained viauseThirdwebClient()) to usingprops.clientis correct and aligns with the refactoring pattern. This makes the client dependency explicit and improves consistency across the codebase.apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx (1)
27-27:✅ Verification successful
LGTM with verification needed for client configuration.
The change from
useThirdwebClient()togetClientThirdwebClient()follows the refactoring pattern but uses a different approach than prop drilling. This appears appropriate for a component that doesn't receive the client from parent props.However, please verify that calling
getClientThirdwebClient()without parameters provides the correct client configuration for this use case. The function accepts optionaljwtandteamIdparameters, and we should ensure that authentication and team context are properly handled if required for transaction simulation.Also applies to: 64-64
🏁 Script executed:
#!/bin/bash # Description: Check if TransactionSimulator component needs specific client configuration # by examining usage patterns and authentication requirements # Check if other components using getClientThirdwebClient pass parameters rg -A 3 -B 3 "getClientThirdwebClient\(" --type tsx --type ts # Check if TransactionSimulator is used in authenticated contexts rg -A 5 -B 5 "TransactionSimulator" --type tsx --type tsLength of output: 176
🏁 Script executed:
#!/bin/bash # Locate all definitions and usages of getClientThirdwebClient in .ts/.tsx files rg -n -C3 "getClientThirdwebClient" -g "*.ts" -g "*.tsx" # Specifically inspect the declaration (to see default parameters) rg -n -C5 "function getClientThirdwebClient" -g "*.ts" -g "*.tsx" # Confirm how many arguments callers pass elsewhere rg -n "getClientThirdwebClient(" -g "*.ts" -g "*.tsx"Length of output: 67924
🏁 Script executed:
#!/bin/bash # Locate the thirdweb-client.client.ts file file_path=$(find . -type f -name "thirdweb-client.client.ts" | head -n1) echo "Definition file: $file_path" # Show the function definition with context rg -n -C5 "getClientThirdwebClient" "$file_path"Length of output: 677
🏁 Script executed:
#!/bin/bash # Locate the thirdweb.server.ts file defining getConfiguredThirdwebClient server_file=$(find . -type f -name "thirdweb.server.ts" | head -n1) echo "Server definition file: $server_file" # Show the getConfiguredThirdwebClient implementation with context rg -n -C10 "export function getConfiguredThirdwebClient" "$server_file"Length of output: 1256
Approve: Default client configuration is valid for TransactionSimulator
Verified that getClientThirdwebClient() accepts optional jwt and teamId and defaults both to undefined, producing an unauthenticated client. Since the TransactionSimulator component does not require a user’s auth or team context, calling it without parameters is correct.
• File apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx
– Lines 27 & 64:getClientThirdwebClient()
• No changes needed.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx (3)
2-2: LGTM: Clean import additionThe import of
getClientThirdwebClientfollows the expected pattern for this refactor.
20-20: LGTM: Appropriate client creation for public chain pageCreating the client without authentication parameters is correct for a chain page that serves public functionality like faucet and buy funds operations.
47-50: LGTM: Consistent prop passing patternThe client is properly passed to both
FaucetSectionandBuyFundsSectioncomponents, maintaining consistency with the refactor objectives.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/partners/[partner_id]/edit/page.tsx (2)
33-36: LGTM: Proper authenticated client creationThe client is correctly created with JWT token and team ID parameters, which is essential for partner management operations that require authentication and team context.
77-77: LGTM: Client prop passed to form componentThe client is properly passed to
UpdatePartnerForm, maintaining the refactor pattern of explicit dependency injection.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx (3)
5-5: LGTM: Proper type importThe
ThirdwebClienttype import is correctly added to support the new client prop interface.
14-20: LGTM: Clean component interface updateThe component props are properly extended to include the required
clientprop with correct TypeScript typing.
70-70: LGTM: Consistent prop drillingThe client is properly passed down to the
PartnerFormcomponent, maintaining the refactor pattern of explicit client dependency injection.apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/page.tsx (2)
1-2: LGTM: Improved import consistencyThe addition of
getClientThirdwebClientimport and the change from relative to absolute path forserverThirdwebClientimproves import consistency across the codebase.
31-31: LGTM: Appropriate client creation for profile pageCreating the client without authentication parameters is correct for a profile page, and properly passing it to
ProfileUImaintains the refactor pattern.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/SettingsLayout.tsx (1)
8-8: LGTM! Clean refactoring to explicit client prop passing.The changes correctly implement the intended pattern of removing
useThirdwebClienthook usage in favor of explicit prop passing. TheThirdwebClienttype is properly imported and theclientprop is correctly typed and passed down to theTeamSettingsSidebarcomponent.Also applies to: 21-21, 54-54
apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx (1)
4-4: LGTM! Consistent refactoring pattern applied.The changes properly implement the explicit client prop pattern:
- Correct import of
ThirdwebClienttype- Proper prop type declaration
- Appropriate prop passing to
ProfileHeadercomponentThe implementation aligns with the
ProfileHeadercomponent's updated signature that expects aclientprop.Also applies to: 12-12, 18-22
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx (1)
1-1: LGTM! Proper implementation of client prop pattern.The changes correctly implement the explicit client prop passing pattern:
- Appropriate
ThirdwebClienttype import- Correct prop type declaration in the component signature
- Clean destructuring of the
clientprop- Proper forwarding to the
FaucetButtoncomponentThe implementation is consistent with the broader refactoring effort.
Also applies to: 12-14, 49-49
apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx (1)
9-9: LGTM! Consistent application of the refactoring pattern.The changes properly implement the explicit client prop passing:
- Correct
ThirdwebClienttype import- Appropriate prop type declaration
- Proper forwarding to the
ImportModalcomponentThis aligns with the
ImportModalcomponent's signature that expects aclientprop, as confirmed by the relevant code snippets.Also applies to: 14-14, 23-23
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx (1)
20-20: LGTM! Clean ThirdwebClient prop integration.The implementation correctly adds the
clientprop to the component interface and passes it through to child components. The type annotations are accurate and the prop drilling follows the established pattern.Also applies to: 36-36, 44-44, 348-348
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx (1)
5-5: LGTM! Consistent client prop implementation.The component correctly accepts the
clientprop and passes it through to thePartnerFormcomponent. The TypeScript interface is properly updated and the implementation follows the established refactor pattern.Also applies to: 15-15, 21-21, 74-74
apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx (1)
23-23: LGTM! Proper client prop propagation.The component correctly passes the
clientprop to both child components (DeployedContractsPageHeaderandDeployViaCLIOrImportCard). The prop access pattern usingprops.clientis consistent and appropriate.Also applies to: 32-32
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx (1)
183-183: LGTM! Excellent refactor from hook to prop-based client access.The changes consistently replace
useThirdwebClient()hook usage with direct access tocontract.client. This improves explicit dependency management and aligns with the broader refactor pattern. TheThirdwebContracttype correctly provides the client property, making this a clean and appropriate change.Also applies to: 232-232, 256-256
apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx (2)
10-10: LGTM! Proper type import and prop addition.The
ThirdwebClienttype import and the addition of theclientprop to the component signature are correctly implemented.Also applies to: 26-26
52-54: LGTM! Consistent client prop passing.The client prop is correctly passed to both the
CustomConnectWalletcomponent and included in theheaderPropsobject, ensuring proper client propagation throughout the component tree.Also applies to: 61-61
apps/dashboard/src/app/(app)/components/autoconnect.tsx (1)
2-2: LGTM! Improved client instantiation pattern.Moving from
useThirdwebClienthook to module-levelgetClientThirdwebClient()call improves performance by avoiding client re-instantiation on every render and makes the dependency more explicit.Also applies to: 6-6
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx (1)
7-7: LGTM! Proper client prop integration.The component correctly:
- Imports the
ThirdwebClienttype- Accepts the
clientprop in its signature- Passes the client prop to the
PayEmbedcomponentThis maintains functionality while following the consistent client prop passing pattern.
Also applies to: 11-15, 41-41
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx (2)
75-85: LGTM! Correct client prop integration.The component signature is properly updated to accept the
client: ThirdwebClientprop, and the typing is correct. This follows the consistent pattern of explicit client prop passing instead of using theuseThirdwebClienthook internally.
92-96: LGTM! Consistent client usage throughout component.The passed
clientprop is correctly used in:
useWalletBalancehookSendFundsToFaucetModalButtoncomponentCustomConnectWalletcomponentThis ensures proper client propagation and maintains functionality while following the new architecture pattern.
Also applies to: 188-188, 410-410
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/ftux.client.tsx (1)
7-7: Excellent refactoring implementation!The ThirdwebClient prop refactoring is implemented correctly with proper attention to detail:
- Type import is appropriately added
- Props interface is properly extended
- Client prop is correctly passed to both
SendTestTransactioncomponents- Most importantly, the
useMemodependency array is updated to includeprops.client(line 83), ensuring the component re-renders when the client changesThis refactoring improves dependency explicitness and follows React best practices.
Also applies to: 21-21, 66-66, 83-83, 96-96
apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx (1)
9-9: Consistent refactoring implementation!The ThirdwebClient prop refactoring follows the established pattern correctly:
- Proper type import
- Clean props interface extension
- Client prop correctly passed to the
ImportModalcomponentThis maintains consistency with the broader codebase refactoring effort.
Also applies to: 14-14, 22-22
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/install-module-params.tsx (1)
4-4: Well-executed hook refactoring!The refactoring of the
useModuleInstallParamshook correctly implements the client prop pattern:
- Appropriate type import
- Clean props interface extension
- Proper prop destructuring
- Client correctly passed to
getModuleInstalledParamsExtending this refactoring pattern to custom hooks maintains consistency across the codebase.
Also applies to: 23-25, 30-30
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx (1)
8-8: Clean component refactoring implementation!The ThirdwebClient prop refactoring in the
DepositNativecomponent is well-executed:
- Type import properly updated
- Props interface cleanly extended
- Client prop correctly destructured
- Client properly utilized in the
prepareTransactioncallThe transaction logic remains intact while benefiting from explicit dependency injection.
Also applies to: 17-17, 25-25, 66-66
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx (2)
24-24: LGTM: Clean refactoring to explicit client prop pattern.The addition of the
ThirdwebClientimport and theclientprop to the component signature aligns well with the standardization effort across the codebase.Also applies to: 45-45
203-203: LGTM: Consistent client prop propagation.The client prop is correctly passed to all child components (
SmartAccountCellandSingleNetworkSelector) that require the ThirdwebClient instance.Also applies to: 217-217, 239-239
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/layout.tsx (3)
2-2: LGTM: Proper imports for enhanced authentication flow.The addition of
getClientThirdwebClient,getAuthToken, andloginRedirectimports supports the improved authentication and client instantiation pattern.Also applies to: 5-6
17-21: LGTM: Robust authentication check with proper error handling.The concurrent fetching of authentication token alongside account and team data, followed by the authentication check and redirect, ensures proper security before client creation.
Also applies to: 23-25
31-37: LGTM: Proper client instantiation and prop passing.The client is correctly created using the authenticated token and team ID, then passed to the
SettingsLayoutcomponent, maintaining the explicit client propagation pattern.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx (2)
306-309: LGTM: Component signature updated for explicit client handling.The
TxChainCellcomponent now properly accepts aclientprop, maintaining consistency with the refactoring pattern across the codebase.
158-161: LGTM: Proper client prop usage and propagation.The client prop is correctly passed to
TxChainCelland subsequently used in theChainIconClientcomponent, ensuring proper ThirdwebClient instance flow.Also applies to: 326-326
apps/dashboard/src/app/(app)/login/LoginPage.tsx (2)
16-16: LGTM: Comprehensive client prop integration across component hierarchy.The addition of
ThirdwebClientimport and explicitclientprops to all relevant components (LoginAndOnboardingPage,LoginAndOnboardingPageContent,CustomConnectEmbed) ensures consistent client handling throughout the login flow.Also applies to: 80-80, 166-166, 270-270
122-122: LGTM: Thorough client prop propagation through component tree.The client prop is systematically passed down through the entire component hierarchy, from the top-level components to the final
ConnectEmbedusage, maintaining the explicit client pattern consistently.Also applies to: 234-234, 261-261, 328-328
apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx (1)
5-5: LGTM! Clean refactoring to explicit client prop.The changes correctly implement the pattern of passing
ThirdwebClientas a prop instead of using theuseThirdwebClienthook internally. This improves dependency clarity and makes the component more testable.Also applies to: 18-18, 21-21
apps/dashboard/src/app/(app)/account/layout.tsx (1)
33-36: Excellent client propagation pattern.The client is properly created using
getClientThirdwebClientand correctly passed down through the component hierarchy. This establishes a clean dependency flow from layout to child components.Also applies to: 45-45, 59-59, 75-75
apps/dashboard/src/components/buttons/MismatchButton.tsx (2)
38-43: Good addition of ThirdwebClient to existing imports.The import statement is properly updated to include
ThirdwebClienttype needed for the prop drilling implementation.
280-280: Excellent prop drilling implementation.The client is correctly passed down through the component hierarchy:
MismatchButton→NoFundsDialogContent→GetFundsFromFaucet→FaucetButton. This maintains the existing functionality while enabling the new explicit client passing pattern.Also applies to: 342-342, 401-401, 442-442, 473-473
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/allowed-operations-section.tsx (3)
26-26: Proper client prop addition to main component.The
ThirdwebClienttype import and prop addition toAllowedOperationsSectioncorrectly follows the refactoring pattern.Also applies to: 33-33, 40-40
148-152: Good client prop propagation to child components.The client is correctly passed to both
TransactionRestrictionsandTypedDataRestrictionscomponents, maintaining consistency in the refactoring approach.Also applies to: 157-161
196-200: Correct client parameter addition to restriction components.Both
TransactionRestrictionsandTypedDataRestrictionsproperly accept theclientparameter and use it in theirSingleNetworkSelectorcomponents.Also applies to: 327-331
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 updating the usage of the `client` prop throughout various components in the application, replacing instances of `useThirdwebClient` with a more consistent approach using `getClientThirdwebClient`.
### Detailed summary
- Added `client` prop to multiple components including `AccountPage`, `DeployedContractsPage`, and `FaucetButton`.
- Replaced `useThirdwebClient` with `getClientThirdwebClient` in various files.
- Ensured consistency in passing the `client` prop across components.
- Updated the `ProfileHeader`, `PayModalButton`, and `SendTestTransaction` to accept `client` as a prop.
- Modified forms and sections to utilize the `client` prop for better integration with Thirdweb services.
> ✨ 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
- **Refactor**
- Updated various components to receive a client instance as a prop instead of obtaining it internally, improving consistency and making client usage more explicit throughout the app.
- Enhanced component interfaces to require a client prop where necessary, ensuring proper client context is passed across the dashboard.
- Adjusted authentication and layout flows to support explicit client instantiation and propagation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
05-30-dashboard_reduce_usethirdwebclient_hook_usage_2
branch
from
6d2fef0 to
a440621
Compare
graphite-app
bot
force-pushed
the
05-30-dashboard_reduce_usethirdwebclient_hook_usage_3
branch
from
759d325 to
b84db12
Compare
graphite-app
bot
deleted the
05-30-dashboard_reduce_usethirdwebclient_hook_usage_3
branch
PR-Codex overview
This PR primarily focuses on enhancing the integration of the
ThirdwebClientacross various components in the application, ensuring a consistent client usage and improving functionality related to blockchain interactions.Detailed summary
clientprop to multiple components forThirdwebClient.useThirdwebClientwith directclientprop usage.clientparameter.Summary by CodeRabbit