Add support for custom chains in changeNetwork function

apps/nextjs-example/src/app/page.tsx

@@ -33,6 +33,7 @@ import {
 } from "@aptos-labs/wallet-adapter-react";
 import { AlertCircle } from "lucide-react";
 import Image from "next/image";
+import { useState } from "react";
 
 // Imports for registering a browser extension wallet plugin on page load
 import { MyWallet } from "@/utils/standardWallet";
@@ -144,7 +145,7 @@ interface WalletConnectionProps {
   account: AccountInfo | null;
   network: NetworkInfo | null;
   wallet: WalletInfo | null;
-  changeNetwork: (network: Network) => Promise<AptosChangeNetworkOutput>;
+  changeNetwork: (network: Network, chainId?: number) => Promise<AptosChangeNetworkOutput>;
 }
 
 function WalletConnection({
@@ -162,6 +163,8 @@ function WalletConnection({
     return true;
   };
 
+  const [customChainId, setCustomChainId] = useState<number | "">("");
+
   // TODO: Do a proper check for network change support
   const isNetworkChangeSupported = wallet?.name === "Nightly";
 
@@ -292,7 +295,17 @@ function WalletConnection({
             value={network?.name}
             orientation="horizontal"
             className="flex gap-6"
-            onValueChange={(value: Network) => changeNetwork(value)}
+            onValueChange={(value: Network) => {
+              if (value === Network.CUSTOM && customChainId && Number(customChainId) > 0) {
+                changeNetwork(value, Number(customChainId));
+              } else if (value !== Network.CUSTOM) {
+                changeNetwork(value);
+              } else {
+                console.warn("Invalid chainId");
+              }
+            }}
+
+
             disabled={!isNetworkChangeSupported}
           >
             <div className="flex items-center space-x-2">
@@ -307,6 +320,24 @@ function WalletConnection({
               <RadioGroupItem value={Network.MAINNET} id="mainnet-radio" />
               <Label htmlFor="mainnet-radio">Mainnet</Label>
             </div>
+
+            <div className="flex items-center space-x-2">
+            <RadioGroupItem 
+  value={Network.CUSTOM} 
+  id="custom-radio" 
+  disabled={!customChainId || Number(customChainId) <= 0} 
+/>
+
+              <Label htmlFor="custom-radio">Custom</Label>
+
+              <input
+                type="number"
+                className="ml-2 border rounded px-2 py-1"
+                value={customChainId}
+                onChange={(e) => setCustomChainId(e.target.value ? Number(e.target.value) : "")}
+                placeholder="Enter chainId"
+              />
+            </div>
           </RadioGroup>
           {!isNetworkChangeSupported && (
             <div className="text-sm text-red-600 dark:text-red-400">

packages/wallet-adapter-core/src/WalletCore.ts

@@ -1161,17 +1161,21 @@ export class WalletCore extends EventEmitter<WalletCoreEvents> {
    * @param network
    * @returns AptosChangeNetworkOutput
    */
-  async changeNetwork(network: Network): Promise<AptosChangeNetworkOutput> {
+  async changeNetwork(
+    network: Network,
+    customChainId?: number
+  ): Promise<AptosChangeNetworkOutput> {
     try {
       this.ensureWalletExists(this._wallet);
       this.recordEvent("change_network_request", {
         from: this._network?.name,
         to: network,
       });
+
       const chainId =
         network === Network.DEVNET
           ? await fetchDevnetChainId()
-          : NetworkToChainId[network];
+          : (network === Network.CUSTOM && customChainId) ? customChainId : NetworkToChainId[network];
       if (this._wallet.changeNetwork) {
         const networkInfo: StandardNetworkInfo = {
           name: network,

packages/wallet-adapter-react/src/WalletProvider.tsx

@@ -186,18 +186,19 @@ export const AptosWalletAdapterProvider: FC<AptosWalletProviderProps> = ({
     }
   };
 
-  const changeNetwork = async (network: Network) => {
+  const changeNetwork = async (network: Network, chainId?: number) => {
     if (!walletCore) {
       throw new Error("WalletCore is not initialized");
     }
+
     try {
-      return await walletCore?.changeNetwork(network);
+      return await walletCore.changeNetwork(network, chainId);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);
     }
   };
-
+  
   useEffect(() => {
     if (autoConnect) {
       if (localStorage.getItem("AptosWalletName") && !connected) {

packages/wallet-adapter-react/src/useWallet.tsx

@@ -39,7 +39,7 @@ export interface WalletContextState {
   ): Promise<PendingTransactionResponse>;
   signMessage(message: SignMessagePayload): Promise<SignMessageResponse>;
   signMessageAndVerify(message: SignMessagePayload): Promise<boolean>;
-  changeNetwork(network: Network): Promise<AptosChangeNetworkOutput>;
+  changeNetwork(network: Network, chainId?: number): Promise<AptosChangeNetworkOutput>;
 }
 
 const DEFAULT_CONTEXT = {

packages/wallet-adapter-vue/src/composables/useWallet.ts

@@ -52,7 +52,7 @@ export interface WalletContextState {
   ): Promise<PendingTransactionResponse>;
   signMessage(message: SignMessagePayload): Promise<SignMessageResponse>;
   signMessageAndVerify(message: SignMessagePayload): Promise<boolean>;
-  changeNetwork(network: Network): Promise<AptosChangeNetworkOutput>;
+  changeNetwork(network: Network, chainId?: number): Promise<AptosChangeNetworkOutput>;
 }
 
 export interface AptosWalletProviderProps {
@@ -197,9 +197,12 @@ export function useWallet(
     }
   };
 
-  const changeNetwork = async (network: Network) => {
+  const changeNetwork = async (network: Network, chainId?: number) => {
     try {
-      return await walletCoreInstance.changeNetwork(network);
+      // Call changeNetwork with chainId if provided, otherwise call without it
+      return chainId !== undefined 
+        ? await walletCoreInstance.changeNetwork(network, chainId) 
+        : await walletCoreInstance.changeNetwork(network);
     } catch (error: any) {
       if (onError) onError(error);
       return Promise.reject(error);