[TASK-14419] Improvement: Add debouncing to BIC field#1163
Closed
Zishan-7 wants to merge 1 commit intopeanut-wallet-devfrom
Closed
[TASK-14419] Improvement: Add debouncing to BIC field#1163Zishan-7 wants to merge 1 commit intopeanut-wallet-devfrom
Zishan-7 wants to merge 1 commit intopeanut-wallet-devfrom
Conversation
Contributor
WalkthroughImplements debounced BIC validation in DynamicBankAccountForm by introducing a debounce hook, tracking validation state, gating API calls to debounced values, syncing debounced input back into the form, and updating submit button loading/disabled conditions accordingly. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (3)
71-71: Nit: fix setter casing for consistency.Rename
setisCheckingBICValid→setIsCheckingBICValid.Apply locally within this line, and update its usages below to match.
101-104: Extract debounce delay to a named constant.Improves readability and makes UX tuning easier.
-const debouncedBicValue = useDebounce(bicValue, 500) // 500ms delay +const BIC_DEBOUNCE_MS = 500 +const debouncedBicValue = useDebounce(bicValue, BIC_DEBOUNCE_MS)
116-123: Avoid unnecessary setValue; trigger validation instead.Calling
setValuewith the same value can cause extra renders and affect dirty state. Prefer triggering validation when the debounced value matches the current value; only set when it actually differs.-useEffect(() => { - if (showBicField && debouncedBicValue && debouncedBicValue.trim().length > 0) { - // Trigger validation for the BIC field - setValue('bic', debouncedBicValue, { shouldValidate: true }) - } -}, [debouncedBicValue, showBicField, setValue]) +useEffect(() => { + if (!showBicField) return + const dv = debouncedBicValue?.trim() + if (!dv) return + const current = getValues('bic')?.trim() + if (current === dv) { + // value is stable; just trigger validation + trigger('bic') + } else { + // value changed; update and validate + setValue('bic', debouncedBicValue, { shouldValidate: true }) + } +}, [debouncedBicValue, showBicField, setValue, getValues, trigger])Additional change (outside this range) to enable the above:
// add to useForm destructure const { control, handleSubmit, setValue, getValues, watch, trigger, formState: { ... } } = useForm<IBankAccountDetails>({...})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/AddWithdraw/DynamicBankAccountForm.tsx(7 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 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-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
🧬 Code graph analysis (1)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)
src/hooks/useDebounce.ts (1)
useDebounce(9-23)src/utils/bridge-accounts.utils.ts (1)
validateBic(73-89)
🔇 Additional comments (2)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (2)
17-17: Import looks good.Using the shared debounce hook here is appropriate.
80-80: LGTM on pullingwatchfrom RHF.Needed for BIC debouncing logic.
Comment on lines
381
to
391
| if (!value || value.trim().length === 0) return 'BIC is required' | ||
|
|
||
| // Only validate if the value matches the debounced value (to prevent API calls on every keystroke) | ||
| if (value.trim() !== debouncedBicValue?.trim()) { | ||
| return true // Skip validation until debounced value is ready | ||
| } | ||
|
|
||
| setisCheckingBICValid(true) | ||
| const isValid = await validateBic(value.trim()) | ||
| setisCheckingBICValid(false) | ||
| return isValid || 'Invalid BIC code' |
Contributor
There was a problem hiding this comment.
Bug: returning true while debounce not settled can bypass BIC validation.
If the user blurs/submits within the debounce window, validate returns true, marking BIC valid without any API check. This can let invalid BICs through.
Apply:
-// Only validate if the value matches the debounced value (to prevent API calls on every keystroke)
-if (value.trim() !== debouncedBicValue?.trim()) {
- return true // Skip validation until debounced value is ready
-}
-
-setisCheckingBICValid(true)
-const isValid = await validateBic(value.trim())
-setisCheckingBICValid(false)
+// Only validate once the debounced value matches. Until then, keep the field invalid.
+if (value.trim() !== debouncedBicValue?.trim()) {
+ return 'Validating BIC…'
+}
+
+setIsCheckingBICValid(true)
+let isValid: boolean
+try {
+ isValid = await validateBic(value.trim())
+} finally {
+ setIsCheckingBICValid(false)
+}
return isValid || 'Invalid BIC code'Also updates the setter casing per earlier comment.
📝 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
| if (!value || value.trim().length === 0) return 'BIC is required' | |
| // Only validate if the value matches the debounced value (to prevent API calls on every keystroke) | |
| if (value.trim() !== debouncedBicValue?.trim()) { | |
| return true // Skip validation until debounced value is ready | |
| } | |
| setisCheckingBICValid(true) | |
| const isValid = await validateBic(value.trim()) | |
| setisCheckingBICValid(false) | |
| return isValid || 'Invalid BIC code' | |
| if (!value || value.trim().length === 0) return 'BIC is required' | |
| // Only validate once the debounced value matches. Until then, keep the field invalid. | |
| if (value.trim() !== debouncedBicValue?.trim()) { | |
| return 'Validating BIC…' | |
| } | |
| setIsCheckingBICValid(true) | |
| let isValid: boolean | |
| try { | |
| isValid = await validateBic(value.trim()) | |
| } finally { | |
| setIsCheckingBICValid(false) | |
| } | |
| return isValid || 'Invalid BIC code' |
🤖 Prompt for AI Agents
In src/components/AddWithdraw/DynamicBankAccountForm.tsx around lines 381 to
391, the validator currently returns true when the debounced value hasn't
matched yet, which allows bypassing BIC validation if the user submits quickly;
change the logic to wait for debounce by returning a pending validation
indicator (e.g., return a Promise that performs validation once
debouncedBicValue matches) or explicitly trigger validation when value differs
from debounced value so the API check runs before resolving, ensure
setIsCheckingBICValid uses the corrected camelCase setter name, and finally
resolve to the validation result or the 'Invalid BIC code' message.
Contributor
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
kushagrasarathe
approved these changes
Sep 2, 2025
Comment on lines
381
to
391
| if (!value || value.trim().length === 0) return 'BIC is required' | ||
|
|
||
| // Only validate if the value matches the debounced value (to prevent API calls on every keystroke) | ||
| if (value.trim() !== debouncedBicValue?.trim()) { | ||
| return true // Skip validation until debounced value is ready | ||
| } | ||
|
|
||
| setisCheckingBICValid(true) | ||
| const isValid = await validateBic(value.trim()) | ||
| setisCheckingBICValid(false) | ||
| return isValid || 'Invalid BIC code' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.