HOTFIX - IBAN country detection and incorrect bank acc details

[Zishan-7]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	✅ Ready	Preview	Comment	Aug 14, 2025 5:11pm

[coderabbitai]

Walkthrough

Adds withdraw-specific utilities (IBAN→country, US/MX validators, country-code mapping) and updates withdraw components to pass a mapped 3-letter country code, accept a countryName prop, and enforce IBAN/CLABE/US account validation before submit.

Changes

Cohort / File(s)	Summary of changes
Withdraw utilities (new) src/utils/withdraw.utils.ts	New exports: getCountryFromIban, validateUSBankAccount, validateMXCLabeAccount, getCountryCodeForWithdraw. Implements IBAN country extraction (2-letter with 3-letter fallback via countryCodeMap), US account validation, MX CLABE checks (format, bank/branch, check digit), and country-code mapping helper.
Dynamic bank-account form src/components/AddWithdraw/DynamicBankAccountForm.tsx	Props extended with countryName?: string; imports withdraw utils; selects effective country from props/route; treats USA/MX as non-IBAN, enforces IBAN→country consistency, adds CLABE and US-account validation, adjusts payload (countryCode, address.country, iban/routingNumber usage) and onBlur/validation behavior.
Withdraw country mapping usage src/components/AddWithdraw/AddWithdrawCountriesList.tsx, src/components/Claim/Link/views/BankFlowManager.view.tsx	Replace passing of selectedCountry.id/currentCountry.id with getCountryCodeForWithdraw(...) to supply a 3-letter country code; add/propagate countryName (country title) to DynamicBankAccountForm.
Consts / imports touched src/components/AddMoney/consts (referenced), src/components/AddWithdraw/*	Components now reference countryCodeMap and countryData via imports; mapping used to translate between 2- and 3-letter country codes for withdraw flows.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: bic fetching #1050 — Modifies DynamicBankAccountForm IBAN handling and submission logic (overlaps IBAN validation/payload changes).
• feat: withdraw flow integrations #924 — Edits the same AddWithdraw components and introduces/uses withdraw utilities and countryCodeMap.
• prod to staging #1092 — Adds CLABE (Mexico) support to withdraw flows, overlapping MX validation and CLABE handling.

Suggested reviewers

• jjramirezn
• kushagrasarathe
• FacuBozzi

---

📜 Recent 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 settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8890048 and d5b931a.

📒 Files selected for processing (1)

• src/utils/withdraw.utils.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/utils/withdraw.utils.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: Deploy-Preview

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/country-code-error

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

src/components/AddWithdraw/AddWithdrawCountriesList.tsx (2)

70-93: Consider simplifying the 3-letter code resolution logic

The current implementation has unnecessary complexity when looking up 3-letter codes. The logic checks if baseCountry.id equals the key or if countryCodeMap[key] equals baseCountry.id, but this seems redundant given the structure of countryCodeMap.

Based on the countryCodeMap structure (3-letter → 2-letter mappings), simplify the logic:

 const currentCountry = useMemo(() => {
     if (!baseCountry) return undefined
 
-    // Prioritize 3-letter country code if a mapping exists
-    const threeLetterCode = Object.keys(countryCodeMap).find(
-        (key) => key === baseCountry.id || countryCodeMap[key] === baseCountry.id
-    )
+    // If baseCountry.id is already a 3-letter code, use it directly
+    // Otherwise, find the 3-letter code that maps to this 2-letter code
+    const threeLetterCode = countryCodeMap[baseCountry.id] 
+        ? baseCountry.id // Already a 3-letter code
+        : Object.keys(countryCodeMap).find((key) => countryCodeMap[key] === baseCountry.id)
 
     if (threeLetterCode) {
         const countryWithThreeLetterCode = countryData.find((c) => c.id === threeLetterCode)
         if (countryWithThreeLetterCode) {
             return countryWithThreeLetterCode
         }
         // If no dedicated 3-letter code object exists, create a synthetic one
         return { ...baseCountry, id: threeLetterCode }
     }
 
     return baseCountry
 }, [baseCountry])

---

209-214: Add error handling for undefined router

While checking for missing amountToWithdraw, the code assumes router is always defined. Consider adding defensive checks.

 useEffect(() => {
     if (flow !== 'withdraw') {
         return
     }
     if (!amountToWithdraw) {
         console.error('Amount not available in WithdrawFlowContext for withdrawal, redirecting.')
-        router.push('/withdraw')
+        router?.push('/withdraw')
         return
     }
 }, [amountToWithdraw, router, flow])

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

104-108: Verify IBAN validation before BIC retrieval

The IBAN country validation happens after extracting names but before BIC retrieval. This is good placement, but ensure that the validation message is user-friendly.

Consider making the error message more specific:

-    setSubmissionError('IBAN does not match the selected country')
+    const detectedCountry = getCountryFromIban(accountNumber)
+    setSubmissionError(`This IBAN belongs to ${detectedCountry}, but you selected ${currentCountryTitle}. Please use an IBAN from ${currentCountryTitle}.`)

src/utils/withdraw.utils.ts (1)

17-17: Consider validating minimum IBAN length

IBANs must have at least 2 characters for the country code. While substring(0, 2) won't throw an error on shorter strings, it would be clearer to explicitly validate the length.

 // Extract the first 2 characters as country code
+if (cleanIban.length < 2) {
+    return null
+}
 const countryCode = cleanIban.substring(0, 2)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fbb42c6 and 7d513bb.

📒 Files selected for processing (3)

• src/components/AddWithdraw/AddWithdrawCountriesList.tsx (4 hunks)
• src/components/AddWithdraw/DynamicBankAccountForm.tsx (2 hunks)
• src/utils/withdraw.utils.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (4)

📓 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/components/AddWithdraw/DynamicBankAccountForm.tsx
• src/utils/withdraw.utils.ts
• src/components/AddWithdraw/AddWithdrawCountriesList.tsx

📚 Learning: 2024-10-25T11:33:46.776Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

🧬 Code Graph Analysis (3)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

src/utils/withdraw.utils.ts (1)

• getCountryFromIban (8-33)

src/utils/withdraw.utils.ts (1)

src/components/AddMoney/consts/index.ts (2)

• countryData (255-1943)
• countryCodeMap (1974-2016)

src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1)

src/components/AddMoney/consts/index.ts (3)

• countryData (255-1943)
• countryCodeMap (1974-2016)
• COUNTRY_SPECIFIC_METHODS (1945-1945)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (2)

src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1)

255-255: Good use of baseCountry for method lookup

Using baseCountry instead of currentCountry for method lookup is the correct approach, as it ensures consistency with the original URL-based country selection.

src/utils/withdraw.utils.ts (1)

8-33: LGTM! Well-structured utility function

The implementation correctly handles IBAN country code extraction with proper null checks, normalization, and a two-step lookup strategy (2-letter then 3-letter codes).

[coderabbitai]

Actionable comments posted: 1

🔭 Outside diff range comments (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

89-97: Inconsistent US detection ('US' vs 'USA') causes logic divergence and missing routingNumber in payload

On Line 89 you check for 'US', while on Lines 169-172 the check uses 'USA'. This leads to:

• Different isIban branches in onSubmit vs render/validation.
• Potentially omitting routingNumber from the payload for US because isUs may be false during submit.

Unify on the 3-letter code ('USA') across the file.

Apply this diff to fix in this block:

-                const isUs = country.toUpperCase() === 'US'
+                const isUs = country.toUpperCase() === 'USA'
                 const isMx = country.toUpperCase() === 'MX'
                 const isIban = isUs || isMx ? false : isIBANCountry(country)

And ensure the bottom block (Lines 169-172) remains consistent with 'USA' (see separate comment).

♻️ Duplicate comments (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

104-108: IBAN country check compares title to URL slug; normalize with a slug conversion

getCountryFromIban returns a country title ("United Kingdom"), but countryName from the route is typically a slug ("united-kingdom"). The comparison will incorrectly fail for many countries.

Apply this diff to normalize both to slugs and to guard for array params:

-                if (isIban && getCountryFromIban(accountNumber)?.toLowerCase() !== countryName) {
+                const paramSlug = Array.isArray(countryName) ? countryName[0] : (countryName ?? '')
+                const ibanCountrySlug = toSlug(getCountryFromIban(accountNumber) ?? '')
+                if (isIban && ibanCountrySlug && ibanCountrySlug !== paramSlug) {
                     setIsSubmitting(false)
                     setSubmissionError('IBAN does not match the selected country')
                     return
                 }

Add this small helper (outside this block, e.g., near the top of the file):

function toSlug(input: string): string {
  return input.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
}

Alternatively, resolve the current country title from countryData using the current slug and compare titles; or change getCountryFromIban to return a canonical identifier (slug or 3-letter id) and compare those.

🧹 Nitpick comments (4)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

260-282: Optional: add autocomplete hints for bank inputs (UX improvement)

Per our prior guidance, set autoComplete="bank-account-number" on the IBAN/Account Number/CLABE fields (and "cc-number" is not appropriate here). If BaseInput supports it, pass autoComplete in renderInput for isIban/us/mx branches.

src/utils/withdraw.utils.ts (3)

1-1: Decouple utils from UI layer; move shared data to a non-UI module

Importing countryData and countryCodeMap from a components path creates an undesirable dependency from domain/utils into UI. Consider relocating these constants to a shared non-UI location (e.g., src/shared/consts or src/lib/consts) and importing from there.

---

3-29: Add minimal input validation to guard empty/short IBANs

Edge case: IBANs shorter than 2 chars will yield an empty country code. Early-return null to avoid needless searches and make intent explicit.

Apply this diff:

 export const getCountryFromIban = (iban: string): string | null => {
   // Remove spaces and convert to uppercase
   const cleanIban = iban.replace(/\s/g, '').toUpperCase()

   // Extract the first 2 characters as country code
   const countryCode = cleanIban.substring(0, 2)
+  if (countryCode.length < 2) return null

---

31-35: Unify validator return typing for reuse

Both validators return { isValid: boolean; error: string | null }. Define and export a ValidationResult type to prevent divergence and improve DX.

Proposed addition:

export type ValidationResult = { isValid: boolean; error: string | null }

Then annotate both validateUSBankAccount and validateMXCLabeAccount to return ValidationResult.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9ffb9df and 3db9983.

📒 Files selected for processing (2)

• src/components/AddWithdraw/DynamicBankAccountForm.tsx (6 hunks)
• src/utils/withdraw.utils.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (4)

📓 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/utils/withdraw.utils.ts
• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-11-26T12:06:11.603Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

🧬 Code Graph Analysis (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

src/utils/withdraw.utils.ts (3)

• getCountryFromIban (8-29)
• validateMXCLabeAccount (100-180)
• validateUSBankAccount (36-92)

⏰ 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 (6)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (4)

16-16: LGTM: Correctly sourcing new withdraw utilities

The new utilities are imported from a centralized module. No concerns.

---

256-258: Good: CLABE field now validates with domain-specific logic

Using validateMXCLabeAccount(value).isValid improves UX and correctness over length-only checks.

---

279-279: Good: US account number validation switched to dedicated validator

validateUSBankAccount(value).isValid is appropriate here. Pairs well with the routing number validator below.

---

169-172: Ignore US vs USA mismatch — search found only this occurrence

Search output shows a single match (the lines you highlighted), so there's no inconsistent 'US' check elsewhere to align.

• src/components/AddWithdraw/DynamicBankAccountForm.tsx:170-171

const isMx = country.toUpperCase() === 'MX'
const isUs = country.toUpperCase() === 'USA'
const isIban = isUs || isMx ? false : isIBANCountry(country)

Original suggestion to align a submit block is not applicable — ignore the previous comment.

Likely an incorrect or invalid review comment.

src/utils/withdraw.utils.ts (2)

36-92: LGTM: US bank account validator is clear and reasonably strict

Covers length, digits, zero-only, obvious sequential/repeated patterns. Straightforward and maintainable.

---

100-180: LGTM: CLABE validator with check digit and structure checks

• Proper cleaning and length/digit checks
• Check digit validation
• Basic bank/branch code sanity checks

Note: The check-digit approach sums products and mods at the end, which yields the same remainder as per-digit mod 10. Good.

[coderabbitai]

Actionable comments posted: 3

♻️ Duplicate comments (2)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)

104-108: Normalize both sides when comparing IBAN-derived country vs selected country

Currently only the IBAN-derived country is lowercased. If params ever stop being all-lowercase, this will falsely fail.

Apply this diff:

-                if (isIban && getCountryFromIban(accountNumber)?.toLowerCase() !== countryName) {
+                if (isIban && getCountryFromIban(accountNumber)?.toLowerCase() !== String(countryName).toLowerCase()) {
                     setIsSubmitting(false)
                     setSubmissionError('IBAN does not match the selected country')
                     return
                 }

---

89-92: Harden US/MX detection and DRY country normalization in DynamicBankAccountForm.tsx

Normalize the incoming country once, accept both 2- and 3-letter codes for US/MX, and make IBAN detection tolerant of either code form. Update both occurrences in the file.

• Files/locations to change:
  • src/components/AddWithdraw/DynamicBankAccountForm.tsx
    • isIBANCountry (top of file)
    • onSubmit local detection (around where isUs/isMx/isIban are defined)
    • top-level detection (the duplicated isUs/isMx/isIban block)

Apply this diff:

--- a/src/components/AddWithdraw/DynamicBankAccountForm.tsx
+++ b/src/components/AddWithdraw/DynamicBankAccountForm.tsx
@@
-const isIBANCountry = (country: string) => {
-    return countryCodeMap[country.toUpperCase()] !== undefined
-}
+const isIBANCountry = (country: string) => {
+    const upper = country.toUpperCase()
+    // true if it's a 3-letter key that maps to a 2-letter code
+    if (countryCodeMap[upper] !== undefined) return true
+    // or if it's already a 2-letter code present among mapped values
+    return Object.values(countryCodeMap).includes(upper)
+}
@@
-                const isUs = country.toUpperCase() === 'USA'
-                const isMx = country.toUpperCase() === 'MX'
-                const isIban = isUs || isMx ? false : isIBANCountry(country)
+                const upper = country.toUpperCase()
+                const isUs = upper === 'USA' || upper === 'US'
+                const isMx = upper === 'MX' || upper === 'MEX'
+                const isIban = !(isUs || isMx) && isIBANCountry(country)
@@
-        const isMx = country.toUpperCase() === 'MX'
-        const isUs = country.toUpperCase() === 'USA'
-        const isIban = isUs || isMx ? false : isIBANCountry(country)
+        const upper = country.toUpperCase()
+        const isUs = upper === 'USA' || upper === 'US'
+        const isMx = upper === 'MX' || upper === 'MEX'
+        const isIban = !(isUs || isMx) && isIBANCountry(country)

Reasoning: your repo frequently passes both 2- and 3-letter country ids (countryCodeMap + currentCountry logic), and the file currently computes isUs/isMx twice using only 3-letter checks. The change centralizes normalization, covers 'US'/'USA' and 'MX'/'MEX', and makes isIBANCountry robust to either code form. Please apply to both duplicated checks in DynamicBankAccountForm.tsx and run the existing ripgrep checks to ensure no other code assumes only one form.

🧹 Nitpick comments (2)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)

127-131: Sanitize account number more thoroughly (preserve IBAN alphanumerics, remove spaces/hyphens)

Users often paste numbers with hyphens. Strip spaces and hyphens so US/CLABE inputs are clean; IBANs can also safely drop hyphens.

Apply this diff:

-                    accountNumber: accountNumber.replace(/\s/g, ''),
+                    accountNumber: accountNumber.replace(/[\s-]/g, ''),

---

188-201: Nit: consider inputMode and autocomplete hints for numeric fields

For 'CLABE', 'Account Number' (US), and 'Routing Number', set inputMode="numeric" and autocomplete="bank-account-number" (per prior guideline) to improve mobile keyboard and autofill.

If BaseInput forwards these props, pass them in the renderInput calls for those fields:

<BaseInput
  {...field}
  inputMode="numeric"
  autoComplete="bank-account-number"
  ...
/>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3db9983 and 9ee4dea.

📒 Files selected for processing (1)

• src/components/AddWithdraw/DynamicBankAccountForm.tsx (6 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/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2025-08-13T18:22:01.888Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.888Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-11-26T12:06:11.603Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

🧬 Code Graph Analysis (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

src/utils/withdraw.utils.ts (3)

• getCountryFromIban (8-29)
• validateMXCLabeAccount (100-180)
• validateUSBankAccount (36-92)

⏰ 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/AddWithdraw/DynamicBankAccountForm.tsx (1)

16-16: Good addition: centralizing validations in withdraw.utils

Importing getCountryFromIban, validateMXCLabeAccount, and validateUSBankAccount improves cohesion and avoids duplicating validation logic in the UI layer.

[coderabbitai]

Actionable comments posted: 1

📜 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 settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9ee4dea and 444e3b7.

📒 Files selected for processing (3)

• src/components/AddWithdraw/AddWithdrawCountriesList.tsx (4 hunks)
• src/components/Claim/Link/views/BankFlowManager.view.tsx (2 hunks)
• src/utils/withdraw.utils.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/utils/withdraw.utils.ts
• src/components/AddWithdraw/AddWithdrawCountriesList.tsx

🧰 Additional context used

🧠 Learnings (4)

📓 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/components/Claim/Link/views/BankFlowManager.view.tsx

📚 Learning: 2025-08-13T18:22:01.888Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.888Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.

Applied to files:

• src/components/Claim/Link/views/BankFlowManager.view.tsx

📚 Learning: 2024-10-25T11:33:46.776Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/Claim/Link/views/BankFlowManager.view.tsx

🧬 Code Graph Analysis (1)

src/components/Claim/Link/views/BankFlowManager.view.tsx (1)

src/utils/withdraw.utils.ts (1)

• getCountryCodeForWithdraw (183-193)

⏰ 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/Claim/Link/views/BankFlowManager.view.tsx (1)

23-23: Import looks correct and aligns this view with the new withdraw-country mapping.

Brings in the withdraw-specific mapper and keeps concerns decoupled from AddMoney utilities. No issues.

[coderabbitai]

Actionable comments posted: 3

♻️ Duplicate comments (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

90-93: Fix country detection: handle US/USA and MX/MEX; avoid duplicate logic (critical)

Currently only 'USA' and 'MX' are recognized. When country is 'US' or 'MEX' (very likely since upstream now passes 3-letter codes), Mexico is misclassified as IBAN, rendering the wrong fields and validations. This also duplicates the flag computation in two places, risking divergence.

Unify detection and support both 2- and 3-letter variants once, then reuse everywhere.

Add a single memoized definition (place near the top, e.g., after useImperativeHandle):

// Add near line 86 (outside diff context)
const { isUs, isMx, isIban } = useMemo(() => {
  const upper = country.toUpperCase()
  const isUs = upper === 'USA' || upper === 'US'
  const isMx = upper === 'MEX' || upper === 'MX'
  return { isUs, isMx, isIban: !(isUs || isMx) && isIBANCountry(country) }
}, [country])

Then apply these diffs to remove local recomputation and use the memoized flags:

@@
-                const isUs = country.toUpperCase() === 'USA'
-                const isMx = country.toUpperCase() === 'MX'
-                const isIban = isUs || isMx ? false : isIBANCountry(country)
+                // use memoized flags
+                const { isUs, isMx, isIban } = { isUs, isMx, isIban }

@@
-        const isMx = country.toUpperCase() === 'MX'
-        const isUs = country.toUpperCase() === 'USA'
-        const isIban = isUs || isMx ? false : isIBANCountry(country)
+        // use memoized flags
+        const { isUs, isMx, isIban } = { isUs, isMx, isIban }

Also applies to: 172-175

🧹 Nitpick comments (4)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

276-285: Nit: Add autocomplete for banking fields for better UX

To align with prior guidance, set autocomplete hints for bank inputs.

Suggested (if BaseInput forwards autoComplete):

• For IBAN account number: autoComplete="bank-account-number"
• For US account number: autoComplete="bank-account-number"
• For routing number: autoComplete="off" or a specific hint if supported by your design system
• For CLABE: autoComplete="off" (no standard hint)

Example inside renderInput call sites:

<BaseInput ... autoComplete={name === 'accountNumber' || name === 'clabe' ? 'bank-account-number' : 'off'} />

Also applies to: 293-298

src/utils/withdraw.utils.ts (3)

8-27: Optional: early validation in getCountryFromIban

This helper assumes the first 2 chars are a country code. Consider short-circuiting for strings shorter than 2 or non-letter prefixes to avoid unnecessary lookups.

Example:

if (!iban || iban.length < 2) return null

---

34-90: US account validator: acceptable for hotfix; consider broadening sequential checks later

The validator is fine for now. In a follow-up, you could generalize sequential detection (e.g., detect any increasing/decreasing 6+ sequence) and dedupe the two regex returns into a single constant message for maintainability.

---

1-27: Add unit tests for validators and code mapping

Given these utilities gate submissions, add unit tests for:

• CLABE check digit (known valid/invalid samples, edge cases)
• US account validator (length, non-digits, sequential/repeated patterns)
• getCountryFromIban (various IBANs with/without spaces)
• getCountryCodeForWithdraw (2-letter/3-letter, lowercase inputs)

I can scaffold Jest tests with sample fixtures if helpful.

Also applies to: 181-191

📜 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 settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 444e3b7 and 7f49b1d.

📒 Files selected for processing (3)

• src/components/AddWithdraw/DynamicBankAccountForm.tsx (8 hunks)
• src/components/Claim/Link/views/BankFlowManager.view.tsx (2 hunks)
• src/utils/withdraw.utils.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/Claim/Link/views/BankFlowManager.view.tsx

🧰 Additional context used

🧠 Learnings (7)

📓 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/utils/withdraw.utils.ts
• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2025-08-13T18:22:01.888Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.888Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.

Applied to files:

• src/utils/withdraw.utils.ts
• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-11-26T12:06:11.603Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-10-25T11:33:46.776Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2025-08-14T08:02:26.695Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.695Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

🧬 Code Graph Analysis (2)

src/utils/withdraw.utils.ts (1)

src/components/AddMoney/consts/index.ts (2)

• countryData (255-1943)
• countryCodeMap (1974-2016)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)

src/utils/withdraw.utils.ts (3)

• getCountryFromIban (8-27)
• validateMXCLabeAccount (98-178)
• validateUSBankAccount (34-90)

⏰ 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 (3)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)

107-111: IBAN-country check is correct but beware of title mismatches

Comparing getCountryFromIban(iban) (title) against _countryName (title) is fine given your clarification. Keep in mind any title copy drift (e.g., “Czechia” vs. “Czech Republic”) will cause false negatives.

Do we source countryName from the same countryData.title list as getCountryFromIban? If there is any chance of copy divergence, prefer comparing stable identifiers (ISO codes) and mapping to titles only for display.

---

254-261: CLABE validator usage is fine; payload still needs normalization

Given the hotfix scope, keeping a generic message is acceptable per learnings. Once the CLABE algorithm is corrected (see utils review), this will yield accurate results. Ensure the payload normalization change (hyphens removed) is applied to prevent backend rejections.

src/utils/withdraw.utils.ts (1)

138-151: Fix CLABE check digit algorithm (critical correctness bug)

The official CLABE algorithm sums each weighted digit modulo 10. Current code accumulates raw products, which yields incorrect check digits and will wrongly reject valid CLABEs.

Apply this diff:

-    let sum = 0
-    for (let i = 0; i < 17; i++) {
-        sum += digits[i] * weights[i]
-    }
-
-    const remainder = sum % 10
-    const calculatedCheckDigit = remainder === 0 ? 0 : 10 - remainder
+    let sum = 0
+    for (let i = 0; i < 17; i++) {
+        sum += (digits[i] * weights[i]) % 10
+    }
+    const calculatedCheckDigit = (10 - (sum % 10)) % 10

This aligns with Banxico’s specification and common references for CLABE validation.

Likely an incorrect or invalid review comment.

[coderabbitai]

Actionable comments posted: 0

🔭 Outside diff range comments (2)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)

16-20: Make isIBANCountry resilient to 2- vs 3-letter codes

If country is ever a 2-letter code (e.g., 'US'/'MX'), isIBANCountry will return false due to countryCodeMap keys being 3-letter. Map 2-letter codes to 3-letter before the lookup.

Apply this diff:

-import { getCountryFromIban, validateMXCLabeAccount, validateUSBankAccount } from '@/utils/withdraw.utils'
+import { getCountryFromIban, validateMXCLabeAccount, validateUSBankAccount, getCountryCodeForWithdraw } from '@/utils/withdraw.utils'

-const isIBANCountry = (country: string) => {
-    return countryCodeMap[country.toUpperCase()] !== undefined
-}
+const isIBANCountry = (country: string) => {
+    const upper = country.toUpperCase()
+    const key = countryCodeMap[upper] ? upper : getCountryCodeForWithdraw(upper)
+    return countryCodeMap[key] !== undefined
+}

---

124-129: Normalize accountNumber by stripping hyphens as well as spaces

Validators already normalize with /[\s-]/g. Keep payload consistent to avoid backend mismatches when users enter hyphens.

-                    accountNumber: accountNumber.replace(/\s/g, ''),
+                    accountNumber: accountNumber.replace(/[\s-]/g, ''),

♻️ Duplicate comments (4)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (4)

253-255: CLABE validation: generic message is fine for hotfix scope

Given the hotfix constraints and prior alignment on generic copy, keeping a single 'Invalid CLABE' message is acceptable. Validation correctness is preserved.

---

283-286: US account number validation: generic message is fine for hotfix scope

Same rationale as CLABE: generic 'Invalid account number' is OK for now; detailed copy can follow later.

---

54-60: Harden useParams handling: catch-all params can be string[]

Next.js catch-all routes may yield params.country as string[]. The current cast to string is unsafe and can break the lowercasing and IBAN-country comparison.

Apply this diff to normalize safely:

-        const { country: countryNameParams } = useParams()
+        const params = useParams()
+        const countryNameParams = Array.isArray(params?.country)
+            ? params.country[params.country.length - 1]
+            : (params?.country as string | undefined)

-        let selectedCountry = (countryName ?? (countryNameParams as string)).toLowerCase()
+        const _rawCountryName = countryName ?? countryNameParams ?? ''
+        let selectedCountry = _rawCountryName.toLowerCase()

---

92-95: Handle 'US'/'USA' and 'MX'/'MEX' consistently and remove duplication

• Bug: checks only 'USA' and 'MX'; if country is 'US' or 'MEX' (per new 3-letter API), logic misclassifies and could force IBAN for Mexico.
• Duplication: same flags computed twice; risk of drift.

Quick fix (minimal change):

-                const isUs = country.toUpperCase() === 'USA'
-                const isMx = country.toUpperCase() === 'MX'
-                const isIban = isUs || isMx ? false : isIBANCountry(country)
+                const upper = country.toUpperCase()
+                const isUs = upper === 'USA' || upper === 'US'
+                const isMx = upper === 'MEX' || upper === 'MX'
+                const isIban = !(isUs || isMx) && isIBANCountry(upper)

-        const isMx = country.toUpperCase() === 'MX'
-        const isUs = country.toUpperCase() === 'USA'
-        const isIban = isUs || isMx ? false : isIBANCountry(country)
+        const upper = country.toUpperCase()
+        const isUs = upper === 'USA' || upper === 'US'
+        const isMx = upper === 'MEX' || upper === 'MX'
+        const isIban = !(isUs || isMx) && isIBANCountry(upper)

Better fix (DRY via useMemo):

+        const { isUs, isMx, isIban } = useMemo(() => {
+            const upper = country.toUpperCase()
+            const isUs = upper === 'USA' || upper === 'US'
+            const isMx = upper === 'MEX' || upper === 'MX'
+            return { isUs, isMx, isIban: !(isUs || isMx) && isIBANCountry(upper) }
+        }, [country])

-                const isUs = country.toUpperCase() === 'USA'
-                const isMx = country.toUpperCase() === 'MX'
-                const isIban = isUs || isMx ? false : isIBANCountry(country)
+                // use flags from useMemo above

-        const isMx = country.toUpperCase() === 'MX'
-        const isUs = country.toUpperCase() === 'USA'
-        const isIban = isUs || isMx ? false : isIBANCountry(country)
+        // reuse isUs, isMx, isIban from useMemo

Also applies to: 166-169

🧹 Nitpick comments (3)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (3)

148-155: Normalize IBAN when passing rawData to onSuccess

For consistency with payload normalization and external validators, strip spaces and hyphens.

-                    iban: isIban ? data.accountNumber : undefined,
+                    iban: isIban ? data.accountNumber.replace(/[\s-]/g, '') : undefined,

---

107-115: Sanitize IBAN before BIC lookup

Minor UX/robustness: ensure we pass a canonical IBAN (no spaces/hyphens) to getBicFromIban.

-                        bic = await getBicFromIban(accountNumber)
+                        bic = await getBicFromIban(accountNumber.replace(/[\s-]/g, ''))

---

213-218: Use display name for recipientName instead of code

PeanutActionDetailsCard.recipientName likely expects a human-readable label; passing a 3-letter code reads oddly. Prefer countryName when available.

-                    recipientName={country}
+                    recipientName={countryName ?? country}

📜 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 settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7f49b1d and 8890048.

📒 Files selected for processing (1)

• src/components/AddWithdraw/DynamicBankAccountForm.tsx (7 hunks)

🧰 Additional context used

🧠 Learnings (9)

📓 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".

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.399Z
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.

📚 Learning: 2025-08-13T18:22:01.888Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.888Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2025-08-14T14:42:54.399Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.399Z
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/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-11-26T12:06:11.603Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-10-25T11:33:46.776Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2025-08-14T08:02:26.695Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.695Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.

Applied to files:

• src/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/AddWithdraw/DynamicBankAccountForm.tsx

📚 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/AddWithdraw/DynamicBankAccountForm.tsx

🧬 Code Graph Analysis (1)

src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)

src/utils/withdraw.utils.ts (3)

• validateMXCLabeAccount (98-178)
• getCountryFromIban (8-27)
• validateUSBankAccount (34-90)

src/utils/bridge-accounts.utils.ts (1)

• validateIban (36-38)

⏰ 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/AddWithdraw/DynamicBankAccountForm.tsx (1)

261-271: IBAN-country consistency check: LGTM

• Validates IBAN format first.
• Ensures IBAN’s detected country matches the selected country (case-insensitive).
• Returns targeted error when mismatched.