fix: bank claim flow runtime error

[kushagrasarathe]

• fixes TASK-14287 : runtime error when claiming and BIC autocompletion fails
• also fixes TASK-14078 : similar runtime error due to iban mismatch
• also fixes race condition issue when bic completion fails and the cta keeps loading or requires multiple clicks to proceed to next view

[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 27, 2025 4:55pm

[notion-workspace]

🪲 Bug: claim issue (edge case but critic)

[notion-workspace]

Bug: runtime error when switching between countries in claim link flow (hard to reproduce)

[coderabbitai]

Walkthrough

Two files changed. In peanut-game.html, additional parentheses were added around existing assignment/grouping expressions. In DynamicBankAccountForm.tsx, form submission and IBAN/BIC handling were refactored: added validation flow, auto-resolving BIC from IBAN, conditional BIC field behavior, revised submission lifecycle, and improved error clearing.

Changes

Cohort / File(s)	Summary of changes
HTML grouping adjustments `public/game/peanut-game.html`	Added extra parentheses around assignment/grouped expressions (e.g., around Obstacle.MAX_OBSTACLE_LENGTH and object-literal closures) without changing values or public APIs.
Dynamic bank form submission and IBAN/BIC flow `src/components/AddWithdraw/DynamicBankAccountForm.tsx`	Refactored form: added useEffect; adjusted useForm options; reworked onSubmit to gate on isValidating, clear errors, and auto-resolve BIC from IBAN; conditionally show/validate BIC field; improved setValue behavior; streamlined submit binding and loading/disabled states; refined error handling.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• staging country code error #1100 — Also refactors IBAN/BIC resolution and validation in DynamicBankAccountForm.tsx.
• feat: handle redirect uri when on unsupported browsers #1117 — Modifies onSubmit/onSuccess payload and IBAN/BIC handling in the same component.
• fix: bic fetching #1050 — Introduces IBAN→BIC auto-resolution and BIC field show/hide logic in DynamicBankAccountForm.tsx.

Suggested reviewers

• Zishan-7
• jjramirezn
• Hugo0

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch hotfix/claim-runtime-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: 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/AddWithdraw/DynamicBankAccountForm.tsx (1)

112-160: Ensure loading state always clears (reintroduce finally).

If onSuccess resolves without error (and no navigation happens), the spinner can remain stuck. Use a finally to always reset, and remove scattered setIsSubmitting(false) early-returns to avoid double toggles.

-        setIsSubmitting(true)
-        try {
+        setIsSubmitting(true)
+        try {
           // ...
-          if (showBicField && !bic) {
-              setIsSubmitting(false)
-              setSubmissionError('BIC is required')
-              return
-          }
+          if (showBicField && !bic) {
+              setSubmissionError('BIC is required')
+              return
+          }
           // ...
-          if (!showBicField && !bic) {
+          if (!showBicField && !bic) {
               try {
                 const autoBic = await getBicFromIban(accountNumber)
                 if (autoBic) {
                   bic = autoBic
                   setValue('bic', autoBic, { shouldValidate: false })
                 } else {
                   setShowBicField(true)
-                  setIsSubmitting(false)
                   setSubmissionError('BIC is required')
                   return
                 }
               } catch (error) {
                 setShowBicField(true)
-                setIsSubmitting(false)
                 setSubmissionError('BIC is required')
                 return
               }
           }
           // ...
-          if (result.error) {
-              setSubmissionError(result.error)
-              setIsSubmitting(false)
-          }
+          if (result.error) {
+              setSubmissionError(result.error)
+          }
-        } catch (error: any) {
-            setSubmissionError(error.message)
-            setIsSubmitting(false)
-        }
+        } catch (error: any) {
+            setSubmissionError(error.message)
+        } finally {
+            setIsSubmitting(false)
+        }

Also applies to: 200-204

🧹 Nitpick comments (5)

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

86-87: Recheck reValidateMode change.

Setting reValidateMode to 'onSubmit' can delay error clearing and keep the submit button disabled until a resubmit. Consider 'onChange' (or omit to keep default) for smoother UX, unless this was intentional.

-            reValidateMode: 'onSubmit',
+            // Revalidate on change for faster feedback
+            reValidateMode: 'onChange',

---

93-99: Avoid effect depending on getValues; watch the actual field instead.

getValues is a stable function; the effect won’t rerun when bic changes. Use watch('bic') to react to user input.

-        const {
+        const {
           control,
           handleSubmit,
           setValue,
-          getValues,
+          getValues,
+          watch,
           formState: { errors, isValid, isValidating, touchedFields },
         } = useForm<IBankAccountDetails>({ ... })

-        useEffect(() => {
-            if (submissionError && isValid && (!showBicField || getValues('bic'))) {
-                setSubmissionError(null)
-            }
-        }, [isValid, submissionError, showBicField, getValues])
+        const bicValue = watch('bic')
+        useEffect(() => {
+            if (submissionError && isValid && (!showBicField || bicValue)) {
+                setSubmissionError(null)
+            }
+        }, [isValid, submissionError, showBicField, bicValue])

Also applies to: 64-70

---

101-106: Redundant isValidating guard inside onSubmit.

handleSubmit only calls onSubmit after validation resolves. This check can be removed to simplify flow.

-            if (isValidating) {
-                console.log('Validation still checking, skipping submission')
-                return
-            }

---

210-249: Support autocomplete for account inputs (UX).

Per prior repo guidance, enable autocomplete="bank-account-number" for US/IBAN account numbers. Extend renderInput to pass through inputProps.

-        const renderInput = (
+        const renderInput = (
           name: keyof IBankAccountDetails,
           placeholder: string,
           rules: any,
           type: string = 'text',
           rightAdornment?: React.ReactNode,
-          onBlur?: (field: any) => Promise<void> | void
+          onBlur?: (field: any) => Promise<void> | void,
+          inputProps: Partial<React.ComponentProps<typeof BaseInput>> = {}
         ) => (
             <div className="w-full">
               <div className="relative">
                 <Controller
                   name={name}
                   control={control}
                   rules={rules}
                   render={({ field }) => (
                     <BaseInput
                       {...field}
                       type={type}
                       placeholder={placeholder}
                       className="h-12 w-full rounded-sm border border-n-1 bg-white px-4 text-sm"
+                      {...inputProps}
                       onBlur={async (e) => {
                         // remove any whitespace from the input field
                         // note: @dev not a great fix, this should also be fixed in the backend
                         if (typeof field.value === 'string') {
                           field.onChange(field.value.trim())
                         }
                         field.onBlur()
                         if (onBlur) {
                           await onBlur(field)
                         }
                       }}
                     />
                   )}
                 />
               </div>

-                              ? renderInput(
+                              ? renderInput(
                                     'accountNumber',
                                     'IBAN',
                                     {
                                       required: 'IBAN is required',
                                       validate: async (val: string) => {
                                         const isValidIban = await validateIban(val)
                                         if (!isValidIban) return 'Invalid IBAN'
                                         if (getCountryFromIban(val)?.toLowerCase() !== selectedCountry) {
                                           return 'IBAN does not match the selected country'
                                         }
                                         return true
                                       },
                                     },
                                     'text',
-                                    undefined,
+                                    undefined,
                                     async (field) => {
                                       if (!field.value || field.value.trim().length === 0) return
-                                    }
+                                    },
+                                    { autoComplete: 'bank-account-number' }
                                   )

-                              : renderInput(
+                              : renderInput(
                                     'accountNumber',
                                     'Account Number',
                                     {
                                       required: 'Account number is required',
                                       validate: async (value: string) =>
                                         validateUSBankAccount(value).isValid || 'Invalid account number',
                                     },
-                                    'text'
+                                    'text',
+                                    undefined,
+                                    undefined,
+                                    { autoComplete: 'bank-account-number' }
                                   )}

Also applies to: 311-331, 333-341

---

386-393: Allow submit to surface validation errors.

Disabling when !isValid can trap users (especially with reValidateMode 'onSubmit'). Rely on handleSubmit to block invalid posts, and keep the button clickable.

-                            loading={isSubmitting}
-                            disabled={isSubmitting || !isValid}
+                            loading={isSubmitting}
+                            disabled={isSubmitting}

📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between e64e47a and 8eaed3d.

📒 Files selected for processing (2)

• public/game/peanut-game.html (2 hunks)
• src/components/AddWithdraw/DynamicBankAccountForm.tsx (8 hunks)

🧰 Additional context used

🧠 Learnings (3)

📚 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: 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-02-17T14:07:49.883Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#669
File: src/lib/validation/recipient.ts:21-56
Timestamp: 2025-02-17T14:07:49.883Z
Learning: In the peanut-ui repository, wrapping switch case blocks in braces to comply with linter rules and avoid variable leakage is considered a non-blocking style improvement.

Applied to files:

• public/game/peanut-game.html

🧬 Code graph analysis (1)

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

src/app/actions/ibanToBic.ts (1)

• getBicFromIban (10-17)

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

• validateBic (73-89)

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

public/game/peanut-game.html (1)

1004-1106: Parens grouping change looks correct.

The extra wrapping parens keep the comma expression intact and the parentheses are balanced. No behavior change.

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

319-321: Verify IBAN-country comparison logic.

getCountryFromIban likely returns an ISO country code (e.g., 'de'), while selectedCountry appears to be a slug/name from route props. If formats differ, this will wrongly reject valid IBANs. Consider comparing against country (ISO code) instead.

---

343-363: BIC field behavior is solid.

Conditional render + async validation + error clearing on blur reads well.