feat: tma (#36)

* feat: tma deeplink compatibility * fix: android deeplinks in telegram mini apps * feat: base64 encoding of connection uri * chore: reset lock * chore: checks if window is defined * chore: reenables custom android deeplinks on non tg envs * refactor: `startapp` assignment * fix: window check
WalletConnect · Sep 30, 2024 · 0fb3683 · 0fb3683
1 parent 95571fb
commit 0fb3683
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/packages/modal-core/src/utils/CoreUtil.ts b/packages/modal-core/src/utils/CoreUtil.ts
@@ -36,10 +36,23 @@ export const CoreUtil = {
     return Array.isArray(data) && data.length > 0
   },
 
+  isTelegram() {
+    return (
+      typeof window !== 'undefined' &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (Boolean((window as any).TelegramWebviewProxy) ||
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Boolean((window as any).Telegram) ||
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Boolean((window as any).TelegramWebviewProxyProto))
+    )
+  },
+
   formatNativeUrl(appUrl: string, wcUri: string, name: string): string {
     if (CoreUtil.isHttpUrl(appUrl)) {
       return this.formatUniversalUrl(appUrl, wcUri, name)
     }
+
     let safeAppUrl = appUrl
     if (!safeAppUrl.includes('://')) {
       safeAppUrl = appUrl.replaceAll('/', '').replaceAll(':', '')
@@ -59,6 +72,23 @@ export const CoreUtil = {
       return this.formatNativeUrl(appUrl, wcUri, name)
     }
     let safeAppUrl = appUrl
+    //  Universal link required in telegram context
+    if (safeAppUrl.startsWith('https://t.me')) {
+      // eslint-disable-next-line require-unicode-regexp
+      const formattedUri = Buffer.from(wcUri).toString('base64').replace(/[=]/g, '')
+      if (safeAppUrl.endsWith('/')) {
+        safeAppUrl = safeAppUrl.slice(0, -1)
+      }
+
+      this.setWalletConnectDeepLink(safeAppUrl, name)
+
+      const url = new URL(safeAppUrl)
+      url.searchParams.set('startapp', formattedUri)
+      const link = url.toString()
+
+      return link
+    }
+
     if (!safeAppUrl.endsWith('/')) {
       safeAppUrl = `${safeAppUrl}/`
     }
@@ -75,7 +105,8 @@ export const CoreUtil = {
   },
 
   openHref(href: string, target: '_blank' | '_self') {
-    window.open(href, target, 'noreferrer noopener')
+    const adjustedTarget = this.isTelegram() ? '_blank' : target
+    window.open(href, adjustedTarget, 'noreferrer noopener')
   },
 
   setWalletConnectDeepLink(href: string, name: string) {

diff --git a/packages/modal-ui/src/utils/UiUtil.ts b/packages/modal-ui/src/utils/UiUtil.ts
@@ -76,22 +76,20 @@ export const UiUtil = {
     }
   },
 
-  handleMobileLinking(wallet: WalletData) {
+  handleMobileLinking(wallet: WalletData, target = '_self' as '_self' | '_blank') {
     const { walletConnectUri } = OptionsCtrl.state
     const { mobile, name } = wallet
     const nativeUrl = mobile?.native
     const universalUrl = mobile?.universal
-
     UiUtil.setRecentWallet(wallet)
-
     function onRedirect(uri: string) {
-      let href = ''
       if (nativeUrl) {
-        href = CoreUtil.formatUniversalUrl(nativeUrl, uri, name)
+        const href = CoreUtil.formatNativeUrl(nativeUrl, uri, name)
+        CoreUtil.openHref(href, target)
       } else if (universalUrl) {
-        href = CoreUtil.formatNativeUrl(universalUrl, uri, name)
+        const href = CoreUtil.formatUniversalUrl(universalUrl, uri, name)
+        CoreUtil.openHref(href, target)
       }
-      CoreUtil.openHref(href, '_self')
     }
 
     if (walletConnectUri) {
@@ -104,7 +102,7 @@ export const UiUtil = {
 
     if (walletConnectUri) {
       CoreUtil.setWalletConnectAndroidDeepLink(walletConnectUri)
-      CoreUtil.openHref(walletConnectUri, '_self')
+      CoreUtil.openHref(walletConnectUri, CoreUtil.isTelegram() ? '_blank' : '_self')
     }
   },
 
@@ -186,6 +184,9 @@ export const UiUtil = {
     if (isMobileDevice) {
       if (isMobile) {
         RouterCtrl.push('MobileConnecting')
+        if (!CoreUtil.isAndroid() && CoreUtil.isTelegram()) {
+          this.handleMobileLinking(wallet, '_blank')
+        }
       } else if (isWeb) {
         RouterCtrl.push('WebConnecting')
       } else {

diff --git a/packages/modal-ui/src/views/wcm-connect-wallet-view/index.ts b/packages/modal-ui/src/views/wcm-connect-wallet-view/index.ts
@@ -9,7 +9,8 @@ export class WcmConnectWalletView extends LitElement {
 
   // -- private ------------------------------------------------------ //
   private viewTemplate() {
-    if (CoreUtil.isAndroid()) {
+    // Disabled custom android deeplink handling in telegram mini apps because it doesn't work
+    if (CoreUtil.isAndroid() && !CoreUtil.isTelegram()) {
       return html`<wcm-android-wallet-selection></wcm-android-wallet-selection>`
     }
 

diff --git a/packages/modal-ui/src/views/wcm-desktop-connecting-view/index.ts b/packages/modal-ui/src/views/wcm-desktop-connecting-view/index.ts
@@ -25,10 +25,14 @@ export class WcmDesktopConnectingView extends LitElement {
   private onFormatAndRedirect(uri: string) {
     const { desktop, name } = CoreUtil.getWalletRouterData()
     const nativeUrl = desktop?.native
+    const universalUrl = desktop?.universal
 
     if (nativeUrl) {
       const href = CoreUtil.formatNativeUrl(nativeUrl, uri, name)
       CoreUtil.openHref(href, '_self')
+    } else if (universalUrl) {
+      const href = CoreUtil.formatUniversalUrl(universalUrl, uri, name)
+      CoreUtil.openHref(href, '_blank')
     }
   }
 

diff --git a/packages/modal-ui/src/views/wcm-mobile-connecting-view/index.ts b/packages/modal-ui/src/views/wcm-mobile-connecting-view/index.ts
@@ -26,23 +26,25 @@ export class WcmMobileConnectingView extends LitElement {
     const { mobile, name } = CoreUtil.getWalletRouterData()
     const nativeUrl = mobile?.native
     const universalUrl = mobile?.universal
-
+    const target = CoreUtil.isTelegram() ? '_blank' : '_self'
+    // eslint-disable-next-line no-param-reassign
+    uri = CoreUtil.isTelegram() && CoreUtil.isAndroid() ? encodeURIComponent(uri) : uri
     if (nativeUrl && !forceUniversalUrl) {
       const href = CoreUtil.formatNativeUrl(nativeUrl, uri, name)
-      CoreUtil.openHref(href, '_self')
+      CoreUtil.openHref(href, target)
     } else if (universalUrl) {
       const href = CoreUtil.formatUniversalUrl(universalUrl, uri, name)
-      CoreUtil.openHref(href, '_self')
+      CoreUtil.openHref(href, target)
     }
   }
 
   private openMobileApp(forceUniversalUrl = false) {
     const { walletConnectUri } = OptionsCtrl.state
     const routerData = CoreUtil.getWalletRouterData()
-    UiUtil.setRecentWallet(routerData)
     if (walletConnectUri) {
       this.onFormatAndRedirect(walletConnectUri, forceUniversalUrl)
     }
+    UiUtil.setRecentWallet(routerData)
   }
 
   private onGoToAppStore(downloadUrl?: string) {