feat: Support switch network for tron

.changeset/breezy-buttons-walk.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support switch network for tron

packages/walletkit/__dev__/App.tsx

@@ -61,7 +61,8 @@ const config: WalletKitConfig = {
     wallets: [solanaTrustWallet(), solanaPhantomWallet()],
   }),
   tronConfig: defaultTronConfig({
-    autoConnect: false,
+    autoConnect: true,
+    initialChainId: '0xcd8690dc',
     wallets: [tronLink()],
   }),
 };
@@ -102,7 +103,12 @@ function ConnectButton() {
       onClick={() =>
         onOpen({
           action: 'add-network',
-          initialChainId: 1,
+          evmConfig: {
+            initialChainId: 56,
+          },
+          tronConfig: {
+            initialChainId: '0xcd8690dc',
+          },
         })
       }
     >

packages/walletkit/src/core/modals/ConnectModal/context.ts

@@ -6,7 +6,13 @@ import { BaseWallet } from '@/core/configs/types';
 export interface ConnectModalOpenParams {
   action?: Action;
   viewRoute?: ViewRoutes;
-  initialChainId?: number;
+  initialChainId?: number; // TODO
+  tronConfig?: {
+    initialChainId?: string | number;
+  };
+  evmConfig?: {
+    initialChainId?: number;
+  };
   onConnected?: (params: { wallet: BaseWallet }) => void;
 }
 

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

@@ -22,7 +22,7 @@ export function ConnectModalProvider(props: ConnectModalProviderProps) {
 function WithRouter(props: ConnectModalProviderProps) {
   const { children } = props;
 
-  const { setAction, evmConfig, options } = useWalletKit();
+  const { setAction, evmConfig, tronConfig, options } = useWalletKit();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const router = useRouter();
 
@@ -43,14 +43,21 @@ function WithRouter(props: ConnectModalProviderProps) {
         if (evmConfig && params.initialChainId) {
           evmConfig.initialChainId = params.initialChainId;
         }
+        if (evmConfig && params.evmConfig?.initialChainId) {
+          evmConfig.initialChainId = params.evmConfig.initialChainId;
+        }
+        if (tronConfig && params.tronConfig?.initialChainId) {
+          tronConfig.initialChainId = params.tronConfig.initialChainId;
+        }
+
         if (params.onConnected) {
           options.onConnected = params.onConnected;
         }
 
         onOpen();
       },
     };
-  }, [evmConfig, isOpen, onClose, onOpen, options, router, setAction]);
+  }, [evmConfig, isOpen, onClose, onOpen, options, router, setAction, tronConfig]);
 
   return <ConnectModalContext.Provider value={value}>{children}</ConnectModalContext.Provider>;
 }

packages/walletkit/src/tron/components/TronConnectingView/index.tsx

@@ -5,20 +5,19 @@ import { EventEmitter } from '@/core/utils/eventEmitter';
 import { useTronConnect } from '@/tron/hooks/useTronConnect';
 import { tronCommonErrorHandler } from '@/tron/utils/tronCommonErrorHandler';
 import { TronWallet } from '@/tron/wallets';
-import { useWallet, WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
+import { WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { useCallback, useEffect, useState } from 'react';
 
 type WalletError = Parameters<Required<WalletProviderProps>['onError']>[0];
 
 export function TronConnectingView() {
-  const { log, selectedWallet, options } = useWalletKit();
+  const { log, selectedWallet, options, tronConfig } = useWalletKit();
 
   const [status, setStatus] = useState(
     selectedWallet.isInstalled() ? CONNECT_STATUS.CONNECTING : CONNECT_STATUS.UNAVAILABLE,
   );
 
-  const { connected } = useWallet();
-  const { connect } = useTronConnect();
+  const { connect, isConnected } = useTronConnect();
 
   useEffect(() => {
     const onError = (error: WalletError) => {
@@ -52,16 +51,17 @@ export function TronConnectingView() {
 
     connect({
       adapterName: (selectedWallet as TronWallet).adapterName,
+      chainId: tronConfig?.initialChainId,
     });
-  }, [connect, selectedWallet]);
+  }, [connect, selectedWallet, tronConfig?.initialChainId]);
 
   return (
     <TemplateConnectingView
       status={status}
       runConnect={runConnect}
       onTryAgain={runConnect}
       wallet={selectedWallet}
-      isConnected={connected}
+      isConnected={isConnected}
     />
   );
 }

packages/walletkit/src/tron/components/TronWalletProvider/index.tsx

@@ -2,7 +2,7 @@ import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { EventEmitter } from '@/core/utils/eventEmitter';
 import { WalletProvider, WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 export interface TronWalletProviderProps {
   children: React.ReactNode;
@@ -13,6 +13,17 @@ export function TronWalletProvider(props: TronWalletProviderProps) {
 
   const { tronConfig } = useWalletKit();
 
+  // Remove local cache to force disconnect tron wallet
+  useMemo(() => {
+    try {
+      if (typeof window !== 'undefined' && !tronConfig?.autoConnect) {
+        window.localStorage.removeItem('tronAdapterName');
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }, [tronConfig?.autoConnect]);
+
   const onError = useCallback<Required<WalletProviderProps>['onError']>((error) => {
     EventEmitter.emit(EventEmitter.TRON_WALLET_ERROR, error);
   }, []);
@@ -24,7 +35,9 @@ export function TronWalletProvider(props: TronWalletProviderProps) {
   return (
     <WalletProvider
       adapters={tronConfig.adapters}
-      autoConnect={tronConfig.autoConnect}
+      // autoConnect={tronConfig.autoConnect}
+      // Once connected to a wallet, the adapter will alway automatically connect to it after refreshing page
+      autoConnect={false}
       onError={onError}
     >
       {children}

packages/walletkit/src/tron/hooks/useTronConnect.ts

@@ -1,25 +1,39 @@
 import { useWalletKit } from '@/core/index';
 import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 export function useTronConnect() {
-  const { tronConfig } = useWalletKit();
-  const { select, wallets: adapters } = useWallet();
+  const { select, wallets: adapters, connected, disconnect } = useWallet();
+
+  const { log } = useWalletKit();
+  const [isConnected, setIsConnected] = useState(connected);
 
   const connect = useCallback(
-    async ({ adapterName }: { adapterName: string }) => {
+    async ({ adapterName, chainId }: { adapterName: string; chainId?: string | number }) => {
       select(adapterName as any);
-      if (!tronConfig?.autoConnect) {
-        const adapter = adapters.find((item) => item.adapter.name === adapterName)?.adapter;
-        if (adapter) {
+
+      const finalChainId = typeof chainId === 'number' ? `0x${chainId.toString(16)}` : chainId;
+      const adapter = adapters.find((item) => item.adapter.name === adapterName)?.adapter;
+
+      if (adapter) {
+        try {
           await adapter.connect();
+          if (finalChainId) {
+            await adapter?.switchChain(finalChainId);
+          }
+          setIsConnected(true);
+        } catch (err) {
+          setIsConnected(false);
+          disconnect();
+          log(err);
         }
       }
     },
-    [adapters, select, tronConfig?.autoConnect],
+    [adapters, disconnect, log, select],
   );
 
   return {
     connect,
+    isConnected,
   };
 }

packages/walletkit/src/tron/utils/defaultTronConfig.ts

@@ -4,6 +4,7 @@ import { setTronGlobalData } from '../globalData';
 
 interface CustomizedTronConfig {
   autoConnect?: boolean;
+  initialChainId?: string | number;
   // metadata?: Metadata;
   // walletConnectProjectId?: string;
   // rpcUrl: string;
@@ -15,6 +16,7 @@ export type TronConfig = ReturnType<typeof defaultTronConfig>;
 export function defaultTronConfig(params: CustomizedTronConfig) {
   const {
     autoConnect = false,
+    initialChainId,
     // metadata = { name: 'WalletKit' },
     // walletConnectProjectId,
     // rpcUrl,
@@ -32,6 +34,7 @@ export function defaultTronConfig(params: CustomizedTronConfig) {
 
   return {
     autoConnect,
+    initialChainId,
     // metadata,
     // walletConnectProjectId,
     adapters,