feat: add user name click on receipts

[Zishan-7]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Oct 16, 2025 6:38am

[coderabbitai]

Walkthrough

Extracts avatar click logic into a dedicated handler in TransactionDetailsHeaderCard and exposes an optional onNameClick prop on VerifiedUserLabel to conditionally enable clickable usernames.

Changes

Cohort / File(s)	Summary
Transaction details header src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx	Adds handleUserPfpClick function and wires it to the avatar container's onClick; passes onNameClick to VerifiedUserLabel only when isAvatarClickable is true.
User header / verified label src/components/UserHeader/index.tsx	Adds optional onNameClick?: () => void prop to VerifiedUserLabel; applies cursor-pointer and onClick to the name container when provided to make the name clickable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [TASK-15768] feat: Clickable PFPs in txn receipt #1325 — similar changes to TransactionDetailsHeaderCard and VerifiedUserLabel click behavior.
• feat: badges updates #1119 — updates VerifiedUserLabel interface and clickability handling.

Suggested reviewers

• kushagrasarathe

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "feat: add user name click on receipts" directly and clearly summarizes the main objective of the changeset. The changes involve extracting avatar click handlers and adding optional onNameClick functionality to VerifiedUserLabel in TransactionDetailsHeaderCard.tsx and UserHeader/index.tsx, which together enable users to click on names in transaction details/receipts. The title is specific, concise, uses proper conventional commit format, and accurately reflects the primary feature being implemented without vague terminology.
Description Check	✅ Passed	While no pull request description was provided by the author, this check is explicitly lenient and passes as long as the description is not completely off-topic or unrelated to the changeset. Since there is no description to evaluate, there is nothing that contradicts or is actively off-topic from the changeset. In the absence of any conflicting information, the absence of a description does not trigger a failure condition in this lenient check framework.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/clickable-name-receipt

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5b20c5b and 557e4b7.

📒 Files selected for processing (2)

• src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (2 hunks)
• src/components/UserHeader/index.tsx (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (4)

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (2)

191-191: LGTM! Avatar click handling is correctly implemented.

The conditional cursor styling and onClick handler are properly applied based on the isAvatarClickable flag.

---

223-223: LGTM! Name click handler is correctly passed to VerifiedUserLabel.

The onNameClick prop is conditionally passed only when isAvatarClickable is true, maintaining consistency with the avatar click behavior.

src/components/UserHeader/index.tsx (2)

53-53: LGTM! New prop definition is well-structured.

The optional onNameClick prop is properly typed and follows TypeScript best practices.

Also applies to: 62-62

---

99-104: LGTM! Name click implementation is correct.

The implementation properly:

• Conditionally applies cursor-pointer styling when onNameClick is provided
• Attaches the click handler only when provided
• Applies only to non-crypto addresses (preserved for the crypto address branch)

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (1)

191-191: Add keyboard accessibility for the clickable avatar.

The avatar container is clickable but lacks proper keyboard accessibility. Users navigating with a keyboard cannot interact with it.

Apply this diff to add keyboard accessibility:

-                <div className={twMerge(isAvatarClickable && 'cursor-pointer')} onClick={handleUserPfpClick}>
+                <div 
+                    className={twMerge(isAvatarClickable && 'cursor-pointer')} 
+                    onClick={handleUserPfpClick}
+                    onKeyDown={isAvatarClickable ? (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault()
+                            handleUserPfpClick()
+                        }
+                    } : undefined}
+                    role={isAvatarClickable ? 'button' : undefined}
+                    tabIndex={isAvatarClickable ? 0 : undefined}
+                >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 557e4b7 and 64daf2f.

📒 Files selected for processing (1)

• src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (2)

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (2)

223-223: LGTM! Consistent clickability pattern.

The conditional passing of onNameClick correctly mirrors the avatar's clickability behavior, ensuring a consistent user experience.

---

182-186: Apply URL encoding to userName before navigation to ensure special characters don't break the route.

While usernames are validated to be 4–12 characters in src/components/Setup/Views/Signup.tsx, the character set is not constrained in the visible code. Other parts of the codebase use decodeURIComponent when extracting usernames from URL parameters (e.g., src/app/send/[...username]/layout.tsx), suggesting the system expects URL-encoded usernames. The handleUserPfpClick function should consistently apply URL encoding:

router.push(`/${encodeURIComponent(userName)}`)

Verify with your backend team whether usernames are restricted to URL-safe characters (alphanumeric only) before deciding if this is necessary.