Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjramirezn merged 1 commit into from
Aug 28, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/AddWithdraw/AddWithdrawCountriesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
country={getCountryCodeForWithdraw(currentCountry.id)}
onSuccess={handleFormSubmit}
initialData={{}}
error={null}
/>
<InitiateKYCModal
isOpen={isKycModalOpen}
Expand Down
12 changes: 11 additions & 1 deletion src/components/AddWithdraw/DynamicBankAccountForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,20 @@ interface DynamicBankAccountFormProps {
initialData?: Partial<IBankAccountDetails>
flow?: 'claim' | 'withdraw'
actionDetailsProps?: Partial<PeanutActionDetailsCardProps>
error: string | null
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

}

export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, DynamicBankAccountFormProps>(
(
{ country, onSuccess, initialData, flow = 'withdraw', actionDetailsProps, countryName: countryNameFromProps },
{
country,
onSuccess,
initialData,
flow = 'withdraw',
actionDetailsProps,
countryName: countryNameFromProps,
error,
},
Comment on lines +51 to +59
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

ref
) => {
const { user } = useAuth()
Expand Down Expand Up @@ -394,6 +403,7 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
Review
</Button>
{submissionError && <ErrorAlert description={submissionError} />}
{error && <ErrorAlert description={error} />}
</form>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/components/Claim/Link/views/BankFlowManager.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,9 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
payload: AddBankAccountPayload,
rawData: IBankAccountDetails
): Promise<{ error?: string }> => {
//clean any error from previous step
setError(null)

// scenario 1: receiver needs KYC
if (bankClaimType === BankClaimType.ReceiverKycNeeded && !justCompletedKyc) {
// update user's name and email if they are not present
Expand Down Expand Up @@ -456,6 +459,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
tokenSymbol: claimLinkData.tokenSymbol,
}}
initialData={{}}
error={error}
/>
<InitiateKYCModal
isOpen={isKycModalOpen}
Expand Down
Loading