Adds ShimmerEVM and Hardhat tutorial

README.md

@@ -71,7 +71,7 @@ To preview the Wiki locally, use the following steps. For more detailed scripts,
 2. Install dependencies with `yarn`.
 3. Prepare the environment by running `yarn prepare`, this has to be done only once.
 4. Preview the Wiki with `yarn start`, this will start a development server serving the Wiki with hot reload capability, so it will update content after any changes were made.
-
+y
 #### Pre-configured scripts
 
 | Script            | Explanation                                                                                                                                                                                                         |

docs/build/getting-started/networks-endpoints.md → docs/build/getting-started/networks-endpoints.mdx

@@ -13,6 +13,8 @@ keywords:
   - Endpoints
 ---
 
+import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
+
 # Networks & Endpoints
 
 This pages gives an overview around the different networks available in the IOTA ecosystem.
@@ -65,7 +67,6 @@ Mainnet.
       <th>HTTP REST API</th>
       <th>Event API</th>
       <th>Permanode API</th>
-      <th>Faucet</th>
     </tr>
     <tr>
       <td>Shimmer Token</td>
@@ -77,7 +78,31 @@ Mainnet.
           wss://api.shimmer.network:443/api/mqtt/v1 (MQTT 3.1)
       </td>
       <td>https://chronicle.shimmer.network</td>
-      <td>N/A</td>
+    </tr>
+  </tbody>
+</table>
+
+### ShimmerEVM
+
+[ShimmerEVM](https://explorer.evm.shimmer.network/) is the L2 EVM running on top of the Shimmer network.
+
+<AddToMetaMaskButton cfg={EVMNetworks["shimmerevm"]}/>
+
+<table>
+  <tbody>
+    <tr>
+      <th>Base Token</th>
+      <th>Protocol</th>
+      <th>RPC URL</th>
+      <th>Chain ID</th>
+      <th>Explorer</th>
+    </tr>
+    <tr>
+      <td>Shimmer Token</td>
+      <td>ISC / EVM</td>
+      <td><a href="https://json-rpc.evm.shimmer.network">https://json-rpc.evm.shimmer.network</a></td>
+      <td>148</td>
+      <td><a href="https://explorer.evm.shimmer.network">https://explorer.evm.shimmer.network</a></td>
     </tr>
   </tbody>
 </table>
@@ -115,6 +140,8 @@ Mainnet.
 
 ### Testnet EVM
 
+<AddToMetaMaskButton cfg={EVMNetworks["shimmerevm-testnet"]}/>
+
 [The Testnet EVM](https://explorer.evm.testnet.shimmer.network/) (also called ShimmerEVM Beta) runs as a layer 2 on top
 of the Public Testnet. This network does not run
 any IOTA protocol but instead uses ISC to facilitate an Ethereum Virtual Machine and has an enshrined bridge from to

docs/build/getting-started/welcome.md

@@ -16,7 +16,7 @@ keywords:
 
 Welcome to the "Build" section of the IOTA Wiki. This section is for developers interested in using the IOTA and Shimmer
 networks for decentralized applications, integrating their exchange, minting NFTs, and much more. Here, you can find all
-the available [Networks and Endpoints](networks-endpoints.md), links for all the available
+the available [Networks and Endpoints](networks-endpoints.mdx), links for all the available
 [Tools](/build/tools), [APIS](/apis/welcome), and all the documentation to communicate with the Layer 1 networks,
 build
 decentralized applications and interact with Layer 2 [smart contracts](#smart-contracts).

docs/build/wasp-evm/0.7/docs/getting-started/quickstart.mdx

@@ -13,7 +13,8 @@ keywords:
   - RPC
 ---
 
-import AddToMetaMaskButton from '@theme/AddToMetaMaskButton';
+
+import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
 
 # Public Testnet Quickstart Guide
 
@@ -27,7 +28,7 @@ This guide will help you quickly get started with the [Public Testnet](/build/ne
 
 Click this button:
 
-<AddToMetaMaskButton />
+<AddToMetaMaskButton cfg={EVMNetworks["shimmerevm-testnet"]}/>
 
 Please read [this MetaMask guide](./compatible-tools.md#metamask) for a detailed guidance.
 

theme/README.md

@@ -29,7 +29,7 @@ module.exports = {
 A button to add the ShimmerEVM network to MetaMask.
 
 ```
-import AddToMetaMaskButton from '@theme/AddToMetaMaskButton'
+import {AddToMetaMaskButton} from '@theme/AddToMetaMaskButton'
 
 <AddToMetaMaskButton />
 ```

theme/src/theme/AddToMetaMaskButton/index.tsx

@@ -1,51 +1,69 @@
 import React from 'react';
-import type { MetaMaskInpageProvider } from '@metamask/providers';
+import type {MetaMaskInpageProvider} from '@metamask/providers';
 
 declare global {
-  interface Window {
-    ethereum?: MetaMaskInpageProvider;
-  }
+    interface Window {
+        ethereum?: MetaMaskInpageProvider;
+    }
+}
+
+export const EVMNetworks = {
+    "shimmerevm-testnet": {
+        chainId: '0x430',
+        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 default function AddToMetaMaskButton() {
-  async function addNetwork() {
-    if (window.ethereum) {
-      try {
-        await window.ethereum.request({
-          method: 'wallet_addEthereumChain',
-          params: [
-            {
-              chainId: '0x430', // Replace with the chain ID of the network you want to add
-              chainName: 'ShimmerEVM Testnet', // Replace with the name of the network
-              nativeCurrency: {
-                name: 'Shimmer', // Replace with the name of the native currency
-                symbol: 'SMR', // Replace with the symbol of the native currency
-                decimals: 18, // Replace with the number of decimals of the native currency
-              },
-              rpcUrls: ['https://json-rpc.evm.testnet.shimmer.network'], // Replace with the RPC URL(s) of the network
-              blockExplorerUrls: [
-                'https://explorer.evm.testnet.shimmer.network/',
-              ], // Replace with the block explorer URL(s) of the network (optional)
-            },
-          ],
-        });
-      } catch (error) {
-        console.error(error);
-        console.log('Error adding network: ' + error.message);
-      }
-    } else {
-      alert(
-        'MetaMask is not installed. Please install MetaMask and try again.',
-      );
+export function AddToMetaMaskButton(props: MetaMaskButtonProps) {
+    async function addNetwork() {
+        if (!window.ethereum) {
+            alert('MetaMask is not installed. Please install MetaMask and try again.');
+            return;
+        }
+
+        try {
+            await window.ethereum.request({
+                method: 'wallet_addEthereumChain',
+                params: [props.cfg],
+            });
+        } catch (error) {
+            console.error(error);
+            console.log('Error adding network: ' + error.message);
+        }
     }
-  }
 
-  return (
-    <button
-      className={`button button--primary button--lg margin-bottom--md`}
-      onClick={() => addNetwork()}
-    >
-      Add to MetaMask
-    </button>
-  );
+    return (
+        <button
+            className={`button button--primary button--md margin-bottom--md`}
+            onClick={() => addNetwork()}
+        >
+            Add to MetaMask
+        </button>
+    );
 }

tutorials/docusaurus.config.js

@@ -169,7 +169,7 @@ module.exports = {
         description:
           'In this tutorial, we will connect to Shimmer EVM Testnet, connect Metamask to it, get funded and deploy a smart contract in Solidity.',
         preview: '/connect-shimmerevm-testnet-and-deploy.png',
-        route: 'tutorials/shimmerevm-setup',
+        route: 'tutorials/shimmerevm-testnet-setup',
         tags: [
           'text',
           'shimmer',
@@ -195,11 +195,12 @@ module.exports = {
     [
       '@iota-wiki/plugin-tutorial',
       {
-        title: 'Tutorial - Deploy a Solidity Smart Contract Using Hardhat',
+        title:
+          'Tutorial - Deploy a Solidity Smart Contract on ShimmerEVM Testnet Using Hardhat',
         description:
           'In this tutorial, you will learn how to set up Hardhat and use it to build, test and deploy a simple smart contract on ShimmerEVM.',
         preview: '/shimmerevm-hardhat.jpg',
-        route: 'tutorials/shimmerevm-hardhat',
+        route: 'tutorials/shimmerevm-testnet-hardhat',
         tags: [
           'text',
           'shimmer',
@@ -263,6 +264,45 @@ module.exports = {
         tags: ['text', 'iota-sdk', 'sdk', 'getting-started', 'rust', 'shimmer'],
       },
     ],
+    [
+      '@iota-wiki/plugin-tutorial',
+      {
+        title: 'Connect to Shimmer EVM and Deploy a Solidity Smart Contract',
+        description:
+          'In this tutorial, we will connect to Shimmer EVM, connect Metamask to it, get funded and deploy a smart contract in Solidity.',
+        preview: '/connect-shimmerevm-and-deploy.png',
+        route: 'tutorials/shimmerevm-setup',
+        tags: [
+          'text',
+          'shimmer',
+          'solidity',
+          'getting-started',
+          'wasp',
+          'iscp',
+          'video',
+        ],
+      },
+    ],
+    [
+      '@iota-wiki/plugin-tutorial',
+      {
+        title:
+          'Tutorial - Deploy a Solidity Smart Contract on ShimmerEVM Using Hardhat',
+        description:
+          'In this tutorial, you will learn how to set up Hardhat and use it to build, test and deploy a simple smart contract on ShimmerEVM.',
+        preview: '/shimmerevm-hardhat.jpg',
+        route: 'tutorials/shimmerevm-hardhat',
+        tags: [
+          'text',
+          'shimmer',
+          'solidity',
+          'shimmerevm',
+          'hardhat',
+          'iscp',
+          'video',
+        ],
+      },
+    ],
   ],
   staticDirectories: [path.resolve(__dirname, 'static')],
 };

tutorials/pages/shimmerevm-hardhat.md

@@ -128,12 +128,12 @@ Some important things to note are data types. `event` means that we can subscrib
 ```js
 module.exports = {
   solidity: '0.8.18',
-  defaultNetwork: 'shimmerevm-testnet',
+  defaultNetwork: 'shimmerevm',
   networks: {
-    'shimmerevm-testnet': {
-      url: 'https://json-rpc.evm.testnet.shimmer.network',
-      chainId: 1072,
-      accounts: [priv_key],
+    shimmerevm: {
+      url: 'https://json-rpc.evm.shimmer.network',
+      chainId: 148,
+      timeout: 60000,
     },
   },
 };
@@ -190,29 +190,31 @@ npx hardhat compile
 Run this command in root of the project directory:
 
 ```sh
-npx hardhat run scripts/deploy.js --network shimmerevm-testnet
+npx hardhat run scripts/deploy.js --network shimmerevm
 ```
 
-The contract will be deployed on ShimmerEVM Testnet, and you can check the deployment status here on the [explorer](https://explorer.evm.testnet.shimmer.network/).
+The contract will be deployed on ShimmerEVM, and you can check the deployment status here on the [explorer](https://explorer.evm.shimmer.network/).
 
 If you want to further verify your contract, add the following to your `hardhat.config.js`:
 
 ```js
 etherscan: {
-  apiKey: {
-    'shimmerevm-testnet': 'ABCDE12345ABCDE12345ABCDE123456789',
-  },
-  customChains: [
-    {
-      network: 'shimmerevm-testnet',
-      chainId: 1072,
-      urls: {
-        apiURL: 'https://explorer.evm.testnet.shimmer.network/api',
-        browserURL: 'https://explorer.evm.testnet.shimmer.network/',
+    apiKey:
+      {
+        shimmerevm: "xxx"
       },
-    },
-  ],
-}
+    customChains: [
+      {
+        apikey: "xxx",
+        network: "shimmerevm",
+        chainId: 148,
+        urls: {
+          apiURL: "https://explorer.evm.shimmer.network/api",
+          browserURL: "https://explorer.evm.shimmer.network/"
+        }
+      }
+    ]
+  },
 ```
 
 Then you can verify by running:
@@ -228,7 +230,3 @@ You can easily copy the address and unlock time from the output of the [deploy s
 :::
 
 And Voila! You've successfully deployed your first Hardhat Smart Contract on ShimmerEVM and verified it on explorer.
-
-## Video Tutorial
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/rRscvKirroo" title="ShimmerEVM Tutorial: Deploying a Smart Contract with Hardhat" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>