[TASK-12885]Feat/manteca add flow#1187
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds an Argentina Mercado Pago on‑ramp: new regional route and MercadoPago components, Manteca on‑ramp API and type, amount/deposit UI components, AR branch in bank flow, constants updates, a minor hook change, and a PeanutActionDetailsCard prop update. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45-60 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ 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: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/AddMoney/consts/index.ts (1)
2109-2119: Also unset path for “soon” default methods.When a method is marked
isSoon, ensurepathisundefinedto prevent accidental linking.} else if (newMethod.id === 'mercado-pago-add' && countryCode === 'AR') { newMethod.isSoon = false newMethod.path = `/add-money/${country.path}/mercadopago` } else { - newMethod.isSoon = true + newMethod.isSoon = true + newMethod.path = undefined }
🧹 Nitpick comments (18)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
77-83: Add missing icon for ADD_MONEY_BANK_ACCOUNT in header.The title now treats ADD_MONEY_BANK_ACCOUNT as “You’re adding”, but getIcon doesn’t return an arrow for this case, so the header may render without an icon for bank-account add. Add it to the arrow-down branch for parity with ADD_MONEY.
- if (transactionType === 'ADD_MONEY' || transactionType === 'CLAIM_LINK_BANK_ACCOUNT') return 'arrow-down' + if ( + transactionType === 'ADD_MONEY' || + transactionType === 'ADD_MONEY_BANK_ACCOUNT' || + transactionType === 'CLAIM_LINK_BANK_ACCOUNT' + ) + return 'arrow-down'Also applies to: 95-96
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)
170-193: Surface caught error if hook error is unset.In the catch block, you only use onrampError, which may be stale/empty for thrown errors. Also close the warning modal just once.
- } catch (error) { - setShowWarningModal(false) - if (onrampError) { - setError({ - showError: true, - errorMessage: onrampError, - }) - } + } catch (error) { + setShowWarningModal(false) + setError({ + showError: true, + errorMessage: + onrampError || (error instanceof Error ? error.message : 'Unexpected error creating onramp.'), + }) }src/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx (1)
5-19: Normalize params and avoid hard-coded routing strings drifting.Lowercase params for robustness and centralize route mapping to reduce duplication with countryData/consts.
- const country = params.country as string - const method = params['regional-method'] as string + const country = String(params.country).toLowerCase() + const method = String(params['regional-method']).toLowerCase() - if (country === 'argentina' && method === 'mercadopago') { - return <MercadoPago /> - } - - if (country === 'brazil' && method === 'pix') { - return <MercadoPago /> - } + const routes = { + argentina: { mercadopago: <MercadoPago /> }, + brazil: { pix: <MercadoPago /> }, + } as const + const component = routes[country]?.[method] + if (component) return component return <div>Unsupported Method</div>src/hooks/useCurrency.ts (2)
33-40: Avoid stale updates: add a cancellation guard around getCurrencyPrice.If
codechanges before the promise resolves, older responses can overwrite newer state.- getCurrencyPrice(code) + let cancelled = false + getCurrencyPrice(code) .then((price) => { - setSymbol(SIMBOLS_BY_CURRENCY_CODE[code]) - setPrice(price) + if (cancelled) return + setSymbol(SYMBOLS_BY_CURRENCY_CODE[code]) + setPrice(price) }) - .catch(console.error) - .finally(() => setIsLoading(false)) + .catch(console.error) + .finally(() => { + if (!cancelled) setIsLoading(false) + }) + return () => { + cancelled = true + }
4-8: Typo: SIMBOLS → SYMBOLS.Rename for clarity; update usage.
-const SIMBOLS_BY_CURRENCY_CODE: Record<string, string> = { +const SYMBOLS_BY_CURRENCY_CODE: Record<string, string> = { ARS: 'AR$', USD: '$', BRL: 'R$', } ... - setSymbol(SIMBOLS_BY_CURRENCY_CODE[code]) + setSymbol(SYMBOLS_BY_CURRENCY_CODE[code])Also applies to: 35-35
src/components/AddMoney/consts/index.ts (1)
2107-2111: Clarify MX gating for bank transfers.
enabledBankTransferCountriesalready includes 'MX', but you additionally gate MX with|| countryCode === 'MX', forcingisSoon = true. This is contradictory.Prefer one source of truth:
- newMethod.isSoon = !isCountryEnabledForBankTransfer(countryCode) || countryCode === 'MX' + newMethod.isSoon = !isCountryEnabledForBankTransfer(countryCode) - // and if MX should be disabled, drop 'MX' from enabledBankTransferCountriessrc/components/AddMoney/components/MantecaDepositCard.tsx (2)
40-44: Enable copy for all account identifiers.Users often copy Alias, Deposit Address, and Pix Key too.
- {cbu && <PaymentInfoRow label={'CBU'} value={cbu} allowCopy={true} />} - {alias && <PaymentInfoRow label={'Alias'} value={alias} hideBottomBorder />} - {depositAddress && <PaymentInfoRow label={'Deposit Address'} value={depositAddress} hideBottomBorder />} - {pixKey && <PaymentInfoRow label={'Pix Key'} value={pixKey} hideBottomBorder />} + {cbu && <PaymentInfoRow label="CBU" value={cbu} allowCopy />} + {alias && <PaymentInfoRow label="Alias" value={alias} allowCopy hideBottomBorder />} + {depositAddress && ( + <PaymentInfoRow label="Deposit Address" value={depositAddress} allowCopy hideBottomBorder /> + )} + {pixKey && <PaymentInfoRow label="Pix Key" value={pixKey} allowCopy hideBottomBorder />}
38-38: Optional: localize static header text.Wrap "Account details" with your i18n solution for consistency.
src/app/actions/onramp.ts (4)
131-143: Validate inputs server-side (amount, supported currency) before calling the API.Prevents bad requests and gives instant feedback.
try { + // Basic server-side validation + const amount = Number(params.usdAmount) + if (!Number.isFinite(amount) || amount <= 0) { + return { error: 'Invalid amount.' } + } + if (!['ARS', 'BRL'].includes(params.currency.toUpperCase())) { + return { error: 'Unsupported currency.' } + } const response = await fetchWithSentry(`${apiUrl}/manteca/deposit`, {
145-146: Defensive JSON parsing to avoid crashes on empty/non-JSON bodies.- const data = await response.json() + let data: any + try { + data = await response.json() + } catch { + data = {} + }
149-150: Fix error copy: mention Manteca, not “guest”.- return { error: data.error || 'Failed to create on-ramp transfer for guest.' } + return { error: data.error || 'Failed to create Manteca deposit.' }
152-152: Type the success payload explicitly (or validate shape).Guarantees the return type matches MantecaDepositDetails.
- return { data } + return { data: data as MantecaDepositDetails }Optionally validate fields instead of casting.
src/components/AddMoney/components/InputAmountStep.tsx (1)
51-60: Only pass currency when fully resolved; remove non-null assertions.Prevents nulls flowing into TokenAmountInput for unsupported currencies.
- currency={ - currencyData - ? { - code: currencyData.code!, - symbol: currencyData.symbol!, - price: currencyData.price!, - } - : undefined - } + currency={ + currencyData.code && currencyData.symbol && currencyData.price + ? { + code: currencyData.code, + symbol: currencyData.symbol, + price: currencyData.price, + } + : undefined + }src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (5)
11-15: Handle potential catch-all route params (string[]).Guard for array to avoid incorrect country resolution when using
[...country]patterns.- const currentCountryName = params.country as string + const currentCountryName = (Array.isArray(params.country) ? params.country[0] : params.country) as + | string + | undefined
16-25: Make Argentina fallback explicit when lookup by path fails.Ensures we don’t silently end up with undefined when the param doesn’t match any
country.path.- const currentCountryDetails = useMemo(() => { - // check if we have country params (from dynamic route) - if (currentCountryName) { - return countryData.find( - (country) => country.type === 'country' && country.path === currentCountryName.toLowerCase() - ) - } - // Default to Argentina - return countryData.find((c) => c.id === 'AR') - }, [currentCountryName]) + const currentCountryDetails = useMemo(() => { + // Resolve by route param, else fallback to Argentina + if (currentCountryName) { + const byPath = countryData.find( + (country) => country.type === 'country' && country.path === currentCountryName.toLowerCase() + ) + if (byPath) return byPath + } + return countryData.find((c) => c.id === 'AR') + }, [currentCountryName])
33-47: Type-share builder and minor naming clarity.Avoid
any[]and make return type explicit.- const generateShareText = () => { - const textParts = [] - const currencySymbol = currentCountryDetails?.currency || 'ARS' - - textParts.push(`Amount: ${currencySymbol} ${depositDetails.depositAmount}`) + const generateShareText = (): string => { + const textParts: string[] = [] + const currencyCode = currentCountryDetails?.currency || 'ARS' + + textParts.push(`Amount: ${currencyCode} ${depositDetails.depositAmount}`)
51-52: Consider i18n for user-facing strings."Add Money", "Bank Transfer Details", and "Share Details" should likely be localized.
Also applies to: 63-68
27-31: Harden country code mapping to always emit a two-letter flag code
Normalizeidto uppercase, then prefer explicitiso2, map ISO3→ISO2 viacountryCodeMap, accept two-letter IDs, else fallback to'AR'.const countryCodeForFlag = useMemo(() => { - const countryId = currentCountryDetails?.id || 'AR' + const countryId = (currentCountryDetails?.id || 'AR').toUpperCase() - // Prefer explicit iso2, then map iso3→iso2, then accept 2-letter ids, else fallback to AR. - const iso2 = - currentCountryDetails?.iso2 || - countryCodeMap[countryId] || - (countryId.length === 2 ? countryId : undefined) || - 'AR' - return iso2.toLowerCase() + // Prefer explicit iso2, then map ISO3→ISO2, then accept two-letter IDs, else fallback to 'AR' + const iso2 = + currentCountryDetails?.iso2?.toUpperCase() || + countryCodeMap[countryId] || + (countryId.length === 2 ? countryId : 'AR') + return iso2.toLowerCase() }, [currentCountryDetails])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (12)
src/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx(1 hunks)src/app/(mobile-ui)/add-money/[country]/bank/page.tsx(2 hunks)src/app/actions/currency.ts(1 hunks)src/app/actions/onramp.ts(2 hunks)src/components/AddMoney/components/InputAmountStep.tsx(1 hunks)src/components/AddMoney/components/MantecaDepositCard.tsx(1 hunks)src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx(1 hunks)src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx(1 hunks)src/components/AddMoney/consts/index.ts(3 hunks)src/components/Global/PeanutActionDetailsCard/index.tsx(1 hunks)src/hooks/useCurrency.ts(2 hunks)src/types/manteca.types.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#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".
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#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".
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#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)/add-money/[country]/[regional-method]/page.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/AddMoney/consts/index.ts
📚 Learning: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.
Applied to files:
src/components/AddMoney/components/InputAmountStep.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.
Applied to files:
src/components/AddMoney/consts/index.ts
📚 Learning: 2025-09-03T12:23:31.800Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1173
File: src/components/Common/SavedAccountsView.tsx:86-87
Timestamp: 2025-09-03T12:23:31.800Z
Learning: In the ALL_METHODS_DATA structure from src/components/AddMoney/consts, the path field is required (not optional) for all country entries.
Applied to files:
src/components/AddMoney/consts/index.ts
🧬 Code graph analysis (6)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (3)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/components/AddMoney/consts/index.ts (1)
countryData(256-1945)src/app/actions/onramp.ts (1)
createMantecaOnramp(119-160)
src/components/AddMoney/components/InputAmountStep.tsx (5)
src/components/AddMoney/consts/index.ts (1)
CountryData(139-147)src/hooks/useCurrency.ts (1)
useCurrency(10-48)src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(4-19)src/components/Global/Icons/Icon.tsx (1)
Icon(189-198)src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
src/components/AddMoney/components/MantecaDepositCard.tsx (3)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
PeanutActionDetailsCard(50-235)src/constants/zerodev.consts.ts (1)
PEANUT_WALLET_TOKEN_SYMBOL(21-21)src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(7-81)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/components/AddMoney/consts/index.ts (2)
countryData(256-1945)countryCodeMap(1976-2018)
src/app/actions/onramp.ts (2)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/utils/sentry.utils.ts (1)
fetchWithSentry(11-89)
src/app/actions/currency.ts (2)
src/utils/__mocks__/next-cache.ts (1)
unstable_cache(1-1)src/utils/sentry.utils.ts (1)
fetchWithSentry(11-89)
🔇 Additional comments (8)
src/types/manteca.types.ts (1)
1-5: Type looks good.Interface is minimal and clear. If backend fields differ, add a server DTO and map to this UI type.
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)
320-322: Confirm flow handoff to MercadoPago avoids duplicate “amount” step.You render at showDetails for AR/BR, while this page already ran an amount step and created onramp data. Ensure MercadoPago reads OnrampFlow context and directly shows deposit details if data exists, without re-prompting for amount or recreating the deposit.
src/components/AddMoney/consts/index.ts (3)
2020-2021: LGTM: AR enabled for bank transfers.Adding 'AR' to the enabled set makes sense alongside 'US' and 'MX'.
2113-2116: LGTM: AR Mercado Pago path wired.Pathing
/add-money/${country.path}/mercadopagofor AR looks correct given the new route.
2125-2133: Keeppathas a string: theALL_METHODS_DATAtype requirespathto be defined, so setting it toundefinedwill break the type contract. If you need a placeholder, use'#'or handle disabled links in the component logic instead.Likely an incorrect or invalid review comment.
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (1)
18-22: Resolved: MercadoPago only reachable for Argentina and Brazil
Routing insrc/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx(only forcountry==='argentina'&&method==='mercadopago'andcountry==='brazil'&&method==='pix') and insrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx(only whenselectedCountry.id==='AR'||'BR') already gates access appropriately.src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
49-70: Solid flow composition.Clean, readable composition of header, details card, and share action. Defaults make the UI resilient when params are missing.
61-66: Keep the async wrapper to satisfy the prop type
TheShareButtonProps.generateTextsignature requires() => Promise<string>, butgenerateShareTextreturns astring. Theasync () => generateShareText()wrapper is therefore necessary unless you convertgenerateShareTextitself to anasyncfunction returningPromise<string>.Likely an incorrect or invalid review comment.
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx
Show resolved
Hide resolved
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
Show resolved
Hide resolved
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/components/AddMoney/consts/index.ts (1)
2056-2069: SEPA guard is always false; SEPA Instant never added.
countrySpecificWithdrawMethods['Germany']is undefined (no "Germany" key), so the whole condition fails. This suppresses SEPA Instant for all EUR countries.Apply:
- // 2. add SEPA for EUR countries if not already present from specifics - if (country.currency === 'EUR' && countrySpecificWithdrawMethods['Germany']) { + // 2. add SEPA for EUR countries if not already present from specifics + if (country.currency === 'EUR') { // Germany as proxy for SEPA availability const sepaExists = withdrawList.some((m) => m.title === 'SEPA Instant') if (!sepaExists) { withdrawList.push({ id: `${countryCode.toLowerCase()}-sepa-instant-withdraw`, icon: 'bank' as IconName, title: 'SEPA Instant', description: 'EU-wide real-time bank transfers.', isSoon: false, }) } }
🧹 Nitpick comments (4)
src/components/AddMoney/consts/index.ts (4)
2122-2123: Replace TODO with an actionable test plan.Add an e2e covering: selection of AR → Mercado Pago → navigation to
/add-money/argentina/mercadopagoand happy-path Manteca deposit init.I can scaffold a Playwright test if you want.
2125-2144: Remove dead commented scaffold or guard behind a feature flag.Large commented blocks rot quickly. Either delete or hide behind a
FEATURE_MANTECA_ADD_METHODSflag and keep active.Apply:
- // Add country-specific add methods (same as withdraw methods for consistency) - // if (UPDATED_DEFAULT_ADD_MONEY_METHODS && UPDATED_DEFAULT_ADD_MONEY_METHODS.length > 0) { - // UPDATED_DEFAULT_ADD_MONEY_METHODS.forEach((method) => { - // const currMethod = { - // id: `${countryCode.toLowerCase()}-${method.title.toLowerCase().replace(/\s+/g, '-')}-add`, - // icon: method.icon ?? undefined, - // title: method.title, - // description: method.description, - // isSoon: true, - // path: '', - // } - // - // // TODO: Check with Jota regarding Brazil manteca support - // - // // if (method.title === 'Pix' && countryCode === 'BR') { - // // currMethod.path = `/add-money/${country.path}/pix` - // // currMethod.isSoon = false - // // } - // currentAddMethods.push(currMethod) - // }) - // }
2099-2119: Ensurepathis populated for all add methods shown in UI.Past breakage: consumers expected
pathto exist for all country entries. Apple/Google items currently keepisSoon: truebut nopath, which risks runtime access. Either supply a placeholderpath(e.g.,'#') or filter out entries without a path before rendering.I can patch the map to set
path = '#'for coming-soon items, or we can hide them.
2113-2116: Verify Mercado Pago route and enhance error handling
Slugmercadopagocorrectly matches the dynamic segment insrc/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx. The current fallback (<div>Unsupported Method</div>) should be replaced with Next.js’snotFound()(or a proper 404) for feature-gated or invalid combinations. Inside the<MercadoPago />component, add a disabled/error state guard for cases whereisSoonis false but the API is unreachable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/AddMoney/consts/index.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.
Applied to files:
src/components/AddMoney/consts/index.ts
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#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/components/AddMoney/consts/index.ts
📚 Learning: 2025-09-03T12:23:31.800Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1173
File: src/components/Common/SavedAccountsView.tsx:86-87
Timestamp: 2025-09-03T12:23:31.800Z
Learning: In the ALL_METHODS_DATA structure from src/components/AddMoney/consts, the path field is required (not optional) for all country entries.
Applied to files:
src/components/AddMoney/consts/index.ts
🔇 Additional comments (1)
src/components/AddMoney/consts/index.ts (1)
2020-2020: Confirm MX add-money vs withdraw asymmetry: MX is listed inenabledBankTransferCountries, so the withdraw route (/withdraw/mx/bank) is live (isSoon=false), but the add-money route (/add-money/mx/bank) is forced to coming soon (isSoon=true). Is this distinction intentional?
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/components/Profile/components/ProfileHeader.tsx (1)
37-37: Remove debug log before mergeStray console log in a frequently rendered component.
- console.log('isVerified', isVerified) + // removed debug logsrc/hooks/useDetermineBankRequestType.ts (1)
28-28: Optional: centralize KYC approval checkReduce duplication and future drift by using a small helper.
// Add near the top of this file or a shared util: const isBridgeKycApproved = (s?: { bridgeKycStatus?: string }) => s?.bridgeKycStatus === 'approved'-const payerKycApproved = user?.user?.bridgeKycStatus === 'approved' +const payerKycApproved = isBridgeKycApproved(user?.user) -const requesterKycApproved = requesterDetails?.bridgeKycStatus === 'approved' +const requesterKycApproved = isBridgeKycApproved(requesterDetails)Also applies to: 46-46
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/components/Profile/components/ProfileHeader.tsx(1 hunks)src/hooks/useDetermineBankRequestType.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-20T09:08:19.266Z
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#1112
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:336-343
Timestamp: 2025-08-20T09:08:19.266Z
Learning: In the KYC flow implementation, `setJustCompletedKyc` must be called after `await fetchUser()` in the `handleKycSuccess` callback. Setting `justCompletedKyc` before fetching the user would cause a re-fetching loop because `handleKycSuccess` is set in a useEffect inside the KYC hook, which would cause the UI flow to get stuck in one view.
Applied to files:
src/hooks/useDetermineBankRequestType.ts
⏰ 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: prettier
🔇 Additional comments (2)
src/hooks/useDetermineBankRequestType.ts (2)
28-28: LGTM: switched to bridgeKycStatus with safe chainingUsing
user?.user?.bridgeKycStatus === 'approved'aligns with the new source of truth and avoids undefined access.
46-46: LGTM: requester KYC check updated consistently
requesterDetails?.bridgeKycStatus === 'approved'is correct and consistent with payer check.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
59-66: Pass a display currency symbol, not the ISO code.
currencySymbolshould be something like$/AR$, notARS.<MantecaDepositCard countryCodeForFlag={countryCodeForFlag} - currencySymbol={currentCountryDetails?.currency || 'ARS'} + currencySymbol={getDisplayCurrencySymbol(currentCountryDetails?.currency ?? 'ARS')} amount={depositDetails.depositAmount} cbu={depositDetails.depositAddress} alias={depositDetails.depositAlias} isMercadoPago={source === 'regionalMethod'} />Add import near the top (adjust path to your existing util):
+import { getDisplayCurrencySymbol } from '@/utils/currency'
39-53: Share text should also use the display symbol.Avoid emitting
ARS 1000; prefer$ 1.000/AR$ 1.000per your utility.const generateShareText = () => { const textParts = [] - const currencySymbol = currentCountryDetails?.currency || 'ARS' + const currencySymbol = getDisplayCurrencySymbol(currentCountryDetails?.currency ?? 'ARS') - textParts.push(`Amount: ${currencySymbol} ${depositDetails.depositAmount}`) + textParts.push(`Amount: ${currencySymbol} ${depositDetails.depositAmount}`)
🧹 Nitpick comments (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (1)
68-73: Tighten ShareButton props: no need for async wrapper; title should reflect source.- <ShareButton - generateText={async () => generateShareText()} - title="Bank Transfer Details" + <ShareButton + generateText={generateShareText} + title={source === 'regionalMethod' ? 'Payment Details' : 'Bank Transfer Details'} variant="purple" className="w-full" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx(1 hunks)src/app/(mobile-ui)/add-money/[country]/bank/page.tsx(2 hunks)src/app/actions/onramp.ts(2 hunks)src/components/AddMoney/components/MantecaDepositCard.tsx(1 hunks)src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx(1 hunks)src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx(1 hunks)src/components/AddMoney/consts/index.ts(2 hunks)src/components/Global/PeanutActionDetailsCard/index.tsx(5 hunks)src/hooks/useCurrency.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
- src/components/AddMoney/components/MantecaDepositCard.tsx
- src/components/Global/PeanutActionDetailsCard/index.tsx
- src/hooks/useCurrency.ts
- src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx
- src/app/actions/onramp.ts
- src/app/(mobile-ui)/add-money/[country]/[regional-method]/page.tsx
- src/components/AddMoney/consts/index.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.
Applied to files:
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
🧬 Code graph analysis (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/components/AddMoney/consts/index.ts (2)
countryData(257-2425)countryCodeMap(2456-2498)
🔇 Additional comments (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (1)
62-63: No action needed:amountprop expects a string
MantecaDepositCardProps.amountis defined asstring, so passingdepositDetails.depositAmount(a string) is correct.
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (1)
34-43: Don’t advance without validated data; destructure the API response.Avoid setting undefined depositDetails (blank screen risk) by destructuring and checking both error and data before proceeding.
- const depositData = await createMantecaOnramp({ + const { data, error } = await createMantecaOnramp({ usdAmount: tokenUSDAmount.replace(/,/g, ''), currency: selectedCountry.currency, }) - if (depositData.error) { - setError(depositData.error) + if (error || !data) { + setError(error || 'Failed to create deposit.') return } - setDepositDetails(depositData.data) + setDepositDetails(data) setStep('depositDetails')
🧹 Nitpick comments (3)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (3)
12-16: Narrow the step type to prevent invalid states.Type the step as a union instead of a free-form string.
interface MercadoPagoProps { source: 'bank' | 'regionalMethod' } +type Step = 'inputAmount' | 'depositDetails' + - const [step, setStep] = useState('inputAmount') + const [step, setStep] = useState<Step>('inputAmount')
1-3: Lazy‑load deposit details to trim the initial bundle.Deposit details render only after submission; load it dynamically.
-import React, { FC, useMemo, useState } from 'react' -import MercadoPagoDepositDetails from './MercadoPagoDepositDetails' +import React, { FC, useMemo, useState } from 'react' +import dynamic from 'next/dynamic' +const MercadoPagoDepositDetails = dynamic(() => import('./MercadoPagoDepositDetails')) import InputAmountStep from '../../InputAmountStep'
44-47: Log errors with the correct severity.Use console.error for thrown errors.
- console.log(error) + console.error(error)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 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/AddMoney/components/RegionalMethods/MercadoPago/index.tsx
📚 Learning: 2025-08-22T07:28:32.281Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#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/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx
🧬 Code graph analysis (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (3)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/components/AddMoney/consts/index.ts (1)
countryData(257-2425)src/app/actions/onramp.ts (1)
createMantecaOnramp(122-163)
🔇 Additional comments (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx (1)
27-30: Nice: idempotent submit + currency guard.Prevents double submissions and empty-currency calls. Looks good.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
33-36: Return a guaranteed ISO2 flag code (prefer iso2, then 3→2 map, then safe fallback).Prevents 3‑letter IDs from yielding invalid flags; aligns with prior guidance on ISO2 vs ISO3 and the countryCodeMap normalization.
- const countryCodeForFlag = useMemo(() => { - const countryId = currentCountryDetails?.id || 'AR' - return countryId.toLowerCase() - }, [currentCountryDetails]) + const countryCodeForFlag = useMemo(() => { + const iso2 = currentCountryDetails?.iso2 + const id = (currentCountryDetails?.id ?? 'AR').toUpperCase() + const mapped = countryCodeMap[id] + const code = (iso2 ?? mapped ?? 'AR').toUpperCase() + return code.length === 2 ? code.toLowerCase() : 'ar' + }, [currentCountryDetails])
58-65: Pass a display symbol, not the ISO code, to currencySymbol.MantecaDepositCard expects a symbol (e.g.,
$/R$ ), not “ARS/BRL”.- currencySymbol={currentCountryDetails?.currency || 'ARS'} + currencySymbol={getDisplayCurrencySymbol(currentCountryDetails?.currency || 'ARS')}Verification (find the helper and confirm prop expectations):
#!/bin/bash # Locate the helper and its export rg -nP -C2 'getDisplayCurrencySymbol|getCurrencySymbol' src | head -n 50 # Inspect MantecaDepositCard prop types/usage of currencySymbol rg -nP -C3 'MantecaDepositCard' src | head -n 50 rg -nP -C3 'currencySymbol\s*[:=]' src | sed -n '1,120p'
🧹 Nitpick comments (3)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (3)
38-43: Rename local variable to reflect ISO code, not a symbol.Improves clarity in share text generation.
- const currencySymbol = currentCountryDetails?.currency || 'ARS' + const currencyCode = currentCountryDetails?.currency || 'ARS' @@ - textParts.push(`Amount: ${currencySymbol} ${depositDetails.depositAmount}`) + textParts.push(`Amount: ${currencyCode} ${depositDetails.depositAmount}`)
68-69: Drop unnecessary async wrapper.generateShareText is synchronous; avoid an extra Promise.
- generateText={async () => generateShareText()} + generateText={() => generateShareText()}
69-69: Make Share button title source‑aware.Prevents “Bank Transfer Details” label when coming from a regional (Mercado Pago) flow.
- title="Bank Transfer Details" + title={source === 'regionalMethod' ? 'Mercado Pago Transfer Details' : 'Bank Transfer Details'}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.
Applied to files:
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
📚 Learning: 2025-08-14T14:36:18.758Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:0-0
Timestamp: 2025-08-14T14:36:18.758Z
Learning: Bridge API requires ISO3 country codes (3-letter codes like "USA", "GBR") while flag display components need ISO2 codes (2-letter codes like "US", "GB").
Applied to files:
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx
🧬 Code graph analysis (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (2)
src/types/manteca.types.ts (1)
MantecaDepositDetails(1-5)src/components/AddMoney/consts/index.ts (1)
countryData(257-2425)
🔇 Additional comments (1)
src/components/AddMoney/components/RegionalMethods/MercadoPago/MercadoPagoDepositDetails.tsx (1)
54-66: Solid composition and defaults.Good use of router.back(), sensible AR fallback, and clear data wiring into MantecaDepositCard.
jjramirezn
left a comment
jjramirezn
left a comment
There was a problem hiding this comment.
Looks good, please BEFORE MERGING do the coderabbit one and any other of the comments you deem useful
src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx
Outdated
Show resolved
Hide resolved
… step state in MercadoPago component
2 participants
Mercado pago and bank flow for argentina
As discussed - Brazil will be integrated later