fix: a hell lot of kyc flow related issues#657
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces several UI and control flow improvements. The IframeWrapper now listens for iframe messages to close the modal upon receiving a 'complete' event, and its KYC polling interval was shortened. The GlobalKYCComponent replaces standard HTML buttons with Chakra UI components, removes redundant state, and refines confirmation messaging. Other components, including LinkAccountComponent, UpdateUserComponent, OfframpSuccessView, and ProfileSection, received layout and styling adjustments to enhance responsiveness and clarity in their displays. Changes
Sequence Diagram(s)sequenceDiagram
participant Iframe
participant IframeWrapper
participant Modal
Iframe->>IframeWrapper: Send message {name: "complete", metadata: {status: "completed"}}
IframeWrapper->>Modal: Invoke onClose() to close modal
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
kushagrasarathe
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Global/IframeWrapper/index.tsx (1)
119-120: Consider the performance impact of increased polling frequency.Reducing the polling interval from 3s to 1.5s improves responsiveness but may increase server load. Consider implementing exponential backoff or websockets for a more scalable solution.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/Global/IframeWrapper/index.tsx(4 hunks)src/components/Global/KYCComponent/index.tsx(7 hunks)src/components/Global/LinkAccountComponent/index.tsx(2 hunks)src/components/Global/UpdateUserComponent/index.tsx(2 hunks)src/components/Offramp/Success.view.tsx(0 hunks)src/components/Profile/Components/ProfileSection.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/Offramp/Success.view.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/Global/LinkAccountComponent/index.tsx
🔇 Additional comments (6)
src/components/Profile/Components/ProfileSection.tsx (1)
32-40: LGTM! Improved KYC status visibility.The updated conditional rendering provides clearer differentiation between approved and non-approved KYC statuses through distinct badge colors and text.
src/components/Global/UpdateUserComponent/index.tsx (1)
119-127: LGTM! Enhanced UI consistency.The switch to Bruddle's Button component improves visual consistency across the application.
src/components/Global/IframeWrapper/index.tsx (1)
35-45: LGTM! Enhanced iframe interaction.Added message event listener improves modal closure handling upon completion.
src/components/Global/KYCComponent/index.tsx (3)
228-228: LGTM! Improved user communication.The updated message "Your KYC progress might be lost" is more accurate than the previous definitive statement.
409-415: LGTM! Enhanced accessibility.Wrapping step labels in
labelelements improves screen reader compatibility.
382-389: LGTM! Improved UI consistency.The switch to Bruddle Card components with consistent styling enhances the visual hierarchy.
Hugo0
left a comment
Hugo0
left a comment
There was a problem hiding this comment.
Nice! Everything relatively straightforward fixes, no issues on myend
|
|
||
| // track completed event from iframe and close the modal | ||
| useEffect(() => { | ||
| const handleMessage = (event: MessageEvent) => { | ||
| if (event.data?.name === 'complete' && event.data?.metadata?.status === 'completed') { | ||
| onClose() | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
yessss nice!
is the eventname literally just called complete?
| src: kyclink, | ||
| visible: true, | ||
| closeConfirmMessage: 'Are you sure? Your KYC progress will be lost.', | ||
| closeConfirmMessage: 'Are you sure? Your KYC progress might be lost.', |
There was a problem hiding this comment.
isn't it 100% sure that it will be lost now? Since we're listening for the completion event
(but the copy is still good in that case)
| {errors.email && <span className="text-start text-h9 font-normal text-red">{errors.email.message}</span>} | ||
|
|
||
| <button type="submit" className="btn btn-purple h-8 w-full text-h8" disabled={isLoading}> | ||
| <Button type="submit" variant="purple" size="small" disabled={isLoading}> |
| {user?.user.kycStatus === 'approved' ? ( | ||
| <Badge color="green" className="rounded-sm border-success-1 bg-white text-success-1"> | ||
| KYC Done | ||
| </Badge> | ||
| ) : ( | ||
| <Badge color="purple" className="rounded-sm border-primary-1 bg-white text-primary-1"> |
There was a problem hiding this comment.
good! idk why we had it like that before
2 participants
Summary by CodeRabbit
New Features
Style