Merge pull request #1741 from Web3Auth/fix/switch-chain

fix switch chain
Web3Auth · Feb 23, 2024 · 79a453a · 79a453a
2 parents 3aa6696 + 0bf3859
commit 79a453a
Show file tree

Hide file tree

Showing 11 changed files with 6,273 additions and 3,890 deletions.
diff --git a/demo/react-app/src/App.tsx b/demo/react-app/src/App.tsx
@@ -7,9 +7,26 @@ import { Web3AuthProvider } from "./services/web3auth";
 import Setting from "./components/Setting";
 import Main from "./components/Main";
 
+const STORAGE_KEY = {
+  WEB3AUTH_NETWORK: "web3auth_network",
+  BLOCKCHAIN: "blockchain",
+};
+
 function App() {
-  const [web3AuthNetwork, setWeb3AuthNetwork] = useState<WEB3AUTH_NETWORK_TYPE>("sapphire_mainnet");
-  const [chain, setChain] = useState<CHAIN_CONFIG_TYPE>("sepolia");
+  const savedNetwork = window.localStorage.getItem(STORAGE_KEY.WEB3AUTH_NETWORK) as WEB3AUTH_NETWORK_TYPE;
+  const savedChain = window.localStorage.getItem(STORAGE_KEY.BLOCKCHAIN) as CHAIN_CONFIG_TYPE;
+  const [web3AuthNetwork, setWeb3AuthNetwork] = useState<WEB3AUTH_NETWORK_TYPE>(savedNetwork || "sapphire_mainnet");
+  const [chain, setChain] = useState<CHAIN_CONFIG_TYPE>(savedChain || "polygon-mumbai");
+
+  const networkChangeHandler = (network: WEB3AUTH_NETWORK_TYPE) => {
+    window.localStorage.setItem(STORAGE_KEY.BLOCKCHAIN, network);
+    setWeb3AuthNetwork(network);
+  };
+
+  const chainChangeHandler = (chain: CHAIN_CONFIG_TYPE) => {
+    window.localStorage.setItem(STORAGE_KEY.BLOCKCHAIN, chain);
+    setChain(chain);
+  };
 
   return (
     <div className={styles.container}>
@@ -20,7 +37,7 @@ function App() {
           </a>{" "}
           & ReactJS Example
         </h1>
-        <Setting setNetwork={setWeb3AuthNetwork} setChain={setChain} chain={chain} network={web3AuthNetwork} />
+        <Setting setNetwork={networkChangeHandler} setChain={chainChangeHandler} chain={chain} network={web3AuthNetwork} />
         <Main />
       </Web3AuthProvider>
       <footer className={styles.footer}>

diff --git a/demo/react-app/src/services/web3auth.tsx b/demo/react-app/src/services/web3auth.tsx
@@ -131,7 +131,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
             appUrl: "https://web3auth.io/",
             theme: {
               primary: "#5f27cd",
-              onPrimary: "white"
+              onPrimary: "white",
             },
             logoLight: "https://web3auth.io/images/web3auth-logo.svg",
             logoDark: "https://web3auth.io/images/web3auth-logo.svg",
@@ -193,7 +193,9 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
         if (currentChainConfig.chainNamespace !== CHAIN_NAMESPACES.SOLANA) {
           const walletServicesPlugin = new WalletServicesPlugin({
             wsEmbedOpts: {},
-            walletInitOptions: { whiteLabel: { showWidgetButton: true } },
+            walletInitOptions: {
+              whiteLabel: { showWidgetButton: true },
+            },
           });
           setWalletServicesPlugin(walletServicesPlugin);
           web3AuthInstance.addPlugin(walletServicesPlugin);
@@ -289,11 +291,12 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
     uiConsole("New Chain Added");
   };
   const switchChain = async () => {
+    const chainId = "0xaa36a7";
     if (!provider) {
       uiConsole("provider not initialized yet");
       return;
     }
-    await web3Auth?.switchChain({ chainId: "0x89" });
+    await web3Auth?.switchChain({ chainId });
     uiConsole("Chain Switched");
   };