feat: Support telegram mini app

node-real · Sep 6, 2024 · 3c711ae · 3c711ae
1 parent 221d30a
commit 3c711ae
Show file tree

Hide file tree

Showing 24 changed files with 45 additions and 118 deletions.
diff --git a/.changeset/smart-dryers-switch.md → .changeset/brown-laws-drum.md b/.changeset/smart-dryers-switch.md → .changeset/brown-laws-drum.md
@@ -2,4 +2,4 @@
 '@node-real/walletkit': patch
 ---
 
-Refactor walletkit
+Support telegram mini app
diff --git a/.changeset/pre.json b/.changeset/pre.json
diff --git a/.changeset/tiny-kings-hunt.md b/.changeset/tiny-kings-hunt.md
diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-real/walletkit",
-  "version": "2.3.2-alpha.1",
+  "version": "2.3.5",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",

diff --git a/packages/walletkit/src/core/configs/types.ts b/packages/walletkit/src/core/configs/types.ts
@@ -21,7 +21,6 @@ export interface BaseWallet extends WalletConfig {
   isVisible?: boolean;
   render?: (props: WalletRenderProps) => React.ReactNode;
   showQRCode?: boolean;
-  connectWithUri?: boolean;
   isInstalled: () => boolean | undefined;
 }
 

diff --git a/packages/walletkit/src/core/modals/ConnectModal/HomeView/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/HomeView/index.tsx
@@ -10,16 +10,15 @@ import { EvmHomeViewWalletConnectUriProvider } from '@/evm/components/EvmHomeVie
 import { isMobile, isTMA } from '@/core/base/utils/mobile';
 
 export function HomeView() {
-  const { wallets, options, evmConfig } = useWalletKit();
+  const { wallets, options } = useWalletKit();
   const { isMobileLayout } = useResponsive();
 
   const visibleWallets = wallets.filter((item) => item.isVisible !== false);
   const useGridLayout =
     visibleWallets.length >= options.gridLayoutThreshold! ||
     (isMobileLayout && options.useGridLayoutOnMobile);
 
-  const needPreCreateWcUri =
-    (!!evmConfig?.wallets.find((item) => item.connectWithUri) || isTMA()) && isMobile();
+  const needPreCreateWcUri = isTMA() && isMobile();
 
   return (
     <>

diff --git a/packages/walletkit/src/core/modals/ConnectModal/RouteProvider/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/RouteProvider/index.tsx
@@ -2,18 +2,16 @@ import { useState, useRef, useMemo, useCallback } from 'react';
 import { RouteContext } from './context';
 import { EvmConnectingView } from '@/evm/components/EvmConnectingView';
 import { EvmQRCodeView } from '@/evm/components/EvmQRCodeView';
-import { EvmWalletConnectURIConnectingView } from '@/evm/components/EvmWalletConnectURIConnectingView';
+import { EvmUriConnectingView } from '@/evm/components/EvmUriConnectingView';
 import { SolanaConnectingView } from '@/solana/components/SolanaConnectingView';
 import { SolanaQRCodeView } from '@/solana/components/SolanaQRCodeView';
 import { HomeView } from '../HomeView';
-import { EvmMetaMaskURIConnectingView } from '@/evm/components/EvmMetaMaskURIConnectingView';
 
 export enum ViewRoutes {
   HOME = 'HOME',
   EVM_CONNECTING = 'EVM_CONNECTING',
   EVM_QRCODE = 'EVM_QRCODE',
-  EVM_WALLET_CONNECT_URI_CONNECTING = 'EVM_WALLET_CONNECT_URI_CONNECTING',
-  EVM_META_MASK_URI_CONNECTING = 'EVM_META_MASK_URI_CONNECTING',
+  EVM_URI_CONNECTING = 'EVM_URI_CONNECTING',
   SOLANA_CONNECTING = 'SOLANA_CONNECTING',
   SOLANA_QRCODE = 'SOLANA_QRCODE',
 }
@@ -36,10 +34,8 @@ export function RouteProvider(props: RouteProviderProps) {
         return <EvmConnectingView />;
       case ViewRoutes.EVM_QRCODE:
         return <EvmQRCodeView />;
-      case ViewRoutes.EVM_WALLET_CONNECT_URI_CONNECTING:
-        return <EvmWalletConnectURIConnectingView />;
-      case ViewRoutes.EVM_META_MASK_URI_CONNECTING:
-        return <EvmMetaMaskURIConnectingView />;
+      case ViewRoutes.EVM_URI_CONNECTING:
+        return <EvmUriConnectingView />;
       case ViewRoutes.SOLANA_CONNECTING:
         return <SolanaConnectingView />;
       case ViewRoutes.SOLANA_QRCODE:

diff --git a/packages/walletkit/src/evm/components/EvmMetaMaskURIConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmMetaMaskURIConnectingView/index.tsx
diff --git a/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx b/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx
@@ -10,7 +10,7 @@ export function EvmQRCodeView() {
 
   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 = useIsConnected();
 
   return (

diff --git a/...mWalletConnectURIConnectingView/index.tsx → ...components/EvmUriConnectingView/index.tsx b/...mWalletConnectURIConnectingView/index.tsx → ...components/EvmUriConnectingView/index.tsx
@@ -7,7 +7,7 @@ import { openLink } from '@/core/utils/common';
 import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useConnectingStatus } from '@/evm/hooks/useConnectingStatus';
 
-export function EvmWalletConnectURIConnectingView() {
+export function EvmUriConnectingView() {
   const { selectedWallet } = useWalletKit();
   const isConnected = useIsConnected();
 
@@ -23,7 +23,7 @@ export function EvmWalletConnectURIConnectingView() {
   const onTryAgain = () => {
     setStatus(CONNECT_STATUS.CONNECTING);
 
-    const walletUri = (selectedWallet as EvmWallet).getConnectUri(wcUri!);
+    const walletUri = (selectedWallet as EvmWallet).getUri(wcUri!);
     openLink(walletUri);
   };
 

diff --git a/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx b/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx
@@ -1,4 +1,4 @@
-import { isAndroid, isMobile, isTMA } from '@/core/base/utils/mobile';
+import { isMobile, isTMA } from '@/core/base/utils/mobile';
 import { UseWalletRenderProps } from '@/core/hooks/useWalletRender';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
@@ -76,22 +76,18 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
       }
     };
 
-    const tryJumpToUriConnectingView = () => {
-      if (isAndroid()) {
-        jumpToDeepLink();
-      } else {
-        const wcUri = getEvmGlobalData().homeViewWalletConnectUri;
-        if (wcUri) {
-          const connectUri = wallet.getUri(wcUri);
-          if (connectUri) {
-            openLink(connectUri);
-            jumpTo(ViewRoutes.EVM_WALLET_CONNECT_URI_CONNECTING);
-          } else {
-            options.onError?.(
-              new Error(`The wallet does not support URI connection`),
-              `The wallet does not support URI connection`,
-            );
-          }
+    const jumpToUriConnectingView = () => {
+      const wcUri = getEvmGlobalData().homeViewWalletConnectUri;
+      if (wcUri) {
+        const connectUri = wallet.getUri(wcUri);
+        if (connectUri) {
+          openLink(connectUri);
+          jumpTo(ViewRoutes.EVM_URI_CONNECTING);
+        } else {
+          options.onError?.(
+            new Error(`The wallet does not support URI connection`),
+            `The wallet does not support URI connection`,
+          );
         }
       }
     };
@@ -107,7 +103,7 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
           if (isWalletConnect(walletId)) {
             wcModal.onOpen();
           } else {
-            tryJumpToUriConnectingView();
+            jumpToUriConnectingView();
           }
         } else {
           // 1.2 pc
@@ -117,8 +113,6 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
         // 2. mobile
         if (isWalletConnect(walletId)) {
           wcModal.onOpen();
-        } else if (wallet.connectWithUri) {
-          tryJumpToUriConnectingView();
         } else if (wallet.isInstalled()) {
           jumpToConnectingView();
         } else {

diff --git a/...tkit/src/evm/hooks/useConnectEvmWallet.ts → ...lletkit/src/evm/hooks/useConnectWallet.ts b/...tkit/src/evm/hooks/useConnectEvmWallet.ts → ...lletkit/src/evm/hooks/useConnectWallet.ts
@@ -1,7 +1,7 @@
 import { useEvmConnect } from '@/evm/hooks/useEvmConnect';
 import { useWalletKit } from '../../core/providers/WalletKitProvider/context';
 
-export function useConnectEvmWallet() {
+export function useConnectWallet() {
   const { log, evmConfig } = useWalletKit();
 
   const { connect, connectors } = useEvmConnect();

diff --git a/packages/walletkit/src/evm/index.ts b/packages/walletkit/src/evm/index.ts
@@ -8,4 +8,4 @@ export * from './components/EthereumScript';
 export * from './utils/defaultEvmConfig';
 
 // hooks
-export * from './hooks/useConnectEvmWallet';
+export * from './hooks/useConnectWallet';
diff --git a/packages/walletkit/src/evm/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/evm/wallets/binanceWeb3Wallet/index.tsx
@@ -13,7 +13,6 @@ export function binanceWeb3Wallet(props: InjectedEvmWalletOptions = {}): EvmWall
     id: 'binanceWeb3Wallet',
     walletType: 'evm',
     showQRCode: true,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },

diff --git a/packages/walletkit/src/evm/wallets/bitgetWallet/index.tsx b/packages/walletkit/src/evm/wallets/bitgetWallet/index.tsx
@@ -2,6 +2,7 @@ import { bitgetWalletConfig } from '@/core/configs/bitgetWallet';
 import { EvmWallet, InjectedEvmWalletOptions } from '../types';
 import { injected } from '../injected';
 import { getEvmInjectedProvider } from '../utils';
+import { isAndroid, isTMA } from '@/core/base/utils/mobile';
 
 export function bitgetWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
   const { connectorOptions, ...restProps } = props;
@@ -11,15 +12,18 @@ export function bitgetWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'bitgetWallet',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },
     getDeepLink() {
       return `https://bkcode.vip?action=dapp&url=${window.location.href}`;
     },
     getUri(uri) {
-      return `https://bkcode.vip/wc?uri=${encodeURIComponent(uri)}`;
+      let encodedUri = encodeURIComponent(uri);
+      if (isTMA() && isAndroid()) {
+        encodedUri = encodeURIComponent(encodedUri);
+      }
+      return `https://bkcode.vip/wc?uri=${encodedUri}`;
     },
     getCreateConnectorFn() {
       return injected({

diff --git a/packages/walletkit/src/evm/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/evm/wallets/coinbaseWallet/index.tsx
@@ -19,7 +19,6 @@ export function coinbaseWallet(props: CoinbaseWalletOptions = {}): EvmWallet {
     id: 'coinbaseWallet',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       if (
         connectorOptions &&

diff --git a/packages/walletkit/src/evm/wallets/mathWallet/index.tsx b/packages/walletkit/src/evm/wallets/mathWallet/index.tsx
@@ -11,7 +11,6 @@ export function mathWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'mathWallet',
     walletType: 'evm',
     spinnerColor: undefined,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },

diff --git a/packages/walletkit/src/evm/wallets/metaMask/index.tsx b/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 { isAndroid, isTMA } from '@/core/base/utils/mobile';
 
 export function metaMask(props: InjectedEvmWalletOptions = {}): EvmWallet {
   const { connectorOptions, ...restProps } = props;
@@ -11,7 +12,6 @@ export function metaMask(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'metaMask',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return hasEvmInjectedProvider('isMetaMask');
     },
@@ -20,7 +20,11 @@ export function metaMask(props: InjectedEvmWalletOptions = {}): EvmWallet {
       return `https://metamask.app.link/dapp/${dappPath}`;
     },
     getUri(uri) {
-      return `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`;
+      let encodedUri = encodeURIComponent(uri);
+      if (isTMA() && isAndroid()) {
+        encodedUri = encodeURIComponent(encodedUri);
+      }
+      return `https://metamask.app.link/wc?uri=${encodedUri}`;
     },
     getCreateConnectorFn() {
       return injected({

diff --git a/packages/walletkit/src/evm/wallets/okxWallet/index.tsx b/packages/walletkit/src/evm/wallets/okxWallet/index.tsx
@@ -11,7 +11,6 @@ export function okxWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'okxWallet',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },

diff --git a/packages/walletkit/src/evm/wallets/safe/index.tsx b/packages/walletkit/src/evm/wallets/safe/index.tsx
@@ -14,7 +14,6 @@ export function safe(props: SafeOptions = {}): EvmWallet {
     id: 'safe',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return !(typeof window === 'undefined') && window?.parent !== window;
     },

diff --git a/packages/walletkit/src/evm/wallets/tokenPocket/index.tsx b/packages/walletkit/src/evm/wallets/tokenPocket/index.tsx
@@ -11,7 +11,6 @@ export function tokenPocket(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'tokenPocket',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },

diff --git a/packages/walletkit/src/evm/wallets/trustWallet/index.tsx b/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 { isAndroid, isTMA } from '@/core/base/utils/mobile';
 
 export function trustWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
   const { connectorOptions, ...restProps } = props;
@@ -12,7 +13,6 @@ export function trustWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
     id: 'trust',
     walletType: 'evm',
     showQRCode: false,
-    connectWithUri: false,
     isInstalled() {
       return !!getProvider();
     },
@@ -21,7 +21,11 @@ export function trustWallet(props: InjectedEvmWalletOptions = {}): EvmWallet {
       return `https://link.trustwallet.com/open_url?coin_id=60&url=${encodedUrl}`;
     },
     getUri(uri) {
-      return `https://link.trustwallet.com/wc?uri=${encodeURIComponent(uri)}`;
+      let encodedUri = encodeURIComponent(uri);
+      if (isTMA() && isAndroid()) {
+        encodedUri = encodeURIComponent(encodedUri);
+      }
+      return `https://link.trustwallet.com/wc?uri=${encodedUri}`;
     },
     getCreateConnectorFn() {
       return injected({

diff --git a/packages/walletkit/src/evm/wallets/walletConnect/index.tsx b/packages/walletkit/src/evm/wallets/walletConnect/index.tsx
@@ -15,7 +15,6 @@ export function walletConnect(props: WalletConnectOptions = {}): EvmWallet {
     id: 'walletConnect',
     walletType: 'evm',
     showQRCode: !connectorOptions?.showQrModal,
-    connectWithUri: false,
     isInstalled() {
       return false;
     },