Skip to content

fix(kyc): actually apply the callback-ref fix (#2440 shipped the test only) #2441

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
Hugo0 merged 1 commit into from
Jul 17, 2026
Merged

fix(kyc): actually apply the callback-ref fix (#2440 shipped the test only) #2441

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
18 changes: 11 additions & 7 deletions src/components/Kyc/SumsubKycWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ export const SumsubKycWrapper = ({
const [sdkLoadError, setSdkLoadError] = useState(false)
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false)
const [modalVariant, setModalVariant] = useState<'stop-verification' | 'trouble'>('trouble')
const sdkContainerRef = useRef<HTMLDivElement>(null)
// Callback ref, NOT useRef: the modal renders through a headlessui Portal, so
// the container mounts a commit AFTER `visible` flips true. A plain ref is not
// reactive — the init effect below would read null on its only run and never
// launch the SDK. State re-runs the effect the moment the node attaches.
const [sdkContainer, setSdkContainer] = useState<HTMLDivElement | null>(null)
const sdkInstanceRef = useRef<SnsWebSdkInstance | null>(null)
const { setIsSupportModalOpen } = useModalsContext()

Expand Down Expand Up @@ -103,7 +107,7 @@ export const SumsubKycWrapper = ({

// initialize sdk as soon as the modal is visible and all deps are ready
useEffect(() => {
if (!visible || !accessToken || !sdkLoaded || !sdkContainerRef.current) return
if (!visible || !accessToken || !sdkLoaded || !sdkContainer) return

// clean up previous instance
if (sdkInstanceRef.current) {
Expand Down Expand Up @@ -188,7 +192,7 @@ export const SumsubKycWrapper = ({
})
.build()

sdk.launch(sdkContainerRef.current)
sdk.launch(sdkContainer)
sdkInstanceRef.current = sdk

// ensure the sdk-created iframe gets camera/microphone permissions.
Expand All @@ -203,10 +207,10 @@ export const SumsubKycWrapper = ({
}
}
})
iframeObserver.observe(sdkContainerRef.current, { childList: true })
iframeObserver.observe(sdkContainer, { childList: true })

// also patch any iframe that was added before the observer
const existingIframe = sdkContainerRef.current.querySelector('iframe')
const existingIframe = sdkContainer.querySelector('iframe')
if (existingIframe && !existingIframe.allow?.includes('camera')) {
existingIframe.allow = 'camera; microphone; fullscreen'
}
Expand All @@ -228,7 +232,7 @@ export const SumsubKycWrapper = ({
sdkInstanceRef.current = null
}
}
}, [visible, accessToken, sdkLoaded, stableOnComplete, stableOnError, stableOnRefreshToken])
}, [visible, accessToken, sdkLoaded, sdkContainer, stableOnComplete, stableOnError, stableOnRefreshToken])

// reset state when modal closes (the init effect's cleanup already
// destroys the SDK instance — visible is one of its deps)
Expand Down Expand Up @@ -345,7 +349,7 @@ export const SumsubKycWrapper = ({
<Loading className="h-8 w-8" />
</div>
<div
ref={sdkContainerRef}
ref={setSdkContainer}
className="relative h-full w-full overflow-auto [&>iframe]:!min-h-full"
/>
</div>
Expand Down
Loading