[TASK-16686] Feat/pix modal changes#1421
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThe PR removes the Add Money Prompt modal from the home page, introduces a QR code context for managing scanner state across components, adds icon sizing flexibility to carousel CTAs, and replaces the PIX promo CTA with a new QR payment CTA triggered via context. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 2 inconclusive)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/hooks/useHomeCarouselCTAs.tsx (1)
103-112: Add missing dependencies to useCallback.The
generateCarouselCTAscallback is missingsetIsQRScannerOpenandisUserMantecaKycApprovedfrom its dependency array. While context setters are typically stable, omittingisUserMantecaKycApprovedcan cause stale closure bugs since it's used in the condition at line 41.Apply this diff to add the missing dependencies:
}, [ showReminderBanner, isPermissionDenied, isUserKycApproved, + isUserMantecaKycApproved, isUserBridgeKycUnderReview, router, requestPermission, afterPermissionAttempt, snoozeReminderBanner, + setIsQRScannerOpen, ])
🧹 Nitpick comments (2)
src/app/(mobile-ui)/home/page.tsx (1)
22-22: Remove unused import.The
AddMoneyPromptModalimport is no longer used since the modal has been disabled (lines 222-223).Apply this diff to remove the unused import:
-import AddMoneyPromptModal from '@/components/Home/AddMoneyPromptModal'src/hooks/useHomeCarouselCTAs.tsx (1)
41-41: Simplify redundant KYC condition.The condition
isUserKycApproved || isUserMantecaKycApprovedis redundant becauseisUserKycApprovedalready includesisUserMantecaKycApprovedper the implementation inuseKycStatus.tsx(line 13-16).Apply this diff to simplify the condition:
- if (isUserKycApproved || isUserMantecaKycApproved) { + if (isUserKycApproved) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/(mobile-ui)/home/page.tsx(2 hunks)src/components/Global/DirectSendQR/index.tsx(2 hunks)src/components/Global/Icons/qr-code.tsx(1 hunks)src/components/Home/HomeCarouselCTA/CarouselCTA.tsx(3 hunks)src/components/Home/HomeCarouselCTA/index.tsx(1 hunks)src/context/QrCodeContext.tsx(1 hunks)src/context/contextProvider.tsx(2 hunks)src/hooks/useHomeCarouselCTAs.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (14)
📓 Common learnings
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.
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.
📚 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/components/Global/DirectSendQR/index.tsx
📚 Learning: 2025-11-04T17:47:06.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1396
File: src/app/(mobile-ui)/home/page.tsx:295-304
Timestamp: 2025-11-04T17:47:06.328Z
Learning: In src/app/(mobile-ui)/home/page.tsx, when closing the KycCompletedModal, updateUserById is called without awaiting to provide instant feedback to the user. This fire-and-forget pattern for modal dismissals and UI preference updates is intentional and consistent across the codebase—user experience with instant UI feedback takes priority over waiting for backend sync operations.
Applied to files:
src/app/(mobile-ui)/home/page.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Applied to files:
src/app/(mobile-ui)/home/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)/home/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)/home/page.tsx
📚 Learning: 2025-11-07T11:51:58.861Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1419
File: src/components/Global/BalanceWarningModal/index.tsx:94-94
Timestamp: 2025-11-07T11:51:58.861Z
Learning: In `src/components/Global/BalanceWarningModal/index.tsx`, the casual and congratulatory phrase "You're rich! Congrats on having a high balance." is intentional and by design.
Applied to files:
src/app/(mobile-ui)/home/page.tsx
📚 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)/home/page.tsxsrc/context/contextProvider.tsx
📚 Learning: 2024-10-29T12:20:47.207Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.
Applied to files:
src/app/(mobile-ui)/home/page.tsx
📚 Learning: 2025-07-07T20:22:11.092Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 958
File: src/app/actions/tokens.ts:266-266
Timestamp: 2025-07-07T20:22:11.092Z
Learning: In `src/app/actions/tokens.ts`, within the `fetchWalletBalances` function, using the non-null assertion operator `!` on `process.env.MOBULA_API_KEY!` is intentional and correct, and should not be flagged for replacement with explicit validation.
Applied to files:
src/app/(mobile-ui)/home/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)/home/page.tsx
📚 Learning: 2025-10-15T06:45:22.055Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1241
File: src/components/ForceIOSPWAInstall/index.tsx:6-51
Timestamp: 2025-10-15T06:45:22.055Z
Learning: In the ForceIOSPWAInstall component (src/components/ForceIOSPWAInstall/index.tsx), the blocking behavior without a skip/dismiss option is intentional by design to force PWA installation on iOS devices.
Applied to files:
src/app/(mobile-ui)/home/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/components/Global/DirectSendQR/index.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/components/Global/DirectSendQR/index.tsx
🧬 Code graph analysis (4)
src/components/Global/DirectSendQR/index.tsx (1)
src/context/QrCodeContext.tsx (1)
useQrCodeContext(17-23)
src/context/contextProvider.tsx (2)
src/context/SupportModalContext.tsx (1)
SupportModalProvider(15-37)src/context/QrCodeContext.tsx (1)
QrCodeProvider(12-15)
src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(209-218)
src/hooks/useHomeCarouselCTAs.tsx (2)
src/hooks/useKycStatus.tsx (1)
useKycStatus(12-36)src/context/QrCodeContext.tsx (1)
useQrCodeContext(17-23)
⏰ 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 (11)
src/components/Home/HomeCarouselCTA/index.tsx (1)
35-35: LGTM! Consistent icon sizing for carousel CTAs.The hardcoded
iconSize={16}ensures uniform icon sizing across all carousel CTAs, which aligns with the QR CTA implementation inuseHomeCarouselCTAs.tsx(line 59).src/components/Global/Icons/qr-code.tsx (1)
3-9: LGTM! Prop forwarding enhances component flexibility.Spreading props onto the SVG element allows consumers to pass additional attributes (aria-labels, event handlers, etc.) while maintaining existing functionality.
src/app/(mobile-ui)/home/page.tsx (2)
162-162: LGTM! Dependency array correctly updated.The removal of
showAddMoneyPromptModalfrom the dependency array is correct since the related state has been removed.
222-223: LGTM! Modal properly disabled with clear TODO.The Add Money Prompt modal has been correctly commented out with a clear TODO marker for future re-enablement.
src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (3)
23-24: LGTM! Clean API extension.The optional
iconSizeprop is well-typed and maintains backward compatibility.
36-36: LGTM! Sensible default value.The default value of
22maintains existing icon sizing behavior for consumers that don't specifyiconSize.
100-100: LGTM! Correct usage of iconSize prop.The Icon component correctly uses the
iconSizeprop when no logo is provided, maintaining the existing conditional logic.src/context/contextProvider.tsx (1)
12-12: LGTM! Proper context composition.The
QrCodeProvideris correctly integrated into the existing provider tree, following the established nesting pattern.Also applies to: 26-28
src/hooks/useHomeCarouselCTAs.tsx (1)
40-61: LGTM! Clean QR CTA integration with context.The new QR payment CTA is well-structured and properly integrates with the
QrCodeContextto open the scanner when clicked. The use oficonSize: 16ensures consistent sizing with other carousel CTAs.src/components/Global/DirectSendQR/index.tsx (1)
21-21: LGTM! Clean migration to context-based state.The component correctly migrates from local
isQRScannerOpenstate to the sharedQrCodeContext. ThestartScannerfunction and all scanner close operations properly use the context setter, enabling coordinated QR scanner control across components.Also applies to: 199-203
src/context/QrCodeContext.tsx (1)
1-23: LGTM! Well-implemented context pattern.The
QrCodeContextfollows React best practices with:
- Strong typing via
QrCodeContextTypeinterface- Proper error handling in
useQrCodeContextto enforce usage within provider- Clean state management with boolean flag and setter
- Standard context creation pattern
This provides a solid foundation for coordinating QR scanner state across multiple components.
| isQRScannerOpen: boolean | ||
| setIsQRScannerOpen: (isOpen: boolean) => void | ||
| } | ||
|
|
There was a problem hiding this comment.
nit: lets adopt the habbit to add comments for hooks and components, jsdoc styles, easier to get context
2 participants
Context https://discord.com/channels/972435984954302464/1436354807995568209