From 233fc3882eb2907997c149383dec225d42eb8e8a Mon Sep 17 00:00:00 2001 From: Jeroen van den Hout Date: Mon, 25 Mar 2024 21:02:25 +0100 Subject: [PATCH] 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 --- .../getting-started/networks-endpoints.mdx | 29 +- .../getting-started/networks-and-chains.mdx | 10 +- .../docs/getting-started/tools.mdx | 17 +- theme/README.md | 10 + theme/src/theme/ChainId/index.tsx | 3 +- theme/src/theme/NetworkInfo/index.tsx | 299 ++++++++++++++++++ theme/src/types.d.ts | 12 + 7 files changed, 337 insertions(+), 43 deletions(-) create mode 100644 theme/src/theme/NetworkInfo/index.tsx diff --git a/docs/build/getting-started/networks-endpoints.mdx b/docs/build/getting-started/networks-endpoints.mdx index 6c9a48e0d74..148a2d89d37 100644 --- 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,18 +37,14 @@ 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 | + ## 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 | + ### ShimmerEVM @@ -55,15 +52,11 @@ Mainnet. -| Base Token | Protocol | Chain ID | RPC URL | Explorer | -| ------------- | --------- | -------- | ----------------------------------------------------------------------------- | ------------------------------------ | -| Shimmer Token | ISC / EVM | | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network | + #### Additional Info -| Chain Address | Alias ID | -|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------| -|[smr1prxvwqvwf7nru5q5xvh5thwg54zsm2y4wfnk6yk56hj3exxkg92mx20wl3s](https://explorer.shimmer.network/shimmer/addr/smr1prxvwqvwf7nru5q5xvh5thwg54zsm2y4wfnk6yk56hj3exxkg92mx20wl3s)|0xccc7018e4fa63e5014332f45ddc8a5450da89572676d12d4d5e51c98d64155b3| + ## 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 | + ### 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 | | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network | + #### Additional Info -| Chain Address | Alias ID | -|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------| -|[rms1ppp00k5mmd2m8my8ukkp58nd3rskw6rx8l09aj35984k74uuc5u2cywn3ex](https://explorer.shimmer.network/testnet/addr/rms1ppp00k5mmd2m8my8ukkp58nd3rskw6rx8l09aj35984k74uuc5u2cywn3ex)|0x42f7da9bdb55b3ec87e5ac1a1e6d88e16768663fde5eca3429eb6f579cc538ac| + 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 index f1e2718d27d..8186bf8a98d 100644 --- 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'; -| Base Token | Protocol | Chain ID | RPC URL | Explorer | -|---------------|-----------|-------------------------------------------------------|-------------------------------------------------------------------------------|--------------------------------------| -| Shimmer Token | ISC / EVM | | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network | + ## 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 | | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network | + :::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 index dbae2121e4b..c68ba785d34 100644 --- 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): - -- Network Name: `Public Testnet` -- New RPC URL: `https://json-rpc.evm.testnet.shimmer.network/` -- Chain ID: **** -- Currency Symbol: `SMR` -- Block Explorer URL: `https://explorer.evm.testnet.shimmer.network/` - + - -- Network Name: `ShimmerEVM` -- New RPC URL: `https://json-rpc.evm.shimmer.network/` -- Chain ID: **** -- Currency Symbol: `SMR` -- Block Explorer URL: `https://explorer.evm.shimmer.network/` - + diff --git a/theme/README.md b/theme/README.md index d79cba882df..31e74673077 100644 --- 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' + + +``` + ## Swizzling components ```bash diff --git a/theme/src/theme/ChainId/index.tsx b/theme/src/theme/ChainId/index.tsx index e77396f980a..5ba10746a8e 100644 --- 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}; } diff --git a/theme/src/theme/NetworkInfo/index.tsx b/theme/src/theme/NetworkInfo/index.tsx new file mode 100644 index 00000000000..4b9b122664a --- /dev/null +++ b/theme/src/theme/NetworkInfo/index.tsx @@ -0,0 +1,299 @@ +import React from 'react'; +import { ChainId } from '../ChainId'; + +// TODO: Host network info in a top-level configuration file +// and use it to generate these tables. + +function IOTA() { + return ( + + + + + + + + + + + + + + + + + + + +
Base TokenProtocolHTTP REST APIEvent APIPermanode API
IOTA TokenStardust + + https://api.stardust-mainnet.iotaledger.net + + + wss://api.stardust-mainnet.iotaledger.net:443 (MQTT 3.1, /mqtt) + + + https://chronicle.stardust-mainnet.iotaledger.net + +
+ ); +} + +function Shimmer() { + return ( + + + + + + + + + + + + + + + + + + + +
Base TokenProtocolHTTP REST APIEvent APIPermanode API
Shimmer TokenStardust + + https://api.shimmer.network + + wss://api.shimmer.network:443/api/mqtt/v1 (MQTT 3.1) + + https://chronicle.shimmer.network + +
+ ); +} + +function ShimmerEVM() { + return ( + + + + + + + + + + + + + + + + + + + +
Base TokenProtocolChain IDRPC URLExplorer
Shimmer TokenISC / EVM + + + + https://json-rpc.evm.shimmer.network + {' '} + or wss://ws.json-rpc.evm.shimmer.network + + + https://explorer.evm.shimmer.network + +
+ ); +} + +function ShimmerEVMAdditional() { + return ( + + + + + + + + + + + + + +
Chain AddressAlias ID
+ + smr1prxvwqvwf7nru5q5xvh5thwg54zsm2y4wfnk6yk56hj3exxkg92mx20wl3s + + + 0xccc7018e4fa63e5014332f45ddc8a5450da89572676d12d4d5e51c98d64155b3 +
+ ); +} + +function Testnet() { + return ( + + + + + + + + + + + + + + + + + + + + + +
Base TokenProtocolHTTP REST APIEvent APIPermanode APIFaucet
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 + +
+ ); +} + +function TestnetEVM() { + return ( + + + + + + + + + + + + + + + + + + + + + +
Base TokenProtocolChain IDRPC URLFaucetExplorer
Testnet Tokens (no value)ISC / EVM + + + + https://json-rpc.evm.testnet.shimmer.network + + + + https://evm-faucet.testnet.shimmer.network + + + + https://explorer.evm.testnet.shimmer.network + +
+ ); +} + +function TestnetEVMAdditional() { + return ( + + + + + + + + + + + + + +
Chain AddressAlias ID
+ + rms1ppp00k5mmd2m8my8ukkp58nd3rskw6rx8l09aj35984k74uuc5u2cywn3ex + + + 0x42f7da9bdb55b3ec87e5ac1a1e6d88e16768663fde5eca3429eb6f579cc538ac +
+ ); +} + +export default { + IOTA, + Shimmer, + ShimmerEVM, + ShimmerEVMAdditional, + Testnet, + TestnetEVM, + TestnetEVMAdditional, +}; diff --git a/theme/src/types.d.ts b/theme/src/types.d.ts index 12046e8fa54..e6678212569 100644 --- a/theme/src/types.d.ts +++ b/theme/src/types.d.ts @@ -20,3 +20,15 @@ declare module '@theme/AddToMetaMaskButton' { declare module '@theme/DocBanner' { export default function DocBanner(): JSX.Element; } + +declare module '@theme/NetworkInfo' { + export default { + IOTA: JSX.Element, + Shimmer: JSX.Element, + ShimmerEVM: JSX.Element, + ShimmerEVMAdditional: JSX.Element, + Testnet: JSX.Element, + TestnetEVM: JSX.Element, + TestnetEVMAdditional: JSX.Element, + }; +}