[TOOL-4833] Add Manage Contract button in new public contract pages #7434
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThis change introduces a new "Manage Contract" user flow. It adds a special route for Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContractHeader
participant Router
participant ContractManagePage
participant API
participant ProjectSelector
User->>ContractHeader: Click "Manage Contract"
ContractHeader->>Router: Navigate to /team/~/~/contract/[chain]/[contractAddress]
Router->>ContractManagePage: Load page
ContractManagePage->>API: Fetch user, teams, contract import status
alt Contract imported in 1 project
ContractManagePage->>Router: Redirect to project/contract page
else Contract imported in >1 project
ContractManagePage->>ProjectSelector: Render project selection UI
User->>ProjectSelector: Select project
ProjectSelector->>Router: Redirect to selected project/contract page
else Contract imported in 0 projects
ContractManagePage->>ProjectSelector: Render import+select UI
User->>ProjectSelector: Select project to import
ProjectSelector->>API: Import contract to project
ProjectSelector->>Router: Redirect to selected project/contract page
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
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 (16)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (14)
⏰ Context from checks skipped due to timeout of 90000ms (2)
✨ 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 #7434 +/- ##
=======================================
Coverage 51.96% 51.96%
=======================================
Files 947 947
Lines 63809 63809
Branches 4216 4216
=======================================
Hits 33161 33161
Misses 30542 30542
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: 8
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/dashboard/src/@/api/getProjectContracts.ts(1 hunks)apps/dashboard/src/@/components/contracts/import-contract/modal.tsx(4 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx(3 hunks)apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx(2 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx(2 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/layout.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g., export function MyComponent()). Combine class names via 'cn', expose 'className' prop if useful. ...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsxapps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsxapps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/layout.tsxapps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsxapps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsxapps/dashboard/src/@/components/contracts/import-contract/modal.tsxapps/dashboard/src/@/api/getProjectContracts.tsapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
`**/components/*`: Add 'className' to the root element of every component for external overrides. Place the file close to its feature: 'feature/components/MyComponent.tsx'.
**/components/*: Add 'className' to the root element of every component for external overrides.
Place the file close to its feature: 'feature/components/MyComponent.tsx'.
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsxapps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsx
`**/components/*.stories.tsx`: Provide a Storybook story ('MyComponent.stories.tsx') or unit test alongside the component.
**/components/*.stories.tsx: Provide a Storybook story ('MyComponent.stories.tsx') or unit test alongside the component.
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsx
`**/components/@([A-Z][A-Za-z0-9]*)@(\.tsx|\.client\.tsx)`: Name files after the component in PascalCase; append '.client.tsx' when interactive.
**/components/@([A-Z][A-Za-z0-9]*)@(\.tsx|\.client\.tsx): Name files after the component in PascalCase; append '.client.tsx' when interactive.
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsxapps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsx
🧬 Code Graph Analysis (5)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx (1)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx (1)
TeamSelectorCard(16-69)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsx (1)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx (1)
TeamSelectorCard(16-69)
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx (2)
apps/dashboard/src/@/api/team.ts (1)
Team(11-11)apps/dashboard/src/@/api/getProjectContracts.ts (1)
PartialProject(47-52)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx (1)
apps/dashboard/src/@/api/team.ts (1)
Team(11-11)
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx (4)
apps/dashboard/src/@/api/team.ts (1)
Team(11-11)apps/dashboard/src/@/api/getProjectContracts.ts (1)
PartialProject(47-52)apps/dashboard/src/@/lib/DashboardRouter.tsx (1)
useDashboardRouter(22-45)apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx (1)
ProjectAndTeamSelectorCard(13-109)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (30)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsx (1)
1-84: Excellent Storybook implementation with comprehensive test coverage.The stories provide thorough coverage of different scenarios including varying team counts, URL parameters, and path combinations. The decorator and meta configuration are properly set up for Next.js app directory usage.
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx (2)
3-3: Clean import refactoring.The import cleanup properly removes unused dependencies and adds the new component imports.
Also applies to: 8-8
69-74: Proper component integration.The
TeamSelectorCardis correctly integrated with all required props passed appropriately.apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx (1)
24-68: Well-structured component implementation.The component properly uses existing UI primitives, follows design tokens, and implements good accessibility patterns with proper hover states and keyboard navigation through links.
apps/dashboard/src/@/api/getProjectContracts.ts (2)
47-52: LGTM! Well-defined type for partial project data.The
PartialProjecttype is appropriately structured with essential fields needed for project identification and display purposes.
54-85: LGTM! Solid API function implementation.The
getContractImportedProjectsfunction follows established patterns with proper error handling, typing, and server-only execution. The endpoint URL construction and response handling are consistent with the existing codebase.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx (1)
86-86: LGTM! Appropriate styling enhancement.The addition of
rounded-fullclassName enhances the button's visual appearance and aligns with modern UI design patterns.apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx (1)
26-28: LGTM! Consistent prop forwarding.The addition of
projectSlugandteamSlugprops to theDeployViaCLIOrImportCardcomponent ensures proper context propagation throughout the component hierarchy.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx (1)
36-38: LGTM! Proper context propagation.Adding
projectSlugandteamSlugprops to theImportModalcomponent ensures it has the necessary context for proper routing and URL construction.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/layout.tsx (1)
46-48: LGTM! Consistent slug parameter forwarding.The addition of
projectSlugandteamSlugprops derived from the URL parameters ensures theDeployedContractsPageHeadercomponent has proper contextual information for routing and display purposes.apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx (2)
13-14: LGTM: Props correctly added for slug support.The addition of
projectSlugandteamSlugprops aligns with the PR's objective to improve project/team context handling across components.
28-30: LGTM: Props correctly passed to ImportModal.The slug props are properly forwarded to the ImportModal component, maintaining consistency with the updated component interface.
apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx (2)
13-14: LGTM: Consistent prop additions.The
projectSlugandteamSlugprops are correctly added, maintaining consistency with other components in the PR.
28-30: LGTM: Props correctly forwarded.The slug props are properly passed to the ImportModal component, ensuring the updated interface requirements are met.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx (3)
1-1: LGTM: Import added for new Settings2Icon.The Settings2Icon import is correctly added to support the new "Manage Contract" button.
114-119: LGTM: Well-designed compact copy button.The CopyAddressButton is nicely styled as a compact, icon-only button that fits well in the top row layout. The styling ensures good visual balance.
150-172: LGTM: Excellent "Manage Contract" button implementation.The implementation includes several good practices:
- Clear tooltip explaining the button's purpose
- Appropriate icon and styling
- Correct URL pattern following the team/project routing convention
- Good accessibility with descriptive text
This successfully implements the core feature mentioned in the PR title.
apps/dashboard/src/@/components/contracts/import-contract/modal.tsx (4)
40-41: LGTM: Props correctly added to interface.The
projectSlugandteamSlugstring props are properly added to the ImportModalProps type, maintaining type safety.
74-76: LGTM: Props correctly forwarded to ImportForm.The slug props are properly passed from ImportModal to ImportForm, ensuring the complete data flow.
103-104: LGTM: ImportForm props updated consistently.The ImportForm function signature is correctly updated to include the new slug props.
225-225: LGTM: URL pattern updated for team/project context.The contract view URL is correctly updated to include team and project slugs, providing proper context navigation after contract import. This aligns with the PR's routing improvements.
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.stories.tsx (2)
27-37: LGTM: Well-designed helper function.The
createPartialProjecthelper function correctly converts full project stubs to thePartialProjecttype, ensuring type safety and consistency with the API interface.
39-133: LGTM: Comprehensive story coverage.The stories provide excellent test coverage with varied scenarios:
- Single team with multiple projects
- Multiple teams with balanced projects
- Edge case with empty projects
- Performance testing with large datasets
This supports thorough visual testing and development of the project selector component.
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx (2)
22-26: Logic correctly filters teams and determines header visibility.The filtering logic properly removes teams without projects, and the conditional header display logic is sound for UX clarity.
71-101: Excellent scrollable container implementation with proper boundaries.The scrollable container with max-height and border styling between projects provides a good user experience for long project lists.
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx (3)
30-34: Good parallel data fetching pattern.Using Promise.all for concurrent data fetching is an excellent performance optimization that reduces total loading time.
52-66: Robust error handling in Promise.all with graceful degradation.The
.catch(() => [])pattern for handling individual team project fetching failures is excellent - it prevents one team's API failure from breaking the entire flow.
83-87: Safe array access with proper conditional check.The check for
projectImports.length === 1 && projectImports[0]properly handles both array length and undefined access, preventing runtime errors.apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx (2)
10-38: SelectProjectForContract component implements clean navigation flow.The component correctly handles the selection flow with clear description and direct navigation to the selected project's contract page.
65-65: ```shell
#!/bin/bashInspect the
useAddContractToProjecthook implementation for parameter typesrg --color=never -n 'export function useAddContractToProject' -A20 apps/dashboard/src/@/hooks/project-contracts.ts
rg --color=never -n 'mutate' -A20 apps/dashboard/src/@/hooks/project-contracts.ts</details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/components/TeamAndProjectSelectorCard.tsx
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx
Outdated
Show resolved
Hide resolved
...rd/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx
Outdated
Show resolved
Hide resolved
MananTank
force-pushed
the
06-25-_tool-4833_add_manage_contract_button_in_new_public_contract_pages
branch
from
7af3355 to
a880f77
Compare
MananTank
force-pushed
the
06-25-_tool-4833_add_manage_contract_button_in_new_public_contract_pages
branch
from
a880f77 to
a157d3a
Compare
Merge activity
|
…7434) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing the handling of `projectSlug` and `teamSlug` properties across various components in the application, improving navigation and data management related to teams and projects. ### Detailed summary - Added `projectSlug` and `teamSlug` props in several components including `cards.tsx`, `DeployedContractsPage.tsx`, and `layout.tsx`. - Updated links to include `teamSlug` and `projectSlug` for better navigation. - Introduced new API function `getContractImportedProjects` to fetch projects with imported contracts. - Created `TeamSelectorCard` and `ProjectAndTeamSelectorCard` components for selecting teams and projects. - Improved UI elements such as buttons and tooltips in `ContractHeaderUI` and `ImportModal`. - Enhanced type definitions for better type safety and clarity in components. > ✨ 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** - Introduced a team and project selector UI, enabling users to easily select teams or projects from visual cards. - Added a project and team selector for associating contracts, allowing users to view, select, or import contracts into projects across teams. - Enhanced contract management by providing direct navigation to contract pages based on project selection. - Improved contract view links to include team and project information in URLs for clearer navigation. - Added functionality to fetch projects that have imported specific contracts within teams. - **UI Improvements** - Updated button styles with rounded edges for a polished look. - Added copy address and manage contract buttons with icons and tooltips for enhanced usability. - **Storybook/Documentation** - Added Storybook stories to visually test and demonstrate the new team and project selector components under various scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-25-_tool-4833_add_manage_contract_button_in_new_public_contract_pages
branch
from
a157d3a to
3c6668b
Compare
graphite-app
bot
deleted the
06-25-_tool-4833_add_manage_contract_button_in_new_public_contract_pages
branch
PR-Codex overview
This PR primarily focuses on adding
projectSlugandteamSlugproperties to various components, enhancing the functionality related to project and team management within the application.Detailed summary
projectSlugandteamSlugprops in multiple components, including:cards.tsxDeployedContractsPage.tsxlayout.tsxDeployViaCLIOrImportCard.tsxmodal.tsxImportForm.tsxContractHeader.tsxTeamSelectorCard.tsxProjectAndTeamSelectorCard.tsxteamSlugandprojectSlugin URLs for better navigation.getContractImportedProjectsto fetch projects associated with a specific contract.TeamSelectorCardandProjectAndTeamSelectorCard.Summary by CodeRabbit
New Features
UI Improvements
Storybook/Documentation