[Dashboard] replace chakra stats in accounts #7188
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
|
""" WalkthroughThe Changes
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7188 +/- ##
=======================================
Coverage 55.67% 55.67%
=======================================
Files 904 904
Lines 58391 58391
Branches 4119 4119
=======================================
Hits 32510 32510
Misses 25776 25776
Partials 105 105
🚀 New features to boost your workflow:
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx (2)
16-20: Well-implemented StatCard usage with proper data handling.The StatCard props are correctly implemented:
- Safe navigation with fallback:
totalAccountsQuery.data?.toString() || "0"- Proper loading state passing:
isPending={totalAccountsQuery.isPending}- Clear, descriptive label:
"Total Accounts"This demonstrates good defensive programming practices.
6-6:✅ Verification successful
Verify the StatCard import path and component API.
Ensure that the
StatCardcomponent exists at the specified path and accepts the expected props (label,value,isPending).
🏁 Script executed:
#!/bin/bash # Verify StatCard component exists and check its prop types fd -t f "stat-card" --exec cat {} \; | head -20Length of output: 559
🏁 Script executed:
#!/bin/bash # Locate the StatCard export and show its full signature for prop verification rg -n --max-count 1 "export function StatCard" -C5Length of output: 1472
StatCard Import and API Verified
The
StatCardcomponent is correctly located atapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsxand exports the expected signature:export function StatCard({ label, value, isPending, }: { label: string; value: string; isPending: boolean }) { … }The import path and prop types (
label,value,isPending) match the usage inaccounts-count.tsx. No changes required.
...app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx
Show resolved
Hide resolved
size-limit report 📦
|
Merge activity
|
## Summary
- swap chakra `SimpleGrid`, `Stat`, `Skeleton` for shadcn `StatCard`
- use Tailwind grid utility classes
## Checklist
- [x] `pnpm biome check --apply`
- [x] `pnpm test` *(fails: spawn anvil ENOENT)*
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on refactoring the `AccountsCount` component to replace the `Card` and `SimpleGrid` components from `@chakra-ui/react` with a new layout using `StatCard` from a different module, enhancing the presentation of the total accounts data.
### Detailed summary
- Removed imports for `SimpleGrid`, `Skeleton`, `Stat`, `StatLabel`, and `StatNumber`.
- Added import for `StatCard` from `../../overview/components/stat-card`.
- Changed the layout from `SimpleGrid` and `Card` to a `div` with a grid layout.
- Updated the rendering to use `StatCard` for displaying the total accounts.
> ✨ 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 the accounts count display to use a new StatCard component with improved layout and styling for a more consistent and responsive user interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
from
0db66ad to
e8a25d7
Compare
graphite-app
bot
deleted the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
Summary
SimpleGrid,Stat,Skeletonfor shadcnStatCardChecklist
pnpm biome check --applypnpm test(fails: spawn anvil ENOENT)PR-Codex overview
This PR updates the
AccountsCountcomponent in theaccounts-count.tsxfile. It replaces theCardandSimpleGridcomponents from Chakra UI with a customStatCardcomponent and a standarddivfor layout, enhancing the way account statistics are displayed.Detailed summary
SimpleGrid,Skeleton,Stat,StatLabel, andStatNumberfrom@chakra-ui/react.CardwithStatCardfrom a local component.SimpleGridto adivwith Tailwind CSS classes.StatCard, includinglabel,value, andisPending.Summary by CodeRabbit