Add network config for docs

iotaledger · Apr 28, 2024 · 4f5e396 · 4f5e396
1 parent c5b1a48
commit 4f5e396
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 276 deletions.
diff --git a/cli/test/tutorial/docs/tutorial-basics/markdown-features.mdx b/cli/test/tutorial/docs/tutorial-basics/markdown-features.mdx
@@ -1,7 +1,8 @@
 ---
 sidebar_position: 4
 ---
-import AddToMetaMaskButton from '@theme/AddToMetaMaskButton'
+import { AddToMetaMaskButton } from '@theme/AddToMetaMaskButton'
+import { Networks } from '@theme/constant'
 import CodeSnippetBlock from '@theme/CodeSnippetBlock'
 import code_snippet from '!!raw-loader!../../code_snippet.py'
 
@@ -152,4 +153,4 @@ This is <Highlight color="#1877F2">Facebook blue</Highlight> !
 
 ## AddToMetaMaskButton
 
-<AddToMetaMaskButton />
+<AddToMetaMaskButton {...Networks['shimmer']} />
diff --git a/docs/build/getting-started/networks-endpoints.mdx b/docs/build/getting-started/networks-endpoints.mdx
@@ -12,7 +12,8 @@ tags:
   - Endpoints
 ---
 
-import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import { AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 import NetworkInfo from '@theme/NetworkInfo';
 import { ChainId } from '@theme/ChainId';
 
@@ -37,26 +38,26 @@ This network runs under a [Coordinator PoA scheme](/learn/protocols/coordinator/
 
 :::
 
-<NetworkInfo.IOTA />
+<NetworkInfo.L1 {...Networks['iota']}/>
 
 ## Shimmer
 
 [Shimmer](https://explorer.iota.org/shimmer) is the staging network for new protocol versions before they hit IOTA
 Mainnet.
 
-<NetworkInfo.Shimmer />
+<NetworkInfo.L1 {...Networks['shimmer']} />
 
 ### ShimmerEVM
 
 [ShimmerEVM](https://explorer.evm.shimmer.network/) is the L2 EVM running on top of the Shimmer network.
 
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']} />
+<AddToMetaMaskButton {...Networks['shimmer']} />
 
-<NetworkInfo.ShimmerEVM />
+<NetworkInfo.Evm {...Networks['shimmer']} />
 
 #### Additional Info
 
-<NetworkInfo.ShimmerEVMAdditional />
+<NetworkInfo.EvmCustom {...Networks['shimmer']} />
 
 ## Public Testnet
 
@@ -66,11 +67,11 @@ Mainnet.
 This network is subject to occasional resets (no data retention) which are usually announced with a one-week grace period.
 :::
 
-<NetworkInfo.Testnet />
+<NetworkInfo.L1 {...Networks['testnet']} />
 
 ### ShimmerEVM Testnet
 
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']} />
+<AddToMetaMaskButton {...Networks['testnet']} />
 
 [The ShimmerEVM Testnet](https://explorer.evm.testnet.shimmer.network/) runs as a layer 2 on top
 of the Public Testnet. This network uses ISC to facilitate an Ethereum Virtual Machine and has an
@@ -82,8 +83,8 @@ This network is subject to occasional resets (no data retention) which are usual
 
 :::
 
-<NetworkInfo.TestnetEVM />
+<NetworkInfo.Evm {...Networks['testnet']} />
 
 #### Additional Info
 
-<NetworkInfo.TestnetEVMAdditional />
+<NetworkInfo.EvmCustom {...Networks['testnet']} />
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
@@ -8,7 +8,8 @@ tags:
   - reference
   - Endpoints
 ---
-import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import { AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 import NetworkInfo from '@theme/NetworkInfo';
 
 # Networks & Chains
@@ -17,16 +18,16 @@ import NetworkInfo from '@theme/NetworkInfo';
 
 [ShimmerEVM](https://explorer.evm.shimmer.network/) is the L2 EVM running on top of the Shimmer network.
 
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']} />
+<AddToMetaMaskButton {...Networks['shimmer']} />
 
-<NetworkInfo.ShimmerEVM />
+<NetworkInfo.Evm {...Networks['shimmer']} />
 
 ## ShimmerEVM Testnet
 
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']} />
+<AddToMetaMaskButton {...Networks['testnet']} />
 
 [The ShimmerEVM Testnet](https://explorer.evm.testnet.shimmer.network/) runs as a layer 2 on top
-of the [Public Testnet](/build/networks-endpoints/#public-testnet). This network uses ISC to facilitate
+of the [Public Testnet](/build/networks-endpoints#public-testnet). This network uses ISC to facilitate
 an Ethereum Virtual Machine and has an enshrined bridge to layer 1.
 
 :::info
@@ -35,7 +36,7 @@ This network is subject to occasional resets (no data retention) which are usual
 
 :::
 
-<NetworkInfo.TestnetEVM />
+<NetworkInfo.Evm {...Networks['shimmer']} />
 
 :::note
 

diff --git a/docs/build/isc/v1.0.0-rc.6/docs/getting-started/quick-start.mdx b/docs/build/isc/v1.0.0-rc.6/docs/getting-started/quick-start.mdx
@@ -13,7 +13,8 @@ tags:
   - RPC
 ---
 
-import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import { AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 
 # ShimmerEVM Testnet Quickstart Guide
 
@@ -27,7 +28,7 @@ This guide will help you quickly get started with the [ShimmerEVM Testnet](/buil
 
 Click this button:
 
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']} />
+<AddToMetaMaskButton {...Networks['testnet']} />
 
 :::tip
 

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
@@ -18,7 +18,8 @@ tags:
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
+import {AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 import DeployAdmonition from '../_admonitions/_deploy_a_smart_contract.md';
 import { ChainId } from '@theme/ChainId';
 import NetworkInfo from '@theme/NetworkInfo';
@@ -56,12 +57,12 @@ the [ShimmerEVM Testnet](/build/networks-endpoints/#shimmerevm-testnet):
 
 <Tabs>
 <TabItem value='testnet' label='Public Testnet'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']}/>
-<NetworkInfo.TestnetEVM />
+<AddToMetaMaskButton {...Networks['testnet']}/>
+<NetworkInfo.Evm {...Networks['testnet']}/>
 </TabItem>
 <TabItem value='shimmerEVM' label='ShimmerEVM'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']}/>
-<NetworkInfo.ShimmerEVM />
+<AddToMetaMaskButton {...Networks['shimmer']}/>
+<NetworkInfo.Evm {...Networks['shimmer']}/>
 </TabItem>
 </Tabs>
 

diff --git a/docs/build/isc/v1.0.0-rc.6/docs/how-tos/deploy-a-smart-contract.mdx b/docs/build/isc/v1.0.0-rc.6/docs/how-tos/deploy-a-smart-contract.mdx
@@ -10,7 +10,8 @@ description: 'Learn how to deploy smart contracts to Shimmer EVM and Shimmer EVM
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
+import {AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 
 # Deploy a Smart Contract
 
@@ -44,10 +45,10 @@ You can check the connection details in the [Networks & Endpoints section](/buil
 
 <Tabs>
 <TabItem value='testnet' label='ShimmerEVM Testnet'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']}/>
+<AddToMetaMaskButton {...Networks['testnet']}/>
 </TabItem>
 <TabItem value='shimmerEVM' label='Shimmer EVM'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']}/>
+<AddToMetaMaskButton {...Networks['shimmer']}/>
 </TabItem>
 </Tabs>
 

diff --git a/docs/build/isc/v1.0.0-rc.6/docs/how-tos/send-funds-from-L1-to-L2.mdx b/docs/build/isc/v1.0.0-rc.6/docs/how-tos/send-funds-from-L1-to-L2.mdx
@@ -16,7 +16,8 @@ tags:
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
+import {AddToMetaMaskButton } from '@theme/AddToMetaMaskButton';
+import { Networks } from '@theme/constant';
 
 # Send Funds From L1 to L2
 
@@ -49,10 +50,10 @@ You can use your [Firefly Wallet](https://firefly.iota.org/) to easily send L1 S
 
 <Tabs>
 <TabItem value='testnet' label='ShimmerEVM Testnet'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm-testnet']}/>
+<AddToMetaMaskButton {...Networks['testnet']}/>
 </TabItem>
 <TabItem value='shimmerEVM' label='ShimmerEVM'>
-<AddToMetaMaskButton cfg={EVMNetworks['shimmerevm']}/>
+<AddToMetaMaskButton {...Networks['shimmer']}/>
 </TabItem>
 </Tabs>
 

diff --git a/theme/README.md b/theme/README.md
@@ -29,9 +29,10 @@ module.exports = {
 A button to add the ShimmerEVM network to MetaMask.
 
 ```
-import {AddToMetaMaskButton} from '@theme/AddToMetaMaskButton'
+import { AddToMetaMaskButton } from '@theme/AddToMetaMaskButton'
+import { Networks } from '@theme/constant'
 
-<AddToMetaMaskButton />
+<AddToMetaMaskButton {...Networks['shimmer']}/>
 ```
 
 ### CodeSnippetBlock
@@ -55,8 +56,11 @@ A set of components showing information about the different networks.
 
 ```
 import NetworkInfo from '@theme/NetworkInfo'
+import { Networks } from '@theme/constant'
 
-<NetworkInfo.IOTA />
+<NetworkInfo.L1  {...Networks['iota']}/>
+<NetworkInfo.Evm  {...Networks['iota']}/>
+<NetworkInfo.EvmCustom  {...Networks['iota']}/>
 ```
 
 ## Swizzling components

diff --git a/theme/src/theme/AddToMetaMaskButton/index.tsx b/theme/src/theme/AddToMetaMaskButton/index.tsx
@@ -1,42 +1,14 @@
 import React from 'react';
 import type { MetaMaskInpageProvider } from '@metamask/providers';
+import { NetworkProps } from '../constant';
 
 declare global {
   interface Window {
     ethereum?: MetaMaskInpageProvider;
   }
 }
 
-export const EVMNetworks = {
-  'shimmerevm-testnet': {
-    chainId: '0x431',
-    chainName: 'ShimmerEVM Testnet',
-    nativeCurrency: {
-      name: 'Shimmer',
-      symbol: 'SMR',
-      decimals: 18, // Replace with the number of decimals of the native currency
-    },
-    rpcUrls: ['https://json-rpc.evm.testnet.shimmer.network'],
-    blockExplorerUrls: ['https://explorer.evm.testnet.shimmer.network/'],
-  },
-  shimmerevm: {
-    chainId: '0x94',
-    chainName: 'ShimmerEVM',
-    nativeCurrency: {
-      name: 'Shimmer',
-      symbol: 'SMR',
-      decimals: 18, // Replace with the number of decimals of the native currency
-    },
-    rpcUrls: ['https://json-rpc.evm.shimmer.network'],
-    blockExplorerUrls: ['https://explorer.evm.shimmer.network/'],
-  },
-};
-
-interface MetaMaskButtonProps {
-  cfg: unknown;
-}
-
-export function AddToMetaMaskButton(props: MetaMaskButtonProps) {
+export function AddToMetaMaskButton(props: NetworkProps) {
   async function addNetwork() {
     if (!window.ethereum) {
       alert(
@@ -48,7 +20,7 @@ export function AddToMetaMaskButton(props: MetaMaskButtonProps) {
     try {
       await window.ethereum.request({
         method: 'wallet_addEthereumChain',
-        params: [props.cfg],
+        params: [props.evm],
       });
     } catch (error) {
       console.error(error);