feat(manteca): BRL PIX deposit QR screen (ramp-on details.qr) [draft, depends on api#1093]#2315
Closed
abalinda wants to merge 5 commits into
Closed
feat(manteca): BRL PIX deposit QR screen (ramp-on details.qr) [draft, depends on api#1093]#2315abalinda wants to merge 5 commits into
abalinda wants to merge 5 commits into
Conversation
Companion to peanut-api-ts #1093. For BRL, Add Money now shows Manteca's dynamic PIX QR instead of the static bank-details screen: render the copia-e-cola via QRCodeWrapper, a copy button, a live m:ss expiry countdown, and poll the deposit intent status to auto-advance to a success state. ARS path untouched. - showQR step (nuqs) routed by the response discriminator (type === 'QR') - useMantecaDepositPolling: read-only mirror of GET /manteca/deposit/:id/status - QRCodeWrapper gains an optional className width-override (160 -> 280px here) - hook + component tests
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (4)
WalkthroughAdds a BRL PIX QR deposit path to the Manteca add-money flow. The PR adds deposit-status polling, a QR deposit screen with expiry handling, ChangesPIX QR Deposit Flow
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
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 |
Contributor
Code-analysis diffPainscore total: 5862.92 → 5873.38 (+10.46) 🆕 New findings (17)
✅ Resolved (14)
📈 Painscore deltas (top movers)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
Contributor
Author
desktop
mobile
might need polishing and a bit more design matching |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/AddMoney/components/__tests__/MantecaPixQrDeposit.test.tsx`:
- Around line 34-35: Remove the obsolete eslint-disable-next-line import/first
suppression from the MantecaPixQrDeposit test file, since that rule is no longer
configured. Keep the existing jest.mock setup and the MantecaPixQrDeposit import
in the same relative order, but delete only the inline lint override near the
test import.
In `@src/components/AddMoney/components/MantecaAddMoney.tsx`:
- Around line 9-10: Remove the unused CountryData import from MantecaAddMoney so
the file no longer trips `@typescript-eslint/no-unused-vars`; keep the used
countryData import and leave the MantecaDepositResponseData and
MantecaPixDepositData type imports unchanged.
In `@src/components/AddMoney/components/MantecaPixQrDeposit.tsx`:
- Around line 20-90: The QR deposit screen only handles the completed state, so
terminal polling results from useMantecaDepositPolling like failed are still
rendered as if the QR is usable. Update MantecaPixQrDeposit to branch on status
for all terminal states returned by the hook, especially failed, and replace the
actionable QR/countdown area with an appropriate failure/terminal message and
navigation action. Keep the existing completed branch, but ensure the fallback
UI no longer shows CopyToClipboard, QRCodeWrapper, or countdown when the deposit
is no longer valid.
In `@src/components/AddMoney/hooks/__tests__/useMantecaDepositPolling.test.tsx`:
- Around line 15-16: The test file’s stale import-order suppression is now
causing lint failures because import/first is no longer configured. Remove the
eslint-disable-next-line comment directly above useMantecaDepositPolling in the
test module, and keep the jest.mock placement as-is so the import remains valid
without the suppression.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 81ba442c-1b4c-4c91-928c-9beca3131c39
📒 Files selected for processing (8)
src/components/AddMoney/components/MantecaAddMoney.tsxsrc/components/AddMoney/components/MantecaPixQrDeposit.tsxsrc/components/AddMoney/components/__tests__/MantecaPixQrDeposit.test.tsxsrc/components/AddMoney/hooks/__tests__/useMantecaDepositPolling.test.tsxsrc/components/AddMoney/hooks/useMantecaDepositPolling.tssrc/components/Global/QRCodeWrapper/index.tsxsrc/services/manteca.tssrc/types/manteca.types.ts
Comment on lines
+15
to
+16
| // eslint-disable-next-line import/first -- must come after jest.mock | ||
| import { useMantecaDepositPolling } from '../useMantecaDepositPolling' |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove the stale import/first suppression.
This comment now fails linting because import/first is not configured, so the suppression itself introduces an error.
🧹 Proposed fix
-// eslint-disable-next-line import/first -- must come after jest.mock
import { useMantecaDepositPolling } from '../useMantecaDepositPolling'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // eslint-disable-next-line import/first -- must come after jest.mock | |
| import { useMantecaDepositPolling } from '../useMantecaDepositPolling' | |
| import { useMantecaDepositPolling } from '../useMantecaDepositPolling' |
🧰 Tools
🪛 ESLint
[error] 15-15: Definition for rule 'import/first' was not found.
(import/first)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/AddMoney/hooks/__tests__/useMantecaDepositPolling.test.tsx`
around lines 15 - 16, The test file’s stale import-order suppression is now
causing lint failures because import/first is no longer configured. Remove the
eslint-disable-next-line comment directly above useMantecaDepositPolling in the
test module, and keep the jest.mock placement as-is so the import remains valid
without the suppression.
Source: Linters/SAST tools
…'s details Drops MantecaPixDepositData; the dynamic QR now reads from the existing MantecaDepositResponseData.details.qr (the ramp-on synthetic), routed to showQR by currency. Matches the BE pivot (api #1093) off deposit-request. details.qr is a stub until Manteca confirms the field name.
abalinda
changed the title
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/AddMoney/components/MantecaPixQrDeposit.tsx (1)
46-98: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winHandle the hook's failed terminal state before rendering the QR.
Line 46 only short-circuits
'completed', butuseMantecaDepositPollingalso returns'failed'for terminal backend states. In those cases, Lines 73-97 still show the QR/copy flow and keep the countdown running even though the deposit is no longer payable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/AddMoney/components/MantecaPixQrDeposit.tsx` around lines 46 - 98, The Manteca PIX deposit UI only handles the terminal "completed" status, but `useMantecaDepositPolling` can also return a terminal "failed" state, so `MantecaPixQrDeposit` should stop rendering the QR/countdown flow for failures too. Update the status handling near the existing `status === 'completed'` branch to also cover `failed` in `MantecaPixQrDeposit`, and show an appropriate terminal/error state or redirect action instead of rendering `QRCodeWrapper`, `CopyToClipboard`, and the countdown when the backend says the deposit is no longer payable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/AddMoney/components/MantecaAddMoney.tsx`:
- Around line 198-205: The BRL branch in MantecaAddMoney currently routes all
deposits to showQR based only on selectedCountry?.currency, but the QR payload
is optional and can be missing from the create-deposit response. Update the
logic around setDepositDetails and setUrlState so it checks the returned deposit
data for a valid QR payload before choosing the showQR step, and otherwise falls
back to depositDetails. Use the existing MantecaAddMoney and MantecaPixQrDeposit
flow to ensure users are not sent to the QR screen when details.qr is absent.
---
Duplicate comments:
In `@src/components/AddMoney/components/MantecaPixQrDeposit.tsx`:
- Around line 46-98: The Manteca PIX deposit UI only handles the terminal
"completed" status, but `useMantecaDepositPolling` can also return a terminal
"failed" state, so `MantecaPixQrDeposit` should stop rendering the QR/countdown
flow for failures too. Update the status handling near the existing `status ===
'completed'` branch to also cover `failed` in `MantecaPixQrDeposit`, and show an
appropriate terminal/error state or redirect action instead of rendering
`QRCodeWrapper`, `CopyToClipboard`, and the countdown when the backend says the
deposit is no longer payable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3d72af46-6636-403c-9bc0-0d5fd477960f
📒 Files selected for processing (5)
src/components/AddMoney/components/MantecaAddMoney.tsxsrc/components/AddMoney/components/MantecaPixQrDeposit.tsxsrc/components/AddMoney/components/__tests__/MantecaPixQrDeposit.test.tsxsrc/services/manteca.tssrc/types/manteca.types.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/AddMoney/components/tests/MantecaPixQrDeposit.test.tsx
Comment on lines
+198
to
+205
| // BRL deposits carry the dynamic PIX QR in the ramp-on synthetic's | ||
| // details → show the QR step. ARS/others show deposit details. | ||
| const data = depositData.data | ||
| setDepositDetails(data) | ||
| if (selectedCountry?.currency === 'BRL') { | ||
| setUrlState({ step: 'showQR' }) | ||
| } else { | ||
| setUrlState({ step: 'depositDetails' }) |
Contributor
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Gate showQR on the returned QR payload, not just the selected currency.
Line 202 sends every BRL deposit to the QR step, but details.qr is optional and MantecaPixQrDeposit never refreshes depositDetails. If the create-deposit response comes back without a QR payload, the user lands on a permanent “Preparing your PIX QR…” screen instead of falling back to deposit details.
🛠️ Suggested fix
const data = depositData.data
setDepositDetails(data)
- if (selectedCountry?.currency === 'BRL') {
+ if (selectedCountry?.currency === 'BRL' && data?.details.qr) {
setUrlState({ step: 'showQR' })
} else {
setUrlState({ step: 'depositDetails' })
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // BRL deposits carry the dynamic PIX QR in the ramp-on synthetic's | |
| // details → show the QR step. ARS/others show deposit details. | |
| const data = depositData.data | |
| setDepositDetails(data) | |
| if (selectedCountry?.currency === 'BRL') { | |
| setUrlState({ step: 'showQR' }) | |
| } else { | |
| setUrlState({ step: 'depositDetails' }) | |
| // BRL deposits carry the dynamic PIX QR in the ramp-on synthetic's | |
| // details → show the QR step. ARS/others show deposit details. | |
| const data = depositData.data | |
| setDepositDetails(data) | |
| if (selectedCountry?.currency === 'BRL' && data?.details.qr) { | |
| setUrlState({ step: 'showQR' }) | |
| } else { | |
| setUrlState({ step: 'depositDetails' }) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/AddMoney/components/MantecaAddMoney.tsx` around lines 198 -
205, The BRL branch in MantecaAddMoney currently routes all deposits to showQR
based only on selectedCountry?.currency, but the QR payload is optional and can
be missing from the create-deposit response. Update the logic around
setDepositDetails and setUrlState so it checks the returned deposit data for a
valid QR payload before choosing the showQR step, and otherwise falls back to
depositDetails. Use the existing MantecaAddMoney and MantecaPixQrDeposit flow to
ensure users are not sent to the QR screen when details.qr is absent.
…g screen Two PIX-deposit polish items: - Add money → Brazil now defaults the input denomination to BRL (Argentina → ARS) instead of USD — you deposit in your local currency. - Show the branded CyclingLoading screen (spinning peanut + rotating messages, same as PIX-payment processing) while the BRL QR is being generated, and in place of the plain "Preparing your PIX QR…" fallback.
…lement screen - Add money → Brazil defaults the denomination to BRL (PIX is in BRL); every other country keeps USD (Argentina reverts to USD). - useMantecaDepositPolling now surfaces a 'processing' status for the payment-settling window (Manteca PROCESSING / AWAITING_SETTLEMENT); the QR screen shows the branded CyclingLoading during it, so the flow is QR → processing → "Deposit received!".
For Brazil, the shared "From Bank" (bank-transfer-add) method resolves to the same Manteca route as the "Pix" card (/add-money/brazil/manteca), so it's a pure duplicate. Filter it out for BR so Brazil shows only Pix (+ From Crypto). Every other country keeps its "From Bank" card. Reversible: delete the one filter block.
Contributor
Author
|
removed the "From Bank" as its a dead end - same as PIX and not enabled 
|
Contributor
|
Superseded by #2335 — same work rebased onto main + wired to the prod-confirmed contract (QR at details.depositAddresses.PIX, live since today). Targeting main because the current BRL deposit screen has nothing to pay (Manteca stopped returning the static key). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
BRL PIX deposit — frontend ·⚠️ draft, depends on api#1093 + Manteca
Adds a
showQRstep to the Manteca Add-Money flow for BRL: renders the dynamic PIX QR from the ramp-on synthetic'sdetails.qr, with a livem:ssexpiry countdown and a "copia e cola" copy button. Status polling advances QR → processing → "Deposit received!" — the brandedCyclingLoading(Peanut spin + rotating messages, same as PIX payments) shows while the deposit settles. ARS keeps its existing bank-details screen, untouched.Flow:
POST /manteca/deposit (BRL)→ ramp-on synthetic withdetails.qr→showQR(routed by currency) → pollGET /manteca/deposit/:id/status→processing(settling) → success onCOMPLETED.Also in this PR:
CyclingLoadingfor the QR-generating and settlement waits, so the deposit flow is visually in-line with PIX-payment processing.QRCodeWrappergains an optionalclassNamewidth-override (zero blast radius on other callers).Notes:
details.qris a stub until Manteca confirms the field name (the screen shows the branded loader while it's absent).useMantecaDepositPolling(incl. the newprocessingstate) +MantecaPixQrDeposit— 8/8.