chore(website): refactor guides hierarchy, add eldfell support to add…

… network (#14154)

packages/website/README.md

@@ -1,6 +1,6 @@
 # Taiko documentation website
 
-## Pre-Installation
+## Install pnpm
 
 Make sure you have pnpm installed on your system. You can install it by npm as well:
 
@@ -14,22 +14,24 @@ or on any POSIX systems by wget one-line official command:
 wget -qO- https://get.pnpm.io/install.sh | sh -
 ```
 
-for any specific cases or systems check the official page https://pnpm.io/installation
+for any specific cases or systems check the official page: https://pnpm.io/installation.
 
-## Installation
+## Install dependencies
 
 ```sh
 pnpm install
 ```
 
-## Local development
-
-Start a local development server:
+## Start a local development server
 
 ```sh
 pnpm dev
 ```
 
+## Create redirects for broken links
+
+Look at [next.config.js](./next.config.js) and [nextjs redirect docs](https://nextjs.org/docs/pages/api-reference/next-config-js/redirects).
+
 ## Contributing
 
 Refer to [CONTRIBUTING.md](../../CONTRIBUTING.md).

packages/website/components/ConnectToMetamaskButton.tsx

@@ -1,17 +1,21 @@
-import { taikoChainConfig } from "../constants/taikoChainConfig";
+import { eldfellChainConfig, grimsvotnChainConfig } from "../constants/chains";
 
 type ConnectButtonProps = {
-  network: "Sepolia" | "Taiko";
+  network: "Eldfell" | "Grimsvotn" | "Sepolia";
+};
+
+const chainMap = {
+  Eldfell: "0x28c5d", // 167005
+  Grimsvotn: "0x28c5d", // 167005
+  Sepolia: "0xaa36a7", // 11155111
 };
 
 async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
   if (!(window as any).ethereum) {
     alert("Metamask not detected! Install Metamask then try again.");
   }
-  if (
-    (window as any).ethereum.networkVersion ==
-    (network === "Sepolia" ? 11155111 : 167005)
-  ) {
+
+  if ((window as any).ethereum.chainId == chainMap[network]) {
     alert(`You are already connected to ${network}.`);
   }
   try {
@@ -20,14 +24,16 @@ async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
         method: "wallet_switchEthereumChain",
         params: [
           {
-            chainId: "0xaa36a7",
+            chainId: chainMap[network],
           },
         ],
       });
     } else {
       await (window as any).ethereum.request({
         method: "wallet_addEthereumChain",
-        params: [taikoChainConfig],
+        params: [
+          network === "Eldfell" ? eldfellChainConfig : grimsvotnChainConfig,
+        ],
       });
     }
   } catch (error) {

packages/website/components/Footer.tsx

@@ -26,14 +26,6 @@ export default function Footer() {
                   Careers
                 </a>
               </li>
-              <li className="mb-4">
-                <a
-                  href="/docs/resources/integration-guide"
-                  className="hover:underline"
-                >
-                  Integration guide
-                </a>
-              </li>
               <li className="mb-4">
                 <a
                   href="https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/"
@@ -66,11 +58,10 @@ export default function Footer() {
               </li>
               <li className="mb-4">
                 <a
-                  href="https://taikoxyz.github.io/taiko-mono/taiko-whitepaper.pdf"
+                  href="/docs/resources/integration-guide"
                   className="hover:underline"
-                  target={"_blank"}
                 >
-                  Whitepaper
+                  Integration guide
                 </a>
               </li>
             </ul>

packages/website/constants/taikoChainConfig.ts → packages/website/constants/chains.ts

@@ -11,9 +11,9 @@ interface AddEthereumChainParameter {
   iconUrls?: string[]; // Currently ignored.
 }
 
-export const taikoChainConfig: AddEthereumChainParameter = {
+const grimsvotnChainConfig: AddEthereumChainParameter = {
   chainId: "0x28c5d",
-  chainName: "Taiko (Alpha-3 Testnet)",
+  chainName: "Taiko L2 (Grimsvotn)",
   nativeCurrency: {
     name: "ETH",
     symbol: "ETH",
@@ -23,3 +23,18 @@ export const taikoChainConfig: AddEthereumChainParameter = {
   blockExplorerUrls: ["https://explorer.test.taiko.xyz/"],
   iconUrls: [],
 };
+
+const eldfellChainConfig: AddEthereumChainParameter = {
+  chainId: "0x28c5d",
+  chainName: "Taiko L3 (Eldfell)",
+  nativeCurrency: {
+    name: "ETH",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  rpcUrls: ["https://l3rpc.test.taiko.xyz"],
+  blockExplorerUrls: ["https://l3explorer.test.taiko.xyz/"],
+  iconUrls: [],
+};
+
+export { grimsvotnChainConfig, eldfellChainConfig };

packages/website/next.config.js

@@ -5,4 +5,72 @@ const withNextra = require("nextra")({
   themeConfig: "./theme.config.tsx",
 });
 
-module.exports = withNextra();
+// NOTE: please document the redirects
+module.exports = withNextra({
+  async redirects() {
+    return [
+      // Migrate builder guides to new "Build on Taiko" section
+      {
+        source: "/docs/guides/configure-your-wallet",
+        destination: "/docs/guides/build-on-taiko/setup-your-wallet",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/receive-tokens",
+        destination: "/docs/guides/build-on-taiko/receive-tokens",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/use-the-bridge",
+        destination: "/docs/guides/build-on-taiko/bridge-tokens",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/swap-tokens",
+        destination: "/docs/guides/build-on-taiko/swap-tokens",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/deploy-a-contract",
+        destination: "/docs/guides/build-on-taiko/deploy-a-contract",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/verify-a-contract",
+        destination: "/docs/guides/build-on-taiko/verify-a-contract",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/build-a-dapp",
+        destination: "/docs/guides/build-on-taiko/build-a-dapp",
+        permanent: true,
+      },
+      // Migrate node runner guides to new "Run a node" section
+      {
+        source: "/docs/guides/run-a-node",
+        destination: "/docs/guides/run-a-node/run-a-taiko-node",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/run-a-sepolia-node",
+        destination: "/docs/guides/run-a-node/run-a-sepolia-node",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/enable-a-proposer",
+        destination: "/docs/guides/run-a-node/enable-a-proposer",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/enable-a-prover",
+        destination: "/docs/guides/run-a-node/enable-a-prover",
+        permanent: true,
+      },
+      {
+        source: "/docs/guides/claim-prover-ttko",
+        destination: "/docs/guides/run-a-node/claim-prover-ttko",
+        permanent: true,
+      },
+    ];
+  },
+});

packages/website/package.json

@@ -11,14 +11,14 @@
     "@vercel/analytics": "^1.0.1",
     "next": "^13.4.9",
     "next-themes": "^0.2.1",
-    "nextra": "^2.9.0",
-    "nextra-theme-docs": "^2.9.0",
+    "nextra": "^2.10.0",
+    "nextra-theme-docs": "^2.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@heroicons/react": "^2.0.18",
-    "@types/node": "^20.4.1",
+    "@types/node": "^20.4.2",
     "@types/react": "^18.2.14",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.25",

packages/website/pages/docs/guides.mdx

@@ -1,16 +1,21 @@
 # Guides
 
-You can leave feedback [here](https://docs.google.com/forms/d/1Vn10tqZW0bPvNUItzeek9u8kh7YkQZOGorMb3LuJVVA) and ask any questions on the [Taiko Discord](https://discord.gg/taikoxyz)!
+Check out our guides below. You can leave feedback [here](https://docs.google.com/forms/d/1Vn10tqZW0bPvNUItzeek9u8kh7YkQZOGorMb3LuJVVA) and ask any questions on the [Taiko Discord](https://discord.gg/taikoxyz)!
+
+# Build on Taiko
+
+- 💻 [Setup your wallet](/docs/guides/build-on-taiko/setup-your-wallet)
+- 🎈 [Receive tokens](/docs/guides/build-on-taiko/receive-tokens)
+- 🌉 [Bridge tokens](/docs/guides/build-on-taiko/bridge-tokens)
+- 🔄 [Swap tokens](/docs/guides/build-on-taiko/swap-tokens)
+- 🚀 [Deploy a contract](/docs/guides/build-on-taiko/deploy-a-contract)
+- 📜 [Verify a contract](/docs/guides/build-on-taiko/verify-a-contract)
+- 🛠️ [Build a dapp](/docs/guides/build-on-taiko/build-a-dapp)
+
+# Run a node
 
-- 💻 [Configure your wallet](/docs/guides/configure-your-wallet)
-- 🎈 [Receive tokens](/docs/guides/receive-tokens)
-- 🌉 [Use the bridge](/docs/guides/use-the-bridge)
-- 🔄 [Swap tokens](/docs/guides/swap-tokens)
 - 🌐 [Run a Taiko node](/docs/guides/run-a-node)
 - 🌳 [Run a Sepolia node](/docs/guides/run-a-sepolia-node)
 - 📤 [Enable a proposer](/docs/guides/enable-a-proposer)
 - ✅ [Enable a prover](/docs/guides/enable-a-prover)
 - 🛄 [Claim prover TTKO](/docs/guides/claim-prover-ttko)
-- 🚀 [Deploy a contract](/docs/guides/deploy-a-contract)
-- 📜 [Verify a contract](/docs/guides/verify-a-contract)
-- 🛠️ [Build a dapp](/docs/guides/build-a-dapp)

packages/website/pages/docs/guides/_meta.json

@@ -1,38 +1,8 @@
 {
-  "configure-your-wallet": {
-    "title": "💻 Configure your wallet"
-  },
-  "receive-tokens": {
-    "title": "🎈 Receive tokens"
-  },
-  "use-the-bridge": {
-    "title": "🌉 Use the bridge"
-  },
-  "swap-tokens": {
-    "title": "🔄 Swap tokens"
+  "build-on-taiko": {
+    "title": "Build on Taiko"
   },
   "run-a-node": {
-    "title": "🌐 Run a Taiko node"
-  },
-  "run-a-sepolia-node": {
-    "title": "🌳 Run a Sepolia node"
-  },
-  "enable-a-proposer": {
-    "title": "📤 Enable a proposer"
-  },
-  "enable-a-prover": {
-    "title": "✅ Enable a prover"
-  },
-  "claim-prover-ttko": {
-    "title": "🛄 Claim prover TTKO"
-  },
-  "deploy-a-contract": {
-    "title": "🚀 Deploy a contract"
-  },
-  "verify-a-contract": {
-    "title": "📜 Verify a contract"
-  },
-  "build-a-dapp": {
-    "title": "🛠️ Build a dapp"
+    "title": "Run a node"
   }
 }

packages/website/pages/docs/guides/build-on-taiko/_meta.json

@@ -0,0 +1,23 @@
+{
+  "setup-your-wallet": {
+    "title": "💻 Setup your wallet"
+  },
+  "receive-tokens": {
+    "title": "🎈 Receive tokens"
+  },
+  "bridge-tokens": {
+    "title": "🌉 Bridge tokens"
+  },
+  "swap-tokens": {
+    "title": "🔄 Swap tokens"
+  },
+  "deploy-a-contract": {
+    "title": "🚀 Deploy a contract"
+  },
+  "verify-a-contract": {
+    "title": "📜 Verify a contract"
+  },
+  "build-a-dapp": {
+    "title": "🛠️ Build a dapp"
+  }
+}

packages/website/pages/docs/guides/use-the-bridge.mdx → packages/website/pages/docs/guides/build-on-taiko/bridge-tokens.mdx

@@ -1,6 +1,6 @@
 import { Callout, Steps } from "nextra-theme-docs";
 
-# Use the bridge
+# Bridge tokens 
 
 <Callout type="warning">
   The BLL token is **expected to fail** about 50% of the time when bridging--this is done intentionally to test error handling.

packages/website/pages/docs/guides/configure-your-wallet.mdx → packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx

@@ -1,6 +1,6 @@
 import { Steps } from "nextra-theme-docs";
 
-# Configure your wallet
+# Setup your wallet
 
 ## Overview
 

packages/website/pages/docs/guides/swap-tokens.mdx → packages/website/pages/docs/guides/build-on-taiko/swap-tokens.mdx

@@ -1,6 +1,6 @@
 import { Callout, Steps } from "nextra-theme-docs";
 
-# Swap Tokens
+# Swap tokens
 
 ## Overview
 

packages/website/pages/docs/guides/run-a-node/_meta.json

@@ -0,0 +1,17 @@
+{
+  "run-a-taiko-node": {
+    "title": "🌐 Run a Taiko node"
+  },
+  "run-a-sepolia-node": {
+    "title": "🌳 Run a Sepolia node"
+  },
+  "enable-a-proposer": {
+    "title": "📤 Enable a proposer"
+  },
+  "enable-a-prover": {
+    "title": "✅ Enable a prover"
+  },
+  "claim-prover-ttko": {
+    "title": "🛄 Claim prover TTKO"
+  }
+}

packages/website/pages/docs/index.mdx

@@ -11,12 +11,13 @@ Check out the [Taiko roadmap](/images/roadmaps/taiko-roadmap.png) to see where w
 Here's the best guides to get started with trying Taiko:
 
 <Cards>
-  <Card title="Deploy a contract" href="/docs/guides/deploy-a-contract" />
-  <Card title="Run a Taiko node" href="/docs/guides/run-a-node" />
+  <Card
+    title="Deploy a contract"
+    href="/docs/guides/build-on-taiko/deploy-a-contract"
+  />
+  <Card title="Run a Taiko node" href="/docs/guides/run-a-node/run-a-node" />
 </Cards>
 
-Check out our full guides section [here](/docs/guides)!
-
 ## Contribute to Taiko
 
 Taiko is an open-source, community-driven project that welcomes and values every and any contribution. That's including both technical and non-technical contributions.