Dashboard: Migrate contract/accounts page from chakra to tailwind #7739
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe Accounts section of the dashboard was refactored to replace Chakra UI components and styles with Tailwind CSS and custom UI elements. The Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 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 (
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7739 +/- ##
=======================================
Coverage 56.42% 56.42%
=======================================
Files 904 904
Lines 58665 58665
Branches 4135 4135
=======================================
Hits 33100 33100
Misses 25460 25460
Partials 105 105
🚀 New features to boost your workflow:
|
size-limit report 📦
|
graphite-app
bot
force-pushed
the
07-29-dashboard_migrate_contract_accounts_page_from_chakra_to_tailwind
branch
from
566daaf to
ec03247
Compare
MananTank
force-pushed
the
07-29-dashboard_migrate_contract_accounts_page_from_chakra_to_tailwind
branch
from
ec03247 to
c8b58f6
Compare
MananTank
force-pushed
the
07-29-dashboard_migrate_contract_accounts_page_from_chakra_to_tailwind
branch
from
c8b58f6 to
f119804
Compare
Merge activity
|
) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring components in the `accounts` section of the dashboard, enhancing code structure and UI elements while removing deprecated features. ### Detailed summary - Deleted the `accounts-count.tsx` file. - Removed `Legacy_CopyButton` and its usage. - Updated `AccountsPage` to use `UnderlineLink` and improved layout. - Refactored `CreateAccountButton` to streamline props handling. - Replaced `TWTable` with custom table components in `AccountsTable`. - Added pagination functionality and improved loading states. > ✨ 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** * Simplified the Accounts page layout and styling by switching from Chakra UI to Tailwind CSS. * Streamlined the AccountsTable with a new table design, fixed page size, and updated pagination controls. * Updated Create Account button with unified styling, improved labeling, and a new icon. * Removed the accounts count display from the page. * Updated external documentation link and link styling for clarity. * Removed legacy copy button component and related clipboard functionality. * **Style** * Improved visual consistency with updated button and table styles. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
07-29-dashboard_migrate_contract_accounts_page_from_chakra_to_tailwind
branch
from
f119804 to
5e883ac
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx (4)
25-25: Consider making page size configurable.The hardcoded page size of 10 removes flexibility. While this simplifies the implementation, consider whether users might benefit from different page sizes or if this should be a configurable constant.
- const pageSize = 10; + const PAGE_SIZE = 10; // or make this configurable via props
32-32: Add explicit return type annotation.Following TypeScript best practices, add an explicit return type for better type safety and documentation.
- export function AccountsTable({ contract, projectMeta }: AccountsTableProps) { + export function AccountsTable({ contract, projectMeta }: AccountsTableProps): JSX.Element {
106-113: Remove redundant z-index styling.The
z-10 relativeclasses on the CopyTextButton are unnecessary complexity when using the linkBox pattern and may not work as intended with the current structure.<CopyTextButton textToShow={account} textToCopy={account} variant="ghost" tooltip="Copy account address" copyIconPosition="right" - className="z-10 relative" />
144-152: Consider making skeleton width responsive.The hardcoded skeleton width
w-[364px]may not work well on all screen sizes. Consider using a responsive approach.function SkeletonRow() { return ( <TableRow> <TableCell className="py-6"> - <Skeleton className="h-6 w-[364px]" /> + <Skeleton className="h-6 w-full max-w-[364px]" /> </TableCell> </TableRow> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/AccountsPage.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx(0 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx(3 hunks)apps/dashboard/src/chakra/button.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/dashboard/src/chakra/button.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/AccountsPage.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use Tailwind CSS only – no inline styles or CSS modules
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Never hard-code colors – always go through Tailwind variables.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx (15)
Learnt from: jnsdls
PR: #7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (useState, useEffect, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: Button, Input, Select, Tabs, Card, Sidebar, Separator, Badge.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use NavLink (@/components/ui/NavLink) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Merge class names with cn from @/lib/utils to keep conditional logic readable.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on AnnouncementBanner, GenericLoadingPage, EmptyStateCard.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from @tanstack/react-query or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (layout.tsx) and top-level pages that mainly assemble data.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (@tanstack/react-query) for all client data fetching.
Learnt from: MananTank
PR: #7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The projectMeta prop is not required for the server-rendered ContractTokensPage component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx (3)
3-20: LGTM! Clean migration to new UI components.The import structure follows the coding guidelines correctly, importing UI primitives from
@/components/ui/*and using the new Table components. The migration from Chakra UI to custom components aligns with the project's direction.
124-128: LGTM! Good empty state handling.The empty state is well-implemented with appropriate styling using design tokens (
text-muted-foreground) and proper spacing. The conditional rendering logic is correct.
131-139: LGTM! Clean pagination implementation.The pagination logic is well-structured with proper conditional rendering and uses the centralized
PaginationButtonscomponent. The page conversion logic (0-based to 1-based) is handled correctly.
| <TableRow linkBox key={account} className="hover:bg-muted/50"> | ||
| <TableCell className="py-6"> | ||
| <Link | ||
| href={accountContractPagePath} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="before:absolute before:inset-0" | ||
| aria-label="View account" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Review accessibility and UX of the linkBox pattern.
The current implementation uses a before:absolute before:inset-0 pseudo-element to make the entire row clickable, but this can create accessibility issues. The linkBox className and pseudo-element approach may interfere with screen readers and keyboard navigation.
Consider using a more accessible approach:
- <TableRow linkBox key={account} className="hover:bg-muted/50">
- <TableCell className="py-6">
- <Link
- href={accountContractPagePath}
- target="_blank"
- rel="noopener noreferrer"
- className="before:absolute before:inset-0"
- aria-label="View account"
- />
+ <TableRow key={account} className="hover:bg-muted/50">
+ <TableCell className="py-6">
+ <div className="flex items-center justify-between gap-2">
+ <Link
+ href={accountContractPagePath}
+ target="_blank"
+ rel="noopener noreferrer"
+ aria-label={`View account ${account}`}
+ className="flex-1 min-w-0"
+ >
+ <CopyTextButton
+ textToShow={account}
+ textToCopy={account}
+ variant="ghost"
+ tooltip="Copy account address"
+ copyIconPosition="right"
+ />
+ </Link>
+ <ArrowUpRightIcon className="size-4 text-muted-foreground flex-shrink-0" />
+ </div>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx
around lines 95 to 103, the current use of the linkBox pattern with a
before:absolute before:inset-0 pseudo-element to make the entire TableRow
clickable can cause accessibility issues for screen readers and keyboard users.
To fix this, remove the pseudo-element approach and instead wrap the entire
content of the TableRow in a semantic interactive element like a Link or button,
ensuring proper focus management and keyboard navigation support. Also, avoid
using empty Link components and ensure all interactive elements have accessible
labels and roles.
PR-Codex overview
This PR focuses on refactoring and updating components within the accounts section of a dashboard application, enhancing the UI and functionality, and removing deprecated elements.
Detailed summary
accounts-count.tsxandLegacy_CopyButtonfromchakra/button.LinkButtonwith a new structure inAccountsPage.CreateAccountButtonto use new imports and props.AccountsTableto improve pagination and UI elements.SkeletonRowfor loading states in tables.Summary by CodeRabbit
Refactor
Style