fix(ui): safari desktop deeplink flow improved

ton-connect · Dec 19, 2023 · 7c10b17 · 7c10b17
1 parent c9b1bcd
commit 7c10b17
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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<DesktopConnectionProps> = props => {
     const [mode, setMode] = createSignal<'mobile' | 'desktop' | 'extension'>('mobile');
     const [connectionErrored, setConnectionErrored] = createSignal(false);
@@ -121,26 +124,29 @@ export const DesktopConnectionModal: Component<DesktopConnectionProps> = 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);
         }
     };