feat(website): RPC connect Metamask Networks

packages/website/components/MetamaskNetworkButton/ConnectToSepolia.tsx

@@ -0,0 +1,44 @@
+import { MetaMaskInpageProvider } from "@metamask/providers";
+
+declare global {
+  interface Window{
+    ethereum?:MetaMaskInpageProvider
+  }
+}
+
+async function ConnectToSepolia() {
+  if (!window.ethereum) {
+    alert("Metamask not detected! Install Metamask then try again.")
+    return;
+  }
+  if (window.ethereum.networkVersion == "11155111") {
+    alert("You are already connected to Sepolia (chainId 11155111).", )
+    return;
+  }
+  try{
+    await (window as any).ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [{
+         chainId: "0xaa36a7"
+      }]
+    });
+  } catch (error) {
+    alert("Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " + error.message)
+  }
+}
+
+type Props = {
+  buttonText: string;
+};
+
+export default function ConnectToSepoliaButton(props: Props) {
+  return (
+    <div
+      onClick={() => ConnectToSepolia()}
+      className="hover:cursor-pointer text-neutral-900 bg-neutral-100 hover:bg-neutral-200 border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:focus:ring-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700"
+    >
+      {props.buttonText}
+      Click to Connect to Sepolia
+    </div>
+  );
+}

packages/website/components/MetamaskNetworkButton/ConnectToTaikoAlpha3.tsx

@@ -0,0 +1,68 @@
+import { MetaMaskInpageProvider } from "@metamask/providers";
+
+declare global {
+  interface Window{
+    ethereum?:MetaMaskInpageProvider
+  }
+}
+
+async function ConnectToTaikoAlpha3() {
+  interface AddEthereumChainParameter {
+    chainId: string; // A 0x-prefixed hexadecimal string
+    chainName: string;
+    nativeCurrency: {
+      name: string;
+      symbol: string; // 2-6 characters long
+      decimals: 18;
+    };
+    rpcUrls: string[];
+    blockExplorerUrls?: string[];
+    iconUrls?: string[]; // Currently ignored.
+  }
+
+  const taikoParams: AddEthereumChainParameter = {
+    chainId: "0x28c5d",
+    chainName: "Taiko (Alpha-3 Testnet)",
+    nativeCurrency: {
+      name: "ETH",
+      symbol: "eth",
+      decimals: 18,
+    },
+    rpcUrls: ["https://rpc.test.taiko.xyz"],
+    blockExplorerUrls: ["https://explorer.test.taiko.xyz/"],
+    iconUrls: [],
+  };
+
+  if (!window.ethereum) {
+    alert("Metamask not detected! Install Metamask then try again.")
+    return;
+  }
+  if (window.ethereum.networkVersion == "167005") {
+    alert("You are already connected to Taiko Alpha 3 (chainId 167005).", )
+    return;
+  }
+  try{
+    await (window as any).ethereum.request({
+      method: "wallet_addEthereumChain",
+      params: [taikoParams],
+    });
+  } catch (error) {
+    alert("Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " + error.message)
+  }
+}
+
+type Props = {
+  buttonText: string;
+};
+
+export default function ConnectToTaikoAlpha3Button(props: Props) {
+  return (
+    <div
+      onClick={() => ConnectToTaikoAlpha3()}
+      className="hover:cursor-pointer text-neutral-900 bg-neutral-100 hover:bg-neutral-200 border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:focus:ring-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700"
+    >
+      {props.buttonText}
+      Click to Connect to Taiko Alpha 3
+    </div>
+  );
+}

packages/website/package.json

@@ -8,6 +8,7 @@
     "start": "pnpm next start"
   },
   "dependencies": {
+    "@metamask/providers": "^11.1.0",
     "@vercel/analytics": "^1.0.1",
     "next": "^13.4.7",
     "next-themes": "^0.2.1",

packages/website/pages/docs/reference/rpc-configuration.md → packages/website/pages/docs/reference/rpc-configuration.mdx

@@ -2,6 +2,10 @@
 
 ## Sepolia
 
+import ConnectToSepoliaButton from 'components/MetamaskNetworkButton/ConnectToSepolia';
+
+<ConnectToSepoliaButton />
+
 | Name               | Value                        |
 | ------------------ | ---------------------------- |
 | Chain ID           | 11155111                     |
@@ -11,6 +15,10 @@
 
 ## Taiko
 
+import ConnectToTaikoAlpha3Button from 'components/MetamaskNetworkButton/ConnectToTaikoAlpha3';
+
+<ConnectToTaikoAlpha3Button />
+
 | Name               | Value                           |
 | ------------------ | ------------------------------- |
 | Chain ID           | 167005                          |