Add text input option to airdrop setup #7238
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
WalkthroughThe changes add support for manual entry of airdrop addresses and amounts via a multiline text area, in addition to the existing CSV upload. A parser processes the text input into the required format, which is then passed to the CSV processing pipeline using a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant Parser
participant useCsvUploadHook
User->>UI: Upload CSV file or enter addresses in textarea
alt User uploads CSV
UI->>useCsvUploadHook: Parse and validate CSV
else User enters text
UI->>Parser: Parse text input
Parser-->>UI: Parsed addresses/amounts
UI->>useCsvUploadHook: processData(parsed data)
end
useCsvUploadHook-->>UI: Validated and normalized data
UI-->>User: Display results or errors
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 (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7238 +/- ##
=======================================
Coverage 55.55% 55.55%
=======================================
Files 908 908
Lines 58571 58571
Branches 4131 4131
=======================================
Hits 32540 32540
Misses 25927 25927
Partials 104 104
🚀 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 (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx (2)
197-234: Review the text parsing logic for robustness.The
parseTextInputfunction handles multiple input formats well, but there are some potential edge cases and improvements to consider:
- Empty quantity handling: Line 222 defaults to "1" when no quantity is provided, which is good.
- Separator precedence: The function checks separators in a specific order (=, comma, tab, space), which could lead to unexpected results if an address contains these characters.
- No input validation: The function doesn't validate addresses or quantities, but this is handled downstream.
Consider these improvements:
const parseTextInput = (text: string): AirdropAddressInput[] => { const lines = text .split("\n") .map((line) => line.trim()) .filter((line) => line !== ""); const result: AirdropAddressInput[] = []; for (const line of lines) { let parts: string[] = []; + // More robust parsing with better separator detection if (line.includes("=")) { - parts = line.split("="); + parts = line.split("=").slice(0, 2); // Only take first two parts } else if (line.includes(",")) { - parts = line.split(","); + parts = line.split(",").slice(0, 2); } else if (line.includes("\t")) { - parts = line.split("\t"); + parts = line.split("\t").slice(0, 2); } else { parts = line.split(/\s+/); } parts = parts.map((part) => part.trim()).filter((part) => part !== ""); if (parts.length >= 1) { const address = parts[0]; - const quantity = parts[1] || "1"; + const quantity = parts[1] || "1"; if (address) { result.push({ address: address.trim(), quantity: quantity.trim(), }); } } } return result; };
359-466: Well-structured dual input UI.The new UI layout effectively presents both upload and manual input options:
- Clear separation: The divider with "Or enter manually" text provides good visual separation.
- Helpful examples: The placeholder text shows multiple input format examples.
- Good UX: Ctrl+Enter keyboard shortcut and disabled state management enhance user experience.
- Consistent styling: The manual input section follows the same design patterns as the upload section.
Minor suggestion for the placeholder text:
- placeholder={`0x314ab97b76e39d63c78d5c86c2daf8eaa306b182 3.141592 - thirdweb.eth,2.7182 - 0x141ca95b6177615fb1417cf70e930e102bf8f384=1.41421`} + placeholder={`0x314ab97b76e39d63c78d5c86c2daf8eaa306b182 3.141592 + thirdweb.eth,2.7182 + 0x141ca95b6177615fb1417cf70e930e102bf8f384=1.41421 + 0x456...def (defaults to 1 token)`}This would clarify that quantity is optional.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx(11 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (11)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx (11)
26-26: LGTM - Clean import addition.The Textarea component import is properly added and will be used for the manual text input functionality.
96-96: Good UI copy improvements.The text changes from "CSV" specific terminology to more generic terms like "Airdrop List Set", "View List", and "Airdrop List" better reflect the new dual input approach.
Also applies to: 113-113, 120-120
156-161: Clear and descriptive UI copy.The updated sheet title and description accurately communicate the new functionality, mentioning both CSV upload and manual entry options.
180-180: Consistent button text update.The button text "Set up Airdrop" aligns well with the sheet title and provides a clearer call-to-action than the previous "Upload CSV".
241-241: Good state management addition.The
textInputstate is properly initialized and will be used to track the manual input content.
252-261: Inline CSV parser is well-structured.The inline parser function properly handles the address and quantity mapping with appropriate defaults and filtering.
296-302: Good loading state condition.The condition properly checks for the loading state when raw data exists but normalization hasn't completed yet.
304-315: Improved continue handler logic.The updated condition only checks for
normalizeDataexistence, which is more appropriate than the previous logic that also checkedrawData.length.
317-320: Comprehensive reset functionality.The
handleResetfunction properly clears both CSV data and text input, maintaining consistency between the two input methods.
324-326: Good condition update for showing results.The condition correctly checks for both normalized data and raw data to determine when to show the results table.
338-338: Proper handler integration.Both the reset button and continue button now use the updated handlers that account for the dual input approach.
Also applies to: 352-352
...(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/hooks/useCsvUpload.ts (1)
165-176: LGTM! Consider extracting shared validation logic.The
processDatafunction correctly enables external components to feed pre-parsed data into the existing CSV processing pipeline, which aligns perfectly with the manual text input feature.However, there's code duplication between this function and the
onDropfunction (lines 123-126). Consider extracting the shared validation logic:+ const validateAndSetData = useCallback( + (processedData: T[]) => { + if (!processedData[0]?.address) { + setNoCsv(true); + return false; + } + setRawData(processedData); + return true; + }, + [], + ); const processData = useCallback( (data: T[]) => { setNoCsv(false); const processedData = props.csvParser(data); - if (!processedData[0]?.address) { - setNoCsv(true); - return; - } - setRawData(processedData); + validateAndSetData(processedData); }, [props.csvParser], );And update the
onDropfunction similarly to reuse the validation logic.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx(11 hunks)apps/dashboard/src/hooks/useCsvUpload.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/hooks/useCsvUpload.ts (1)
187-187: Function correctly exposed in hook interface.The
processDatafunction is properly added to the hook's return object, making it available for external components to use.
|
Nice! |
Merge activity
|
- Add manual text input alternative to CSV upload for airdrop addresses - Support multiple input formats: space, comma, equals, and tab separated - Parse text input and convert to CSV format for existing validation system - Reuse all existing functionality: ENS resolution, address validation, duplicate removal - Maintain same validation flow and error handling as CSV upload - Change button text from 'Upload CSV' to 'Set up Airdrop' for clarity   <!-- ## 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 CSV upload functionality in the `TokenAirdropSection` component. It introduces a new method for processing CSV data, allows manual entry of addresses and amounts, and updates UI labels to reflect the new functionality. ### Detailed summary - Added `processData` function in `useCsvUpload` for processing parsed CSV data. - Updated `TokenAirdropSection` UI labels from "CSV File Uploaded" to "Airdrop List Set". - Changed button text from "View CSV" to "View List". - Introduced `parseTextInput` function for manual input parsing. - Added text input for entering addresses and amounts. - Implemented handling for text input submission. - Updated the layout to separate CSV upload and manual entry sections. > ✨ 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 the ability to manually enter airdrop addresses and amounts using a text area, supporting multiple input formats. - Users can now choose between uploading a CSV file or entering addresses and amounts directly. - **UI Updates** - Updated labels and button texts to reflect support for both CSV and manual list input. - Improved layout with a visual divider and clear instructions for manual entry. - Enhanced reset and validation behaviors for both input methods. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
nk/csvairdrop
branch
from
75aa9a9 to
2114e5f
Compare
graphite-app
bot
removed
the
merge-queue
Add manual text input alternative to CSV upload for airdrop addresses
Support multiple input formats: space, comma, equals, and tab separated
Parse text input and convert to CSV format for existing validation system
Reuse all existing functionality: ENS resolution, address validation, duplicate removal
Maintain same validation flow and error handling as CSV upload
Change button text from 'Upload CSV' to 'Set up Airdrop' for clarity
PR-Codex overview
This PR focuses on enhancing the CSV upload functionality in the
TokenAirdropSectioncomponent by adding a text input option for manually entering addresses and amounts, improving data processing, and updating UI elements for clarity.Detailed summary
processDatafunction inuseCsvUploadto handle processed CSV data.parseTextInputfunction for parsing manual input.Summary by CodeRabbit
New Features
UI Updates