add interactive code for tutorials (#7036)

docs/docs/guides/ens/index.md

@@ -6,6 +6,8 @@ title: Mastering the Web3 ENS package
 
 # Using web3.js ENS Package
 
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-qmk8vz?embed=1&file=main.ts&showSidebar=1"></iframe>
+
 In this tutorial, we'll explore how to use the web3.js ENS (Ethereum Name Service) package. The Ethereum Name Service (ENS) is a decentralized domain system built on the Ethereum blockchain. It serves as a distributed, secure, and human-readable naming system designed to map Ethereum addresses, smart contracts, and various other services to easily understandable names. 
 
 ## Installing web3.js
@@ -115,4 +117,4 @@ console.log(result);
 
 ## Conclusion
 
-In this tutorial, we've covered how to use the web3.js ENS package to interact with Ethereum Name Service. You should now be able to perform various ENS-related operations using web3.js version 4. For more details visit web3.js ENS [documentation](/libdocs/ENS) section.
+In this tutorial, we've covered how to use the web3.js ENS package to interact with Ethereum Name Service. You should now be able to perform various ENS-related operations using web3.js version 4. For more details visit web3.js ENS [documentation](/libdocs/ENS) section.

docs/docs/guides/events_subscriptions/index.md

@@ -4,6 +4,7 @@ sidebar_label: 'Mastering Events Subcriptions'
 ---
 
 # Events Subscription
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-5cbd4m?embed=1&file=main.ts&showSidebar=1"></iframe>
 
 ## Subscribing to smart contracts events
 

docs/docs/guides/getting_started/metamask.md

@@ -5,6 +5,9 @@ sidebar_label: Connecting to Metamask
 
 # Connecting to Metamask
 
+
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-wkhaza?embed=1&file=main.js&showSidebar=1"></iframe>
+
 ## React app
 
 After creating your react app `npx create-react-app app-name`, and installing web3 `npm i web3` you can go to `src/app.js`, you can clean up the code and import `{Web3}`. It should look like this:
@@ -186,4 +189,4 @@ export default App;
 </html>
 ```
 
-<!-- take example from wallet/examples -->
+<!-- take example from wallet/examples -->

docs/docs/guides/web3_eth/eth.md

@@ -8,6 +8,8 @@ import TabItem from '@theme/TabItem';
 
 # Getting Started with `eth` Package
 
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-w8v2kw?embed=1&file=main.ts&showSidebar=1"></iframe>
+
 ## Introduction
 
 The `web3-eth` package provides a set of powerful functionalities to interact with the Ethereum blockchain and smart contracts. In this tutorial, we will guide you through the basics of using the `web3-eth` package of web3.js version 4. We will be using TypeScript throughout the examples.

docs/docs/guides/web3_plugin_guide/index.mdx

@@ -5,14 +5,16 @@ sidebar_label: 'Getting started'
 
 # Getting Started
 
-Welcome to the Web3 Plugins🧩 Guide, a new feature introduced in web3.js v4. In addition to the core web3.js libraries, plugins bring specialized functionalities tailored for end-users (functionalities, that you, as a developer, can create). These enhancements may involve creating wrappers for specific contracts, adding extra features to RPC methods, adding any external libraries, logic, extending the capabilities of web3.js methods, etc... 
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-uxkc1b?embed=1&file=main.ts&showSidebar=1"></iframe>
 
-In this guide, you will learn the basics to get started building web3 plugins, setting up providers, importing, and using different web3.js packages. 
+Welcome to the Web3 Plugins🧩 Guide, a new feature introduced in web3.js v4. In addition to the core web3.js libraries, plugins bring specialized functionalities tailored for end-users (functionalities, that you, as a developer, can create). These enhancements may involve creating wrappers for specific contracts, adding extra features to RPC methods, adding any external libraries, logic, extending the capabilities of web3.js methods, etc...
+
+In this guide, you will learn the basics to get started building web3 plugins, setting up providers, importing, and using different web3.js packages.
 
 - [Plugin Developer Guide (For Creators)](/guides/web3_plugin_guide/plugin_authors)
 - [Plugin User Guide (Usage)](/guides/web3_plugin_guide/plugin_users)
 
-- You can find all the web3 plugins🧩 [here](https://web3js.org/plugins) 
+- You can find all the web3 plugins🧩 [here](https://web3js.org/plugins)
 
 - To list your web3 plugin🧩 into the web3js.org/plugins page, you can submit a PR [here](https://github.com/web3/web3js-landing/blob/main/src/pluginList.ts)
 
@@ -24,9 +26,9 @@ import { Web3PluginBase } from "web3";
 
 //2. Create a Class extending the `Web3Pluginbase`
 class MyPlugin extends Web3PluginBase {
-    
+
     //3. Add a name to the plugin
-    pluginNamespace = "pluginExample"; 
+    pluginNamespace = "pluginExample";
 
     //4. Create any methods with your desired functionality
     async doSomething(){
@@ -118,7 +120,7 @@ class MyPlugin extends Web3PluginBase {
   async createAccount() {
     const account = eth.accounts.create();
     console.log("account:", account);
-    /* 
+    /*
     account: {
         address: '0x59E797F2F66AffA9A419a6BC2ED4742b7cBc2570',
         privateKey: '0x52a81fc3a7fd6ce9644147c9fb5bfbe1f708f37b4611b3c3310eb9a6dc85ccf4',
@@ -149,7 +151,7 @@ class MyPlugin extends Web3PluginBase {
     const wallet = this.wallet.add(accounts);
     //by creating the wallet, web3.js will use this account to sign TXs under the hood
     console.log(wallet);
-    /* 
+    /*
     Wallet(1) [
     {
       address: '0x233725561B1430bE2C24Ce9EEabe63E4B46EC9E3',
@@ -186,10 +188,10 @@ class MyPlugin extends Web3PluginBase {
   async interactWithContract() {
     //1. Initialize contract
     const myContract = new Contract(ABI, ADDRESS);
-    
+
     //2. Interact with reading functions
     const response = myContract.methods.doSomething().call();
-    
+
     //3. Interact with writing functions
     //You must initialize a wallet to be able to send the TX from wallet[0].address
     const txReceipt = myContract.methods.doSomething().send({from: wallet[0].address})
@@ -279,7 +281,7 @@ All web3 config params [here](https://docs.web3js.org/guides/web3_config/)
 :::
 
 
-## Videos 
+## Videos
 
 ### Create your first plugin in 20 minutes!
 

docs/docs/guides/web3_utils_module/mastering_web3-utils.md

@@ -1,6 +1,7 @@
 # Mastering Utility Functions
 
 ## Introduction
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-kbtbsv?embed=1&file=main.ts&showSidebar=1"></iframe>
 In this guide, you'll learn about the different functions of the web3 utils package, it contains the methods to know how to generate random bytes in different formats, how to perform conversion between Hex values and numbers, hashing functions, addresses, packing padding and in the last part you will see how to compare block numbers.
 
 ## Installation