feat: support TMA

examples/nextjs/pages/_app.tsx

@@ -19,6 +19,7 @@ const config: WalletKitConfig = {
     evmConfig({
       autoConnect: true,
       initialChainId: 1,
+      walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
       wallets: [metaMask(), trustWallet(), walletConnect()],
       chains: [mainnet] as any[],
     }),

examples/vite/src/App.tsx

@@ -18,6 +18,7 @@ const config: WalletKitConfig = {
     evmConfig({
       autoConnect: true,
       initialChainId: 1,
+      walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
       wallets: [metaMask(), trustWallet(), walletConnect()],
       chains: [mainnet] as any[],
     }),

packages/walletkit/__dev__/App.tsx

@@ -52,9 +52,7 @@ const config: WalletKitConfig = {
       walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
       chains: [mainnet, bsc],
       wallets: [
-        metaMask({
-          useWalletConnect: true,
-        }),
+        metaMask(),
         trustWallet(),
         walletConnect(),
         binanceWeb3Wallet(),

packages/walletkit/src/core/base/utils/mobile.ts

@@ -21,3 +21,17 @@ export function isIOS(): boolean {
 export function isMobile(): boolean {
   return isAndroid() || isIOS();
 }
+
+// telegram mini app
+export function isTMA(): boolean {
+  const check = (host: any) => {
+    return (
+      typeof host !== 'undefined' &&
+      'TelegramWebviewProxy' in host &&
+      'postEvent' in host.TelegramWebviewProxy &&
+      typeof host.TelegramWebviewProxy.postEvent === 'function'
+    );
+  };
+
+  return check(window);
+}

packages/walletkit/src/core/modals/ConnectModal/ConnectingView/index.tsx

@@ -34,6 +34,8 @@ export function ConnectingView(props: ConnectingViewProps) {
   const downloadUrl = useWalletDownloadUrl(wallet.downloadUrls);
 
   useEffect(() => {
+    log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
+
     if (status === CONNECT_STATUS.UNAVAILABLE || !isReady) return;
 
     const connectTimeout = setTimeout(runConnect, 600);
@@ -43,8 +45,6 @@ export function ConnectingView(props: ConnectingViewProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady]);
 
-  log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
-
   const isError = [
     CONNECT_STATUS.FAILED,
     CONNECT_STATUS.NOTCONNECTED,

packages/walletkit/src/core/modals/ConnectModal/RouteProvider/index.tsx

@@ -2,7 +2,7 @@ import { useState, useRef, useMemo, useCallback } from 'react';
 import { RouteContext } from './context';
 import { EvmConnectingView } from '@/evm/components/EvmConnectingView';
 import { EvmConnectWithQRCodeView } from '@/evm/components/EvmConnectWithQRCodeView';
-import { EvmConnectWithWalletConnect } from '@/evm/components/EvmConnectWithWalletConnect';
+import { EvmConnectWithWalletConnectView } from '@/evm/components/EvmConnectWithWalletConnectView';
 import { SolanaConnectingView } from '@/solana/components/SolanaConnectingView';
 import { SolanaConnectWithQRCodeView } from '@/solana/components/SolanaConnectWithQRCodeView';
 import { ConnectorsView } from '../ConnectorsView';
@@ -11,7 +11,7 @@ export enum ViewRoutes {
   CONNECTORS = 'Connectors',
   EVM_CONNECTING = 'EvmConnecting',
   EVM_CONNECT_WITH_QRCODE = 'EvmConnectWithQRCode',
-  EVM_CONNECT_WITH_WALLET_CONNECT = 'EvmConnectWithWalletConnect',
+  EVM_CONNECT_WITH_WALLET_CONNECT = 'EvmConnectWithWalletConnectView',
   SOLANA_CONNECTING = 'SolanaConnecting',
   SOLANA_CONNECT_WITH_QRCODE = 'SolanaConnectWithQRCode',
 }
@@ -35,7 +35,7 @@ export function RouteProvider(props: RouteProviderProps) {
       case ViewRoutes.EVM_CONNECT_WITH_QRCODE:
         return <EvmConnectWithQRCodeView />;
       case ViewRoutes.EVM_CONNECT_WITH_WALLET_CONNECT:
-        return <EvmConnectWithWalletConnect />;
+        return <EvmConnectWithWalletConnectView />;
       case ViewRoutes.SOLANA_CONNECTING:
         return <SolanaConnectingView />;
       case ViewRoutes.SOLANA_CONNECT_WITH_QRCODE:

packages/walletkit/src/core/providers/WalletKitProvider/index.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider } from '../ThemeProvider';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { EvmWalletProvider } from '@/evm/components/EvmWalletProvider';
 import { SolanaWalletProvider } from '@/solana/components/SolanaWalletProvider';
 import { Action, WalletKitConfig, WalletKitContext } from './context';
@@ -8,6 +8,7 @@ import { ConnectModalProvider } from '@/core/modals/ConnectModal/provider';
 import { ToastProvider } from '@/core/base/components/toast/ToastProvider';
 import { BaseWallet } from '@/core/configs/types';
 import { ProfileModalProvider } from '@/core/modals/ProfileModal/provider';
+import { isTMA } from '@/core/base/utils/mobile';
 
 export interface WalletKitProviderProps {
   config: WalletKitConfig;
@@ -56,6 +57,17 @@ export function WalletKitProvider(props: WalletKitProviderProps) {
     };
   }, [action, config.debug, finalConfig, selectedWallet, wallets]);
 
+  // TMA hack
+  useEffect(() => {
+    if (isTMA()) {
+      window.open = (function (open) {
+        return function (url, _, features) {
+          return open.call(window, url, '_blank', features);
+        };
+      })(window.open);
+    }
+  }, []);
+
   return (
     <WalletKitContext.Provider value={value}>
       <ToastProvider />

packages/walletkit/src/evm/components/EvmConnectWithQRCodeView/index.tsx

@@ -1,14 +1,14 @@
 import { ConnectWithQRCode } from '@/core/modals/ConnectModal/ConnectWithQRCode';
 import { useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
 import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
-import { useQRCodeUri } from '@/evm/hooks/useQRCodeUri';
+import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
 import { EvmWallet, isWalletConnect } from '@/evm/wallets';
 
 export function EvmConnectWithQRCodeView() {
   const { selectedWallet } = useSelectedWallet();
 
-  const wcUri = useQRCodeUri();
+  const wcUri = useWalletConnectUri();
   const wcModal = useWalletConnectModal();
   const qrCodeUri = wcUri && ((selectedWallet as EvmWallet).getUri?.(wcUri) ?? wcUri);
   const isConnected = useEvmIsConnected();

packages/walletkit/src/evm/components/EvmConnectWithWalletConnect/index.tsx → packages/walletkit/src/evm/components/EvmConnectWithWalletConnectView/index.tsx

@@ -1,17 +1,18 @@
 import { CONNECT_STATUS } from '@/core/constants';
 import { ConnectingView } from '@/core/modals/ConnectModal/ConnectingView';
-import { useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
+import { useLogger, useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
 import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
-import { useQRCodeUri } from '@/evm/hooks/useQRCodeUri';
+import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { EvmWallet } from '@/evm/wallets';
 import { useCallback, useState } from 'react';
 
-export function EvmConnectWithWalletConnect() {
+export function EvmConnectWithWalletConnectView() {
   const { selectedWallet } = useSelectedWallet();
 
+  const log = useLogger();
   const [status, setStatus] = useState(CONNECT_STATUS.CONNECTING);
 
-  const wcUri = useQRCodeUri({
+  const wcUri = useWalletConnectUri({
     onError(error: any) {
       if (error.code) {
         // https://github.com/MetaMask/eth-rpc-errors/blob/main/src/error-constants.ts
@@ -42,13 +43,15 @@ export function EvmConnectWithWalletConnect() {
     },
   });
 
-  const qrCodeUri = (selectedWallet as EvmWallet).getUri(wcUri);
+  const walletUri = (selectedWallet as EvmWallet).getUri(wcUri);
   const isConnected = useEvmIsConnected();
 
   const onClickConnect = useCallback(() => {
+    log(`[connectWithWalletConnect] walletUri`, walletUri);
     setStatus(CONNECT_STATUS.CONNECTING);
-    window.open(qrCodeUri, '_self', 'noopener noreferrer');
-  }, [qrCodeUri]);
+    window.open(walletUri, '_self', 'noopener noreferrer');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [walletUri]);
 
   return (
     <ConnectingView

packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx

@@ -1,5 +1,5 @@
 import { UseWalletRenderProps } from '@/core/hooks/useWalletRender';
-import { isMobile } from '@/core/index';
+import { isMobile, isTMA } from '@/core/index';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
 import { useRouter } from '@/core/modals/ConnectModal/RouteProvider/context';
@@ -33,7 +33,6 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
   const router = useRouter();
 
   const timerRef = useRef<any>();
-  const mobile = isMobile();
   const { wallets } = useEvmConfig();
 
   clickRef.current = (walletId: string, e: React.MouseEvent<Element, MouseEvent>) => {
@@ -75,8 +74,15 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
 
     clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
-      if (mobile) {
-        // 1. mobile
+      if (isTMA()) {
+        // 1. TMA
+        if (isMobile()) {
+          jumpToWalletConnectView();
+        } else {
+          jumpToQRCodeView();
+        }
+      } else if (isMobile()) {
+        // 2. mobile
         if (isWalletConnect(walletId)) {
           wcModal.onOpen();
         } else if (wallet.useWalletConnect) {
@@ -92,7 +98,7 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
           }
         }
       } else {
-        // 2. pc
+        // 3. pc
         if (isWalletConnect(walletId)) {
           if (wallet.showQRCode) {
             jumpToQRCodeView();

packages/walletkit/src/evm/hooks/useQRCodeUri.ts → packages/walletkit/src/evm/hooks/useWalletConnectUri.ts

@@ -9,11 +9,11 @@ import { ConnectErrorType } from 'wagmi/actions';
 
 let timer: any;
 
-interface UseQRCodeUriProps {
+interface UseWalletConnectUriProps {
   onError?: (error: ConnectErrorType) => void;
 }
 
-export function useQRCodeUri(props?: UseQRCodeUriProps) {
+export function useWalletConnectUri(props?: UseWalletConnectUriProps) {
   const { connectAsync } = useConnect();
 
   const eventConfig = useEventConfig();

packages/walletkit/src/evm/wallets/metaMask/index.tsx

@@ -2,6 +2,7 @@ import { metaMaskConfig } from '@/core/configs/metaMask';
 import { hasEvmInjectedProvider } from '../utils';
 import { injected } from '../injected';
 import { InjectedEvmWalletOptions, EvmWallet } from '../types';
+import { isMobile, isTMA } from '@/core/index';
 
 export function metaMask(props: InjectedEvmWalletOptions = {}): EvmWallet {
   const { connectorOptions, ...restProps } = props;
@@ -20,7 +21,13 @@ export function metaMask(props: InjectedEvmWalletOptions = {}): EvmWallet {
       return `dapp://${dappPath}`;
     },
     getUri(uri) {
-      return `metamask://wc?uri=${encodeURIComponent(uri)}`;
+      const wcUri = `wc?uri=${encodeURIComponent(uri)}`;
+
+      if (isTMA() && isMobile()) {
+        return `https://metamask.app.link/${wcUri}`;
+      }
+
+      return `metamask://${wcUri}`;
     },
     getCreateConnectorFn() {
       return injected({

packages/walletkit/src/evm/wallets/trustWallet/index.tsx

@@ -3,6 +3,7 @@ import { trustWalletConfig } from '@/core/configs/trustWallet';
 import { injected } from '../injected';
 import { EvmWallet, InjectedEvmWalletOptions } from '../types';
 import { getEvmInjectedProvider } from '../utils';
+import { isMobile, isTMA } from '@/core/index';
 
 export function trustWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
   const { connectorOptions, ...restProps } = props;
@@ -23,7 +24,13 @@ export function trustWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
       return dappPath;
     },
     getUri(uri) {
-      return `trust://wc?uri=${encodeURIComponent(uri)}`;
+      const wcUri = `wc?uri=${encodeURIComponent(uri)}`;
+
+      if (isTMA() && isMobile()) {
+        return `https://link.trustwallet.com/${wcUri}`;
+      }
+
+      return `trust://${wcUri}`;
     },
     getCreateConnectorFn() {
       return injected({