feat: appkit tg mini apps support (#2938)

reown-com · Oct 2, 2024 · 0de5030 · 0de5030
1 parent e6a36a7
commit 0de5030
Show file tree

Hide file tree

Showing 19 changed files with 237 additions and 626 deletions.
diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json
@@ -80,8 +80,8 @@
     "@tanstack/react-query": "5.24.8",
     "@wagmi/connectors": "5.1.9",
     "@wagmi/core": "2.13.4",
-    "@walletconnect/universal-provider": "2.16.1",
-    "@walletconnect/utils": "2.16.1",
+    "@walletconnect/universal-provider": "2.17.0",
+    "@walletconnect/utils": "2.17.0",
     "@reown/appkit": "workspace:*",
     "@reown/appkit-ethers": "workspace:*",
     "@reown/appkit-ethers5": "workspace:*",

diff --git a/packages/adapters/ethers/package.json b/packages/adapters/ethers/package.json
@@ -26,8 +26,8 @@
     "@reown/appkit-siwe": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@walletconnect/utils": "2.16.1",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "peerDependencies": {
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@vitest/coverage-v8": "2.0.5",
-    "@walletconnect/types": "2.16.1",
+    "@walletconnect/types": "2.17.0",
     "vitest": "2.0.5"
   },
   "author": "Reown <support@reown.com> (https://reown.com)",

diff --git a/packages/adapters/ethers5/package.json b/packages/adapters/ethers5/package.json
@@ -26,8 +26,8 @@
     "@reown/appkit-siwe": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@walletconnect/utils": "2.16.1",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "peerDependencies": {
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@vitest/coverage-v8": "2.0.5",
-    "@walletconnect/types": "2.16.1",
+    "@walletconnect/types": "2.17.0",
     "vitest": "2.0.5"
   },
   "author": "Reown <support@reown.com> (https://reown.com)",

diff --git a/packages/adapters/solana/package.json b/packages/adapters/solana/package.json
@@ -48,9 +48,9 @@
     "@solana/wallet-standard-features": "1.2.0",
     "@solana/wallet-standard-util": "1.1.1",
     "@solana/web3.js": "1.95.2",
-    "@walletconnect/utils": "2.16.1",
-    "@walletconnect/types": "2.16.1",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
+    "@walletconnect/types": "2.17.0",
+    "@walletconnect/universal-provider": "2.17.0",
     "@wallet-standard/app": "1.0.1",
     "@wallet-standard/base": "1.0.1",
     "@wallet-standard/features": "1.0.3",

diff --git a/packages/adapters/wagmi/package.json b/packages/adapters/wagmi/package.json
@@ -26,8 +26,8 @@
     "@reown/appkit-siwe": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@walletconnect/utils": "2.16.1",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "peerDependencies": {
@@ -41,7 +41,7 @@
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@vitest/coverage-v8": "2.0.5",
-    "@walletconnect/types": "2.16.1",
+    "@walletconnect/types": "2.17.0",
     "vitest": "2.0.5"
   },
   "author": "Reown <support@reown.com> (https://reown.com)",

diff --git a/packages/appkit-utils/package.json b/packages/appkit-utils/package.json
@@ -49,7 +49,7 @@
     "@reown/appkit-polyfills": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
     "@walletconnect/logger": "2.1.2",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "devDependencies": {

diff --git a/packages/appkit/package.json b/packages/appkit/package.json
@@ -97,9 +97,9 @@
     "@reown/appkit-siwe": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@walletconnect/types": "2.16.1",
-    "@walletconnect/utils": "2.16.1",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/types": "2.17.0",
+    "@walletconnect/utils": "2.17.0",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "devDependencies": {
@@ -108,7 +108,7 @@
     "@vitest/coverage-v8": "2.0.5",
     "@vue/runtime-core": "3.4.3",
     "@walletconnect/types": "2.13.3",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/universal-provider": "2.17.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vitest": "2.0.5",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@reown/appkit-common": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/universal-provider": "2.17.0",
     "valtio": "1.11.2"
   },
   "devDependencies": {

diff --git a/packages/core/src/controllers/ConnectionController.ts b/packages/core/src/controllers/ConnectionController.ts
@@ -64,10 +64,11 @@ const state = proxy<ConnectionControllerState>({
   status: 'disconnected'
 })
 
+// eslint-disable-next-line init-declarations
+let wcConnectionPromise: Promise<void> | undefined
 // -- Controller ---------------------------------------- //
 export const ConnectionController = {
   state,
-
   subscribeKey<K extends StateKey>(
     key: K,
     callback: (value: ConnectionControllerState[K]) => void
@@ -86,12 +87,46 @@ export const ConnectionController = {
   async connectWalletConnect() {
     StorageUtil.setConnectedConnector('WALLET_CONNECT')
 
-    await ChainController.state?.universalAdapter?.connectionControllerClient?.connectWalletConnect?.(
-      uri => {
-        state.wcUri = uri
-        state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry()
+    if (CoreHelperUtil.isTelegram()) {
+      if (wcConnectionPromise) {
+        try {
+          await wcConnectionPromise
+        } catch (error) {
+          /* Empty */
+        }
+        wcConnectionPromise = undefined
+
+        return
+      }
+
+      if (!CoreHelperUtil.isPairingExpired(state?.wcPairingExpiry)) {
+        const link = state.wcUri
+        state.wcUri = link
+
+        return
       }
-    )
+      wcConnectionPromise = new Promise(async (resolve, reject) => {
+        await ChainController.state?.universalAdapter?.connectionControllerClient
+          ?.connectWalletConnect?.(uri => {
+            state.wcUri = uri
+            state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry()
+          })
+          .catch(reject)
+        resolve()
+      })
+      this.state.status = 'connecting'
+      await wcConnectionPromise
+      wcConnectionPromise = undefined
+      state.wcPairingExpiry = undefined
+      this.state.status = 'connected'
+    } else {
+      await ChainController.state?.universalAdapter?.connectionControllerClient?.connectWalletConnect?.(
+        uri => {
+          state.wcUri = uri
+          state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry()
+        }
+      )
+    }
   },
 
   async connectExternal(options: ConnectExternalOptions, chain: ChainNamespace, setChain = true) {
@@ -164,6 +199,7 @@ export const ConnectionController = {
     state.wcPairingExpiry = undefined
     state.wcLinking = undefined
     state.recentWallet = undefined
+    state.status = 'disconnected'
     TransactionsController.resetTransactions()
     StorageUtil.deleteWalletConnectDeepLink()
   },

diff --git a/packages/core/src/utils/CoreHelperUtil.ts b/packages/core/src/utils/CoreHelperUtil.ts
@@ -100,6 +100,11 @@ export const CoreHelperUtil = {
     if (!safeAppUrl.endsWith('/')) {
       safeAppUrl = `${safeAppUrl}/`
     }
+    // Android deeplinks in tg context require the uri to be encoded twice
+    if (this.isTelegram() && this.isAndroid()) {
+      // eslint-disable-next-line no-param-reassign
+      wcUri = encodeURIComponent(wcUri)
+    }
     const encodedWcUrl = encodeURIComponent(wcUri)
 
     return {
@@ -123,13 +128,36 @@ export const CoreHelperUtil = {
       href: safeAppUrl
     }
   },
+  getOpenTargetForPlatform(target: string) {
+    // Only '_blank' deeplinks work in Telegram context
+    if (this.isTelegram()) {
+      return '_blank'
+    }
 
+    return target
+  },
   openHref(href: string, target: '_blank' | '_self' | 'popupWindow', features?: string) {
-    window.open(href, target, features || 'noreferrer noopener')
+    window.open(href, this.getOpenTargetForPlatform(target), features || 'noreferrer noopener')
   },
 
   returnOpenHref(href: string, target: '_blank' | '_self' | 'popupWindow', features?: string) {
-    return window.open(href, target, features || 'noreferrer noopener')
+    return window.open(
+      href,
+      this.getOpenTargetForPlatform(target),
+      features || 'noreferrer noopener'
+    )
+  },
+
+  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))
+    )
   },
 
   async preloadImage(src: string) {

diff --git a/packages/ethers/package.json b/packages/ethers/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "4.0.3",
-    "@walletconnect/utils": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
     "@reown/appkit": "workspace:*",
     "@reown/appkit-adapter-ethers": "workspace:*",
     "@reown/appkit-common": "workspace:*",

diff --git a/packages/ethers5/package.json b/packages/ethers5/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "4.0.3",
-    "@walletconnect/utils": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
     "@reown/appkit": "workspace:*",
     "@reown/appkit-common": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",

diff --git a/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts
@@ -75,6 +75,10 @@ export class W3mConnectingWidget extends LitElement {
         ConnectionController.subscribeKey('buffering', val => (this.buffering = val))
       ]
     )
+    // The uri should be preloaded in the tg ios context so we can safely init as the subscribeKey won't trigger
+    if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos() && ConnectionController.state.wcUri) {
+      this.onConnect?.()
+    }
   }
 
   public override firstUpdated() {

diff --git a/packages/scaffold-ui/src/views/w3m-connect-view/index.ts b/packages/scaffold-ui/src/views/w3m-connect-view/index.ts
@@ -1,7 +1,13 @@
 import { customElement } from '@reown/appkit-ui'
 import { LitElement, html } from 'lit'
 import styles from './styles.js'
-import { ConnectorController, OptionsController, RouterController } from '@reown/appkit-core'
+import {
+  ConnectionController,
+  ConnectorController,
+  CoreHelperUtil,
+  OptionsController,
+  RouterController
+} from '@reown/appkit-core'
 import { state } from 'lit/decorators/state.js'
 
 @customElement('w3m-connect-view')
@@ -54,6 +60,10 @@ export class W3mConnectView extends LitElement {
     if (!enableWallets) {
       return null
     }
+    // In tg ios context, we have to preload the connection uri so we can use it to deeplink on user click
+    if (CoreHelperUtil.isTelegram() && CoreHelperUtil.isIos()) {
+      ConnectionController.connectWalletConnect().catch(_e => ({}))
+    }
 
     if (this.authConnector && socials) {
       if (this.authConnector && emailShowWallets) {

diff --git a/packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts b/packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts
@@ -62,8 +62,8 @@ export class W3mConnectingWcView extends LitElement {
     }
 
     try {
-      const { wcPairingExpiry } = ConnectionController.state
-      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
+      const { wcPairingExpiry, status } = ConnectionController.state
+      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry) || status === 'connecting') {
         await ConnectionController.connectWalletConnect()
         this.finalizeConnection()
 

diff --git a/packages/siwe/package.json b/packages/siwe/package.json
@@ -16,7 +16,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@walletconnect/utils": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
     "@reown/appkit-core": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-common": "workspace:*",

diff --git a/packages/solana/package.json b/packages/solana/package.json
@@ -61,7 +61,7 @@
     "@wallet-standard/features": "1.0.3",
     "@wallet-standard/wallet": "1.0.1",
     "@reown/appkit-adapter-solana": "workspace:*",
-    "@walletconnect/universal-provider": "2.16.1",
+    "@walletconnect/universal-provider": "2.17.0",
     "@reown/appkit": "workspace:*",
     "@reown/appkit-common": "workspace:*",
     "@reown/appkit-core": "workspace:*",
@@ -77,7 +77,7 @@
   "devDependencies": {
     "@types/bn.js": "5.1.5",
     "@vitest/coverage-v8": "2.0.5",
-    "@walletconnect/types": "2.16.1",
+    "@walletconnect/types": "2.17.0",
     "vitest": "2.0.5"
   },
   "peerDependencies": {

diff --git a/packages/wagmi/package.json b/packages/wagmi/package.json
@@ -51,7 +51,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@walletconnect/utils": "2.16.1",
+    "@walletconnect/utils": "2.17.0",
     "@reown/appkit-polyfills": "workspace:*",
     "@reown/appkit-adapter-wagmi": "workspace:*",
     "@reown/appkit": "workspace:*",