[TOOL-4959] Dashboard: Asset page UI improvements #7599
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughThis update restructures the ERC20 token asset page, introducing token price data fetching and conditional display of the price chart. The metadata header is visually enhanced and repositioned, the buy card is placed beside the header, and the layout is adjusted for improved hierarchy and responsiveness. Supporting components and styling are updated accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant Page as ERC20PublicPage
participant API as Token Price API
participant TokenStats as TokenStats
participant Chart as ContractAnalyticsOverview
participant Recent as RecentTransfers
Page->>API: getTokenPriceData(chainId, contractAddress)
API-->>Page: tokenPriceData (or undefined)
Page->>Page: Render PageHeader, ContractHeaderUI, BuyCard, GridPattern
alt tokenPriceData available
Page->>TokenStats: Render with tokenPriceData
Page->>Chart: Render analytics overview
else tokenPriceData not available
Page->>Chart: Render analytics overview only
end
Page->>Recent: Render recent transfers
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
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 (2)
🚧 Files skipped from review as they are similar to previous changes (13)
⏰ 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
🪧 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 #7599 +/- ##
=======================================
Coverage 56.45% 56.45%
=======================================
Files 906 906
Lines 58115 58115
Branches 4226 4226
=======================================
Hits 32810 32810
Misses 25195 25195
Partials 110 110
🚀 New features to boost your workflow:
|
size-limit report 📦
|
graphite-app
bot
changed the base branch from
07-11-dashboard_fix_erc20_asset_page_crash_when_number_of_tokens_claimed_is_a_fraction
to
graphite-base/7599
jnsdls
approved these changes
Jul 11, 2025
.../src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
Outdated
Show resolved
Hide resolved
graphite-app
bot
force-pushed
the
graphite-base/7599
branch
from
c863047 to
8973174
Compare
graphite-app
bot
force-pushed
the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
from
9f747e3 to
ccb8716
Compare
graphite-app
bot
force-pushed
the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
from
ccb8716 to
c76c372
Compare
MananTank
added a commit
that referenced
this pull request
Jul 11, 2025
<!--
## 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 refining the UI components and enhancing the functionality of the `ERC20` public page. It includes improvements in layout, styling, and the introduction of new features related to token price data and analytics.
### Detailed summary
- Deleted unused files: `useTokenPriceData.ts` and `ContractCreatorBadge.tsx`.
- Updated `PageHeader` to change border style.
- Added `tooltip` prop in `CopyAddressButton`.
- Changed API key usage in `fetchTokenInfoFromBridge`.
- Enhanced `ThirdwebAreaChart` with better props handling.
- Introduced `GridPattern` component for background.
- Improved `RecentTransfers` UI and pagination buttons.
- Updated `PriceChart` and `TokenStats` to directly use passed props for token price data.
- Refactored `ContractHeaderUI` to improve layout and social link handling.
> ✨ 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 customizable grid background pattern component for enhanced visual design.
* Added support for displaying token price data and analytics on ERC20 public pages, including conditional rendering of token statistics.
* Enabled tooltip customization for the copy address button.
* **Bug Fixes**
* The contract creator badge icon is now visible, and spacing between elements has been improved.
* **Refactor**
* Simplified and unified chart headers and analytics section layouts.
* Streamlined fetching and handling of token price data with a new asynchronous function and removed the previous hook.
* Improved layout and container styling across ERC20 and NFT public pages, including card backgrounds, borders, and spacing.
* Adjusted component structures for better visual separation and consistency.
* Removed the contract creator badge component and replaced it with a simpler contract owner link.
* **Style**
* Updated card and header styles for better visual hierarchy and clarity.
* Enhanced recent transfers and contract header sections with improved padding, borders, and rounded corners.
* Removed small shadow effects from cards and refined header background and border styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
from
1fa2e96 to
9821b1e
Compare
MananTank
added a commit
that referenced
this pull request
Jul 12, 2025
<!--
## 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 refining the UI components and enhancing the functionality of the `ERC20` public page. It includes improvements in layout, styling, and the introduction of new features related to token price data and analytics.
### Detailed summary
- Deleted unused files: `useTokenPriceData.ts` and `ContractCreatorBadge.tsx`.
- Updated `PageHeader` to change border style.
- Added `tooltip` prop in `CopyAddressButton`.
- Changed API key usage in `fetchTokenInfoFromBridge`.
- Enhanced `ThirdwebAreaChart` with better props handling.
- Introduced `GridPattern` component for background.
- Improved `RecentTransfers` UI and pagination buttons.
- Updated `PriceChart` and `TokenStats` to directly use passed props for token price data.
- Refactored `ContractHeaderUI` to improve layout and social link handling.
> ✨ 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 customizable grid background pattern component for enhanced visual design.
* Added support for displaying token price data and analytics on ERC20 public pages, including conditional rendering of token statistics.
* Enabled tooltip customization for the copy address button.
* **Bug Fixes**
* The contract creator badge icon is now visible, and spacing between elements has been improved.
* **Refactor**
* Simplified and unified chart headers and analytics section layouts.
* Streamlined fetching and handling of token price data with a new asynchronous function and removed the previous hook.
* Improved layout and container styling across ERC20 and NFT public pages, including card backgrounds, borders, and spacing.
* Adjusted component structures for better visual separation and consistency.
* Removed the contract creator badge component and replaced it with a simpler contract owner link.
* **Style**
* Updated card and header styles for better visual hierarchy and clarity.
* Enhanced recent transfers and contract header sections with improved padding, borders, and rounded corners.
* Removed small shadow effects from cards and refined header background and border styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
from
9821b1e to
6bf5dfb
Compare
<!--
## 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 refining the UI components and enhancing the functionality of the `ERC20` public page. It includes improvements in layout, styling, and the introduction of new features related to token price data and analytics.
### Detailed summary
- Deleted unused files: `useTokenPriceData.ts` and `ContractCreatorBadge.tsx`.
- Updated `PageHeader` to change border style.
- Added `tooltip` prop in `CopyAddressButton`.
- Changed API key usage in `fetchTokenInfoFromBridge`.
- Enhanced `ThirdwebAreaChart` with better props handling.
- Introduced `GridPattern` component for background.
- Improved `RecentTransfers` UI and pagination buttons.
- Updated `PriceChart` and `TokenStats` to directly use passed props for token price data.
- Refactored `ContractHeaderUI` to improve layout and social link handling.
> ✨ 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 customizable grid background pattern component for enhanced visual design.
* Added support for displaying token price data and analytics on ERC20 public pages, including conditional rendering of token statistics.
* Enabled tooltip customization for the copy address button.
* **Bug Fixes**
* The contract creator badge icon is now visible, and spacing between elements has been improved.
* **Refactor**
* Simplified and unified chart headers and analytics section layouts.
* Streamlined fetching and handling of token price data with a new asynchronous function and removed the previous hook.
* Improved layout and container styling across ERC20 and NFT public pages, including card backgrounds, borders, and spacing.
* Adjusted component structures for better visual separation and consistency.
* Removed the contract creator badge component and replaced it with a simpler contract owner link.
* **Style**
* Updated card and header styles for better visual hierarchy and clarity.
* Enhanced recent transfers and contract header sections with improved padding, borders, and rounded corners.
* Removed small shadow effects from cards and refined header background and border styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
from
6bf5dfb to
cdc7d95
Compare
graphite-app
bot
deleted the
07-12-_tool-4959_dashboard_asset_page_ui_improvements
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR primarily focuses on enhancing the
ERC20public page and its components by improving layout, adding token price data fetching, and refining UI elements for better usability and aesthetics.Detailed summary
useTokenPriceData.tsandContractCreatorBadge.tsx.PageHeaderto change border style.tooltipprop inCopyAddressButton.fetchTokenInfoFromBridgeto useDASHBOARD_THIRDWEB_SECRET_KEY.getTokenPriceDatafor fetching token price data.ERC20PublicPageto include token price data.ContractHeaderUIlayout and added social links.TokenStatsto use fetched token price data instead of local state.RecentTransfersandPriceChartUI.Summary by CodeRabbit
New Features
Refactor
Style