feat: Remove metaMask support on tg (#269)

wenty22 · web-flow · commit b5db8f6122b3 · 2025-01-16T13:17:37.000+08:00
* feat: Remove debug code

* fix: Fix type error

* feat: Remove unused packages

* feat: Update demo

* feat: Export a method to check whether a provider exists

* refactor: Use uniform method to get wallet behavior on evm &amp; non-evm wallets

* feat: Remove metaMask support on tg
diff --git a/.changeset/khaki-swans-cough.md b/.changeset/khaki-swans-cough.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Remove metaMask support on tg
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
@@ -21,12 +21,13 @@ import {
 } from '@/solana/index';
 import { bsc, mainnet, dfk } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useAccount, useDisconnect } from 'wagmi';
+import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi';
 import { defaultTronConfig, tronLink, useTronWallet } from '@/tron/index';
 import { uxuyWallet } from '@/evm/wallets/uxuyWallet';
 import { useEvmSwitchChain } from '@/evm/hooks/useEvmSwitchChain';
 import { codexFieldWallet } from '@/evm/wallets/codexFieldWallet';
 import { SwitchNetworkModal } from '@/core/modals/SwitchNetworkModal';
+import { useCallback } from 'react';
 
 new VConsole();
 
@@ -96,9 +97,12 @@ function ConnectButton() {
   const { address: tronAddress, disconnect: tronDisconnect } = useTronWallet();
   const { switchChain } = useEvmSwitchChain();
 
+  const connectBinanceWallet = useBinanceWallet();
+
   return (
     <>
       <div>
+        <button onClick={() => connectBinanceWallet()}>connect binance wallet</button>
         <button
           onClick={() =>
             onOpen({
@@ -148,3 +152,28 @@ function ConnectButton() {
     </>
   );
 }
+
+export function useBinanceWallet() {
+  const connectors = useConnectors();
+  const { connect } = useConnect();
+  const { disconnectAsync, reset } = useDisconnect();
+
+  return useCallback(async () => {
+    const connector = connectors?.find((connector) => connector.id === binanceWallet().id);
+    if (connector) {
+      reset();
+      await disconnectAsync();
+
+      setTimeout(() => {
+        try {
+          connect({
+            connector,
+            chainId: 56,
+          });
+        } catch (err) {
+          console.error(err);
+        }
+      }, 1000);
+    }
+  }, [connect, connectors, disconnectAsync, reset]);
+}
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -54,7 +54,7 @@
     "wagmi": "^2"
   },
   "dependencies": {
-    "@binance/w3w-wagmi-connector-v2": "^1.2.3",
+    "@binance/w3w-wagmi-connector-v2": "^1.2.5",
     "@metamask/jazzicon": "^2",
     "@solana/wallet-adapter-react": "^0",
     "@solana/wallet-adapter-wallets": "^0",
diff --git a/packages/walletkit/src/core/utils/common.ts b/packages/walletkit/src/core/utils/common.ts
@@ -1,5 +1,5 @@
 import { isAndroid, isIOS, isPC, isTMA } from '../base/utils/mobile';
-import { PlatformType } from '../configs/types';
+import { BaseBehavior, BaseWallet, PlatformType } from '../configs/types';
 
 export function mergeList(list1: any[] = [], list2: any[] = []) {
   const result: any[] = [...list1];
@@ -60,3 +60,11 @@ export function getPlatform(): PlatformType {
   }
   return 'browser-pc';
 }
+
+export function getWalletBehaviorOnPlatform<T extends BaseBehavior = BaseBehavior>(
+  wallet: BaseWallet,
+) {
+  const platform = getPlatform();
+  const behavior = wallet.behaviors.find((e) => e.platforms.includes(platform));
+  return behavior as T | undefined;
+}
diff --git a/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx
@@ -6,14 +6,15 @@ import { useWalletConnector } from '@/evm/hooks/useWalletConnector';
 import { useCallback } from 'react';
 import { useConnectingStatus } from '@/evm/hooks/useConnectingStatus';
 import { useAccount } from 'wagmi';
-import { getEvmWalletPlatformBehavior } from '@/evm/utils/getEvmWalletPlatformBehavior';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
+import { EvmWalletBehavior } from '@/evm/wallets';
 
 export function EvmConnectingView() {
   const { selectedWallet } = useWalletKit();
   const isConnected = useIsConnected();
   const selectedConnector = useWalletConnector(selectedWallet.id);
 
-  const behavior = getEvmWalletPlatformBehavior(selectedWallet);
+  const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(selectedWallet);
   const { connect, status, setStatus } = useConnectingStatus();
   const { address } = useAccount();
 
diff --git a/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx b/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx
@@ -3,11 +3,11 @@ import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { useIsConnected } from '@/evm/hooks/useIsConnected';
 import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
-import { isWalletConnect, metaMask } from '@/evm/wallets';
+import { EvmWalletBehavior, isWalletConnect, metaMask } from '@/evm/wallets';
 import { useMetaMaskUri } from '@/evm/hooks/userMetaMaskUri';
 import { useMemo } from 'react';
 import { useAccount } from 'wagmi';
-import { getEvmWalletPlatformBehavior } from '@/evm/utils/getEvmWalletPlatformBehavior';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 
 export function EvmQRCodeView() {
   const { selectedWallet } = useWalletKit();
@@ -24,7 +24,7 @@ export function EvmQRCodeView() {
       return metaMaskUri;
     }
 
-    const behavior = getEvmWalletPlatformBehavior(selectedWallet);
+    const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(selectedWallet);
     return wcUri ? behavior?.getUri?.(wcUri) : wcUri;
   }, [metaMaskUri, selectedWallet, wcUri]);
 
diff --git a/packages/walletkit/src/evm/components/EvmUriConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmUriConnectingView/index.tsx
@@ -2,14 +2,13 @@ import { CONNECT_STATUS } from '@/core/constants';
 import { TemplateConnectingView } from '@/core/modals/ConnectModal/TemplateConnectingView';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { useIsConnected } from '@/evm/hooks/useIsConnected';
-import { metaMask } from '@/evm/wallets';
-import { openLink } from '@/core/utils/common';
+import { EvmWalletBehavior, metaMask } from '@/evm/wallets';
+import { getWalletBehaviorOnPlatform, openLink } from '@/core/utils/common';
 import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useConnectingStatus } from '@/evm/hooks/useConnectingStatus';
 import { useMetaMaskUri } from '@/evm/hooks/userMetaMaskUri';
 import { useEffect, useMemo, useRef } from 'react';
 import { useAccount } from 'wagmi';
-import { getEvmWalletPlatformBehavior } from '@/evm/utils/getEvmWalletPlatformBehavior';
 
 export function EvmUriConnectingView() {
   const { selectedWallet } = useWalletKit();
@@ -30,7 +29,7 @@ export function EvmUriConnectingView() {
   });
 
   const qrCodeUri = useMemo(() => {
-    const behavior = getEvmWalletPlatformBehavior(selectedWallet);
+    const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(selectedWallet);
 
     return selectedWallet.id === metaMask().id
       ? metaMaskUri
diff --git a/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx b/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx
@@ -4,11 +4,10 @@ import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/providers/RouteProvider';
 import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
-import { openLink } from '@/core/utils/common';
+import { getWalletBehaviorOnPlatform, openLink } from '@/core/utils/common';
 import { useEvmConnect } from '@/evm/hooks/useEvmConnect';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
-import { getEvmWalletPlatformBehavior } from '@/evm/utils/getEvmWalletPlatformBehavior';
-import { EvmWallet } from '@/evm/wallets';
+import { EvmWallet, EvmWalletBehavior } from '@/evm/wallets';
 import { useRef } from 'react';
 import { useConnectors, useDisconnect } from 'wagmi';
 
@@ -33,7 +32,7 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
   clickRef.current = (walletId: string, e: React.MouseEvent<Element, MouseEvent>) => {
     const wallet = evmConfig!.wallets.find((item) => item.id === walletId)! as EvmWallet;
     const connector = connectors.find((item) => item.id === walletId)!;
-    const behavior = getEvmWalletPlatformBehavior(wallet);
+    const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(wallet);
 
     const pass = options.onClickWallet?.(wallet, e);
     if (pass === false) return;
@@ -103,8 +102,7 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
     if (isTMA() && isMobile()) {
       handleJumping();
     } else {
-      const delay = behavior?.connectType === 'sdk' ? 0 : 300;
-      timerRef.current = setTimeout(handleJumping, delay);
+      timerRef.current = setTimeout(handleJumping, 600);
     }
   };
 
diff --git a/packages/walletkit/src/evm/hooks/useConnectingStatus.ts b/packages/walletkit/src/evm/hooks/useConnectingStatus.ts
@@ -5,7 +5,8 @@ import { useEvmConnect } from './useEvmConnect';
 import { EventEmitter } from '@/core/utils/eventEmitter';
 import { Config } from 'wagmi';
 import { ConnectData } from 'wagmi/query';
-import { getEvmWalletPlatformBehavior } from '../utils/getEvmWalletPlatformBehavior';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
+import { EvmWalletBehavior } from '../wallets';
 
 interface UseConnectingStatusProps {
   initialStatus?: CONNECT_STATUS;
@@ -16,7 +17,7 @@ export function useConnectingStatus(props: UseConnectingStatusProps = {}) {
 
   const { selectedWallet, evmConfig, options, action } = useWalletKit();
 
-  const behavior = getEvmWalletPlatformBehavior(selectedWallet);
+  const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(selectedWallet);
 
   const defaultStatus = behavior?.isInstalled?.()
     ? CONNECT_STATUS.CONNECTING
diff --git a/packages/walletkit/src/evm/utils/defaultEvmConfig.ts b/packages/walletkit/src/evm/utils/defaultEvmConfig.ts
@@ -4,6 +4,7 @@ import {
   binanceWallet,
   coinbaseWallet,
   EvmWallet,
+  EvmWalletBehavior,
   isWalletConnect,
   metaMask,
   walletConnect,
@@ -13,7 +14,7 @@ import { setEvmGlobalData } from '../globalData';
 import { codexFieldWallet } from '../wallets/codexFieldWallet';
 import { ChainDisplayConfig } from '@/evm/chains/types';
 import { getChainDisplayConfigs } from '../chains';
-import { getEvmWalletPlatformBehavior } from './getEvmWalletPlatformBehavior';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 
 interface CustomizedEvmConfig
   extends Omit<CreateConfigParameters, 'chains' | 'connectors' | 'multiInjectedProviderDiscovery'> {
@@ -99,7 +100,7 @@ function getCreateConnectorFns(wallets: EvmWallet[]) {
         localStorage.removeItem(`wagmi.${w.id}.shimDisconnect`);
       }
 
-      const behavior = getEvmWalletPlatformBehavior(w);
+      const behavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(w);
       if (behavior?.getCreateConnectorFn) {
         return behavior.getCreateConnectorFn();
       }
diff --git a/packages/walletkit/src/evm/utils/evmCommonErrorHandler.ts b/packages/walletkit/src/evm/utils/evmCommonErrorHandler.ts
@@ -1,6 +1,6 @@
 import { isIOS, isMobile } from '@/core/base/utils/mobile';
-import { binanceWallet, EvmWallet, trustWallet } from '../wallets';
-import { getEvmWalletPlatformBehavior } from './getEvmWalletPlatformBehavior';
+import { binanceWallet, EvmWallet, EvmWalletBehavior, trustWallet } from '../wallets';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 
 export function evmCommonErrorHandler(props: {
   log: any;
@@ -10,8 +10,8 @@ export function evmCommonErrorHandler(props: {
 }) {
   const { log, handler, error } = props;
 
-  const trustBehavior = getEvmWalletPlatformBehavior(trustWallet());
-  const binanceBehavior = getEvmWalletPlatformBehavior(binanceWallet());
+  const trustBehavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(trustWallet());
+  const binanceBehavior = getWalletBehaviorOnPlatform<EvmWalletBehavior>(binanceWallet());
 
   let text = '';
 
diff --git a/packages/walletkit/src/evm/utils/getEvmWalletPlatformBehavior.ts b/packages/walletkit/src/evm/utils/getEvmWalletPlatformBehavior.ts
diff --git a/packages/walletkit/src/evm/wallets/metaMask/index.tsx b/packages/walletkit/src/evm/wallets/metaMask/index.tsx
@@ -27,16 +27,16 @@ export function metaMask(props: MetaMaskOptions = {}): EvmWallet {
     id: 'metaMask',
     walletType: 'evm',
     behaviors: [
-      {
-        platforms: ['tg-android', 'tg-ios'],
-        connectType: 'uri',
-        getCreateConnectorFn,
-      },
-      {
-        platforms: ['tg-pc'],
-        connectType: 'qrcode',
-        getCreateConnectorFn,
-      },
+      // {
+      //   platforms: ['tg-android', 'tg-ios'],
+      //   connectType: 'uri',
+      //   getCreateConnectorFn,
+      // },
+      // {
+      //   platforms: ['tg-pc'],
+      //   connectType: 'qrcode',
+      //   getCreateConnectorFn,
+      // },
       {
         platforms: ['browser-android', 'browser-ios', 'browser-pc'],
         connectType: 'default',
diff --git a/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx b/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx
@@ -3,10 +3,9 @@ import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/providers/RouteProvider';
 import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
-import { openLink } from '@/core/utils/common';
+import { getWalletBehaviorOnPlatform, openLink } from '@/core/utils/common';
 import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';
-import { getSolanaWalletPlatformBehavior } from '@/solana/utils/getSolanaWalletPlatformBehavior';
-import { SolanaWallet } from '@/solana/wallets';
+import { SolanaWallet, SolanaWalletBehavior } from '@/solana/wallets';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useRef } from 'react';
 
@@ -28,7 +27,7 @@ export function SetSolanaWalletClickRef(props: SetSolanaWalletClickRefProps) {
 
   clickRef.current = (walletId: string, e: React.MouseEvent<Element, MouseEvent>) => {
     const wallet = solanaConfig!.wallets.find((item) => item.id === walletId)! as SolanaWallet;
-    const behavior = getSolanaWalletPlatformBehavior(wallet);
+    const behavior = getWalletBehaviorOnPlatform<SolanaWalletBehavior>(wallet);
 
     const pass = options.onClickWallet?.(wallet, e);
     if (pass === false) return;
diff --git a/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx b/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx
@@ -1,11 +1,11 @@
 import { CONNECT_STATUS } from '@/core/constants';
 import { TemplateConnectingView } from '@/core/modals/ConnectModal/TemplateConnectingView';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 import { EventEmitter } from '@/core/utils/eventEmitter';
 import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';
-import { getSolanaWalletPlatformBehavior } from '@/solana/utils/getSolanaWalletPlatformBehavior';
 import { solanaCommonErrorHandler } from '@/solana/utils/solanaCommonErrorHandler';
-import { SolanaWallet } from '@/solana/wallets';
+import { SolanaWallet, SolanaWalletBehavior } from '@/solana/wallets';
 import { useWallet, WalletProviderProps } from '@solana/wallet-adapter-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -15,7 +15,7 @@ export function SolanaConnectingView() {
   const { log, selectedWallet, options } = useWalletKit();
 
   const behavior = useMemo(() => {
-    return getSolanaWalletPlatformBehavior(selectedWallet as SolanaWallet);
+    return getWalletBehaviorOnPlatform<SolanaWalletBehavior>(selectedWallet);
   }, [selectedWallet]);
 
   const [status, setStatus] = useState(
diff --git a/packages/walletkit/src/solana/utils/defaultSolanaConfig.ts b/packages/walletkit/src/solana/utils/defaultSolanaConfig.ts
@@ -1,7 +1,7 @@
 // import { Metadata } from '@/core/providers/WalletKitProvider/context';
-import { Adapter, SolanaWallet } from '@/solana/wallets';
+import { Adapter, SolanaWallet, SolanaWalletBehavior } from '@/solana/wallets';
 import { setSolanaGlobalData } from '../globalData';
-import { getSolanaWalletPlatformBehavior } from './getSolanaWalletPlatformBehavior';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 
 interface CustomizedSolanaConfig {
   autoConnect?: boolean;
@@ -34,7 +34,7 @@ export function defaultSolanaConfig(params: CustomizedSolanaConfig): SolanaConfi
 
   const adapters = wallets
     .map((w) => {
-      const behavior = getSolanaWalletPlatformBehavior(w);
+      const behavior = getWalletBehaviorOnPlatform<SolanaWalletBehavior>(w);
       return behavior?.getAdapter?.();
     })
     .filter((e) => !!e);
diff --git a/packages/walletkit/src/solana/utils/getSolanaWalletPlatformBehavior.ts b/packages/walletkit/src/solana/utils/getSolanaWalletPlatformBehavior.ts
diff --git a/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx b/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx
@@ -3,9 +3,9 @@ import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/providers/RouteProvider';
 import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
+import { getWalletBehaviorOnPlatform } from '@/core/utils/common';
 import { useTronConnect } from '@/tron/hooks/useTronConnect';
-import { getTronWalletPlatformBehavior } from '@/tron/utils/getTronWalletPlatformBehavior';
-import { TronWallet } from '@/tron/wallets';
+import { TronWallet, TronWalletBehavior } from '@/tron/wallets';
 import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { useRef } from 'react';
 
@@ -27,7 +27,7 @@ export function SetTronWalletClickRef(props: SetTronWalletClickRefProps) {
 
   clickRef.current = (walletId: string, e: React.MouseEvent<Element, MouseEvent>) => {
     const wallet = tronConfig!.wallets.find((item) => item.id === walletId)! as TronWallet;
-    const behavior = getTronWalletPlatformBehavior(wallet);
+    const behavior = getWalletBehaviorOnPlatform<TronWalletBehavior>(wallet);
 
     const pass = options.onClickWallet?.(wallet, e);
     if (pass === false) return;
diff --git a/packages/walletkit/src/tron/components/TronConnectingView/index.tsx b/packages/walletkit/src/tron/components/TronConnectingView/index.tsx
diff --git a/packages/walletkit/src/tron/utils/defaultTronConfig.ts b/packages/walletkit/src/tron/utils/defaultTronConfig.ts
diff --git a/packages/walletkit/src/tron/utils/getTronWalletPlatformBehavior.ts b/packages/walletkit/src/tron/utils/getTronWalletPlatformBehavior.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@node-real/walletkit': patch
 +---
++
 +Remove metaMask support on tg