[TASK-15768] feat: Clickable PFPs in txn receipt

[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 15, 2025 9:23am

[notion-workspace]

make users PFP and name clickable on receipts

[coderabbitai]

Walkthrough

Adds an isAvatarClickable prop to TransactionDetailsHeaderCard to conditionally enable avatar-based navigation to /{userName} via Next.js router. TransactionDetailsReceipt computes and passes this prop, replacing prior profile button logic and removing the explicit “Go to profile” button.

Changes

Cohort / File(s)	Summary of Changes
Avatar clickability and routing src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx	Added isAvatarClickable?: boolean prop (default false); wrapped avatar/badge in a conditional clickable div; integrated Next.js useRouter to navigate to /{userName} on click; applied conditional cursor-pointer class via tailwind-merge; no other avatar/badge rendering changes.
Receipt propagation and UI removal src/components/TransactionDetails/TransactionDetailsReceipt.tsx	Replaced showUserProfileButton with isAvatarClickable (logic excludes link transactions); passed isAvatarClickable to header; removed rendering of the “Go to {user} profile” button; centralized clickability via header prop.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: badges updates #1119 — Also modifies TransactionDetailsHeaderCard props for verification UI; intersects with the new prop surface.
• [TASK-13463] Feat: Add go to profile button and update create account button #1216 — Previously added a “Go to profile” button in TransactionDetailsReceipt; this PR replaces that with avatar-based navigation via a new prop.

Suggested labels

enhancement

Suggested reviewers

• jjramirezn

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	There is no pull request description provided to explain the changes, so there is no content related to the modifications introduced by this PR.	Please add a brief description summarizing the key updates in this PR, such as the introduction of the isAvatarClickable prop and the removal of the profile button in the receipt component.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title concisely and accurately describes the primary change of making profile pictures clickable in transaction receipts without extraneous detail or ambiguity, matching the changes in this pull request.
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-pfp

---

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: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b007bb0 and 9ab0c5b.

📒 Files selected for processing (2)

• src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx (4 hunks)
• src/components/TransactionDetails/TransactionDetailsReceipt.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/TransactionDetailsReceipt.tsx (2)

325-332: Well-structured clickability logic.

The isAvatarClickable condition properly handles all the necessary checks:

• Excludes link transactions where the recipient might not have a profile
• Excludes wallet addresses (non-user identifiers)
• Restricts to relevant transaction types (send/request/receive)

This ensures the avatar is only clickable when navigation to a user profile makes sense.

---

371-371: Prop correctly passed to header component.

The isAvatarClickable prop is properly passed to TransactionDetailsHeaderCard, enabling the avatar clickability feature. This maintains clean separation of concerns between the receipt (determines when clickability should be enabled) and the header (implements the clickable behavior).