[TOOL-4531] Dashboard: Add Token Asset creation wizard #7081
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 ↗︎
|
|
Member
Author
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 #7081 +/- ##
=======================================
Coverage 55.61% 55.61%
=======================================
Files 902 902
Lines 58177 58177
Branches 4085 4085
=======================================
Hits 32356 32356
Misses 25716 25716
Partials 105 105
🚀 New features to boost your workflow:
|
Contributor
size-limit report 📦
|
MananTank
force-pushed
the
05-20-_tool-4531_dashboard_add_token_asset_creation_wizard
branch
from
7f8c64d to
c37589e
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/form.ts
Show resolved
Hide resolved
MananTank
force-pushed
the
05-20-_tool-4531_dashboard_add_token_asset_creation_wizard
branch
from
c37589e to
dbe4965
Compare
...ard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx (3)
83-85: Add form validation before proceeding to next stepCurrently, the code transitions to the next step without validating that the current form is valid. This could lead to incomplete or invalid data being used later in the flow.
onNext={() => { + // Validate form before proceeding + tokenInfoForm.trigger().then((isValid) => { + if (isValid) { setStep("distribution"); + } + }); }}
97-99: Add form validation before proceeding to launch stepSimilar to the previous step transition, there's no validation before moving to the launch step.
onNext={() => { + // Validate form before proceeding + tokenDistributionForm.trigger().then((isValid) => { + if (isValid) { setStep("launch"); + } + }); }}
111-114: Validate combined form data before passing to LaunchTokenStatusWhen combining form data for the launch step, no validation is performed to ensure the complete dataset is valid.
{step === "launch" && ( <LaunchTokenStatus client={props.client} onLaunchSuccess={props.onLaunchSuccess} onPrevious={() => { setStep("distribution"); }} createTokenFunctions={props.createTokenFunctions} + // Ensure both forms are valid before proceeding + isValid={tokenInfoForm.formState.isValid && tokenDistributionForm.formState.isValid} + form={{ + tokenInfoForm, + tokenDistributionForm, + }} values={{ ...tokenInfoForm.getValues(), ...tokenDistributionForm.getValues(), }} /> )}Then in LaunchTokenStatus component, add validation before beginning the launch sequence.
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx (2)
3-6: Remove unused empty importsThere are several empty imports that don't bring any symbols into scope:
-import {} from "@/components/blocks/multi-step-status/multi-step-status"; -import {} from "@/components/ui/dialog"; -import {} from "lucide-react"; +// Remove unused importsThese should either be removed entirely or replaced with actual imports if the components are needed elsewhere in the file.
40-60: Consider adding field labels and more descriptive initial valuesThe initial form values are mostly empty strings, which doesn't provide guidance to users about expected formats. Consider adding either:
- More descriptive placeholder values that show format examples
- Default values that make sense for common use cases
- Tooltip descriptions for each field
This would improve the user experience by making it clearer what information should be entered in each field.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (36)
apps/dashboard/src/@/actions/revalidate.ts(1 hunks)apps/dashboard/src/@/components/blocks/distribution-chart.tsx(1 hunks)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(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/getProjectContracts.ts(1 hunks)apps/dashboard/src/app/(app)/account/contracts/_components/getSortedDeployedContracts.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/cards.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-card.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-airdrop.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-distribution.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-sale.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/form.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/launch/launch-token.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/token-info-fieldset.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/tracking.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/hooks/project-contracts.ts(1 hunks)apps/dashboard/src/components/buttons/MismatchButton.tsx(2 hunks)apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx(1 hunks)apps/dashboard/src/components/contract-components/import-contract/modal.tsx(7 hunks)apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx(6 hunks)apps/dashboard/src/components/contract-components/tables/contract-table.tsx(6 hunks)apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx(3 hunks)apps/dashboard/src/global.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (35)
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx
- apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx
- apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/factories/page.tsx
- apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx
- apps/dashboard/src/global.css
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx
- apps/dashboard/src/@/actions/revalidate.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/hooks/project-contracts.ts
- apps/dashboard/src/components/contract-components/tables/contract-table.stories.tsx
- apps/dashboard/src/app/(app)/account/contracts/_components/getSortedDeployedContracts.tsx
- apps/dashboard/src/app/(app)/account/contracts/_components/getProjectContracts.ts
- apps/dashboard/src/components/buttons/MismatchButton.tsx
- apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx
- apps/dashboard/src/@/components/blocks/distribution-chart.tsx
- apps/dashboard/src/components/contract-components/tables/contract-table.tsx
- apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
- apps/dashboard/src/components/contract-components/import-contract/modal.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.stories.tsx
- apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx
- apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-card.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-sale.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-airdrop.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-distribution.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/cards.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/tracking.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/launch/launch-token.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/form.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/token-info-fieldset.tsx
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
Comment on lines
+62
to
+75
| const tokenDistributionForm = useForm<TokenDistributionFormValues>({ | ||
| resolver: zodResolver(tokenDistributionFormSchema), | ||
| values: { | ||
| // sale fieldset | ||
| saleAllocationPercentage: "0", | ||
| salePrice: "0.1", | ||
| supply: "1000000", | ||
| saleEnabled: false, | ||
| // airdrop | ||
| airdropEnabled: false, | ||
| airdropAddresses: [], | ||
| }, | ||
| reValidateMode: "onChange", | ||
| }); |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add input validation for numerical values
The form includes numerical values like saleAllocationPercentage, salePrice, and supply that are currently stored as strings. While Zod validation likely handles this, consider adding:
- Proper type conversion in the form
- Min/max constraints for percentage values (0-100)
- Minimum values for price and supply to prevent invalid or negative values
This would provide better guidance to users and prevent errors during token creation.
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx
between lines 62 and 75, the form fields for numerical values like
saleAllocationPercentage, salePrice, and supply are currently initialized as
strings without explicit input validation or type conversion. Update the form to
convert these fields to appropriate numeric types on input, enforce min/max
constraints such as 0 to 100 for saleAllocationPercentage, and set minimum
allowed values for salePrice and supply to prevent negative or invalid inputs.
This involves adjusting the form initialization values, adding validation rules
or schema refinements, and ensuring the UI input components reflect these
constraints for better user guidance and data integrity.
Comment on lines
+77
to
+118
| return ( | ||
| <div> | ||
| {step === "token-info" && ( | ||
| <TokenInfoFieldset | ||
| client={props.client} | ||
| form={tokenInfoForm} | ||
| onNext={() => { | ||
| setStep("distribution"); | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {step === "distribution" && ( | ||
| <TokenDistributionFieldset | ||
| form={tokenDistributionForm} | ||
| accountAddress={props.accountAddress} | ||
| chainId={tokenInfoForm.watch("chain")} | ||
| onPrevious={() => { | ||
| setStep("token-info"); | ||
| }} | ||
| onNext={() => { | ||
| setStep("launch"); | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {step === "launch" && ( | ||
| <LaunchTokenStatus | ||
| client={props.client} | ||
| onLaunchSuccess={props.onLaunchSuccess} | ||
| onPrevious={() => { | ||
| setStep("distribution"); | ||
| }} | ||
| createTokenFunctions={props.createTokenFunctions} | ||
| values={{ | ||
| ...tokenInfoForm.getValues(), | ||
| ...tokenDistributionForm.getValues(), | ||
| }} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add loading states during form transitions
The component doesn't manage loading states during step transitions or form submissions. Consider adding:
export function CreateTokenAssetPageUI(props: {
accountAddress: string;
client: ThirdwebClient;
createTokenFunctions: CreateTokenFunctions;
onLaunchSuccess: () => void;
}) {
const [step, setStep] = useState<"token-info" | "distribution" | "launch">(
"token-info",
);
+ const [isLoading, setIsLoading] = useState(false);
// ... rest of code
return (
<div>
{step === "token-info" && (
<TokenInfoFieldset
client={props.client}
form={tokenInfoForm}
+ isLoading={isLoading}
onNext={() => {
+ setIsLoading(true);
// Validate form before proceeding
tokenInfoForm.trigger().then((isValid) => {
if (isValid) {
setStep("distribution");
}
+ setIsLoading(false);
});
}}
/>
)}
// ... apply similar changes to other stepsThis would provide visual feedback to users during transitions and prevent multiple submissions.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx
between lines 77 and 118, the component lacks loading state management during
step transitions and form submissions. Add a loading state variable to track
when a transition or submission is in progress, update this state appropriately
in the onNext and onPrevious handlers, and conditionally render a loading
indicator or disable buttons to provide visual feedback and prevent multiple
submissions.
graphite-app
bot
deleted the
05-20-_tool-4531_dashboard_add_token_asset_creation_wizard
branch
This was referenced May 23, 2025
This was referenced Jul 21, 2025
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 focuses on enhancing the asset creation workflow in the application, particularly for deploying and managing ERC-20 tokens. It introduces new tracking functionalities, UI components, and state management improvements.
Detailed summary
deploymentTypeandcontractTypeproperties in various components.revalidatePathActionfor cache revalidation.Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Documentation
Chores