diff --git a/packages/ui/src/app/utils/url-strategy-helpers.ts b/packages/ui/src/app/utils/url-strategy-helpers.ts index 13916a6a..7e4d3039 100644 --- a/packages/ui/src/app/utils/url-strategy-helpers.ts +++ b/packages/ui/src/app/utils/url-strategy-helpers.ts @@ -57,7 +57,7 @@ export function redirectToTelegram( ): void { options = { ...options }; // TODO: Remove this line after all dApps and the wallets-list.json have been updated - const directLink = convertToDirectLink(universalLink); + const directLink = convertToTGDirectLink(universalLink); const directLinkUrl = new URL(directLink); if (!directLinkUrl.searchParams.has('startapp')) { @@ -117,7 +117,7 @@ export function redirectToTelegram( openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options)); } else { const link = addReturnStrategy(directLinkUrl.toString(), options); - const deepLink = convertToDeepLink(link); + const deepLink = convertToTGDeepLink(link); openDeeplinkWithFallback(deepLink, () => openLinkBlank(link)); } @@ -146,7 +146,7 @@ function addQueryParameter(url: string, key: string, value: string): string { * @param universalLink * TODO: Remove this method after all dApps and the wallets-list.json have been updated */ -function convertToDirectLink(universalLink: string): string { +function convertToTGDirectLink(universalLink: string): string { const url = new URL(universalLink); if (url.searchParams.has('attach')) { @@ -161,7 +161,7 @@ function convertToDirectLink(universalLink: string): string { * Converts a direct link to a deep link. * @param directLink */ -function convertToDeepLink(directLink: string): string { +function convertToTGDeepLink(directLink: string): string { const parsed = new URL(directLink); const [, domain, appname] = parsed.pathname.split('/'); const startapp = parsed.searchParams.get('startapp'); diff --git a/packages/ui/src/app/utils/web-api.ts b/packages/ui/src/app/utils/web-api.ts index 1fc5777f..6e94b617 100644 --- a/packages/ui/src/app/utils/web-api.ts +++ b/packages/ui/src/app/utils/web-api.ts @@ -38,7 +38,7 @@ export function openDeeplinkWithFallback(href: string, fallback: () => void): vo fallback(); }; - const fallbackTimeout = setTimeout(() => doFallback(), 1000); + const fallbackTimeout = setTimeout(() => doFallback(), 200); window.addEventListener('blur', () => clearTimeout(fallbackTimeout), { once: true }); openLink(href, '_self'); @@ -240,32 +240,3 @@ export function toDeeplink(universalLink: string, deeplink: string): string { const url = new URL(universalLink); return deeplink + url.search; } - -/** - * Try to open deeplink with given fallback universal link that is opened if none app supports the deeplink - * @param deeplink - * @param universalLink - * @param options - */ -export function openDeeplinkWithUniversalFallback(deeplink: string, universalLink: string, options?: { notBlank?: boolean; onFallbackRun?: () => void }): void { - let blurred = false; - function blurHandler(): void { - blurred = true; - window.removeEventListener('blur', blurHandler); - } - - window.addEventListener('blur', blurHandler); - - openLink(deeplink); - - setTimeout(() => { - if (!blurred) { - if (options?.notBlank) { - openLink(universalLink); - } else { - openLinkBlank(universalLink); - } - } - window.removeEventListener('blur', blurHandler); - }, 100); -} diff --git a/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx index ee458642..6f7e8975 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx +++ b/packages/ui/src/app/views/modals/wallets-modal/desktop-connection-modal/index.tsx @@ -43,7 +43,8 @@ import { } from 'src/app/components'; import { appState } from 'src/app/state/app.state'; import { - openDeeplinkWithUniversalFallback, + isBrowser, + openDeeplinkWithFallback, openLinkBlank, toDeeplink } from 'src/app/utils/web-api'; @@ -61,6 +62,8 @@ export interface DesktopConnectionProps { onBackClick: () => void; } +let openDesktopDeeplinkAttempts = 0; + export const DesktopConnectionModal: Component = props => { const [mode, setMode] = createSignal<'mobile' | 'desktop' | 'extension'>('mobile'); const [connectionErrored, setConnectionErrored] = createSignal(false); @@ -121,26 +124,29 @@ export const DesktopConnectionModal: Component = props = setMode('desktop'); const linkWithStrategy = addReturnStrategy(universalLink()!, appState.returnStrategy); - if (props.wallet.deepLink) { + + // check because safari doesn't support deeplinks fallbacks. Ignore deeplinks in safari after first failed attempt + const haveTriedToOpenDeeplinkInSafari = isBrowser('safari') && openDesktopDeeplinkAttempts >= 1; + if (props.wallet.deepLink && !haveTriedToOpenDeeplinkInSafari) { + openDesktopDeeplinkAttempts++; setLastSelectedWalletInfo({ ...props.wallet, openMethod: 'custom-deeplink' }); - openDeeplinkWithUniversalFallback(toDeeplink(linkWithStrategy, props.wallet.deepLink), linkWithStrategy, { - onFallbackRun: () => { - setLastSelectedWalletInfo({ - ...props.wallet, - openMethod: 'universal-link' - }); - } - }); + openDeeplinkWithFallback(toDeeplink(linkWithStrategy, props.wallet.deepLink), () => { + setLastSelectedWalletInfo({ + ...props.wallet, + openMethod: 'universal-link' + }); + openLinkBlank(linkWithStrategy); + }) } else { setLastSelectedWalletInfo({ ...props.wallet, openMethod: 'universal-link' }); - openLinkBlank(addReturnStrategy(universalLink()!, appState.returnStrategy)); + openLinkBlank(linkWithStrategy); } };