-
Notifications
You must be signed in to change notification settings - Fork 567
Dashboard: Migrate Published Contract page from chakra to tailwind, UI improvements #7728
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dashboard: Migrate Published Contract page from chakra to tailwind, UI improvements #7728
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThis update refactors several dashboard components to replace Chakra UI elements with Tailwind CSS utility classes, restructures layouts for published contract pages, and updates styling for markdown-rendered content. It also removes a share link utility, simplifies button actions, and introduces improved breadcrumb and image fallback components, with no changes to core logic or control flow. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PublishedContractPage
participant PublishedContractBreadcrumbs
participant DeployContractHeader
participant PublishedActions
participant PublishedContract
User->>PublishedContractPage: Load contract page
PublishedContractPage->>PublishedContractBreadcrumbs: Render breadcrumbs
PublishedContractPage->>DeployContractHeader: Render header with actions
DeployContractHeader->>PublishedActions: Render deploy button
PublishedContractPage->>PublishedContract: Render contract details
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes 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 (15)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (11)
⏰ 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)
✨ 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 (
|
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. |
9294255
to
df1828e
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7728 +/- ##
=======================================
Coverage 56.18% 56.18%
=======================================
Files 908 908
Lines 58236 58236
Branches 4200 4200
=======================================
Hits 32718 32718
Misses 25410 25410
Partials 108 108
🚀 New features to boost your workflow:
|
size-limit report 📦
|
Merge activity
|
…I improvements (#7728) <!-- ## 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 improving the UI components and structure of the published contract pages in the dashboard. It enhances layouts, updates component props, and modifies styles for better user experience and consistency. ### Detailed summary - Updated `version-selector` styles. - Modified `PublishedContractBreadcrumbs` to accept `className` prop. - Simplified `PublishedContractLayout` by returning only `props.children`. - Refactored `DeployFormForUri` to remove `ChakraProviderSetup`. - Enhanced `ExplorePage` layout and styles. - Changed icons in `PublishedActions` and updated button structure. - Improved `DeployContractInfo` layout and styles. - Updated `MarkdownRenderer` styles for better spacing and alignment. - Refactored `PublishedContract` to use `className` prop for styling. - Added `PublishedContractBreadcrumbs` to multiple pages for better navigation. - Improved `PublisherHeader` layout and styling. - Removed unused imports and cleaned up code. > ✨ 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** * Added breadcrumb navigation to published contract and deploy pages for improved navigation clarity. * **Refactor** * Replaced Chakra UI components with Tailwind CSS for more consistent styling and layout across published contract pages. * Simplified and reorganized contract detail and publisher header layouts for better readability and usability. * Updated contract info display to use an enhanced image component with fallback support. * **Style** * Adjusted spacing, borders, and typography for headings, lists, and paragraphs in Markdown rendering. * Refined button and icon styles for contract actions and links. * Improved overall page structure and container consistency. * **Bug Fixes** * Enhanced fallback behavior for contract images when unavailable. * **Chores** * Removed unused sharing utility and related "Share" button from contract actions. * Cleaned up unused Chakra UI imports and wrappers. * **Documentation** * No user-facing documentation changes included. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
df1828e
to
c7fab9f
Compare
PR-Codex overview
This PR focuses on improving the UI components and structure of the published contract pages in the dashboard. It includes style adjustments, component refactoring, and the introduction of props for better customization.
Detailed summary
version-selector.tsx
to change width styling.PublishedContractBreadcrumbs
to acceptclassName
prop.PublishedContractLayout
to directly return children.DeployFormForUri
by removing unnecessary wrappers.ExplorePage
layout for improved spacing and structure.PublishedActions
to useArrowUpRightIcon
and improved button structure.DeployContractInfo
for better image handling and layout.MarkdownRenderer
styles for better readability.PublishedContract
component layout and styling.PublishedContractBreadcrumbs
to multiple pages for consistent navigation.PublisherHeader
styles for improved visual hierarchy.Summary by CodeRabbit
New Features
Refactor
Style
Bug Fixes
Chores