[TASK-15518] Fix: KYC bugs#1305
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds under-review KYC state handling across flows: new KycVerifiedOrReviewModal, extended useKycStatus to expose isUserBridgeKycUnderReview, guards in Add/Withdraw and Profile to show the modal or crypto drawer, updates useBridgeKycFlow to set bridgeKycStatus to under_review on completion, and tweaks IframeWrapper action UI. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Suggested labels
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/hooks/useBridgeKycFlow.ts (1)
118-162: Add missing dependency to useCallback.The
useCallbackhook is missinguserin its dependency array (Line 161), which is used in the callback body (Line 142). This could cause stale closures where the callback references an outdated user object.Apply this diff to fix the dependency array:
}, - [iframeOptions.src, apiResponse, flow, router] + [iframeOptions.src, apiResponse, flow, router, user] )
🧹 Nitpick comments (1)
src/components/Global/IframeWrapper/index.tsx (1)
148-158: Remove orphanedshadowTypeprop.The
shadowType="primary"prop at line 155 has no effect sinceshadowSizeis not provided. According to the Button component implementation, shadows are only applied when bothshadowSizeandshadowTypeare present.Apply this diff to remove the unused prop:
<Button variant={'transparent'} className={`h-8 max-w-md font-normal underline`} onClick={() => { setModalVariant('stop-verification') setIsHelpModalOpen(true) }} - shadowType="primary" > Stop verification process </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/AddWithdraw/AddWithdrawCountriesList.tsx(6 hunks)src/components/Global/IframeWrapper/index.tsx(2 hunks)src/components/Global/KycVerifiedOrReviewModal/index.tsx(1 hunks)src/components/Profile/index.tsx(3 hunks)src/hooks/useBridgeKycFlow.ts(2 hunks)src/hooks/useKycStatus.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 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: 2025-08-20T09:08:19.266Z
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#1112
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:336-343
Timestamp: 2025-08-20T09:08:19.266Z
Learning: In the KYC flow implementation, `setJustCompletedKyc` must be called after `await fetchUser()` in the `handleKycSuccess` callback. Setting `justCompletedKyc` before fetching the user would cause a re-fetching loop because `handleKycSuccess` is set in a useEffect inside the KYC hook, which would cause the UI flow to get stuck in one view.
Applied to files:
src/hooks/useBridgeKycFlow.ts
🧬 Code graph analysis (5)
src/components/AddWithdraw/AddWithdrawCountriesList.tsx (2)
src/hooks/useKycStatus.tsx (1)
useKycStatus(12-36)src/components/AddMoney/consts/index.ts (1)
SpecificPaymentMethod(139-146)
src/components/Global/KycVerifiedOrReviewModal/index.tsx (1)
src/hooks/useKycStatus.tsx (1)
useKycStatus(12-36)
src/hooks/useBridgeKycFlow.ts (2)
src/app/actions/users.ts (1)
updateUserById(12-35)src/utils/bridge-accounts.utils.ts (1)
BridgeKycStatus(34-34)
src/components/Profile/index.tsx (1)
src/hooks/useKycStatus.tsx (1)
useKycStatus(12-36)
src/components/Global/IframeWrapper/index.tsx (2)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)src/components/Global/Icons/Icon.tsx (1)
Icon(204-213)
⏰ 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 (11)
src/components/Global/IframeWrapper/index.tsx (3)
147-147: LGTM! Intentional spacing reduction.The gap reduction from
gap-4togap-2tightens the vertical spacing in the action area, aligning with the overall UI refinements in this PR.
167-167: LGTM! Explicit icon color for consistency.Adding the explicit
text-grey-1color class ensures consistent styling for the support icon across the UI.
168-168: LGTM! Consistent text styling.The text color and underline styling align with the icon changes above and the overall UI consistency improvements in this PR.
src/hooks/useKycStatus.tsx (1)
29-35: LGTM! The implementation correctly handles the under-review state.The logic treats both 'incomplete' and 'under_review' statuses as blocking states for bank operations, which makes sense: users who have started but not completed KYC ('incomplete') or are awaiting approval ('under_review') should see the same UI flow. The memoization and return structure are appropriate.
src/components/Global/KycVerifiedOrReviewModal/index.tsx (1)
1-37: LGTM! Clean implementation of the status modal.The component correctly adapts its content (title, description, icon) based on whether the user's KYC is under review or already approved. The structure is straightforward and the conditional logic is clear.
src/components/Profile/index.tsx (2)
79-84: LGTM! The conditional logic correctly handles both KYC states.The updated condition properly distinguishes between three states:
- KYC approved or under review → Show status modal (Line 80)
- KYC not started → Show initiate KYC modal (Line 82)
This ensures users are informed of their verification status without being prompted to restart the process if it's already in progress.
139-142: Good refactoring to use the centralized modal component.Replacing the inline ActionModal with KycVerifiedOrReviewModal reduces duplication and ensures consistent KYC status messaging across the app.
src/components/AddWithdraw/AddWithdrawCountriesList.tsx (4)
170-173: LGTM! The guard correctly prevents bank withdrawals when KYC is under review.The early return pattern ensures users see the status modal instead of being allowed to proceed with bank withdrawal operations while their verification is pending.
184-190: Verify if crypto withdrawals should also check KYC status.The crypto withdrawal path (Lines 184-190) doesn't include the
isUserBridgeKycUnderReviewguard that bank withdrawals have (Lines 170-173). This could be intentional if crypto operations don't require KYC, but please confirm this is the expected behavior.If crypto withdrawals should also respect KYC status, apply a similar guard:
} else if (method.id.includes('crypto-withdraw')) { + if (isUserBridgeKycUnderReview) { + setShowKycStatusModal(true) + return + } setSelectedMethod({ type: 'crypto', countryPath: 'crypto', title: 'Crypto', }) router.push('/withdraw')
197-211: LGTM! The add method handler correctly applies KYC guards.The function properly:
- Exempts crypto-add from KYC checks (opens drawer immediately)
- Blocks other add methods when KYC is under review
- Uses early returns for clean control flow
370-373: Good addition of the centralized KYC status modal.Rendering the KycVerifiedOrReviewModal in the component tree ensures consistent status messaging when users attempt add/withdraw operations while their KYC is under review.
2 participants
No description provided.