feat(ui): enhance return strategies for ipad

ton-connect · Mar 25, 2024 · a7ab8e4 · a7ab8e4
1 parent 17a9dbe
commit a7ab8e4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/packages/ui/src/app/styles/media.ts b/packages/ui/src/app/styles/media.ts
@@ -28,7 +28,7 @@ export function isDevice(device: keyof typeof maxWidth | 'desktop'): boolean {
             return width > maxWidth.mobile;
         default:
         case 'mobile':
-            return width <= maxWidth.mobile || isOS('ios', 'android');
+            return width <= maxWidth.mobile || isOS('ios', 'android', 'ipad');
     }
 }
 

diff --git a/packages/ui/src/app/utils/url-strategy-helpers.ts b/packages/ui/src/app/utils/url-strategy-helpers.ts
@@ -157,6 +157,36 @@ export function redirectToTelegram(
                     options.returnStrategy
                 );
 
+                openLinkBlank(linkWithStrategy);
+            }
+        } else if (isOS('ipad')) {
+            // Use the `back` strategy, the user will transition to the other app
+            // and return to the browser when the action is completed.
+
+            // TODO: use back for all browsers
+            if (options.returnStrategy === 'back') {
+                options.returnStrategy = 'back';
+            }
+
+            // In case if the browser is Chrome or Firefox, use the deep link with fallback to the direct link.
+            const isChrome = isBrowser('chrome');
+            const isFirefox = isBrowser('firefox');
+            const useDeepLink = (isChrome || isFirefox) && !options.forceRedirect;
+
+            if (useDeepLink) {
+                const linkWithStrategy = addReturnStrategy(
+                  directLinkUrl.toString(),
+                  options.returnStrategy
+                );
+                const deepLink = convertToTGDeepLink(linkWithStrategy);
+
+                openDeeplinkWithFallback(deepLink, () => openLinkBlank(linkWithStrategy));
+            } else {
+                const linkWithStrategy = addReturnStrategy(
+                  directLinkUrl.toString(),
+                  options.returnStrategy
+                );
+
                 openLinkBlank(linkWithStrategy);
             }
         } else if (isOS('macos', 'windows', 'linux')) {
@@ -389,6 +419,25 @@ export function redirectToWallet(
             setOpenMethod('universal-link');
 
             openLinkBlank(addReturnStrategy(universalLink, options.returnStrategy));
+        } else if (isOS('ipad')) {
+            // Use the `back` strategy, the user will transition to the other app
+            // and return to the browser when the action is completed.
+
+            // return back to the browser
+            if (options.returnStrategy === 'back') {
+                options.returnStrategy = 'back';
+            }
+
+            if (isBrowser('chrome')) {
+                setOpenMethod('universal-link');
+
+                // TODO: in case when the wallet does not exist, the location.href will be rewritten
+                openLink(addReturnStrategy(universalLink, options.returnStrategy), '_self');
+            } else {
+                setOpenMethod('universal-link');
+
+                openLinkBlank(addReturnStrategy(universalLink, options.returnStrategy));
+            }
         } else if (isOS('macos', 'windows', 'linux')) {
             // Use the `back` strategy, the user will transition to the other app
             // and return to the browser when the action is completed.

diff --git a/packages/ui/src/app/utils/web-api.ts b/packages/ui/src/app/utils/web-api.ts
@@ -186,8 +186,12 @@ export function isMobileUserAgent(): boolean {
 export function getUserAgent(): UserAgent {
     const results = new UAParser().getResult();
     const osName = results.os.name?.toLowerCase();
+    const deviceModel = results.device.model?.toLowerCase();
     let os: UserAgent['os'];
     switch (true) {
+        case deviceModel === 'ipad':
+            os = 'ipad';
+            break;
         case osName === 'ios':
             os = 'ios';
             break;

diff --git a/packages/ui/src/models/user-agent.ts b/packages/ui/src/models/user-agent.ts
@@ -1,4 +1,4 @@
 export interface UserAgent {
-    os: 'ios' | 'android' | 'macos' | 'windows' | 'linux' | undefined;
+    os: 'ios' | 'ipad' | 'android' | 'macos' | 'windows' | 'linux' | undefined;
     browser: 'chrome' | 'firefox' | 'safari' | 'opera' | undefined;
 }