diff --git a/packages/ui/src/app/styles/media.ts b/packages/ui/src/app/styles/media.ts index 0aeea315..417c7e96 100644 --- 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 index 8bdf8580..cbbcc170 100644 --- 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 index 146ce58b..7f4547a9 100644 --- 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 index 6a9e181d..6b6c0fa1 100644 --- 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; }