chore(website): init testnet Eldfell L3 docs (taikoxyz#14179)

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Taiko contributing guide
+# Contributing manual
 
 **Table of contents:**
 
@@ -7,7 +7,7 @@
 - [Coding standards](#coding-standards)
 - [Documentation standards](#documentation-standards)
 
-# Make a contribution
+## Make a contribution
 
 Here are some ways you can contribute:
 
@@ -16,13 +16,13 @@ Here are some ways you can contribute:
 
 > Check out the [coding standards](#coding-standards) and [documentation standards](#documentation-standards) before you start working on a pull request.
 
-# Claim a Taiko Contributor GitPOAP
+## Claim a Taiko Contributor GitPOAP
 
 A Taiko Contributor GitPOAP is rewarded to anyone that merges in a pull request to one of Taiko's GitHub repositories (you can see which repositories here: [2023 Taiko Contributor GitPOAP](https://www.gitpoap.io/gp/893)).
 
 After your pull request is merged, a bot will automatically leave a comment with instructions to receive your GitPOAP. You only receive a Taiko Contributor GitPOAP for the first pull request you merge in a given year.
 
-# Coding standards
+## Coding standards
 
 ### Pull requests
 
@@ -40,7 +40,7 @@ Follow the [NatSpec format](https://docs.soliditylang.org/en/latest/natspec-form
 - Omit the usage of `@notice` and let the compiler automatically pick it up to save column space.
   - For example: `/** @notice This is a notice */` becomes `/** This is a notice */`.
 
-# Documentation standards
+## Documentation standards
 
 Use the [Microsoft Writing Style Guide](https://learn.microsoft.com/en-us/style-guide/welcome/) as a base point of reference for writing style.
 
@@ -50,15 +50,6 @@ Use the [Microsoft Writing Style Guide](https://learn.microsoft.com/en-us/style-
 - Don't repeat yourself, use links to existing documentation or inherit it.
 - Keep documentation close to what it's describing (for example, in the source code).
 
-### Document types
-
-Group documentation under one of the four categories (adopted from [Diátaxis](https://diataxis.fr/)):
-
-- Concepts
-- Guides
-- Reference
-- Resources
-
 ### Creating content
 
 If you are interested in creating some content (video, blog post, tweet thread, visuals, etc.), you are absolutely free to do so. It's useful to get a peer review on these, if you need a peer review please reach out to the community / team on the [Taiko Discord](https://discord.gg/taikoxyz).

packages/pos-dashboard/temp.txt

@@ -0,0 +1 @@
+hi

packages/website/components/Button/AddTokenButton.tsx

@@ -0,0 +1,29 @@
+import { ethereumRequest } from "../../utils/ethereumRequest";
+
+interface AddTokenButtonProps {
+  address: string;
+  symbol: string;
+  decimals: number;
+  image: string;
+}
+
+const addTokenToWallet = async (token: AddTokenButtonProps) => {
+  const options = { ...token, type: "ERC20" };
+  await ethereumRequest("wallet_watchAsset", options);
+};
+
+export function AddTokenButton({
+  address,
+  symbol,
+  decimals,
+  image,
+}: AddTokenButtonProps) {
+  return (
+    <div
+      onClick={() => addTokenToWallet({ address, symbol, decimals, image })}
+      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] 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"
+    >
+      Add {symbol} to wallet
+    </div>
+  );
+}

packages/website/components/Button/ConnectToMetamaskButton.tsx

@@ -0,0 +1,69 @@
+import {
+  SEPOLIA_CONFIG,
+  GRIMSVOTN_CONFIG,
+  ELDFELL_CONFIG,
+  GRIMSVOTN_ADD_ETHEREUM_CHAIN,
+  ELDFELL_ADD_ETHEREUM_CHAIN,
+} from "../../domain/chain";
+import { ethereumRequest } from "../../utils/ethereumRequest";
+
+type ConnectButtonProps = {
+  network:
+    | typeof SEPOLIA_CONFIG.names.shortName
+    | typeof ELDFELL_CONFIG.names.shortName
+    | typeof GRIMSVOTN_CONFIG.names.shortName;
+};
+
+const chainMap = {
+  Eldfell: ELDFELL_CONFIG.chainId.hex, // 167005
+  Grimsvotn: GRIMSVOTN_CONFIG.chainId.hex, // 167005
+  Sepolia: SEPOLIA_CONFIG.chainId.hex, // 11155111
+};
+
+async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
+  const { ethereum } = window as any;
+  if (!ethereum) {
+    alert("Metamask not detected! Install Metamask then try again.");
+    return;
+  }
+
+  if (ethereum.chainId == chainMap[network]) {
+    alert(`You are already connected to ${network}.`);
+    return;
+  }
+
+  let params: any;
+  if (network === SEPOLIA_CONFIG.names.shortName) {
+    params = [{ chainId: chainMap[network] }];
+  } else {
+    params = [
+      network === ELDFELL_CONFIG.names.shortName
+        ? ELDFELL_ADD_ETHEREUM_CHAIN
+        : GRIMSVOTN_ADD_ETHEREUM_CHAIN,
+    ];
+  }
+  try {
+    await ethereumRequest(
+      network === SEPOLIA_CONFIG.names.shortName
+        ? "wallet_switchEthereumChain"
+        : "wallet_addEthereumChain",
+      params
+    );
+  } 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
+    );
+  }
+}
+
+export function ConnectToMetamaskButton(props: ConnectButtonProps) {
+  return (
+    <div
+      onClick={() => ConnectToMetamask(props.network)}
+      className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] 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"
+    >
+      Connect to {props.network}
+    </div>
+  );
+}

packages/website/components/ContractAddressTable.tsx

@@ -0,0 +1,58 @@
+import {
+  TaikoL1Alpha3,
+  TaikoL1Alpha4,
+  TaikoL2Alpha3,
+  TaikoL2Alpha4,
+  BasedContracts,
+  RollupContracts,
+  OtherContracts,
+} from "../domain/chain/baseTypes";
+import { contractAddressToLink } from "../utils/contractAddressToLink";
+
+interface ContractAddressTableProps {
+  networkConfig: TaikoL1Alpha3 | TaikoL1Alpha4 | TaikoL2Alpha3 | TaikoL2Alpha4;
+  contracts: BasedContracts | RollupContracts | OtherContracts;
+}
+
+export function ContractAddressTable(props: ContractAddressTableProps) {
+  const { networkConfig, contracts } = props;
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th style={{ textAlign: "left" }}>Name</th>
+          <th style={{ textAlign: "left" }}>Proxy</th>
+          <th style={{ textAlign: "left" }}>Implementation</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.keys(contracts).map((key) => {
+          if (key === "erc20Contracts") return;
+          const contract = contracts[key];
+          const baseUrl = networkConfig.blockExplorer.url;
+          const proxyAddress = contract.address.proxy;
+          const implementationAddress = contract.address.impl;
+          return (
+            <tr key={contract.name}>
+              <td>{contract.name}</td>
+              <td>
+                {proxyAddress ? (
+                  <a href={contractAddressToLink(baseUrl, proxyAddress)}>
+                    {`${networkConfig.blockExplorer.name} ↗`}
+                  </a>
+                ) : (
+                  "None"
+                )}
+              </td>
+              <td>
+                <a href={contractAddressToLink(baseUrl, implementationAddress)}>
+                  {`${networkConfig.blockExplorer.name} ↗`}
+                </a>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

packages/website/components/EcosystemCard.tsx → packages/website/components/Ecosystem/EcosystemCard.tsx

@@ -22,4 +22,4 @@ function EcosystemCard({ icon, name, link, description }) {
   );
 }
 
-export default EcosystemCard;
+export { EcosystemCard };

packages/website/components/EcosystemSection.tsx → packages/website/components/Ecosystem/EcosystemSection.tsx

@@ -1,4 +1,4 @@
-import EcosystemCard from "./EcosystemCard";
+import { EcosystemCard } from "./EcosystemCard";
 import { useState } from "react";
 
 type Filters =
@@ -179,7 +179,7 @@ const ecosystemData: EcosystemData[] = [
   },
 ];
 
-export default function EcosystemSection() {
+export function EcosystemSection() {
   // NOTE: commented out because we won't need this until we have grown our ecosystem page further
   // const [activeFilter, setActiveFilter] = useState<Filters>("all");
 

packages/website/components/BlogSection.tsx → packages/website/components/Home/BlogSection.tsx

@@ -46,7 +46,7 @@ const posts = [
   },
 ];
 
-export default function BlogSection() {
+export function BlogSection() {
   return (
     <div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-900">
       <div className="absolute inset-0">

packages/website/components/CommunitySection.tsx → packages/website/components/Home/CommunitySection.tsx

@@ -1,4 +1,4 @@
-export default function CommunitySection() {
+export function CommunitySection() {
   // Button base class
   const buttonClass =
     "inline-flex items-center justify-center float w-64 px-4 md:px-6 py-2 md:py-3 mb-4 mx-2 text-base md:text-lg font-semibold text-white rounded-md shadow-md";

packages/website/components/FeaturesSection.tsx → packages/website/components/Home/FeaturesSection.tsx

@@ -25,7 +25,7 @@ const features = [
   },
 ];
 
-export default function FeaturesSection() {
+export function FeaturesSection() {
   return (
     <div className="mx-auto max-w-md px-6 text-center sm:max-w-2xl lg:max-w-7xl lg:px-8">
       <div className="my-20">

packages/website/components/Footer.tsx → packages/website/components/Home/Footer.tsx

@@ -1,4 +1,4 @@
-export default function Footer() {
+export function Footer() {
   return (
     <footer className="bg-neutral-100 dark:bg-neutral-900">
       <div className="mx-auto max-w-[90rem] pl-3">
@@ -61,7 +61,7 @@ export default function Footer() {
                   href="/docs/resources/integration-guide"
                   className="hover:underline"
                 >
-                  Integration guide
+                  Integration manual
                 </a>
               </li>
             </ul>

packages/website/components/Hero.tsx → packages/website/components/Home/Hero.tsx

@@ -1,4 +1,4 @@
-export default function Hero() {
+export function Hero() {
   // Enlarges and decreases the opacity of the taikoGeom image upon scroll
   if (typeof window !== "undefined") {
     const changeTaikoGeom = () => {

packages/website/components/Home/index.ts

@@ -0,0 +1,5 @@
+export { BlogSection } from "./BlogSection";
+export { CommunitySection } from "./CommunitySection";
+export { FeaturesSection } from "./FeaturesSection";
+export { Footer } from "./Footer";
+export { Hero } from "./Hero";

packages/website/components/ThemeToggle/ThemeToggle.tsx → packages/website/components/ThemeToggle/index.tsx

@@ -75,4 +75,4 @@ const ThemeToggle = () => {
   );
 };
 
-export default ThemeToggle;
+export { ThemeToggle };

packages/website/components/ThemedImage.tsx

@@ -26,4 +26,4 @@ function ThemedImage() {
   ) : null;
 }
 
-export default ThemedImage;
+export { ThemedImage };