feat(docs) : Add Network Overview Page

docs/content/developer/getting-started/network-overview.mdx

@@ -0,0 +1,56 @@
+---
+description: This pages gives an overview around the different networks available in the IOTA ecosystem.
+
+tags: [getting-started, devnet, testnet, mainnet]
+---
+
+# Network Overview
+
+This pages gives an overview around the different networks available in the IOTA ecosystem.
+
+import NetworkInfo from "@site/src/components/NetworkInfo/index.tsx";
+
+:::info
+In general, all endpoints are load balanced but are also subject to rate limiting. If you are developing a production level application for IOTA, consider setting up your own infrastructure in order to have more control and to not run into any limits.
+:::
+
+## IOTA Mainnet
+
+:::note
+The mainnet is currently unavailable and has not yet gone live.
+:::
+
+<NetworkInfo.L1 
+  baseToken="IOTA Token" 
+  protocol="protocol placeholder" 
+  httpRestApi="httpRestApi placeholder"
+  eventApi="eventApi placeholder"
+  permaNodeApi="permaNodeApi placeholder"
+/>
+
+## IOTA Alphanet
+
+<NetworkInfo.Move  
+    baseToken="IOTA Token" 
+    jsonRpcUrl= 'https://api.iota-rebased-alphanet.iota.cafe'
+    jsonRpcWebsocketUrl='wss://api.iota-rebased-alphanet.iota.cafe'
+    indexerRpc= 'https://indexer.iota-rebased-alphanet.iota.cafe'
+    graphqlRpc= 'https://graphql.iota-rebased-alphanet.iota.cafe'
+    faucetUrl= 'https://faucet.iota-rebased-alphanet.iota.cafe/gas'
+    explorerUrl= 'https://explorer.iota.cafe/?network=alphanet'
+/>
+
+## IOTA Localnet
+
+:::tip
+In order to use explorer locally you could use the IOTA [Explorer](https://github.com/iotaledger/iota/blob/develop/apps/explorer/README.md) app and run it separately in Localnet.
+:::
+
+<NetworkInfo.Move  
+    baseToken="IOTA Token" 
+    jsonRpcUrl= 'http://127.0.0.1:9000'
+    jsonRpcWebsocketUrl='ws://127.0.0.1:9000'
+    indexerRpc= 'http://127.0.0.1:9124'
+    graphqlRpc= 'http://127.0.0.1:8000'
+    faucetUrl= 'http://127.0.0.1:9123/gas'
+/>

docs/content/sidebars/developer.js

@@ -26,6 +26,7 @@ const developer = [
             'developer/getting-started/publish',
             'developer/getting-started/debug',
             'developer/getting-started/client-tssdk',
+            'developer/getting-started/network-overview',
             'developer/getting-started/coffee-example',
         ],
     },

docs/site/src/components/NetworkInfo/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ChainId } from '../ChainId';
-import { NetworkProps } from '../constant';
+import { NetworkProps, MoveProps } from '../constant';
 import CodeBlock from '@theme/CodeBlock';
 import Admonition from '@theme/Admonition';
 
+// L1 component
 function L1(props: NetworkProps) {
   return (
     <table>
@@ -49,6 +50,7 @@ function L1(props: NetworkProps) {
   );
 }
 
+// EVM component
 function Evm(props: NetworkProps) {
   return (
     <table>
@@ -134,6 +136,7 @@ function Evm(props: NetworkProps) {
   );
 }
 
+// EvmCustom component
 function EvmCustom(props: NetworkProps) {
   return (
     <table>
@@ -159,8 +162,63 @@ function EvmCustom(props: NetworkProps) {
   );
 }
 
+// Move component
+function Move(props: MoveProps) {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th>Base Token</th>
+          <td>{props.baseToken}</td>
+        </tr>
+       {props.explorerUrl && <tr>
+          <th>Explorer URL</th>
+          <td>
+            <CodeBlock>{props.explorerUrl}</CodeBlock>
+          </td>
+        </tr>}
+        <tr>
+          <th>JSON RPC URL</th>
+          <td>
+            <CodeBlock>{props.jsonRpcUrl}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>Indexer RPC</th>
+          <td>
+            <CodeBlock>{props.indexerRpc}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>GraphQL RPC</th>
+          <td>
+            <CodeBlock>{props.graphqlRpc}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>RPC Websocket URL</th>
+          <td>
+            <CodeBlock>{props.jsonRpcWebsocketUrl}</CodeBlock>
+          </td>
+        </tr>
+        {props.faucet && (
+          <tr>
+            <th>Faucet URL</th>
+            <td>
+              <a href={props.faucetUrl} target="_blank" rel="noopener noreferrer">
+                {props.faucetUrl}
+              </a>
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}
+
 export default {
   L1,
   Evm,
   EvmCustom,
+  Move,
 };

docs/site/src/components/constant.tsx

@@ -192,3 +192,12 @@ export interface NetworkProps {
     api?: string;
   };
 }
+
+export interface  MoveProps {
+  jsonRpcUrl?: string;
+  jsonRpcWebsocketUrl?: string;
+  indexerRpc?: string;
+  graphqlRpc?: string;
+  faucetUrl?: string;
+  explorerUrl?: string;
+};