Make network info table components (#1521)

* Make components out of tables * Use components * Use ChainId component * Update documentation * Add tables to ISC docs * Fix imports and typo
iotaledger · Mar 25, 2024 · 233fc38 · 233fc38
1 parent 87f5b85
commit 233fc38
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 43 deletions.
diff --git a/docs/build/getting-started/networks-endpoints.mdx b/docs/build/getting-started/networks-endpoints.mdx
@@ -13,6 +13,7 @@ tags:
 ---
 
 import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import NetworkInfo from '@theme/NetworkInfo';
 import { ChainId } from '@theme/ChainId';
 
 # Networks & Endpoints
@@ -36,34 +37,26 @@ This network runs under a [Coordinator PoA scheme](/learn/protocols/coordinator/
 
 :::
 
-| Base Token | Protocol | HTTP REST API                               | Event API                                                       | Permanode API                                     |
-| ---------- | -------- | ------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------- |
-| IOTA Token | Stardust | https://api.stardust-mainnet.iotaledger.net | wss://api.stardust-mainnet.iotaledger.net:443 (MQTT 3.1, /mqtt) | https://chronicle.stardust-mainnet.iotaledger.net |
+<NetworkInfo.IOTA />
 
 ## Shimmer
 
 [Shimmer](https://explorer.iota.org/shimmer) is the staging network for new protocol versions before they hit IOTA
 Mainnet.
 
-| Base Token    | Protocol | HTTP REST API               | Event API                                            | Permanode API                     |
-| ------------- | -------- | --------------------------- | ---------------------------------------------------- | --------------------------------- |
-| Shimmer Token | Stardust | https://api.shimmer.network | wss://api.shimmer.network:443/api/mqtt/v1 (MQTT 3.1) | https://chronicle.shimmer.network |
+<NetworkInfo.Shimmer />
 
 ### ShimmerEVM
 
 [ShimmerEVM](https://explorer.evm.shimmer.network/) is the L2 EVM running on top of the Shimmer network.
 
 <AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']} />
 
-| Base Token    | Protocol  | Chain ID | RPC URL                                                                       | Explorer                             |
-| ------------- | --------- | -------- | ----------------------------------------------------------------------------- | ------------------------------------ |
-| Shimmer Token | ISC / EVM | <ChainId url='https://json-rpc.evm.shimmer.network'/>      | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network |
+<NetworkInfo.ShimmerEVM />
 
 #### Additional Info
 
-| Chain Address | Alias ID |
-|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------|
-|[smr1prxvwqvwf7nru5q5xvh5thwg54zsm2y4wfnk6yk56hj3exxkg92mx20wl3s](https://explorer.shimmer.network/shimmer/addr/smr1prxvwqvwf7nru5q5xvh5thwg54zsm2y4wfnk6yk56hj3exxkg92mx20wl3s)|0xccc7018e4fa63e5014332f45ddc8a5450da89572676d12d4d5e51c98d64155b3|
+<NetworkInfo.ShimmerEVMAdditional />
 
 ## Public Testnet
 
@@ -73,9 +66,7 @@ Mainnet.
 This network is subject to occasional resets (no data retention) which are usually announced with a one-week grace period.
 :::
 
-| Base Token                | Protocol | HTTP REST API                       | Event API                                                    | Permanode API                             | Faucet                                 |
-| ------------------------- | -------- | ----------------------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------------------------------------- |
-| Testnet Tokens (no value) | Stardust | `https://api.testnet.shimmer.network` | wss://api.testnet.shimmer.network:443/api/mqtt/v1 (MQTT 3.1) | https://chronicle.testnet.shimmer.network | https://faucet.testnet.shimmer.network |
+<NetworkInfo.Testnet />
 
 ### ShimmerEVM Testnet
 
@@ -91,12 +82,8 @@ This network is subject to occasional resets (no data retention) which are usual
 
 :::
 
-| Base Token                | Protocol  | Chain ID | RPC URL                                      | Faucet                                     | Explorer                                     |
-| ------------------------- | --------- | -------- | -------------------------------------------- | ------------------------------------------ | -------------------------------------------- |
-| Testnet Tokens (no value) | ISC / EVM | <ChainId url='https://json-rpc.evm.testnet.shimmer.network'/> | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network |
+<NetworkInfo.TestnetEVM />
 
 #### Additional Info
 
-| Chain Address | Alias ID |
-|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------|
-|[rms1ppp00k5mmd2m8my8ukkp58nd3rskw6rx8l09aj35984k74uuc5u2cywn3ex](https://explorer.shimmer.network/testnet/addr/rms1ppp00k5mmd2m8my8ukkp58nd3rskw6rx8l09aj35984k74uuc5u2cywn3ex)|0x42f7da9bdb55b3ec87e5ac1a1e6d88e16768663fde5eca3429eb6f579cc538ac|
+<NetworkInfo.TestnetEVMAdditional />
diff --git a/docs/build/isc/v1.0.0-rc.6/docs/getting-started/networks-and-chains.mdx b/docs/build/isc/v1.0.0-rc.6/docs/getting-started/networks-and-chains.mdx
@@ -9,7 +9,7 @@ tags:
   - Endpoints
 ---
 import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
-import { ChainId } from '@theme/ChainId';
+import NetworkInfo from '@theme/NetworkInfo';
 
 # Networks & Chains
 
@@ -19,9 +19,7 @@ import { ChainId } from '@theme/ChainId';
 
 <AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']} />
 
-| Base Token    | Protocol  | Chain ID                                              | RPC URL                                                                       | Explorer                             |
-|---------------|-----------|-------------------------------------------------------|-------------------------------------------------------------------------------|--------------------------------------|
-| Shimmer Token | ISC / EVM | <ChainId url='https://json-rpc.evm.shimmer.network'/> | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network |
+<NetworkInfo.ShimmerEVM />
 
 ## ShimmerEVM Testnet
 
@@ -37,9 +35,7 @@ This network is subject to occasional resets (no data retention) which are usual
 
 :::
 
-| Base Token                | Protocol  | Chain ID                                                      | RPC URL                                      | Faucet                                     | Explorer                                     |
-|---------------------------|-----------|---------------------------------------------------------------|----------------------------------------------|--------------------------------------------|----------------------------------------------|
-| Testnet Tokens (no value) | ISC / EVM | <ChainId url='https://json-rpc.evm.testnet.shimmer.network'/> | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network |
+<NetworkInfo.TestnetEVM />
 
 :::note
 

diff --git a/docs/build/isc/v1.0.0-rc.6/docs/getting-started/tools.mdx b/docs/build/isc/v1.0.0-rc.6/docs/getting-started/tools.mdx
@@ -21,6 +21,7 @@ import TabItem from '@theme/TabItem';
 import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
 import DeployAdmonition from '../_admonitions/_deploy_a_smart_contract.md';
 import { ChainId } from '@theme/ChainId';
+import NetworkInfo from '@theme/NetworkInfo';
 
 # Compatible Tools
 
@@ -56,23 +57,11 @@ the [ShimmerEVM Testnet](/build/networks-endpoints/#shimmerevm-testnet):
 <Tabs>
 <TabItem value='testnet' label='Public Testnet'>
 <AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']}/>
-
-- Network Name: `Public Testnet`
-- New RPC URL: `https://json-rpc.evm.testnet.shimmer.network/`
-- Chain ID: **<ChainId url='https://json-rpc.evm.testnet.shimmer.network'/>**
-- Currency Symbol: `SMR`
-- Block Explorer URL: `https://explorer.evm.testnet.shimmer.network/`
-
+<NetworkInfo.TestnetEVM />
 </TabItem>
 <TabItem value='shimmerEVM' label='ShimmerEVM'>
 <AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']}/>
-
-- Network Name: `ShimmerEVM`
-- New RPC URL: `https://json-rpc.evm.shimmer.network/`
-- Chain ID: **<ChainId url='https://json-rpc.evm.shimmer.network'/>**
-- Currency Symbol: `SMR`
-- Block Explorer URL: `https://explorer.evm.shimmer.network/`
-
+<NetworkInfo.ShimmerEVM />
 </TabItem>
 </Tabs>
 

diff --git a/theme/README.md b/theme/README.md
@@ -49,6 +49,16 @@ import code_snippet from '!!raw-loader!../../code_snippet.py'
   endString={'# end'} />
 ```
 
+### NetworkInfo
+
+A set of components showing information about the different networks.
+
+```
+import NetworkInfo from '@theme/NetworkInfo'
+
+<NetworkInfo.IOTA />
+```
+
 ## Swizzling components
 
 ```bash

diff --git a/theme/src/theme/ChainId/index.tsx b/theme/src/theme/ChainId/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { Web3 } from 'web3';
 
@@ -16,5 +17,5 @@ export function ChainId(props: ChainIdProps) {
       .catch((error) => setValue(`Error: ${error.message}`));
   }, []);
 
-  return value;
+  return <>{value}</>;
 }