[TOOL-4686] Dashboard: Add supply remaining progress in asset page claim tokens card #7283
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughA new UI component, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ClaimTokenCardUI
participant SupplyRemaining
User->>ClaimTokenCardUI: View claim token UI
ClaimTokenCardUI->>SupplyRemaining: Pass supplyClaimed, maxClaimableSupply, decimals
SupplyRemaining-->>ClaimTokenCardUI: Render supply progress (bar, percentage, numbers)
ClaimTokenCardUI-->>User: Display updated UI with supply progress
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes detected. 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 (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 (
|
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 #7283 +/- ##
=======================================
Coverage 55.58% 55.58%
=======================================
Files 909 909
Lines 58670 58670
Branches 4158 4158
=======================================
Hits 32609 32609
Misses 25954 25954
Partials 107 107
🚀 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
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (1)
45-48: Consider extracting formatter to a utility moduleThe compact number formatter is well-configured but could be moved to a shared utility module for reusability across the application.
-const compactNumberFormatter = new Intl.NumberFormat("en-US", { - notation: "compact", - maximumFractionDigits: 10, -});Consider moving this to a utility file like
utils/formatters.ts:// utils/formatters.ts export const compactNumberFormatter = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 10, });
📜 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]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx(7 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
toTokens(190-190)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (5)
6-6: LGTM: Progress component importThe Progress import is correctly added to support the new supply remaining progress bar.
35-35: LGTM: maxUint256 importThe maxUint256 import is properly added to check for unlimited supply scenarios.
313-315: LGTM: UI styling improvementThe change from bold to semibold with tighter tracking improves the visual hierarchy.
335-341: LGTM: Component integrationThe SupplyRemaining component is well-positioned in the UI flow between token input and pricing details.
526-526: LGTM: Token symbol styling adjustmentThe font-weight adjustment improves visual consistency with the overall design.
...[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
MananTank
changed the title
MananTank
changed the title
MananTank
force-pushed
the
06-05-dashboard_add_supply_remaining_progress_in_asset_page_claim_tokens_card
branch
from
91b4cac to
f12be98
Compare
Merge activity
|
…aim tokens card (#7283) <!-- ## 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 enhances the `ClaimTokenCardUI` component by adding a new `SupplyRemaining` feature, which displays the supply of tokens claimed and remaining. It also improves the UI with a progress bar and formatting adjustments. ### Detailed summary - Added `Progress` component for visual representation of supply sold. - Introduced `SupplyRemaining` function to show claimed and remaining supply. - Formatted supply numbers using `compactNumberFormatter`. - Updated headings and styling for better UI consistency. > ✨ 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 a visual display showing claimed versus total claimable token supply, including a progress bar and percentage sold. - **Style** - Improved typography and spacing for headings and token symbol labels for better visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-05-dashboard_add_supply_remaining_progress_in_asset_page_claim_tokens_card
branch
from
f12be98 to
05f65ec
Compare
graphite-app
bot
deleted the
06-05-dashboard_add_supply_remaining_progress_in_asset_page_claim_tokens_card
branch
PR-Codex overview
This PR enhances the
ClaimTokenCardUIcomponent by adding a newSupplyRemainingcomponent to display the supply status of tokens, including the claimed and remaining amounts. It also improves UI elements and formatting for better readability.Detailed summary
Progresscomponent for visual representation of supply sold.SupplyRemainingcomponent to show claimed and remaining token supply.h2class for better typography.InfinityIconfor unlimited supply indication.Summary by CodeRabbit