feat: share badge from the detail modal (per-badge share copy) - #2382
feat: share badge from the detail modal (per-badge share copy)#23820xkkonrad wants to merge 6 commits into
Conversation
The badge detail modal's dismiss-only CTA now shares the badge: a funny, first-person, per-badge line is dropped into the native share sheet (Web Share API, clipboard fallback) via the existing ShareButton. Copy lives in a single BADGE_SHARE_LINES map so it stays the FE source of truth alongside BADGES; getBadgeShareText() composes brag + join tagline + the sharer's own profile URL (the growth loop). The modal's top-right close still dismisses. Default lines are first-pass picks pending copy review.
Replace the first-pass share lines with Konrad's selected copy (chosen against real prod holder counts). Three rarely-earned badges — CERTIFIED_YAPPER, TOKEN_NATION_SP_2026, FESTA_JUNINA_2026 — are intentionally dropped from the map and use getBadgeShareText's generic fallback; not worth bespoke copy. Test made copy-agnostic so editing a line no longer breaks it.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Code-analysis diffPainscore total: 7008.7 → 7010.18 (+1.48) 🆕 New findings (6)
✅ Resolved (6)
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds a ChangesBadge share feature
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/Badges/badge.utils.ts (1)
277-278: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAliased badge lines are duplicated literals, not a shared reference.
BUG_WHISPERER/SUPPORT_SURVIVORandCARD_PIONEER/FOUNDING_PIONEERrepeat the exact same string. Since the comment states these "share a line" by design, referencing a single constant would guarantee they stay in sync if the copy is ever edited.♻️ Example using shared constants
+const BUG_WHISPERER_LINE = 'I found a real bug in Peanut, reported it, and stuck around. Someone owes me a beer 🐛🍺' +const FOUNDING_PIONEER_LINE = 'I was building Peanut before it had a launch. Founding Pioneer 🛠️' + const BADGE_SHARE_LINES: Record<string, string> = { ... - BUG_WHISPERER: 'I found a real bug in Peanut, reported it, and stuck around. Someone owes me a beer 🐛🍺', - SUPPORT_SURVIVOR: 'I found a real bug in Peanut, reported it, and stuck around. Someone owes me a beer 🐛🍺', + BUG_WHISPERER: BUG_WHISPERER_LINE, + SUPPORT_SURVIVOR: BUG_WHISPERER_LINE, ... - CARD_PIONEER: 'I was building Peanut before it had a launch. Founding Pioneer 🛠️', - FOUNDING_PIONEER: 'I was building Peanut before it had a launch. Founding Pioneer 🛠️', + CARD_PIONEER: FOUNDING_PIONEER_LINE, + FOUNDING_PIONEER: FOUNDING_PIONEER_LINE, }Also applies to: 301-302
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Badges/badge.utils.ts` around lines 277 - 278, The aliased badge entries in badge.utils.ts are duplicated string literals instead of sharing a single source of truth. Update the badge mapping so BUG_WHISPERER and SUPPORT_SURVIVOR, as well as CARD_PIONEER and FOUNDING_PIONEER, reference shared constants or a shared value defined once in the same module, keeping the badge labels in sync if they change later.src/components/Badges/BadgeStatusDrawer.tsx (1)
77-88: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDrawer's own Share button bypasses the new
getBadgeShareTexthelper.This inline
generateTextstill hardcodes a generic message, while the same badge'sBadgeDetailModal(opened from the Card below) now usesgetBadgeShareTextfor badge-specific copy. Users get inconsistent share text for the same badge depending on which button they tap.♻️ Suggested consolidation
<div className="pb-4"> <ShareButton title="" - generateText={() => - Promise.resolve( - `I earned ${displayName} badge on Peanut!\n\nJoin Peanut now and start earning points, unlocking achievements and moving money worldwide\n\n${profileLink}` - ) - } + generateText={() => Promise.resolve(getBadgeShareText(badge.code, displayName, profileLink))} > Share Achievement </ShareButton> </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Badges/BadgeStatusDrawer.tsx` around lines 77 - 88, The ShareButton inside BadgeStatusDrawer is still building its own generic share message instead of using the shared getBadgeShareText helper, causing inconsistent copy with BadgeDetailModal. Update the ShareButton’s generateText to call getBadgeShareText for the current badge so both share entry points use the same badge-specific text. Keep the change localized to BadgeStatusDrawer and reuse the existing badge share helper rather than hardcoding the template inline.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/Badges/badge.utils.ts`:
- Around line 277-278: The aliased badge entries in badge.utils.ts are
duplicated string literals instead of sharing a single source of truth. Update
the badge mapping so BUG_WHISPERER and SUPPORT_SURVIVOR, as well as CARD_PIONEER
and FOUNDING_PIONEER, reference shared constants or a shared value defined once
in the same module, keeping the badge labels in sync if they change later.
In `@src/components/Badges/BadgeStatusDrawer.tsx`:
- Around line 77-88: The ShareButton inside BadgeStatusDrawer is still building
its own generic share message instead of using the shared getBadgeShareText
helper, causing inconsistent copy with BadgeDetailModal. Update the
ShareButton’s generateText to call getBadgeShareText for the current badge so
both share entry points use the same badge-specific text. Keep the change
localized to BadgeStatusDrawer and reuse the existing badge share helper rather
than hardcoding the template inline.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e65f9ee6-177c-431a-97a4-732082a29dca
📒 Files selected for processing (5)
src/components/Badges/BadgeDetailModal.tsxsrc/components/Badges/BadgeStatusDrawer.tsxsrc/components/Badges/__tests__/badge.utils.test.tssrc/components/Badges/badge.utils.tssrc/components/Badges/index.tsx
CodeRabbit caught that the badge-unlock drawer's own 'Share Achievement' button still hardcoded the generic message while the detail modal (opened from the same drawer) now shares badge-specific copy — the same badge gave two different share texts depending on which button was tapped. Route the drawer through getBadgeShareText so both surfaces are consistent.
/code-review found the third BadgeDetailModal render site — the badge-earn toast on /home (the unlock moment, the most shareable surface) — wasn't threading the badge code, so tapping Share there always got the generic fallback instead of the badge-specific line. Add code to ModalBadge and forward it, matching the badges-list and unlock-drawer call sites.
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
Thanks @coderabbitai — both nitpicks triaged:
|
|
Tip For best results, initiate chat on the files or code changes.
✏️ Learnings added
|
Temporarily align the two conflict sites with dev so GitHub can create a verified server-side base merge without rewriting PR history.
Restore the original PR tree after GitHub rejected its server-side dev merge because current dev contains historical unsigned commits.
|
Fresh replacement: #2609. This branch could not inherit current |
|
Branch-update status (saves you the next blocked attempt): repo ruleset 6457257 enforces The completed reconciliation is on
Two working endgames:
Aleks has the details; es/pt lines are transcreations awaiting native review in commit |
|
Superseded by #2609. The replacement is rebuilt directly on the live |
2 participants
Summary
The badge detail modal's "Got it!" button (a dead dismiss) is now "Share badge" — tapping it drops a funny, badge-specific, first-person line into the native share sheet (Web Share API, with clipboard-copy fallback + toast on desktop). The goal is a share that feels natural enough that people actually post it, turning earned badges into a growth loop. The modal's top-right ✕ still dismisses.
BADGE_SHARE_LINESmap +getBadgeShareText(code, displayName, profileUrl)inbadge.utils.ts— kept next toBADGESas the FE source of truth. Composes‹brag›\n\nJoin me on Peanut 👉 ‹the sharer's own profile URL›.ShareButton(same pattern as the unlock drawer's "Share Achievement"), so behavior matches the rest of the app.codeis threaded intoBadgeDetailModalfrom both call sites (Badgeslist +BadgeStatusDrawer), so the per-badge line works from both entry points.Copy selection — driven by real usage
Lines were chosen against live prod holder counts (
app.user_acknowledgments). Bespoke copy only pays off for badges people actually have, so rarely-earned badges are intentionally omitted from the map (CERTIFIED_YAPPER,TOKEN_NATION_SP_2026,FESTA_JUNINA_2026) —getBadgeShareTextreturns a genericI just unlocked the "X" badge on Peanut 🥜fallback for any unlisted code, so they still share cleanly with zero upkeep.Risks / breaking changes
codeis an optional prop (falls back to the generic line if absent).QA
Unit tests:
getBadgeShareText(mapped code, generic fallback, undefined code) inbadge.utils.test.ts.