feat(docs) : Add Network Overview Page

docs/content/developer/developer.mdx

@@ -11,6 +11,10 @@ If you are completely new to Move, you should start with the aptly named Getting
 
 Go to [Getting Started](getting-started/getting-started.mdx).
 
+## Network Overview
+
+The [Network Overview](network-overview.mdx) page gives an overview of the different networks available in the IOTA ecosystem.
+
 ## IOTA 101
 
 The IOTA 101 section introduces the basics of IOTA that help you create smart contracts. These topics assume you are familiar with Move and the IOTA blockchain.

docs/content/developer/getting-started/connect.mdx

@@ -10,6 +10,10 @@ import questions from '/json/developer/getting-started/connect.json';
 
 # Connect to an IOTA Network
 
+:::info
+The [Network Overview](/developer/network-overview) section lists all the networks available in the IOTA ecosystem.
+:::
+
 ## IOTA CLI
 
 IOTA provides the [IOTA command line interface (CLI)](/references/cli/client.mdx) to interact with [IOTA networks](#iota-networks), it does the following and more:

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

@@ -166,6 +166,10 @@ The response resembles the following, but with different IDs:
 ╰────────────────────────────────────────────────────────────────────┴────────────╯
 ```
 
+:::tip explorer
+In order to use the explorer locally users can use the deployed explorer and set another endpoint like this: [https://explorer.iota.cafe/?network=http%3A%2F%2F127.0.0.1%3A9000](https://explorer.iota.cafe/?network=http%3A%2F%2F127.0.0.1%3A9000) or manually provide a Custom RPC URL on the [Explorer](https://explorer.iota.cafe/) page in the top right corner.
+:::
+
 ## Install IOTA Wallet Locally
 
 ### Prerequisites

docs/content/developer/network-overview.mdx

@@ -0,0 +1,38 @@
+---
+description: This page 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";
+import { Networks } from '@site/src/components/constant.tsx';
+
+:::info
+In general, all endpoints are load-balanced but also subject to rate limiting. If you are developing a production-level application for IOTA, consider [setting up your own infrastructure](/developer/getting-started/local-network) to have more control and avoid any limits.
+:::
+
+## IOTA Mainnet
+
+:::note
+The Mainnet and Devnet have not yet gone live.
+:::
+
+<NetworkInfo.Move {...Networks['iota_move']}/>
+
+## IOTA Testnet
+
+<NetworkInfo.Move {...Networks['iota_move_testnet']}/>
+
+## IOTA Devnet
+
+<NetworkInfo.Move {...Networks['iota_move_devnet']}/>
+
+## IOTA Localnet
+
+To create a local IOTA network, you can refer to [Local Development](/developer/getting-started/local-network) page.
+
+<NetworkInfo.Move {...Networks['iota_localnet']}/>

docs/content/sidebars/developer.js

@@ -29,6 +29,7 @@ const developer = [
             'developer/getting-started/coffee-example',
         ],
     },
+    'developer/network-overview',
     {
         type: 'category',
         label: 'IOTA 101',

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,98 @@ function L1(props: NetworkProps) {
   );
 }
 
+// Testnet Component
+function Testnet(props: NetworkProps) {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th>Base Token</th>
+          <td>{props.baseToken}</td>
+        </tr>
+        {props.protocol &&<tr>
+          <th>Protocol</th>
+          <td>{props.protocol}</td>
+        </tr>}
+        <tr>
+          <th>HTTP REST API</th>
+          <td>
+            <CodeBlock>{props.httpRestApi}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>Event API</th>
+          <td>
+            <CodeBlock>{props.eventApi}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>Permanode API</th>
+          <td>
+            <CodeBlock>{props.permaNodeApi}</CodeBlock>
+          </td>
+        </tr>
+        {props.faucet && (
+          <tr>
+            <th>Faucet</th>
+            <td>
+              <a href={props.faucet} target='_blank' rel='noopener noreferrer'>
+                {props.faucet}
+              </a>
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}
+
+// Devtnet Component
+function Devnet(props: NetworkProps) {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th>Base Token</th>
+          <td>{props.baseToken}</td>
+        </tr>
+        <tr>
+          <th>Protocol</th>
+          <td>{props.protocol}</td>
+        </tr>
+        <tr>
+          <th>HTTP REST API</th>
+          <td>
+            <CodeBlock>{props.httpRestApi}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>Event API</th>
+          <td>
+            <CodeBlock>{props.eventApi}</CodeBlock>
+          </td>
+        </tr>
+        <tr>
+          <th>Permanode API</th>
+          <td>
+            <CodeBlock>{props.permaNodeApi}</CodeBlock>
+          </td>
+        </tr>
+        {props.faucet && (
+          <tr>
+            <th>Faucet</th>
+            <td>
+              <a href={props.faucet} target='_blank' rel='noopener noreferrer'>
+                {props.faucet}
+              </a>
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}
+// EVM component
 function Evm(props: NetworkProps) {
   return (
     <table>
@@ -134,6 +227,7 @@ function Evm(props: NetworkProps) {
   );
 }
 
+// EvmCustom component
 function EvmCustom(props: NetworkProps) {
   return (
     <table>
@@ -159,8 +253,67 @@ 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 scope="row">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,
+  Testnet,
+  Devnet
 };

docs/site/src/components/constant.tsx

@@ -40,15 +40,6 @@ export const Networks = {
       api: 'https://api.evm.iotaledger.net',
     },
   },
-  iota_2_testnet: {
-    baseToken: 'Testnet Token (no value)',
-    protocol: 'IOTA 2.0',
-    httpRestApi: 'https://api.nova-testnet.iotaledger.net/',
-    eventApi: 'wss://api.nova-testnet.iotaledger.net:443 (MQTT 3.1, /mqtt)',
-    permaNodeApi: 'https://chronicle.nova-testnet.iotaledger.net',
-    explorer: 'https://explorer.iota.org/iota2-testnet',
-    faucet: 'https://faucet.nova-testnet.iotaledger.net',
-  },
   iota_testnet: {
     baseToken: 'Testnet Token (no value)',
     protocol: 'Stardust',
@@ -91,6 +82,15 @@ export const Networks = {
       api: 'https://api.evm.testnet.iotaledger.net',
     },
   },
+  iota_2_testnet: {
+    baseToken: 'Testnet Token (no value)',
+    protocol: 'IOTA 2.0',
+    httpRestApi: 'https://api.nova-testnet.iotaledger.net/',
+    eventApi: 'wss://api.nova-testnet.iotaledger.net:443 (MQTT 3.1, /mqtt)',
+    permaNodeApi: 'https://chronicle.nova-testnet.iotaledger.net',
+    explorer: 'https://explorer.iota.org/iota2-testnet',
+    faucet: 'https://faucet.nova-testnet.iotaledger.net',
+  },
   shimmer: {
     baseToken: 'Shimmer Token',
     protocol: 'Stardust',
@@ -155,6 +155,41 @@ export const Networks = {
       api: 'https://api.evm.testnet.shimmer.network',
     },
   },
+  iota_move: {
+    baseToken: 'IOTA Token',
+    jsonRpcUrl: 'jsonRpcUrl placeholder',
+    jsonRpcWebsocketUrl:'jsonRpcWebsocketUrl placeholder',
+    indexerRpc: 'indexerRpc placeholder',
+    graphqlRpc: 'graphqlRpc placeholder',
+    faucetUrl: 'faucetUrl placeholder',
+    explorerUrl: 'explorerUrl placeholder'
+  },
+  iota_move_testnet: {
+    baseToken: 'IOTA Token (no value)',
+    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://api.iota-rebased-alphanet.iota.cafe/gas',
+    explorerUrl: 'https://explorer.iota.cafe/?network=alphanet'
+  },
+  iota_move_devnet: {
+    baseToken: 'IOTA Token (no value)',
+    jsonRpcUrl: 'jsonRpcUrl placeholder',
+    jsonRpcWebsocketUrl:'jsonRpcWebsocketUrl placeholder',
+    indexerRpc: 'indexerRpc placeholder',
+    graphqlRpc: 'graphqlRpc placeholder',
+    faucetUrl: 'faucetUrl placeholder',
+    explorerUrl: 'explorerUrl placeholder'
+  },
+  iota_localnet: {
+    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'
+  },
 };
 
 export interface Toolkit {
@@ -192,3 +227,12 @@ export interface NetworkProps {
     api?: string;
   };
 }
+
+export interface  MoveProps {
+  jsonRpcUrl: string;
+  jsonRpcWebsocketUrl: string;
+  indexerRpc: string;
+  graphqlRpc: string;
+  faucetUrl: string;
+  explorerUrl?: string;
+};