import {useState, useEffect} from "react"; import styles from "./styles.module.css"; export default function ConnectButton() { const [networkStatus, setNetworkStatus] = useState("disconnected"); // "disconnected" | "wrong_network" | "connected" const CHAIN_ID_DECIMAL = 10920; const CHAIN_ID_HEX = `0x${CHAIN_ID_DECIMAL.toString(16)}`; const EMBER_TESTNET = { chainId: CHAIN_ID_HEX, chainName: "Flash Testnet", nativeCurrency: { name: "FUSE", symbol: "FUSE", decimals: 18, }, rpcUrls: [ "https://floral-green-gadget.fuse-flash.quiknode.pro/0b560e99d1a605b43771fc313dbc3e7054df160e/", ], blockExplorerUrls: ["https://fuse-flash.explorer.quicknode.com/"], }; const checkNetwork = async () => { if (typeof window !== "undefined" && window.ethereum) { try { const currentChainId = await window.ethereum.request({ method: "eth_chainId", }); if (currentChainId === EMBER_TESTNET.chainId) { setNetworkStatus("connected"); } else { setNetworkStatus("wrong_network"); } return currentChainId === EMBER_TESTNET.chainId; } catch (error) { console.error("Failed to check network:", error); setNetworkStatus("disconnected"); return false; } } return false; }; const switchNetwork = async () => { if (typeof window === "undefined" || !window.ethereum) { alert("Please install MetaMask to use this feature"); return; } try { // Try to switch first await window.ethereum.request({ method: "wallet_switchEthereumChain", params: [{chainId: EMBER_TESTNET.chainId}], }); } catch (switchError) { // Check both the top-level code and originalError.code if ( switchError.code === 4902 || (switchError.data && switchError.data.originalError && switchError.data.originalError.code === 4902) ) { try { await window.ethereum.request({ method: "wallet_addEthereumChain", params: [EMBER_TESTNET], }); } catch (addError) { console.error("Failed to add network:", addError); } } else { console.error("Failed to switch network:", switchError); } } await checkNetwork(); }; useEffect(() => { checkNetwork(); if (typeof window !== "undefined" && window.ethereum) { window.ethereum.on("chainChanged", checkNetwork); return () => { window.ethereum.removeListener("chainChanged", checkNetwork); }; } }, []); const getButtonText = () => { switch (networkStatus) { case "wrong_network": return "Switch to Flash Testnet"; case "connected": return "Connected to Flash Testnet"; case "disconnected": return "Add Flash Testnet"; default: return "Add Flash Testnet"; } }; const getButtonClass = () => { const baseClass = `${styles["connect-button"]} `; switch (networkStatus) { case "wrong_network": return baseClass + styles["connect-button-wrong-network"]; case "connected": return baseClass + styles["connect-button-connected"]; case "disconnected": default: return baseClass + styles["connect-button-disconnected"]; } }; return (

Click the button below to connect your wallet to the Flash Testnet.

{networkStatus !== "connected" ? ( ) : (

Connected to Flash Testnet

)}

); }

​dApp Development Tools

dApp Development Tools