[TASK-14287] fix: show error on dynamic bank account form

[jjramirezn]

No description provided.

[notion-workspace]

🪲 Bug: claim issue (edge case but critic)

[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 28, 2025 6:07pm

[coderabbitai]

Walkthrough

Introduces a new error prop to DynamicBankAccountForm and wires it through call sites. The form now renders an external error message via ErrorAlert. Callers were updated to pass error (null or value), and BankFlowManager clears error on success and forwards it to the form.

Changes

Cohort / File(s)	Summary
DynamicBankAccountForm component src/components/AddWithdraw/DynamicBankAccountForm.tsx	Adds new public prop error: string | null; includes it in props; renders an additional ErrorAlert when error is provided; no changes to submission/validation logic.
Call sites updated for error plumbing src/components/AddWithdraw/AddWithdrawCountriesList.tsx, src/components/Claim/Link/views/BankFlowManager.view.tsx	Passes error prop to DynamicBankAccountForm (null in AddWithdrawCountriesList; state-driven in BankFlowManager); BankFlowManager clears error in handleSuccess via setError(null).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: bank claim flow runtime error #1138 — Also modifies DynamicBankAccountForm, refactoring submission and BIC/IBAN logic; related through concurrent edits to the same component.
• HOTFIX - IBAN country detection and incorrect bank acc details #1094 — Adjusts DynamicBankAccountForm public props around country handling; related due to overlapping prop interface changes.

Suggested labels

enhancement

Suggested reviewers

• kushagrasarathe
• Zishan-7

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ 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/show-error-on-bank-form

---

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 @coderabbit in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbit 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:
  • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbit 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 @coderabbit help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbit or @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: 2

🧹 Nitpick comments (3)

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

51-59: Optional: clarify prop intent.

If you keep both internal and external error paths, consider renaming the prop to externalError to avoid confusion with local submissionError. Not required if coalescing above is applied.

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

207-207: Don’t pass error={null} once the prop is optional.

Avoid redundant props; omit when unused.

                 <DynamicBankAccountForm
                   ref={formRef}
                   country={getCountryCodeForWithdraw(currentCountry.id)}
                   onSuccess={handleFormSubmit}
                   initialData={{}}
-                  error={null}
                 />

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

245-249: Avoid sending error back to the child when you already set parent error.

Returning { error } causes the form to also set submissionError, leading to duplicate UI (even with coalescing, you do unnecessary state churn). Let the parent own the error entirely here.

-                if (addBankAccountResponse.error) {
-                    setError(addBankAccountResponse.error)
-                    return { error: addBankAccountResponse.error }
-                }
+                if (addBankAccountResponse.error) {
+                    setError(addBankAccountResponse.error)
+                    return {}
+                }

Apply the same pattern in the guest flow catch block (Lines 348–355): set parent error and return {}.

📜 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 1b35b32 and 0890b99.

📒 Files selected for processing (3)

• src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1 hunks)
• src/components/AddWithdraw/DynamicBankAccountForm.tsx (2 hunks)
• src/components/Claim/Link/views/BankFlowManager.view.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (5)

📚 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/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/AddWithdrawCountriesList.tsx
• src/components/Claim/Link/views/BankFlowManager.view.tsx
• src/components/AddWithdraw/DynamicBankAccountForm.tsx

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

📚 Learning: 2025-08-26T15:25:53.328Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.

Applied to files:

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

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

1-314: All DynamicBankAccountForm usages include the required error prop. No further changes needed.

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

212-214: Clearing prior error before submit is good.

---

462-463: Pass-through of external error looks correct.

This wires parent-owned error into the form as intended.

[coderabbitai]

🛠️ Refactor suggestion

Make error prop optional to avoid breaking callers.

This is a public API change; making error required will break any unupdated usages. Prefer optional with a safe default.

-interface DynamicBankAccountFormProps {
+interface DynamicBankAccountFormProps {
   country: string
   countryName?: string
   onSuccess: (payload: AddBankAccountPayload, rawData: IBankAccountDetails) => Promise<{ error?: string }>
   initialData?: Partial<IBankAccountDetails>
   flow?: 'claim' | 'withdraw'
   actionDetailsProps?: Partial<PeanutActionDetailsCardProps>
-  error: string | null
+  error?: string | null
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	error: string | null
	interface DynamicBankAccountFormProps {
	country: string
	countryName?: string
	onSuccess: (payload: AddBankAccountPayload, rawData: IBankAccountDetails) => Promise<{ error?: string }>
	initialData?: Partial<IBankAccountDetails>
	flow?: 'claim' | 'withdraw'
	actionDetailsProps?: Partial<PeanutActionDetailsCardProps>
	error?: string | null
	}

🤖 Prompt for AI Agents

In src/components/AddWithdraw/DynamicBankAccountForm.tsx around line 46, the
PropTypes/TypeScript prop declaration currently makes `error: string | null`
required; change it to optional (e.g., `error?: string | null`) and ensure the
component uses a safe default when rendering (treat undefined as null/empty) so
callers are not broken by this public API change.

[coderabbitai]

🛠️ Refactor suggestion

Prevent duplicate error rendering: coalesce external and internal errors into one alert.

Right now both submissionError and error can render simultaneously (e.g., parent sets error and you also set submissionError on result.error). Show only one, preferring the external error.

-                        {submissionError && <ErrorAlert description={submissionError} />}
-                        {error && <ErrorAlert description={error} />}
+                        { (error ?? submissionError) && (
+                          <ErrorAlert description={(error ?? submissionError)!} />
+                        )}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	{
	country,
	onSuccess,
	initialData,
	flow = 'withdraw',
	actionDetailsProps,
	countryName: countryNameFromProps,
	error,
	},
	- {submissionError && <ErrorAlert description={submissionError} />}
	{ (error ?? submissionError) && (
	<ErrorAlert description={(error ?? submissionError)!} />
	)}

🤖 Prompt for AI Agents

In src/components/AddWithdraw/DynamicBankAccountForm.tsx around lines 51 to 59,
the component can render both the external prop error and its own
submissionError simultaneously; update the logic to coalesce them into a single
alert that prefers the external prop. Concretely, compute a single
displayedError (e.g. const displayedError = error ?? submissionError) and use
that for rendering the alert, or only set submissionError when error is falsy
(avoid calling setSubmissionError if error exists); ensure only displayedError
is passed into the Alert/inline error UI so the parent-supplied error takes
precedence.