feat: Make walletConnect uri as global variable

.changeset/blue-parents-rhyme.md

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

.changeset/quick-dragons-laugh.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Make walletConnect uri as global variable

.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,14 +49,19 @@ const config: WalletKitConfig = {
     evmConfig({
       autoConnect: true,
       initialChainId: 1,
-      chains: [mainnet, bsc],
+      walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
+      chains: [mainnet, bsc] as any,
       wallets: [
-        metaMask(),
+        metaMask({
+          useWalletConnect: true,
+        }),
         trustWallet(),
         walletConnect(),
         binanceWeb3Wallet(),
         tokenPocket(),
-        bitgetWallet(),
+        bitgetWallet({
+          showQRCode: true,
+        }),
         okxWallet(),
         coinbaseWallet(),
         mathWallet(),

packages/walletkit/evm/package.json

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

packages/walletkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-real/walletkit",
-  "version": "2.3.0-alpha.5",
+  "version": "2.3.0-alpha.9",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",
@@ -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"
   },
@@ -49,6 +52,7 @@
     "@solana/wallet-adapter-react": "^0",
     "@solana/wallet-adapter-wallets": "^0",
     "@solana/web3.js": "^1",
+    "@twa-dev/sdk": "^7.8.0",
     "qrcode": "^1.5.3"
   },
   "devDependencies": {
@@ -72,6 +76,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');
+  const solanaConfig = walletConfigs.find((item) => item.walletType === 'solana');
 
   return {
     appearance: {
@@ -27,7 +26,7 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
 
       walletDownloadUrl: `https://trustwallet.com/`,
 
-      ...config.appearance,
+      ...appearance,
     },
 
     eventConfig: {
@@ -43,14 +42,12 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
           });
         }
       },
-      ...config.eventConfig,
+      ...eventConfig,
     },
 
     walletConfig: {
-      evmConfig,
-      solanaConfig,
+      evmConfig: evmConfig as EvmConfig | undefined,
+      solanaConfig: solanaConfig as SolanaConfig | undefined,
     },
   };
 }
-
-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/RouteProvider/index.tsx

@@ -2,16 +2,18 @@ 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';
 
 export enum ViewRoutes {
-  CONNECTORS = 'Connectors',
-  EVM_CONNECTING = 'EvmConnecting',
-  EVM_CONNECT_WITH_QRCODE = 'EvmConnectWithQRCode',
-  SOLANA_CONNECTING = 'SolanaConnecting',
-  SOLANA_CONNECT_WITH_QRCODE = 'SolanaConnectWithQRCode',
+  CONNECTORS = 'ConnectorsView',
+  EVM_CONNECTING = 'EvmConnectingView',
+  EVM_CONNECT_WITH_QRCODE = 'EvmConnectWithQRCodeView',
+  EVM_CONNECT_WITH_WALLET_CONNECT = 'EvmConnectWithWalletConnectView',
+  SOLANA_CONNECTING = 'SolanaConnectingView',
+  SOLANA_CONNECT_WITH_QRCODE = 'SolanaConnectWithQRCodeView',
 }
 
 export interface RouteProviderProps {
@@ -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/modals/ConnectModal/ConnectWithQRCode/index.tsx → packages/walletkit/src/core/modals/ConnectModal/TemplateConnectWithQRCodeView/index.tsx

@@ -11,15 +11,15 @@ import { clsContainer, clsOfficialButton } from './styles.css';
 import { useAutoCloseConnectModal } from '@/core/hooks/useAutoCloseConnectModal';
 import { BaseWallet } from '@/core/configs/types';
 
-export interface ConnectWithQRCodeProps {
+export interface TemplateConnectWithQRCodeViewProps {
   wallet: BaseWallet;
-  qrCodeUri: string;
+  qrCodeUri?: string;
   onClickOpenWcModal: () => void;
   isConnected: boolean;
   isWalletConnect: boolean;
 }
 
-export function ConnectWithQRCode(props: ConnectWithQRCodeProps) {
+export function TemplateConnectWithQRCodeView(props: TemplateConnectWithQRCodeViewProps) {
   const { wallet, qrCodeUri, onClickOpenWcModal, isConnected, isWalletConnect } = props;
 
   const appearance = useAppearance();

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

@@ -18,21 +18,24 @@ import { clsContent, clsGap, clsFooter, clsButton } from './styles.css';
 import { useAutoCloseConnectModal } from '@/core/hooks/useAutoCloseConnectModal';
 import { BaseWallet } from '@/core/configs/types';
 
-interface ConnectingViewProps {
+interface TemplateConnectingViewProps {
   status: CONNECT_STATUS;
   runConnect: () => void;
+  onTryAgain: () => void;
   wallet: BaseWallet;
   isConnected: boolean;
 }
 
-export function ConnectingView(props: ConnectingViewProps) {
-  const { status, runConnect, wallet, isConnected } = props;
+export function TemplateConnectingView(props: TemplateConnectingViewProps) {
+  const { status, runConnect, onTryAgain, wallet, isConnected } = props;
 
   const log = useLogger();
   const logos = useWalletLogos(wallet.logos);
   const downloadUrl = useWalletDownloadUrl(wallet.downloadUrls);
 
   useEffect(() => {
+    log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
+
     if (status === CONNECT_STATUS.UNAVAILABLE) return;
 
     const connectTimeout = setTimeout(runConnect, 600);
@@ -42,8 +45,6 @@ export function ConnectingView(props: ConnectingViewProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  log('[connecting page]', `name: ${wallet?.name}, status: ${status}`);
-
   const isError = [
     CONNECT_STATUS.FAILED,
     CONNECT_STATUS.NOTCONNECTED,
@@ -116,7 +117,7 @@ export function ConnectingView(props: ConnectingViewProps) {
 
       {(status === CONNECT_STATUS.FAILED || status === CONNECT_STATUS.REJECTED) && (
         <ModalFooter className={clsFooter}>
-          <Button className={cx('wk-retry-button', clsButton)} onClick={runConnect}>
+          <Button className={cx('wk-retry-button', clsButton)} onClick={onTryAgain}>
             Try Again
           </Button>
         </ModalFooter>

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

@@ -3,6 +3,7 @@ import { useEventConfig } from '@/core/providers/WalletKitProvider/context';
 import { useRouter } from './RouteProvider/context';
 import { useConnectModal } from './context';
 import { Navbar } from '@/core/components/Navbar';
+import { EvmConnectorUriProvider } from '@/evm/components/EvmConnectorUriProvider';
 
 export function ConnectModal() {
   const eventConfig = useEventConfig();
@@ -12,15 +13,19 @@ export function ConnectModal() {
   const showBack = history.length > 1;
 
   return (
-    <Modal
-      className="wk-connect-modal"
-      isOpen={isOpen}
-      onClose={onClose}
-      closeOnEsc={eventConfig?.closeModalOnEsc}
-      closeOnOverlayClick={eventConfig?.closeModalOnOverlayClick}
-    >
-      <Navbar showBack={showBack} onBack={back} onClose={onClose} />
-      {view}
-    </Modal>
+    <>
+      <Modal
+        className="wk-connect-modal"
+        isOpen={isOpen}
+        onClose={onClose}
+        closeOnEsc={eventConfig?.closeModalOnEsc}
+        closeOnOverlayClick={eventConfig?.closeModalOnOverlayClick}
+      >
+        <Navbar showBack={showBack} onBack={back} onClose={onClose} />
+        {view}
+      </Modal>
+
+      <EvmConnectorUriProvider />
+    </>
   );
 }

packages/walletkit/src/core/modals/ConnectModal/provider.tsx

@@ -39,12 +39,13 @@ function WithRouter(props: ConnectModalProviderProps) {
       },
       onOpen(params: ConnectModalOpenParams = {}) {
         router.push(params.viewRoute ?? ViewRoutes.CONNECTORS);
-
         setAction(params.action);
+        onOpen();
+
+        // TODO
         if (evmConfig && params.initialChainId) {
           evmConfig.initialChainId = params.initialChainId;
         }
-        onOpen();
       },
     };
   }, [evmConfig, isOpen, onClose, onOpen, router, setAction]);

packages/walletkit/src/core/providers/WalletKitProvider/context.ts

@@ -111,6 +111,7 @@ export function useSelectedWallet() {
   };
 }
 
+// TODO
 export function useWalletKit() {
   const log = useLogger();
   const { wallets, setWallets } = useContext(WalletKitContext);

packages/walletkit/src/core/utils/common.ts

@@ -1,3 +1,6 @@
+import WebApp from '@twa-dev/sdk';
+import { isTMA } from '../base/utils/mobile';
+
 export function mergeList(list1: any[] = [], list2: any[] = []) {
   const result: any[] = [...list1];
 
@@ -25,3 +28,13 @@ export async function sleep(duration = 1000) {
     }, duration);
   });
 }
+
+export async function openUri(uri: string) {
+  if (!uri) return;
+
+  if (isTMA()) {
+    WebApp.openLink(uri);
+  } else {
+    window.open(uri, '_self', 'noopener noreferrer');
+  }
+}

packages/walletkit/src/core/utils/eventEmitter.ts

@@ -28,7 +28,9 @@ class CustomEventEmitter {
     }
   }
 
-  SolanaWalletError = 'SolanaWalletError';
+  SOLANA_WALLET_ERROR = 'SOLANA_WALLET_ERROR';
+  EVM_WC_URI_ERROR = 'EVM_WC_URI_ERROR';
+  EVM_UPDATE_WC_URI = 'EVM_SET_WC_URI';
 }
 
 export const EventEmitter = new CustomEventEmitter();