feat: implement referral program with link generation and progress tracking #285
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
❌ Deploy Preview for pintomoney failed.
|
fr1jo
changed the title
…ved analytics tracking
- Update page layout to use consistent design system (variant="lg" container) - Replace all typography with Pinto design system classes - Add Separator component for consistent visual hierarchy - Replace text-based warning with visual horizontal progress bar - Show qualification progress with animated gradient bar - Display remaining beans needed to unlock referral link - Update all color classes to use design system tokens - Improve mobile responsiveness with responsive padding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add min-w-0 to input to allow proper flexbox shrinking - Add text-sm to input for better URL readability - Add whitespace-nowrap to Copy button to prevent text wrapping - Ensure input takes maximum available space in flex container 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove "How it works" section from ReferralLinkGenerator (redundant with main page) - Replace all instances of "Beans" with "Pinto" for brand consistency - Update progress bar labels to show "Pinto" instead of "Beans" - Update Twitter share text to reference "Pinto" - Update FAQ text to use "Pinto" terminology 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Split "Your Referral Stats" and "Referral Leaderboard" into separate cards - Move leaderboard section above "How It Works" component - Update referral stats to show specific metrics: - Total Pods Earned (placeholder: 0) - Successful Referrals (placeholder: 0) - Improve visual hierarchy with dedicated sections - Add better spacing and layout for stats display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update all instances of 1% to 10% referral bonus - Clarify that only the referrer earns the bonus, not both parties - Update Twitter share text to reflect accurate mechanics - Update hero description and all "How It Works" copy - Remove misleading "you both earn" language 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Capitalize all instances of "sow/sows" to "Sow/Sows" for brand consistency - Remove "Ready to Start Earning?" CTA card (redundant) - Change stats layout from 2 rows to 2 columns in 1 row (grid-cols-2) - Update all copy across both referral components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Move referral link input to always be visible at top - Disable input and copy button when threshold not met (grayed out) - Reorder UI: link input first, then qualification progress, then active state - Better visual hierarchy showing link is locked until qualified - Input adapts to full width with flex-1 min-w-0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Reorder navigation items in home tab - New order: Overview, Silo, Field, Swap, Pod Market, Referral, sPinto, Collection - Referral now appears after Pod Market and before Collection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improves UX by showing users the progress they need to make before displaying the locked referral link input. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
fr1jo
changed the title
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.
Summary
Implements a comprehensive referral program feature for Pinto Protocol, including referral link generation, progress tracking, and integration across the application.
Changes Made
New Features
ReferralLinkGeneratorcomponent with automatic link generation based on user's wallet addressUI/UX Improvements
PageContainer variant="lg"for better space utilizationContent Updates
Technical Details
src/components/ReferralLinkGenerator.tsxsrc/pages/Referral.tsxsrc/components/nav/nav/Navi.desktop.tsxANALYTICS_EVENTS.REFERRALencodeReferralAddressFiles Created
/src/components/ReferralLinkGenerator.tsx- Core referral link generation component/src/pages/Referral.tsx- Main referral program pageFiles Modified
/src/components/nav/nav/Navi.desktop.tsx- Added Referral navigation item/src/pages/Swap.tsx- Added referral info to rewards tooltip (previous commit)Test Plan
Screenshots/Demo
Referral page with qualification progress, stats tracking, and comprehensive information sections
🤖 Generated with Claude Code