[TOOL-4651] Dashboard: Show error on invalid token distribution in ERC20 asset creation form #7260
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughThe changes introduce validation logic to prevent over-allocation of tokens in the airdrop and distribution process. The UI now displays an error message if the total allocation exceeds the total supply and disables the submit button accordingly. Additional UI improvements highlight invalid percentage values in the distribution chart legend. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TokenDistributionFieldset
participant TokenDistributionBarChart
User->>TokenDistributionFieldset: Enter distribution values
TokenDistributionFieldset->>TokenDistributionFieldset: Validate total allocations (airdrop, sale, owner)
alt Allocation exceeds total supply
TokenDistributionFieldset->>User: Display error message
TokenDistributionFieldset->>StepCard: Disable submit button
else Allocation valid
TokenDistributionFieldset->>StepCard: Enable submit button
end
TokenDistributionFieldset->>TokenDistributionBarChart: Pass validated percentages
TokenDistributionBarChart->>User: Render chart and highlight invalid percentages
Assessment against linked issues
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 (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ 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 #7260 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58681 58681
Branches 4167 4167
=======================================
Hits 32612 32612
Misses 25961 25961
Partials 108 108
🚀 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: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx (1)
86-109: Comprehensive validation logic with potential optimization opportunity.The validation function correctly checks for two scenarios:
- Total airdrop exceeding total supply
- Combined distribution exceeding total supply
The logic is sound and handles edge cases properly. However, consider optimizing the repeated form.watch() calls.
Consider caching the watched values to avoid multiple form.watch() calls:
function getDistributionError(form: TokenDistributionForm) { + const formValues = form.watch(); + const supply = Number(formValues.supply); + const totalAirdrop = formValues.airdropAddresses.reduce((sum, addr) => { return sum + SafeNumber(addr.quantity); }, 0); if (totalAirdrop > supply) { return "Total airdrop quantity exceeds total supply"; } + const saleSupplyPercentage = SafeNumber(formValues.saleAllocationPercentage); const saleSupply = (saleSupplyPercentage / 100) * supply; const ownerSupply = Math.max(supply - totalAirdrop - saleSupply, 0); const totalSumOfSupply = totalAirdrop + saleSupply + ownerSupply; if (totalSumOfSupply > supply) { return "Token distribution exceeds total supply"; } return undefined; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/src/@/components/blocks/distribution-chart.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/form.ts (1)
TokenDistributionForm(84-86)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/dashboard/src/@/components/blocks/distribution-chart.tsx (2)
13-13: Minor formatting improvement.The blank line addition improves code readability by separating the type declaration from the component function.
63-69: Excellent validation feedback implementation.The conditional styling correctly highlights invalid percentage values (< 0 or > 100) using the
text-destructive-textclass. This provides immediate visual feedback to users when segments have invalid percentages, which aligns well with the validation logic introduced in the token distribution component.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx (2)
18-18: Well-designed type extension for button control.The optional
disabledproperty is properly typed and allows external validation logic to control the submit button state. This design maintains backward compatibility while enabling new functionality.
60-60: Correct implementation of disabled button state.The
disabledattribute is properly applied from the props, ensuring the submit button reflects the validation state passed from the parent component.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx (5)
28-28: Good separation of validation logic.The validation is correctly extracted to a separate function and computed once per render, providing clean separation of concerns.
41-41: Proper button state management.The submit button is correctly disabled when a distribution error exists, preventing invalid submissions. The double negation (
!!) ensures a proper boolean value.
60-70: Clean error display implementation.The error message is conditionally displayed below the distribution chart, providing clear feedback to users when validation fails. The styling with
text-destructive-textmaintains consistency with the design system.
111-114: Robust utility function for safe number conversion.The
SafeNumberfunction properly handles invalid string inputs by defaulting to 0, preventing NaN-related issues in calculations.
130-130: Critical fix for negative percentage calculation.The
Math.max(..., 0)prevents the owner percentage from becoming negative when airdrop and sale percentages exceed 100%. This ensures the UI displays meaningful values and prevents rendering issues.
size-limit report 📦
|
Merge activity
|
…C20 asset creation form (#7260) <!-- ## 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 enhancing the `TokenDistributionFieldset` component by adding error handling for token distribution and improving the UI by displaying error messages. It also updates the `StepCard` and `DistributionBarChart` components to accommodate new features. ### Detailed summary - Added `disabled` prop to `StepCard`. - Integrated error handling in `TokenDistributionFieldset` for distribution validation. - Displayed error messages when distribution exceeds supply. - Improved `DistributionBarChart` to conditionally style text based on segment percentages. - Introduced `getDistributionError` and `SafeNumber` utility functions for validation logic. > ✨ 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 validation to ensure token distribution does not exceed total supply, with error messages displayed when limits are surpassed. - The "Next" submit button in the token creation flow can now be disabled based on validation errors. - **Bug Fixes** - Owner percentage in the distribution chart is now prevented from displaying negative values. - **Style** - Segment labels in the distribution chart legend are visually highlighted if their percentage is outside the 0–100% range. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-03-_tool-4651_dashboard_show_error_on_invalid_token_distribution_in_erc20_asset_creation_form
branch
from
31fbde3 to
810ec6e
Compare
graphite-app
bot
deleted the
06-03-_tool-4651_dashboard_show_error_on_invalid_token_distribution_in_erc20_asset_creation_form
branch
PR-Codex overview
This PR focuses on enhancing the
TokenDistributionFieldsetandTokenDistributionBarChartcomponents by adding error handling for token distribution and improving the UI for displaying distribution errors.Detailed summary
disabledprop to thenextButtoninStepCard.getDistributionErrorfunction to validate token distribution.TokenDistributionFieldsetif validation fails.ownerPercentagecalculation inTokenDistributionBarChartto ensure it does not go below zero.DistributionBarChartto conditionally apply classes based on segment percentage.Summary by CodeRabbit
New Features
Bug Fixes
Style