[TOOL-4667] Dashboard: Various improvements in ERC20 asset creation flow #7264
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" WalkthroughThis change refactors the ERC-20 creation wizard and related asset pages to replace all user-facing references of "Token" with "Coin." It also updates the multi-step status logic to use structured status objects with error messages, and adjusts supporting components and utilities accordingly. No changes to exported/public entity signatures except for one utility function. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CreateCoinWizard
participant MultiStepStatus
participant ErrorParser
User->>CreateCoinWizard: Initiate coin creation
CreateCoinWizard->>MultiStepStatus: Update step status ({ type: "pending" })
MultiStepStatus-->>CreateCoinWizard: Status update acknowledged
alt Error occurs
CreateCoinWizard->>ErrorParser: parseError(error)
ErrorParser-->>CreateCoinWizard: error message
CreateCoinWizard->>MultiStepStatus: Update status ({ type: "error", message })
end
MultiStepStatus-->>User: Display current step status and error message if any
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
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 (13)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (12)
⏰ 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 #7264 +/- ##
=======================================
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: 1
🧹 Nitpick comments (1)
apps/dashboard/src/components/contract-components/tables/contract-table.tsx (1)
295-297: Consider adding JSDoc for better maintainability.The mapping object correctly implements the DropERC20 → Coin transformation. Consider adding documentation to help future maintainers understand the purpose and expected format.
Apply this diff to add documentation:
+/** + * Maps contract types to their corresponding asset type display names + * Used when rendering contract tables in "asset" variant + */ const contractTypeToAssetTypeRecord: Record<string, string | undefined> = { DropERC20: "Coin", };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx(1 hunks)apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx(8 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx(3 hunks)apps/dashboard/src/components/contract-components/tables/cells.tsx(1 hunks)apps/dashboard/src/components/contract-components/tables/contract-table.tsx(3 hunks)apps/dashboard/src/utils/errorParser.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
apps/dashboard/src/components/contract-components/tables/contract-table.tsx (1)
apps/dashboard/src/components/contract-components/tables/cells.tsx (2)
ContractTypeCellUI(116-127)ContractTypeCell(59-114)
apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx (1)
packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
Spinner(11-34)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (2)
apps/dashboard/src/utils/errorParser.tsx (1)
parseError(29-69)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx (1)
StepCard(6-79)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (34)
apps/dashboard/src/components/contract-components/tables/cells.tsx (1)
116-127: LGTM! Well-structured UI component.The
ContractTypeCellUIcomponent effectively consolidates the badge rendering logic with consistent styling and appropriate fallback behavior.apps/dashboard/src/components/contract-components/tables/contract-table.tsx (2)
36-40: LGTM! Import statement correctly updated.The import statement properly includes the new
ContractTypeCellUIcomponent needed for the asset type mapping functionality.
193-207: Excellent implementation of asset type mapping.The conditional logic correctly implements the "Token" to "Coin" terminology change for asset tables while maintaining backward compatibility for contract tables. The logic properly validates all required conditions before applying the mapping.
apps/dashboard/src/utils/errorParser.tsx (1)
29-29: LGTM! Good refactor for code reusability.Exporting the
parseErrorfunction enables its reuse in other parts of the codebase, particularly in the launch token process for enhanced error handling. This follows good software engineering practices.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx (2)
35-36: LGTM! Consistent terminology update.The terminology change from "Token" to "Coin" aligns with the PR objectives and maintains consistency across the UI.
79-86: LGTM! Good defensive programming improvement.The logic now correctly guards the tracking and onClick execution to only occur when
onClickis actually defined, preventing unnecessary tracking events and potential runtime errors.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx (1)
339-339: LGTM! Consistent terminology update.The change from "Token Sale phase" to "Coin Sale phase" maintains consistency with the broader terminology update across the asset creation flow.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx (3)
92-92: LGTM! Consistent breadcrumb terminology update.The breadcrumb text change from "Create Token" to "Create Coin" maintains consistency with the overall terminology refactoring.
101-101: LGTM! Consistent page heading update.The page heading change from "Create Token" to "Create Coin" aligns with the UI terminology standardization.
104-104: LGTM! Consistent description update.The description change from "Launch an ERC-20 token" to "Launch an ERC-20 coin" completes the terminology consistency across the page elements.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx (1)
29-29: LGTM! Terminology update aligns with PR objectives.The change from "token" to "coin" in the user-facing description text is consistent with the broader terminology standardization effort across the ERC20 asset creation flow.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx (1)
104-104:✅ Verification successful
Verify TokenDistributionFieldset handles the new tokenSymbol prop correctly.
The addition of the
tokenSymbolprop enables dynamic terminology updates in the distribution step. This supports the "Token" to "Coin" terminology shift by allowing the component to use the actual symbol name.
🏁 Script executed:
#!/bin/bash # Description: Verify TokenDistributionFieldset component accepts and uses the tokenSymbol prop # Search for TokenDistributionFieldset component definition and prop usage ast-grep --pattern $'function TokenDistributionFieldset(props: { $$$ tokenSymbol: $_ $$$ }) { $$$ }' # Also search for any usage of tokenSymbol within the component rg -A 10 "tokenSymbol" apps/dashboard/src/app/\(app\)/team/\[team_slug\]/\[project_slug\]/\(sidebar\)/assets/create/distribution/Length of output: 12216
TokenDistributionFieldset handles tokenSymbol prop correctly
Verified that
TokenDistributionFieldset’s props includetokenSymbol: string | undefinedand that the component usesprops.tokenSymbol || "Tokens"to render the UI dynamically. No further changes needed.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx (3)
35-35: LGTM! Title updated to reflect new terminology.The StepCard title change from "Token Information" to "Coin Information" is consistent with the broader terminology standardization effort.
73-73: LGTM! Placeholder text updated appropriately.The name input placeholder change from "My Token" to "My Coin" maintains consistency with the new terminology while preserving the example format.
123-123: LGTM! Description placeholder updated consistently.The textarea placeholder change from "Describe your token" to "Describe your coin" completes the terminology update for this component.
apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx (2)
39-39: LGTM! Error status now supports descriptive messages.The error status object now includes a
messagefield, which enables better error communication to users. This is an improvement over the previous simple string status.
25-25:✅ Verification successful
Verify all MultiStepStatus usages match the new status structure.
The status structure has changed from simple strings to objects with a
typeproperty. This is a breaking change that improves the API by enabling structured status handling.Also applies to: 32-32, 46-46, 53-53
🏁 Script executed:
#!/bin/bash # Description: Find all usages of MultiStepStatus component to ensure they use the new status structure # Search for MultiStepStatus component usage rg -A 10 -B 5 "MultiStepStatus" --type tsx --type ts # Search for potential old status usage patterns (simple strings) rg -A 5 -B 5 'status:\s*["\'](?:completed|pending|error|idle)["\']' --type tsx --type ts # Search for the new status object pattern rg -A 5 -B 5 'status:\s*{\s*type:' --type tsx --type tsLength of output: 352
I've updated the search to cover all
.ts/.tsxfiles without relying on built-in file types and refined the regex. Running:
🏁 Script executed:
#!/bin/bash set -e # Search for MultiStepStatus component usage across .ts and .tsx rg -nH -C3 "MultiStepStatus" -g '*.ts*' # Search for old simple-string status usage rg -nH -C3 "status:\s*['\"](completed|pending|error|idle)['\"]" -g '*.ts*' # Search for new object-based status usage rg -nH -C3 "status:\s*{[^}]*type\s*:" -g '*.ts*'Length of output: 21420
No breaking changes in component usage detected—only Storybook stories use the new status shape
I verified that everywhere in the app codebase the
MultiStepStatuscomponent is only ever invoked with astepsarray (not a standalonestatusprop), so the new{ type: … }shape only affects Storybook stories and stubs.• The only direct
status:object usages are in
apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsxapps/dashboard/src/stories/stubs.ts• All real-world imports of
MultiStepStatus(e.g. inlaunch-token.tsx) consumesteps, so no runtime breakage will occur.No further changes are required.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx (4)
26-26: Good addition of dynamic token symbol prop.The optional
tokenSymbolprop enhances the component's flexibility by allowing dynamic display of the actual token symbol instead of generic text.
34-34: Consistent terminology update.The change from "Token Distribution" to "Coin Distribution" aligns with the broader terminology update across the application.
54-54: Proper fallback handling for token symbol.The implementation correctly uses the provided
tokenSymbolor falls back to "Tokens" when undefined, ensuring the UI always displays meaningful text.
111-111: Consistent chart title update.The change from "Token Allocation" to "Coin Allocation" maintains consistency with the overall terminology update.
apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx (4)
14-21: Excellent type safety improvement with discriminated union.The refactor from simple string status to a discriminated union is a significant improvement that:
- Provides better type safety
- Allows error messages to be strongly typed
- Enables more sophisticated error handling
This is a well-designed change that follows TypeScript best practices.
34-42: Proper status type checking updates.All status comparisons have been correctly updated to use the
.typeproperty, maintaining consistency with the new discriminated union structure.
46-53: Consistent styling logic updates.The text styling conditions have been properly updated to use the
.typeproperty, ensuring visual feedback remains accurate with the new status structure.
58-62: Improved error message display.The change to use
step.status.messagefor error display is an improvement over the previous separateretryLabelapproach, providing more contextual and specific error information.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (9)
19-23: Good import additions for enhanced functionality.The addition of
ArrowUpFromLineIconandparseErrorimport supports the UI updates and centralized error handling improvements.
28-28: Centralized error parsing import.Using the centralized
parseErrorutility promotes consistency in error handling across the application.
93-96: Proper status object format implementation.The status updates correctly use the new discriminated union format with
typeproperty for "pending" and "completed" states, aligning with the refactoredMultiStepStatetype.
109-109: Enhanced error handling with structured status.The error status now properly uses the discriminated union format with
parseErrorto provide consistent error messaging. This is a significant improvement in error handling quality.
123-149: Consistent initial status format.All initial step statuses correctly use the new object format with
type: "idle", ensuring consistency with the refactored type definition.
164-165: Proper completion and pending state checks.The completion and pending checks have been correctly updated to use
.typeproperty, maintaining functionality with the new status structure.
170-170: Consistent terminology update in step title.The change from "Launch Token" to "Launch Coin" maintains consistency with the application-wide terminology update.
186-187: Updated button styling and terminology.The icon change to
ArrowUpFromLineIconand text update to "Launch Coin" improve both visual appeal and terminology consistency.
260-260: Consistent link text update.The change from "View Token" to "View Coin" completes the terminology consistency throughout the launch flow.
apps/dashboard/src/components/contract-components/tables/cells.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
MananTank
force-pushed
the
06-03-_tool-4667_dashboard_various_improvements_in_erc20_asset_creation_flow
branch
from
ab2396d to
bd9ca69
Compare
Merge activity
|
…low (#7264) <!-- ## 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 renaming references from "Token" to "Coin" throughout the codebase, along with some improvements in error handling and component structure. ### Detailed summary - Renamed "Token" to "Coin" in various components and UI elements. - Updated the `parseError` function to be exported. - Introduced `ContractTypeCellUI` for better contract type rendering. - Modified multi-step status handling to include more structured error messages. > ✨ 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** - Enhanced multi-step status tracking with structured error messages and improved error display in step-based processes. - **Improvements** - Updated all user-facing terminology from "Token" to "Coin" across creation, distribution, and sale interfaces. - Distribution and allocation charts now reflect "Coin" terminology and dynamically display the coin symbol when available. - Improved contract table to show "Coin" for relevant contract types. - Refined event tracking to trigger only when relevant actions occur. - **Bug Fixes** - Error messages in step-based processes are now displayed more clearly with detailed information. - **Refactor** - Streamlined contract type badge rendering for consistency and maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-03-_tool-4667_dashboard_various_improvements_in_erc20_asset_creation_flow
branch
from
bd9ca69 to
1c6ed9b
Compare
graphite-app
bot
deleted the
06-03-_tool-4667_dashboard_various_improvements_in_erc20_asset_creation_flow
branch
PR-Codex overview
This PR focuses on renaming terms related to "Token" to "Coin" throughout the codebase for consistency and clarity. It also refines error handling and updates certain UI components.
Detailed summary
parseErrorfunction to be exported.ContractTypeCellUIcomponent for better contract type display.Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Refactor