QR Payment Points & Savings Features#1392
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughSwap HomeBanners for HomeCarouselCTA, add carousel constants and hook rename, integrate points calculation/confetti and Argentina savings messaging across QR-pay and withdraw flows, remove banner/notification components, add number formatting and QR-payment utilities, and update Crisp support proxy and related hooks/components. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
@coderabbitai review in depth. See .cursorrules for guidelines. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 2589 🏁 Script executed: Length of output: 540 🏁 Script executed: Length of output: 37192 🏁 Script executed: Length of output: 1151 🏁 Script executed: Length of output: 131 🏁 Script executed: Length of output: 205 🏁 Script executed: Length of output: 1065 🏁 Script executed: Length of output: 3400 🏁 Script executed: Length of output: 27 🏁 Script executed: Length of output: 4475 🏁 Script executed: Length of output: 0 @Hugo0, I've completed an in-depth review according to 🚨 Critical Issues1. DRY Violation - Points Display Duplicated 3xThe points display JSX is duplicated in three places in
Recommended Fix: Extract to a reusable component: // src/components/QrPay/PointsEarned.tsx
interface PointsEarnedProps {
points: number
divRef: React.RefObject<HTMLDivElement>
}
export const PointsEarned: React.FC<PointsEarnedProps> = ({ points, divRef }) => (
<div ref={divRef} className="flex justify-center gap-2">
<Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
<p className="text-sm font-medium text-black">
You've earned {points} {points === 1 ? 'point' : 'points'}!
</p>
</div>
)Then use: 2. Missing Tests for New Utils
Recommended: Create import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage } from '../qr-payment.utils'
import { EQrType } from '@/components/Global/DirectSendQR/utils'
describe('qr-payment.utils', () => {
describe('calculateSavingsInCents', () => {
it('should calculate 5% savings correctly', () => {
expect(calculateSavingsInCents('10.00')).toBe(50) // 5% of $10 = $0.50 = 50 cents
expect(calculateSavingsInCents('0.20')).toBe(1) // 5% of $0.20 = $0.01 = 1 cent
})
it('should return 0 for invalid input', () => {
expect(calculateSavingsInCents(null)).toBe(0)
expect(calculateSavingsInCents(undefined)).toBe(0)
expect(calculateSavingsInCents('')).toBe(0)
})
})
describe('isArgentinaMantecaQrPayment', () => {
it('should return true for Argentina Manteca payments', () => {
expect(isArgentinaMantecaQrPayment(EQrType.MERCADO_PAGO, 'MANTECA')).toBe(true)
expect(isArgentinaMantecaQrPayment(EQrType.ARGENTINA_QR3, 'MANTECA')).toBe(true)
})
it('should return false for SimpleFi or Brazil PIX', () => {
expect(isArgentinaMantecaQrPayment(EQrType.PIX, 'MANTECA')).toBe(false)
expect(isArgentinaMantecaQrPayment(EQrType.MERCADO_PAGO, 'SIMPLEFI')).toBe(false)
})
})
describe('getSavingsMessage', () => {
it('should format cents for amounts < $1', () => {
expect(getSavingsMessage(1)).toContain('1 cent')
expect(getSavingsMessage(50)).toContain('50 cents')
})
it('should format dollars for amounts >= $1', () => {
expect(getSavingsMessage(100)).toContain('$1.00')
expect(getSavingsMessage(1050)).toContain('$10.50')
})
it('should return empty string for 0 or negative', () => {
expect(getSavingsMessage(0)).toBe('')
expect(getSavingsMessage(-10)).toBe('')
})
})
})
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/app/(mobile-ui)/qr-pay/page.tsx (1)
1065-1080: Consider extracting points display to a reusable component.The points display JSX (lines 1072-1080) appears to follow a pattern that might be duplicated elsewhere. To improve maintainability and reduce duplication, consider extracting it to a reusable component.
Example component:
const PointsEarned = ({ points, elementRef }: { points: number; elementRef?: React.RefObject<HTMLDivElement> }) => ( <div ref={elementRef} className="flex justify-center gap-2"> <Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} /> <p className="text-sm font-medium text-black"> You've earned {points} {points === 1 ? 'point' : 'points'}! </p> </div> )Usage:
-{pointsData?.estimatedPoints && ( - <div ref={pointsDivRef} className="flex justify-center gap-2"> - <Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} /> - <p className="text-sm font-medium text-black"> - You've earned {pointsData.estimatedPoints}{' '} - {pointsData.estimatedPoints === 1 ? 'point' : 'points'}! - </p> - </div> -)} +{pointsData?.estimatedPoints && ( + <PointsEarned points={pointsData.estimatedPoints} elementRef={pointsDivRef} /> +)}Based on learnings
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/app/(mobile-ui)/qr-pay/page.tsx(9 hunks)
🧰 Additional context used
🧠 Learnings (14)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-08T03:13:09.111Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:156-176
Timestamp: 2025-09-08T03:13:09.111Z
Learning: In the peanut-ui mobile app, the `/qr-pay` route is only accessed through the DirectSendQR component which always includes the qrCode parameter in the URL when redirecting users to the QR pay page after scanning MERCADO_PAGO or PIX QR codes.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-08T03:13:09.111Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:156-176
Timestamp: 2025-09-08T03:13:09.111Z
Learning: In the peanut-ui mobile app, the `/qr-pay` route is only accessed through the DirectSendQR component which always includes the qrCode parameter in the URL when redirecting users to the QR pay page.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-08T03:11:00.114Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:31-41
Timestamp: 2025-09-08T03:11:00.114Z
Learning: In QR payment flows, the `createPayment` API call for payment tracking can be non-awaited when called after successful transaction execution, as it's a non-blocking logging operation and doesn't affect the user's success state.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T13:42:00.443Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-08-22T07:28:32.281Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.281Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
🧬 Code graph analysis (1)
src/app/(mobile-ui)/qr-pay/page.tsx (4)
src/services/points.ts (1)
pointsApi(6-131)src/hooks/usePointsConfetti.ts (1)
usePointsConfetti(9-28)src/constants/query.consts.ts (1)
TRANSACTIONS(2-2)src/utils/qr-payment.utils.ts (3)
calculateSavingsInCents(9-13)isArgentinaMantecaQrPayment(21-27)getSavingsMessage(35-49)
⏰ 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 (7)
src/app/(mobile-ui)/qr-pay/page.tsx (7)
21-21: LGTM: Clean import organization and ref setup.The new imports for points calculation, savings utilities, React Query, and the confetti hook are well-organized. The
pointsDivRefis correctly typed asHTMLDivElementfor anchoring the confetti animation.Also applies to: 41-41, 45-47, 99-99
321-334: Verify SimpleFi points requirement.The query is enabled only for
MANTECApayments, and the comment states "Only Manteca QR payments give points (SimpleFi does not)". However, the PR objectives mention "points + confetti for SimpleFi", which appears inconsistent with this implementation.Please clarify whether SimpleFi QR payments should earn points. If they should, the query
enabledcondition needs to be updated:-enabled: !!(user?.user.userId && usdAmount && Number(usdAmount) > 0 && paymentProcessor === 'MANTECA'), +enabled: !!(user?.user.userId && usdAmount && Number(usdAmount) > 0 && (paymentProcessor === 'MANTECA' || paymentProcessor === 'SIMPLEFI')),And the action type would need to handle SimpleFi payments appropriately.
738-762: LGTM: Correct handling of balance check on success screen.Skipping the balance check when
isSuccessis true prevents confusing false-positive "insufficient balance" errors on the success screen, since the blockchain state may not have updated yet. The dependency array correctly includesisSuccess.
764-765: LGTM: Correct unconditional hook invocation.The
usePointsConfettihook is correctly called unconditionally per React's Rules of Hooks, with conditional logic properly contained within the argument expression.
767-771: LGTM: Correct dependency array update.Adding
queryClientto the dependency array follows React's exhaustive-deps rule and is technically correct, even thoughqueryClientis typically stable.
979-982: LGTM: Correct Argentina-specific savings calculation.The savings calculation correctly uses the utility functions and is properly scoped to Argentina Manteca QR payments only (MERCADO_PAGO / ARGENTINA_QR3), as specified in the PR objectives.
1181-1261: Verify SimpleFi points display requirement.The SimpleFi success view (lines 1181-1261) does not include points or savings display UI, which appears inconsistent with the PR objectives that mention "points + confetti for SimpleFi." However, the code comment at line 323 explicitly states "Only Manteca QR payments give points (SimpleFi does not)", and the points query is only enabled for MANTECA.
Please clarify:
- Should SimpleFi QR payments display earned points?
- If yes, the points display UI should be added after the payment card (around line 1207), similar to the Manteca success view (lines 1072-1080).
If SimpleFi should display points, you would need to:
- Update the query enabling condition (line 331) to include SimpleFi
- Add the points/savings display UI blocks in the SimpleFi success view
- Ensure the appropriate action type is used for SimpleFi in the points calculation
kushagrasarathe
left a comment
There was a problem hiding this comment.
one suggestion on abstraction of points fetching
| if (!isUserKycApproved && !isUserBridgeKycUnderReview) { | ||
| _banners.push({ | ||
| id: 'kyc-banner', | ||
| _carouselCTAs.push({ |
|
|
||
| {/* Points Display */} | ||
| {pointsData?.estimatedPoints && ( | ||
| <div ref={pointsDivRef} className="flex justify-center gap-2"> |
There was a problem hiding this comment.
qn non blocking: why is ref neded?
src/app/(mobile-ui)/qr-pay/page.tsx
Outdated
| // Fetch points early to avoid latency penalty - fetch as soon as we have usdAmount | ||
| // This way points are cached by the time success view shows | ||
| // Only Manteca QR payments give points (SimpleFi does not) | ||
| const { data: pointsData } = useQuery({ |
There was a problem hiding this comment.
could have been a hook, used two times
|
@coderabbitai review new changes in depth and evaluate if PR is ready to merge |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 730 🏁 Script executed: Length of output: 0 🏁 Script executed: Length of output: 0 🏁 Script executed: Length of output: 0 🏁 Script executed: Length of output: 42748 🏁 Script executed: Length of output: 1191 🏁 Script executed: Length of output: 1177 🏁 Script executed: Length of output: 755 🏁 Script executed: Length of output: 1577 🏁 Script executed: Length of output: 204 🏁 Script executed: Length of output: 1158 🏁 Script executed: Length of output: 613 🏁 Script executed: Length of output: 27 🏁 Script executed: Length of output: 0 @Hugo0, I've reviewed the new changes. Here's my assessment: ✅ Excellent Progress MadeNew Hooks Created (Great refactoring! 🎉):
Other Improvements:
🚨 PR NOT Ready to Merge - 2 Critical Issues Remain1. DRY Violation Still ExistsThe points display JSX is still duplicated in 2 locations: Location 1: {pointsData?.estimatedPoints && (
<div ref={pointsDivRef} className="flex justify-center gap-2">
<Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
<p className="text-sm font-medium text-black">
You've earned {pointsData.estimatedPoints}{' '}
{pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
</p>
</div>
)}Location 2: {pointsData?.estimatedPoints && (
<div ref={pointsDivRef} className="flex justify-center gap-2">
<Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
<p className="text-sm font-medium text-black">
You've earned {pointsData.estimatedPoints}{' '}
{pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
</p>
</div>
)}Fix Required: Extract to a reusable component as suggested in my initial review. 2. Missing Unit Tests
Testing patterns exist in the codebase at 🎯 Action Required Before Merge
Would you like me to generate both files for you? I can provide:
Let me know and I'll generate them immediately! 🚀 🧠 Learnings used |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/(mobile-ui)/home/page.tsx(5 hunks)src/app/(mobile-ui)/qr-pay/page.tsx(9 hunks)src/app/(mobile-ui)/withdraw/manteca/page.tsx(4 hunks)src/components/Home/InvitesIcon.tsx(1 hunks)src/components/UserHeader/index.tsx(1 hunks)src/hooks/usePointsCalculation.ts(1 hunks)src/utils/qr-payment.utils.ts(1 hunks)tailwind.config.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/utils/qr-payment.utils.ts
🧰 Additional context used
🧠 Learnings (24)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1299
File: src/app/(mobile-ui)/points/page.tsx:41-51
Timestamp: 2025-10-08T17:13:13.155Z
Learning: In `src/app/(mobile-ui)/points/page.tsx`, the icon name "invite-heart" is intentionally used (not "inviter-heart") when displaying who invited the current user, as this is a deliberate design choice despite semantic differences with UserHeader usage.
Applied to files:
src/app/(mobile-ui)/home/page.tsxsrc/components/UserHeader/index.tsxsrc/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/components/Home/InvitesIcon.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.
Applied to files:
src/app/(mobile-ui)/home/page.tsxsrc/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-07-24T13:26:10.290Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1014
File: src/components/Claim/Link/Initial.view.tsx:413-413
Timestamp: 2025-07-24T13:26:10.290Z
Learning: In the peanut-ui repository, the change from `${SQUID_API_URL}/route` to `${SQUID_API_URL}/v2/route` in src/components/Claim/Link/Initial.view.tsx was a typo fix, not an API migration, as the codebase was already using Squid API v2.
Applied to files:
src/components/UserHeader/index.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsxsrc/hooks/usePointsCalculation.ts
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsxsrc/hooks/usePointsCalculation.ts
📚 Learning: 2025-07-05T16:58:25.340Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2025-07-05T16:58:25.340Z
Learning: Hugo0 successfully refactored sessionStorage usage to React Context in the onramp flow, demonstrating preference for centralized state management over browser storage for component-shared state in React applications.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-11T17:46:12.507Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1200
File: src/app/(mobile-ui)/recover-funds/page.tsx:9-9
Timestamp: 2025-09-11T17:46:12.507Z
Learning: Functions in Next.js that are not marked with "use server" and contain secrets are unsafe to import in client components, as they get bundled into the client JavaScript and can leak environment variables to the browser.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2025-09-11T17:46:12.507Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1200
File: src/app/(mobile-ui)/recover-funds/page.tsx:9-9
Timestamp: 2025-09-11T17:46:12.507Z
Learning: In Next.js applications, functions marked with "use server" are server actions that are safe to import in client components. Next.js generates proxy stubs for these functions, ensuring the actual implementation and any secrets (like process.env variables) remain on the server and are not bundled into the client JavaScript.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2025-05-15T14:47:26.891Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 857
File: src/hooks/useWebSocket.ts:77-82
Timestamp: 2025-05-15T14:47:26.891Z
Learning: The useWebSocket hook in src/hooks/useWebSocket.ts is designed to provide raw history entries, while the components using it (such as HomeHistory.tsx) are responsible for implementing deduplication logic based on UUID to prevent duplicate entries when combining WebSocket data with other data sources.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2025-08-22T07:28:32.281Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.281Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-06-22T16:10:53.167Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 915
File: src/hooks/useKycFlow.ts:96-124
Timestamp: 2025-06-22T16:10:53.167Z
Learning: The `initiateKyc` function in `src/app/actions/users.ts` already includes comprehensive error handling with try-catch blocks and returns structured responses with either `{ data }` or `{ error }` fields, so additional try-catch blocks around its usage are not needed.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Applied to files:
src/app/(mobile-ui)/withdraw/manteca/page.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-08T03:13:09.111Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:156-176
Timestamp: 2025-09-08T03:13:09.111Z
Learning: In the peanut-ui mobile app, the `/qr-pay` route is only accessed through the DirectSendQR component which always includes the qrCode parameter in the URL when redirecting users to the QR pay page after scanning MERCADO_PAGO or PIX QR codes.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-08T03:13:09.111Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:156-176
Timestamp: 2025-09-08T03:13:09.111Z
Learning: In the peanut-ui mobile app, the `/qr-pay` route is only accessed through the DirectSendQR component which always includes the qrCode parameter in the URL when redirecting users to the QR pay page.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T13:42:00.443Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
🧬 Code graph analysis (3)
src/app/(mobile-ui)/withdraw/manteca/page.tsx (3)
src/hooks/usePointsCalculation.ts (1)
usePointsCalculation(15-37)src/hooks/usePointsConfetti.ts (1)
usePointsConfetti(9-28)src/constants/query.consts.ts (1)
TRANSACTIONS(2-2)
src/app/(mobile-ui)/qr-pay/page.tsx (3)
src/hooks/usePointsCalculation.ts (1)
usePointsCalculation(15-37)src/hooks/usePointsConfetti.ts (1)
usePointsConfetti(9-28)src/utils/qr-payment.utils.ts (3)
calculateSavingsInCents(9-13)isArgentinaMantecaQrPayment(21-27)getSavingsMessage(35-49)
src/hooks/usePointsCalculation.ts (2)
src/context/authContext.tsx (1)
useAuth(185-191)src/services/points.ts (1)
pointsApi(6-131)
⏰ 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 (1)
src/components/UserHeader/index.tsx (1)
28-28: LGTM — minor spacing refinement.The increased horizontal padding improves visual consistency with the broader UI polish effort described in the PR objectives.
|
@coderabbitai review in depth again. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 1541 🏁 Script executed: Length of output: 5051 @Hugo0, I've completed an in-depth review of the latest changes. Here's my assessment: 🚨 PR Still NOT Ready to Merge - Same 2 Critical Issues Remain✅ Good Progress on RefactoringYou've done great work with the hooks:
❌ Critical Issue #1: DRY Violation Still ExistsThe exact same 9 lines of points display JSX are still duplicated in 2 files: File 1: {pointsData?.estimatedPoints && (
<div ref={pointsDivRef} className="flex justify-center gap-2">
<Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
<p className="text-sm font-medium text-black">
You've earned {pointsData.estimatedPoints}{' '}
{pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
</p>
</div>
)}File 2: {pointsData?.estimatedPoints && (
<div ref={pointsDivRef} className="flex justify-center gap-2">
<Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
<p className="text-sm font-medium text-black">
You've earned {pointsData.estimatedPoints}{' '}
{pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
</p>
</div>
)}❌ Critical Issue #2: Missing Unit Tests
But 🎯 Would you like me to generate both files?I can immediately provide:
Just confirm and I'll generate both files with complete, ready-to-use code! 🚀 🧠 Learnings used |
- Extract hardcoded URLs and IDs to constants files (DRY) - Remove unused useCrispInitialization hook and CrispChat default component - Clean up unused imports (resetCrispSession) - Add clarifying comments for wallet address source - Move Grafana/Arbiscan URLs to constants/support.ts - Move CRISP_WEBSITE_ID to constants/crisp.ts (was duplicated 3x)
Fix/fix crisp
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/hooks/useCrispEmbedUrl.ts (1)
22-24: Simplify redundant fallback in user_nickname.The condition on Line 22 already ensures either
userData.fullNameoruserData.usernameexists, so the fallback|| userData.username || ''on Line 23 is redundant. The expression can be simplified.Apply this diff:
- if (userData.fullName || userData.username) { - params.append('user_nickname', userData.fullName || userData.username || '') - } + const nickname = userData.fullName || userData.username + if (nickname) { + params.append('user_nickname', nickname) + }src/app/crisp-proxy/page.tsx (1)
97-104: Potential race: fallback may double-notify parent.The
session:loadedevent listener (Line 98) and the fallback timeout (Line 101) can both triggernotifyParentReady(), leading to duplicateCRISP_READYmessages. While likely harmless in this context, consider tracking whether the notification has been sent to avoid unnecessary postMessages.+ let hasNotified = false + const notifyOnce = () => { + if (!hasNotified) { + hasNotified = true + notifyParentReady() + } + } + - window.$crisp.push(['on', 'session:loaded', notifyParentReady]) - setTimeout(notifyParentReady, 1500) + window.$crisp.push(['on', 'session:loaded', notifyOnce]) + setTimeout(notifyOnce, 1500)src/hooks/useCrispProxyUrl.ts (1)
22-24: Simplify redundant fallback in user_nickname.The condition on Line 22 already ensures either
userData.fullNameoruserData.usernameexists, making the fallback|| userData.username || ''on Line 23 redundant.Apply this diff:
- if (userData.fullName || userData.username) { - params.append('user_nickname', userData.fullName || userData.username || '') - } + const nickname = userData.fullName || userData.username + if (nickname) { + params.append('user_nickname', nickname) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
src/app/(mobile-ui)/support/page.tsx(1 hunks)src/app/crisp-proxy/page.tsx(1 hunks)src/components/CrispChat.tsx(1 hunks)src/components/Global/SupportDrawer/index.tsx(1 hunks)src/components/index.ts(1 hunks)src/constants/crisp.ts(1 hunks)src/constants/support.ts(1 hunks)src/context/authContext.tsx(2 hunks)src/hooks/useCrispEmbedUrl.ts(1 hunks)src/hooks/useCrispProxyUrl.ts(1 hunks)src/hooks/useCrispUserData.ts(1 hunks)src/utils/crisp.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/constants/crisp.ts
- src/components/index.ts
🧰 Additional context used
🧠 Learnings (10)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-08-07T12:53:50.946Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1072
File: src/app/(setup)/setup/page.tsx:173-175
Timestamp: 2025-08-07T12:53:50.946Z
Learning: In the peanut-ui setup flow at `src/app/(setup)/setup/page.tsx`, when handling unsupported scenarios, both device not supported and browser not supported cases should show the same "Unsupported browser" message using the `UnsupportedBrowserModal` component, rather than having distinct messaging for each scenario.
Applied to files:
src/app/(mobile-ui)/support/page.tsx
📚 Learning: 2025-07-24T13:26:10.290Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1014
File: src/components/Claim/Link/Initial.view.tsx:413-413
Timestamp: 2025-07-24T13:26:10.290Z
Learning: In the peanut-ui repository, the change from `${SQUID_API_URL}/route` to `${SQUID_API_URL}/v2/route` in src/components/Claim/Link/Initial.view.tsx was a typo fix, not an API migration, as the codebase was already using Squid API v2.
Applied to files:
src/app/(mobile-ui)/support/page.tsx
📚 Learning: 2025-07-05T16:58:25.340Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2025-07-05T16:58:25.340Z
Learning: Hugo0 successfully refactored sessionStorage usage to React Context in the onramp flow, demonstrating preference for centralized state management over browser storage for component-shared state in React applications.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2025-09-11T17:46:12.507Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1200
File: src/app/(mobile-ui)/recover-funds/page.tsx:9-9
Timestamp: 2025-09-11T17:46:12.507Z
Learning: In Next.js applications, functions marked with "use server" are server actions that are safe to import in client components. Next.js generates proxy stubs for these functions, ensuring the actual implementation and any secrets (like process.env variables) remain on the server and are not bundled into the client JavaScript.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2025-09-11T17:46:12.507Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1200
File: src/app/(mobile-ui)/recover-funds/page.tsx:9-9
Timestamp: 2025-09-11T17:46:12.507Z
Learning: Functions in Next.js that are not marked with "use server" and contain secrets are unsafe to import in client components, as they get bundled into the client JavaScript and can leak environment variables to the browser.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2025-01-16T13:14:40.363Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the `resetTokenContextProvider` function from `tokenSelectorContext` is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.
Applied to files:
src/context/authContext.tsx
📚 Learning: 2025-05-13T10:05:24.057Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 845
File: src/components/Request/link/views/Create.request.link.view.tsx:81-81
Timestamp: 2025-05-13T10:05:24.057Z
Learning: In the peanut-ui project, pages that handle request flows (like Create.request.link.view.tsx) are only accessible to logged-in users who will always have a username, making null checks for user?.user.username unnecessary in these contexts.
Applied to files:
src/hooks/useCrispUserData.ts
🧬 Code graph analysis (8)
src/hooks/useCrispEmbedUrl.ts (2)
src/constants/crisp.ts (1)
CRISP_WEBSITE_ID(6-6)src/hooks/useCrispUserData.ts (1)
CrispUserData(6-17)
src/app/crisp-proxy/page.tsx (1)
src/constants/crisp.ts (1)
CRISP_WEBSITE_ID(6-6)
src/hooks/useCrispProxyUrl.ts (1)
src/hooks/useCrispUserData.ts (1)
CrispUserData(6-17)
src/app/(mobile-ui)/support/page.tsx (3)
src/hooks/useCrispUserData.ts (1)
useCrispUserData(23-56)src/hooks/useCrispProxyUrl.ts (1)
useCrispProxyUrl(15-69)src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(4-19)
src/components/Global/SupportDrawer/index.tsx (4)
src/context/SupportModalContext.tsx (1)
useSupportModalContext(39-45)src/hooks/useCrispUserData.ts (1)
useCrispUserData(23-56)src/hooks/useCrispProxyUrl.ts (1)
useCrispProxyUrl(15-69)src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(4-19)
src/utils/crisp.ts (1)
src/hooks/useCrispUserData.ts (1)
CrispUserData(6-17)
src/context/authContext.tsx (1)
src/utils/crisp.ts (1)
resetCrispProxySessions(76-107)
src/hooks/useCrispUserData.ts (2)
src/context/authContext.tsx (1)
useAuth(192-198)src/constants/support.ts (2)
GRAFANA_DASHBOARD_BASE_URL(6-7)ARBISCAN_ADDRESS_BASE_URL(10-10)
⏰ 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 (7)
src/components/CrispChat.tsx (1)
5-24: LGTM! Clean refactor to proxy-based approach.The simplified implementation clearly delegates to the SupportDrawer proxy approach, and the JSDoc comment effectively explains the architectural decision.
src/context/authContext.tsx (1)
152-156: LGTM! Properly resets Crisp sessions on logout.The call to
resetCrispProxySessions()is correctly guarded and positioned in the logout flow to prevent session merging with the next user.src/constants/support.ts (1)
1-10: LGTM! Well-documented support constants.Clear constant definitions with appropriate JSDoc comments.
src/components/Global/SupportDrawer/index.tsx (1)
10-52: LGTM! Consistent proxy integration with proper loading states.The implementation correctly handles the loading state, origin validation, and resets when the drawer closes. The pattern is consistent with the support page implementation.
src/app/(mobile-ui)/support/page.tsx (1)
8-37: LGTM! Consistent proxy integration.The implementation mirrors the SupportDrawer pattern with proper loading state management and origin validation. The absence of loading state reset (present in SupportDrawer) is appropriate here since page unmounting handles cleanup.
src/utils/crisp.ts (1)
56-107: Appreciate the thorough session resets. Guarding against SSR access, catching iframe failures, and flagging deferred proxies should keep Crisp sessions neatly isolated across logouts.src/hooks/useCrispUserData.ts (1)
31-54: Like the persistent wallet/KYC sourcing. Reading the Peanut wallet address and Manteca/bridge IDs straight from the auth payload sidesteps transient ZeroDev gaps and gives support richer, durable metadata.
| ;(window as any).CRISP_RUNTIME_CONFIG = { | ||
| lock_maximized: true, | ||
| lock_full_view: true, | ||
| cross_origin_cookies: true, // Essential for session persistence in iframes |
There was a problem hiding this comment.
🧩 Analysis chain
Verify cross_origin_cookies support and necessity.
Setting cross_origin_cookies: true is flagged as "Essential for session persistence in iframes" (Line 26). Since this proxy is same-origin (not cross-origin), verify whether this setting is necessary or if it's a remnant from earlier cross-origin approaches.
🌐 Web query:
Does Crisp CRISP_RUNTIME_CONFIG cross_origin_cookies setting apply to same-origin iframes?
💡 Result:
Short answer: No — cross_origin_cookies is meant to fix cross-site / cross-origin cookie issues (external embeds/iframed pages hosted on a different domain). It isn’t required for a same-origin iframe and has no special effect there. [1][2][3]
Sources:
- Crisp help: CRISP_RUNTIME_CONFIG example and note about fixing cross-domain cookie issues for embeds/iframed pages. [1][2]
- Explanation of browser cookie behavior for iframes (cross-site vs same-site contexts). [3]
Remove unnecessary cross_origin_cookies setting for same-origin proxy.
cross_origin_cookies is meant to fix cross-site/cross-origin cookie issues and has no special effect for same-origin iframes. Since this proxy is same-origin, remove the cross_origin_cookies: true setting (Line 26) and its misleading comment about being essential for session persistence.
🤖 Prompt for AI Agents
In src/app/crisp-proxy/page.tsx around line 26, remove the unnecessary
cross_origin_cookies: true property and its misleading comment since this proxy
is same-origin; delete that line (and any trailing comma if needed) so the
config reflects only required options and run format/lint to ensure syntax
remains valid.
Summary of Changes
qr-payment.utils.tswith savings calculation and Argentina detection logicuseQuerywith 5min cache to avoid latency penaltyshadowSize="3"Risks
MANTECA_QR_PAYMENTaction type (already in use)QA Guidelines
1 cent"), $1.00 (shows "$1.00"), $10.00 (shows "~$10.00")