diff --git a/components/views/ScanConnect/ScanConnectMobile.tsx b/components/views/ScanConnect/ScanConnectMobile.tsx index 98595ac..e49f09b 100644 --- a/components/views/ScanConnect/ScanConnectMobile.tsx +++ b/components/views/ScanConnect/ScanConnectMobile.tsx @@ -20,12 +20,8 @@ export default function ScanConnectMobile({ onGetWallet, noDeepLink, }: ScanConnectMobileProps) { - const windowRef = useRef(null) const { setLastUsed } = useWalletHistory() const { uri, connecting, error, isLoading } = useWcUri(() => { - if (windowRef.current && !windowRef.current.closed) { - windowRef.current.close() - } setLastUsed(wallet) handleCancel() }) @@ -36,12 +32,27 @@ export default function ScanConnectMobile({ ) function openDeepLink() { - if (windowRef.current && !windowRef.current.closed) { - windowRef.current.close() - } const deeplink = new URL(service.uid) deeplink.searchParams.set('uri', uri) - windowRef.current = window.open(deeplink, '_blank') + + if (deeplink.toString().startsWith('http')) { + // Workaround for https://github.com/rainbow-me/rainbowkit/issues/524. + // Using 'window.open' causes issues on iOS in non-Safari browsers and + // WebViews where a blank tab is left behind after connecting. + // This is especially bad in some WebView scenarios (e.g. following a + // link from Twitter) where the user doesn't have any mechanism for + // closing the blank tab. + // For whatever reason, links with a target of "_blank" don't suffer + // from this problem, and programmatically clicking a detached link + // element with the same attributes also avoids the issue. + const link = document.createElement('a') + link.href = deeplink.toString() + link.target = '_blank' + link.rel = 'noreferrer noopener' + link.click() + } else { + window.location.href = deeplink.toString() + } } useEffect(() => {