Add network button, add OKLink block explorer

bob-collective · Feb 28, 2025 · dbb60c5 · dbb60c5
1 parent 868218e
commit dbb60c5
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 2 deletions.
diff --git a/docs/docs/learn/user-guides/networks.md b/docs/docs/learn/user-guides/networks.md
@@ -2,20 +2,25 @@
 sidebar_position: 1
 ---
 
-# Connect to BOB
+import AddToWallet from '@site/src/components/AddToWallet';
+
+# Connect to the BOB Network
 
 ## Mainnet Information
 
 ### BOB Mainnet
 
+<AddToWallet />
+
 - Chain ID: 60808
 - Gas Token: ETH
 - RPC URL: https://rpc.gobob.xyz/
 - WS URL: [wss://rpc.gobob.xyz](wss://rpc.gobob.xyz)
 - Explorer: https://explorer.gobob.xyz/
+- OKLink Explorer: https://www.oklink.com/bob
 - Bridge (BOB - Ethereum): https://app.gobob.xyz/bridge
 
-If you are having issues with your RPC connection, try [BlastAPI's public endpoints for BOB](https://blastapi.io/public-api/bob).
+If you are having issues with your RPC connection to the network, try [BlastAPI's public endpoints for BOB](https://blastapi.io/public-api/bob).
 
 - RPC URL: https://bob-mainnet.public.blastapi.io
 - WS URL: [wss://bob-mainnet.public.blastapi.io](wss://bob-mainnet.public.blastapi.io)

diff --git a/docs/src/components/AddToWallet.js b/docs/src/components/AddToWallet.js
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+const AddToWalletButton = () => {
+  const [isAlreadyAdded, setIsAlreadyAdded] = useState(false);
+
+  const resetButtonState = () => {
+    setTimeout(() => {
+      setIsAlreadyAdded(false);
+    }, 2000);
+  };
+
+  useEffect(() => {
+    const checkIfNetworkExists = async () => {
+      if (!window.ethereum) return;
+
+      try {
+        const chainId = await window.ethereum.request({
+          method: "eth_chainId",
+        });
+        if (chainId === "0xED88") {
+          setIsAlreadyAdded(true);
+          resetButtonState();
+        }
+      } catch (error) {
+        console.error("Error checking network:", error);
+      }
+    };
+
+    checkIfNetworkExists();
+  }, []);
+
+  const addNetwork = async () => {
+    if (!window.ethereum) {
+      alert(
+        "Please install MetaMask or another Web3 wallet to add the network."
+      );
+      return;
+    }
+
+    try {
+      await window.ethereum.request({
+        method: "wallet_addEthereumChain",
+        params: [
+          {
+            chainId: "0xED88",
+            chainName: "BOB",
+            nativeCurrency: {
+              name: "ETH",
+              symbol: "ETH",
+              decimals: 18,
+            },
+            rpcUrls: ["https://rpc.gobob.xyz/"],
+            blockExplorerUrls: ["https://explorer.gobob.xyz/"],
+          },
+        ],
+      });
+      setIsAlreadyAdded(true);
+      resetButtonState();
+    } catch (error) {
+      if (
+        error.message.includes("already exists") ||
+        error.code === 4902 || // Standard EIP-1193 error code for already existing chain
+        error.message.toLowerCase().includes("already")
+      ) {
+        setIsAlreadyAdded(true);
+        resetButtonState();
+      } else {
+        console.error("Error adding network:", error);
+        alert("Failed to add network to wallet: " + error.message);
+      }
+    }
+  };
+
+  return (
+    <button
+      onClick={addNetwork}
+      style={{
+        backgroundColor: "var(--bob-accent)",
+        border: "none",
+        borderRadius: "4px",
+        color: "white",
+        cursor: "pointer",
+        padding: "8px 16px",
+        marginBottom: "16px",
+        fontSize: "14px",
+        transition: "all var(--ifm-transition-fast)",
+      }}
+    >
+      {isAlreadyAdded ? "Already Added ✓" : "Add to Wallet"}
+    </button>
+  );
+};
+
+// Wrap in BrowserOnly to prevent SSR issues
+export default function AddToWallet() {
+  return <BrowserOnly>{() => <AddToWalletButton />}</BrowserOnly>;
+}