[TASK-14544] Add Support CTA for claim and req fulfilment guest flows#1199
[TASK-14544] Add Support CTA for claim and req fulfilment guest flows#1199Zishan-7 merged 6 commits intopeanut-wallet-devfrom
Conversation
Zishan-7
commented
Sep 10, 2025
Zishan-7
commented
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds a new client SupportCTA component and inserts it into guest views on the payment and claim pages. Claim layout gets a small dynamic class tweak using twMerge; SupportCTA renders only for unauthenticated users when user/link states are not loading. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ Finishing touches
🧪 Generate unit tests
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/app/(mobile-ui)/layout.tsx (1)
130-139: Unify guest and logged-in bottom padding and scroll-container heights
- In
src/app/(mobile-ui)/layout.tsx(lines 130–139), replace the conditional bottom padding so guests get the samepb-24as logged-in users:- isUserLoggedIn ? 'pb-24' : 'pb-6' + 'pb-24'
- In
src/app/(mobile-ui)/layout.tsx(line 148) andsrc/app/[...recipient]/payment-layout-wrapper.tsx(line 47), align both sides of theisUserLoggedInternary to subtract 160px (the fixed nav height) instead of mixing 64px/110px:- isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-64px)]' + isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-160px)]'- isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-110px)]' + isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-160px)]'
- In
src/app/[...recipient]/client.tsx(line 408), change the hardcodedmin-h-[calc(100dvh-180px)]tomin-h-[calc(100dvh-160px)](or reference a shared CSS variable for nav height) to keep content fully visible.src/app/[...recipient]/client.tsx (1)
541-546: Fix typo in user-facing copy ("They payment" → "The payment")Small but visible text issue in the default error message.
- message: 'They payment you are trying to access is invalid. Please check the URL and try again.', + message: 'The payment you are trying to access is invalid. Please check the URL and try again.',
🧹 Nitpick comments (1)
src/app/[...recipient]/client.tsx (1)
536-537: Ensure CTA remains visible above the mobile navRendering is correct, but without adequate bottom padding in the scrollable container the CTA can be covered by the fixed nav. The layout-level fix (use
pb-24for guests too) should address this globally; if not, add a small local spacer here.Example local tweak:
- <SupportCTA /> + <div className="pt-2 md:pt-0"> + <SupportCTA /> + </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/app/(mobile-ui)/layout.tsx(1 hunks)src/app/[...recipient]/client.tsx(2 hunks)src/components/Claim/Claim.tsx(3 hunks)src/components/Global/SupportCTA/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.
Applied to files:
src/components/Claim/Claim.tsx
🧬 Code graph analysis (1)
src/components/Global/SupportCTA/index.tsx (1)
src/context/authContext.tsx (1)
useAuth(182-188)
⏰ 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/app/[...recipient]/client.tsx (1)
35-35: Import looks goodScoped import of SupportCTA is correct and tree-shakeable.
src/components/Claim/Claim.tsx (1)
259-259: Placement is good; double-check spacing vs mobile nav
- Adding
className="flex flex-col"to PageContainer and showing SupportCTA for non-loading states is fine.- As with Payment flow, ensure the CTA isn’t occluded by the fixed mobile nav. The layout-level
pb-24change should cover this; otherwise, consider adding a small top margin or spacer above the CTA.Also applies to: 319-320
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/components/Global/SupportCTA/index.tsx (2)
3-11: Good fix: semantic Link replaces non-accessibleThis addresses the prior accessibility concern and improves keyboard/navigation semantics.
5-15: Verify guest-only guard and route presenceConfirm consumers gate this CTA behind
!user && !isFetchingUserto avoid flicker, and ensure/supportexists in App/Pages Router.#!/bin/bash set -euo pipefail echo "== Check for /support route (App Router) ==" fd -H -t f 'page\.(t|j)sx?$' app/support || true echo "== Check for /support route (Pages Router) ==" fd -H -t f 'support\.(t|j)sx?$' pages || true echo "== Find SupportCTA usages with nearby guards ==" rg -nP -C3 '\bSupportCTA\b' --type ts --type tsx echo "== Look for common guard signals near usages ==" rg -nP -C2 '(isFetchingUser|!user|user\s*&\s*&|linkState)' --type ts --type tsx
🧹 Nitpick comments (4)
src/components/Global/SupportCTA/index.tsx (4)
1-1: Remove unnecessary 'use client' to avoid extra client bundleNo hooks or client-only APIs here; Next.js
Linkis server-compatible. Let this be a Server Component unless you need client-only behavior.-'use client' +/* server component by default */
7-11: Increase tap target/spacing for mobile a11yAdd vertical padding so the CTA meets comfortable touch targets and visual rhythm.
- <div className="flex flex-col items-center justify-center border-t border-grey-1"> + <div className="flex w-full flex-col items-center justify-center border-t border-grey-1 py-4">
8-10: Drop redundant cursor-pointer on anchorAnchors already show the pointer cursor; this class is unnecessary.
- <Link href="/support" className="mt-2 cursor-pointer text-sm text-grey-1 underline underline-offset-2"> + <Link href="/support" className="mt-2 text-sm text-grey-1 underline underline-offset-2">
5-13: Make label configurable (i18n/testability)If you localize strings or need different copy per surface, accept a
labelprop with a sensible default.-const SupportCTA = () => { +type SupportCTAProps = { label?: string } +const SupportCTA = ({ label = 'Need help with this transaction?' }: SupportCTAProps) => { return ( <div className="flex flex-col items-center justify-center border-t border-grey-1"> <Link href="/support" className="mt-2 cursor-pointer text-sm text-grey-1 underline underline-offset-2"> - Need help with this transaction? + {label} </Link> </div> ) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/[...recipient]/client.tsx(3 hunks)src/components/Claim/Claim.tsx(3 hunks)src/components/Global/SupportCTA/index.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/Claim/Claim.tsx
- src/app/[...recipient]/client.tsx
⏰ 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
3 participants
