Merge pull request #85 from Web3Auth/IRT-958-support-switch-chain

feat: support switch chain

Author: himanshuchawla009

demo/redirect-flow-example/package-lock.json

@@ -4,7 +4,7 @@ import Web3 from "web3";
 import type { provider } from "web3-core";
 
 import "./App.css";
-import { SafeEventEmitterProvider } from "@web3auth/base";
+import { CHAIN_NAMESPACES, SafeEventEmitterProvider } from "@web3auth/base";
 import { BN } from "bn.js";
 
 const uiConsole = (...args: any[]): void => {
@@ -45,7 +45,7 @@ function App() {
   useEffect(() => {
     const init = async () => {
       // Example config to handle redirect result manually
-      await coreKitInstance.init({ handleRedirectResult: false, rehydrate});
+      await coreKitInstance.init({ handleRedirectResult: false, rehydrate });
       if (window.location.hash.includes("#state")) {
         await coreKitInstance.handleRedirectResult();
       }
@@ -78,7 +78,7 @@ function App() {
     }
   }, [provider])
 
-  
+
   const keyDetails = async () => {
     if (!coreKitInstance) {
       throw new Error('coreKitInstance not found');
@@ -155,7 +155,7 @@ function App() {
     if (!answer) {
       throw new Error("backupFactorKey not found");
     }
-    
+
     let factorKey = await securityQuestion.recoverFactor(coreKitInstance, answer);
     setBackupFactorKey(factorKey);
     uiConsole("Security Question share: ", factorKey);
@@ -190,7 +190,7 @@ function App() {
 
     uiConsole("Export factor key: ", factorKey);
     console.log("menmonic : ", mnemonic);
-    console.log("key: ", key);  
+    console.log("key: ", key);
   }
 
   const deleteFactor = async (): Promise<void> => {
@@ -265,6 +265,69 @@ function App() {
     uiConsole(signedMessage);
   };
 
+  const switchChainSepolia = async () => {
+    if (!provider) {
+      uiConsole("provider not initialized yet");
+      return;
+    }
+    const newChainConfig = {
+      chainId: "0xaa36a7", // for wallet connect make sure to pass in this chain in the loginSettings of the adapter.
+      displayName: "Ethereum Sepolia",
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      tickerName: "Ethereum Sepolia",
+      ticker: "ETH",
+      decimals: 18,
+      rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+      blockExplorer: "https://sepolia.etherscan.io",
+      logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+    };
+    await coreKitInstance.switchChain(newChainConfig);
+    setProvider(coreKitInstance.provider);
+    uiConsole("Changed to Sepolia Network");
+  };
+
+  const switchChainPolygon = async () => {
+    if (!provider) {
+      uiConsole("provider not initialized yet");
+      return;
+    }
+    const newChainConfig = {
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      chainId: "0x89", // hex of 137, polygon mainnet
+      rpcTarget: "https://rpc.ankr.com/polygon",
+      // Avoid using public rpcTarget in production.
+      // Use services like Infura, Quicknode etc
+      displayName: "Polygon Mainnet",
+      blockExplorer: "https://polygonscan.com",
+      ticker: "MATIC",
+      tickerName: "MATIC",
+    };
+    await coreKitInstance.switchChain(newChainConfig);
+    setProvider(coreKitInstance.provider);
+    uiConsole("Changed to Sepolia Network");
+  };
+
+  const switchChainOPBNB = async () => {
+    if (!provider) {
+      uiConsole("provider not initialized yet");
+      return;
+    }
+    const newChainConfig = {
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      chainId: "0xCC", // hex of 1261120
+      rpcTarget: "https://opbnb-mainnet-rpc.bnbchain.org",
+      // Avoid using public rpcTarget in production.
+      // Use services like Infura, Quicknode etc
+      displayName: "opBNB Mainnet",
+      blockExplorer: "https://opbnbscan.com",
+      ticker: "BNB",
+      tickerName: "opBNB",
+    };
+    await coreKitInstance.switchChain(newChainConfig);
+    setProvider(coreKitInstance.provider);
+    uiConsole("Changed to Sepolia Network");
+  };
+
   const criticalResetAccount = async (): Promise<void> => {
     // This is a critical function that should only be used for testing purposes
     // Resetting your account means clearing all the metadata associated with it from the metadata server
@@ -304,8 +367,8 @@ function App() {
     uiConsole(receipt);
   };
 
-  const createSecurityQuestion = async ( question: string, answer: string ) => {
-    if (!coreKitInstance) { 
+  const createSecurityQuestion = async (question: string, answer: string) => {
+    if (!coreKitInstance) {
       throw new Error("coreKitInstance is not set");
     }
     await securityQuestion.setSecurityQuestion({ mpcCoreKit: coreKitInstance, question, answer, shareType: TssShareType.RECOVERY });
@@ -316,8 +379,8 @@ function App() {
     }
   }
 
-  const changeSecurityQuestion = async ( newQuestion: string, newAnswer: string, answer: string) => {
-    if (!coreKitInstance) { 
+  const changeSecurityQuestion = async (newQuestion: string, newAnswer: string, answer: string) => {
+    if (!coreKitInstance) {
       throw new Error("coreKitInstance is not set");
     }
     await securityQuestion.changeSecurityQuestion({ mpcCoreKit: coreKitInstance, newQuestion, newAnswer, answer });
@@ -336,7 +399,7 @@ function App() {
 
   }
 
-  const enableMFA = async () => { 
+  const enableMFA = async () => {
     if (!coreKitInstance) {
       throw new Error("coreKitInstance is not set");
     }
@@ -351,7 +414,7 @@ function App() {
       throw new Error("coreKitInstance is not set");
     }
     await coreKitInstance.commitChanges();
-  } 
+  }
 
   const loggedInView = (
     <>
@@ -404,7 +467,7 @@ function App() {
         <div className="flex-container">
 
           <label>Share Type:</label>
-          <select value={exportTssShareType}onChange={(e) => setExportTssShareType(parseInt(e.target.value))}>
+          <select value={exportTssShareType} onChange={(e) => setExportTssShareType(parseInt(e.target.value))}>
             <option value={TssShareType.DEVICE}>Device Share</option>
             <option value={TssShareType.RECOVERY}>Recovery Share</option>
           </select>
@@ -413,14 +476,14 @@ function App() {
           </button>
         </div>
         <div className="flex-container">
-        <label>Factor pub:</label>
+          <label>Factor pub:</label>
           <input value={factorPubToDelete} onChange={(e) => setFactorPubToDelete(e.target.value)}></input>
           <button onClick={deleteFactor} className="card">
             Delete Factor
           </button>
         </div>
         <div className="flex-container">
-        <input value={backupFactorKey} onChange={(e) => setBackupFactorKey(e.target.value)}></input>
+          <input value={backupFactorKey} onChange={(e) => setBackupFactorKey(e.target.value)}></input>
           <button onClick={() => inputBackupFactorKey()} className="card">
             Input Factor Key
           </button>
@@ -429,9 +492,9 @@ function App() {
 
         <h4>Security Question</h4>
 
-        <div>{ question }</div>
+        <div>{question}</div>
         <div className="flex-container">
-          <div className={ question ? " disabledDiv": ""}>
+          <div className={question ? " disabledDiv" : ""}>
             <label>Set Security Question:</label>
             <input value={question} placeholder="question" onChange={(e) => setNewQuestion(e.target.value)}></input>
             <input value={answer} placeholder="answer" onChange={(e) => setAnswer(e.target.value)}></input>
@@ -440,19 +503,19 @@ function App() {
             </button>
           </div>
 
-          <div className={ !question ? " disabledDiv": ""}>
+          <div className={!question ? " disabledDiv" : ""}>
             <label>Change Security Question:</label>
             <input value={newQuestion} placeholder="newQuestion" onChange={(e) => setNewQuestion(e.target.value)}></input>
-            <input value={newAnswer} placeholder="newAnswer"  onChange={(e) => setNewAnswer(e.target.value)}></input>
+            <input value={newAnswer} placeholder="newAnswer" onChange={(e) => setNewAnswer(e.target.value)}></input>
             <input value={answer} placeholder="oldAnswer" onChange={(e) => setAnswer(e.target.value)}></input>
             <button onClick={() => changeSecurityQuestion(newQuestion!, newAnswer!, answer!)} className="card">
               Change Security Question
             </button>
-              
+
           </div>
         </div>
         <div className="flex-container">
-        <div className={ !question ? "disabledDiv": ""}>
+          <div className={!question ? "disabledDiv" : ""}>
             <button onClick={() => deleteSecurityQuestion()} className="card">
               Delete Security Question
             </button>
@@ -481,6 +544,18 @@ function App() {
         <button onClick={sendTransaction} className="card">
           Send Transaction
         </button>
+
+        <button onClick={switchChainSepolia} className="card">
+          switchChainSepolia
+        </button>
+
+        <button onClick={switchChainPolygon} className="card">
+          switchChainPolygon
+        </button>
+
+        <button onClick={switchChainOPBNB} className="card">
+          switchChainOPBNB
+        </button>
       </div>
     </>
   );
@@ -490,7 +565,7 @@ function App() {
       <button onClick={() => login()} className="card">
         Login
       </button>
-      <div className={coreKitStatus=== COREKIT_STATUS.REQUIRED_SHARE ? "" : "disabledDiv" } >
+      <div className={coreKitStatus === COREKIT_STATUS.REQUIRED_SHARE ? "" : "disabledDiv"} >
 
         <button onClick={() => getDeviceShare()} className="card">
           Get Device Share
@@ -505,25 +580,25 @@ function App() {
         </button>
 
 
-        <div className={ !question ? "disabledDiv" : ""}>
+        <div className={!question ? "disabledDiv" : ""}>
 
-        <label>Recover Using Security Answer:</label>
+          <label>Recover Using Security Answer:</label>
           <label>{question}</label>
           <input value={answer} onChange={(e) => setAnswer(e.target.value)}></input>
           <button onClick={() => recoverSecurityQuestionFactor()} className="card">
             Recover Using Security Answer
           </button>
         </div>
       </div>
-      
+
     </>
   );
 
   return (
     <div className="container">
       <h1 className="title">
         <a target="_blank" href="https://web3auth.io/docs/guides/mpc" rel="noreferrer">
-          Web3Auth MPC Core Kit 
+          Web3Auth MPC Core Kit
         </a> {" "}
         Redirect Flow Example
       </h1>