fix: fix module resolve issue

.changeset/blue-parents-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix module resolve issue

.changeset/rude-hornets-shop.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support telegram mini app

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

@@ -11,7 +11,6 @@ import {
   binanceWeb3Wallet,
   bitgetWallet,
   coinbaseWallet,
-  EthereumScript,
   evmConfig,
   mathWallet,
   metaMask,
@@ -50,6 +49,7 @@ const config: WalletKitConfig = {
     evmConfig({
       autoConnect: true,
       initialChainId: 1,
+      walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
       chains: [mainnet, bsc],
       wallets: [
         metaMask(),

packages/walletkit/evm/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/evm/index.js"
+}

packages/walletkit/package.json

@@ -14,13 +14,16 @@
   "keywords": [
     "walletkit"
   ],
-  "type": "module",
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "main": "./dist/core/index.js",
   "types": "./dist/core/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "evm",
+    "solana",
+    "styles.css"
+  ],
   "exports": {
     ".": "./dist/core/index.js",
     "./styles.css": "./dist/style.css",
@@ -38,9 +41,9 @@
     "build": "vite build"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5",
     "react": ">=17",
     "react-dom": ">=17",
-    "@tanstack/react-query": "^5",
     "viem": "^2",
     "wagmi": "^2"
   },
@@ -72,6 +75,7 @@
     "viem": "^2.17.4",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-mkcert": "^1.17.6",
     "wagmi": "^2.10.10"
   }
 }

packages/walletkit/solana/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/solana/index.js"
+}

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/configs/getDefaultConfig.ts

@@ -6,11 +6,10 @@ import { EvmConfig } from '@/evm/utils/evmConfig';
 type DefaultConfig = Pick<WalletKitContextProps, 'appearance' | 'eventConfig' | 'walletConfig'>;
 
 export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
-  const evmConfig = config.walletConfigs.find((item) => item.walletType === 'evm') as EvmConfig;
+  const { appearance, eventConfig, walletConfigs } = config;
 
-  const solanaConfig = config.walletConfigs.find(
-    (item) => item.walletType === 'solana',
-  ) as SolanaConfig;
+  const evmConfig = walletConfigs.find((item) => item.walletType === 'evm') as EvmConfig;
+  const solanaConfig = walletConfigs.find((item) => item.walletType === 'solana') as SolanaConfig;
 
   return {
     appearance: {
@@ -27,7 +26,7 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
 
       walletDownloadUrl: `https://trustwallet.com/`,
 
-      ...config.appearance,
+      ...appearance,
     },
 
     eventConfig: {
@@ -43,7 +42,7 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
           });
         }
       },
-      ...config.eventConfig,
+      ...eventConfig,
     },
 
     walletConfig: {
@@ -52,5 +51,3 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
     },
   };
 }
-
-export const WALLET_CONNECT_PROJECT_ID = 'e68a1816d39726c2afabf05661a32767';

packages/walletkit/src/core/configs/types.ts

@@ -21,6 +21,7 @@ export interface BaseWallet extends WalletConfig {
   isVisible?: boolean;
   render?: (props: WalletRenderProps) => React.ReactNode;
   showQRCode?: boolean;
+  useWalletConnect?: boolean;
   isInstalled: () => boolean | undefined;
 }
 

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

@@ -23,26 +23,27 @@ interface ConnectingViewProps {
   runConnect: () => void;
   wallet: BaseWallet;
   isConnected: boolean;
+  isReady?: boolean;
 }
 
 export function ConnectingView(props: ConnectingViewProps) {
-  const { status, runConnect, wallet, isConnected } = props;
+  const { status, runConnect, wallet, isConnected, isReady = true } = props;
 
   const log = useLogger();
   const logos = useWalletLogos(wallet.logos);
   const downloadUrl = useWalletDownloadUrl(wallet.downloadUrls);
 
   useEffect(() => {
-    if (status === CONNECT_STATUS.UNAVAILABLE) return;
+    log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
+
+    if (status === CONNECT_STATUS.UNAVAILABLE || !isReady) return;
 
     const connectTimeout = setTimeout(runConnect, 600);
     return () => {
       clearTimeout(connectTimeout);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
+  }, [isReady]);
 
   const isError = [
     CONNECT_STATUS.FAILED,

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

@@ -2,6 +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 { EvmConnectWithWalletConnectView } from '@/evm/components/EvmConnectWithWalletConnectView';
 import { SolanaConnectingView } from '@/solana/components/SolanaConnectingView';
 import { SolanaConnectWithQRCodeView } from '@/solana/components/SolanaConnectWithQRCodeView';
 import { ConnectorsView } from '../ConnectorsView';
@@ -10,6 +11,7 @@ export enum ViewRoutes {
   CONNECTORS = 'Connectors',
   EVM_CONNECTING = 'EvmConnecting',
   EVM_CONNECT_WITH_QRCODE = 'EvmConnectWithQRCode',
+  EVM_CONNECT_WITH_WALLET_CONNECT = 'EvmConnectWithWalletConnectView',
   SOLANA_CONNECTING = 'SolanaConnecting',
   SOLANA_CONNECT_WITH_QRCODE = 'SolanaConnectWithQRCode',
 }
@@ -32,6 +34,8 @@ export function RouteProvider(props: RouteProviderProps) {
         return <EvmConnectingView />;
       case ViewRoutes.EVM_CONNECT_WITH_QRCODE:
         return <EvmConnectWithQRCodeView />;
+      case ViewRoutes.EVM_CONNECT_WITH_WALLET_CONNECT:
+        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,16 +1,16 @@
 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).getQRCodeUri?.(wcUri) ?? wcUri);
+  const qrCodeUri = wcUri && ((selectedWallet as EvmWallet).getUri?.(wcUri) ?? wcUri);
   const isConnected = useEvmIsConnected();
 
   return (

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

@@ -0,0 +1,65 @@
+import { CONNECT_STATUS } from '@/core/constants';
+import { ConnectingView } from '@/core/modals/ConnectModal/ConnectingView';
+import { useLogger, useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
+import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
+import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
+import { EvmWallet } from '@/evm/wallets';
+import { useCallback, useState } from 'react';
+
+export function EvmConnectWithWalletConnectView() {
+  const { selectedWallet } = useSelectedWallet();
+
+  const log = useLogger();
+  const [status, setStatus] = useState(CONNECT_STATUS.CONNECTING);
+
+  const wcUri = useWalletConnectUri({
+    onError(error: any) {
+      if (error.code) {
+        // https://github.com/MetaMask/eth-rpc-errors/blob/main/src/error-constants.ts
+        switch (error.code) {
+          case -32002:
+            setStatus(CONNECT_STATUS.NOTCONNECTED);
+            break;
+          case 4001:
+            setStatus(CONNECT_STATUS.REJECTED);
+            break;
+          default:
+            setStatus(CONNECT_STATUS.FAILED);
+            break;
+        }
+      } else {
+        // Sometimes the error doesn't respond with a code
+        if (error.message) {
+          switch (error.message) {
+            case 'User rejected request':
+              setStatus(CONNECT_STATUS.REJECTED);
+              break;
+            default:
+              setStatus(CONNECT_STATUS.FAILED);
+              break;
+          }
+        }
+      }
+    },
+  });
+
+  const walletUri = (selectedWallet as EvmWallet).getUri(wcUri);
+  const isConnected = useEvmIsConnected();
+
+  const onClickConnect = useCallback(() => {
+    log(`[connectWithWalletConnect] walletUri`, walletUri);
+    setStatus(CONNECT_STATUS.CONNECTING);
+    window.open(walletUri, '_self', 'noopener noreferrer');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [walletUri]);
+
+  return (
+    <ConnectingView
+      isConnected={isConnected}
+      status={status}
+      runConnect={onClickConnect}
+      wallet={selectedWallet}
+      isReady={!!wcUri}
+    />
+  );
+}