[Docs] Guides & Tutorials improvement

docs/docs/guides/advanced/_category_.yml

@@ -1,5 +1,5 @@
-label: 'Advanced'
+label: '🧠 Advanced'
 collapsible: true
 collapsed: true
 link: null
-position: 5
+position: 11

docs/docs/guides/advanced/support_additional_rpc_methods/index.md → docs/docs/guides/advanced/custom_RPC.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 0
+sidebar_position: 1
 sidebar_label: Add custom RPC methods
 ---
 
@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
 
 # Add custom RPC methods
 
-#### Introduction
+## Introduction
 
 Web3.js is a popular library for interacting with the Ethereum blockchain. It provides a set of APIs to interact with Ethereum nodes via JSON-RPC calls. For adding new JSON-RPC function calls to the library, you can do so using the plugin feature in web3.js 4.x. This allows you to extend the functionality of Web3.js and add support for new JSON-RPC methods.
 
@@ -18,27 +18,30 @@ In Web3.js 1.x, `web3.extend()` function could be used to add new JSON-RPC metho
 
 Following tutorial will guide you through the process of creating a custom plugin to extend the functionality of web3.js 4.x and add support for new RPC methods.
 
-#### Creating new RPC methods Plugin in 4 Steps
+## Creating new RPC methods Plugin in 4 Steps
+
+### Step 1: Setting Up Web3.js as a Peer Dependency and Creating a TypeScript Class
 
 1. First add web3.js as peer dependency in project´s `package.json` and create a TypeScript class for your plugin. This class should extend the `Web3Plugin` class provided by web3.js.
 
 :::info
 This will give your plugin access to [requestManager](/api/web3-core/class/Web3Context#requestManager) and [accountProvider](/api/web3-core/class/Web3Context#accountProvider).
-:::caution
-
+:::
 
 <Tabs groupId="prog-lang" queryString>
 
   <TabItem value="javascript" label="JavaScript"
   	attributes={{className: "javascript-tab"}}>
 
 ```javascript
-const { Web3PluginBase } = require('web3');
+const { Web3PluginBase } = require("web3");
 
+//highlight-start
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-	// step 1
-	// ...
+  // step 1
+  // ...
 }
+//highlight-end
 
 module.exports = CustomRpcMethodsPlugin;
 ```
@@ -49,17 +52,21 @@ module.exports = CustomRpcMethodsPlugin;
   	attributes={{className: "typescript-tab"}}>
 
 ```typescript
-import { Web3PluginBase } from 'web3';
+import { Web3PluginBase } from "web3";
 
+//highlight-start
 export default class CustomRpcMethodsPlugin extends Web3PluginBase {
-	// step 1
-	// ...
+  // step 1
+  // ...
 }
+//highlight-end
 ```
 
   </TabItem>
 </Tabs>
 
+### Step 2: Adding a Public `pluginNamespace` Property to the Plugin Class
+
 2. After that add public `pluginNamespace` property. This will be used to access your plugin, as mentioned in step number 5 code example.
 
 
@@ -69,10 +76,12 @@ export default class CustomRpcMethodsPlugin extends Web3PluginBase {
   	attributes={{className: "javascript-tab"}}>
 
 ```javascript
-const { Web3PluginBase } = require('web3');
+const { Web3PluginBase } = require("web3");
 
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-	pluginNamespace = 'customRpcMethods'; // step 2
+//highlight-start
+  pluginNamespace = "customRpcMethods"; // step 2
+//highlight-end
 }
 
 module.exports = CustomRpcMethodsPlugin;
@@ -84,16 +93,21 @@ module.exports = CustomRpcMethodsPlugin;
   	attributes={{className: "typescript-tab"}}>
 
 ```typescript
-import { Web3PluginBase } from 'web3';
+import { Web3PluginBase } from "web3";
 
 export default class CustomRpcMethodsPlugin extends Web3PluginBase {
-	public pluginNamespace = 'customRpcMethods'; // step 2
+  //highlight-start
+  public pluginNamespace = "customRpcMethods"; // step 2
+//highlight-end
 }
 ```
 
   </TabItem>
 </Tabs>
 
+
+### Step 3: Creating Custom RPC Methods in the Plugin Class
+
 3. Once plugin class is created using above mentioned steps, its very easy to add new RPC methods like:
 
 <Tabs groupId="prog-lang" queryString>
@@ -102,19 +116,21 @@ export default class CustomRpcMethodsPlugin extends Web3PluginBase {
   	attributes={{className: "javascript-tab"}}>
 
 ```javascript
-const { Web3PluginBase } = require('web3');
+const { Web3PluginBase } = require("web3");
 
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-	pluginNamespace = 'customRpcMethods';
-
-	async customRpcMethod() {
-		// step 3
-		return this.requestManager.send({
-			// plugin has access to web3.js internal features like request manager
-			method: 'custom_rpc_method',
-			params: [],
-		});
-	}
+  pluginNamespace = "customRpcMethods";
+
+	//highlight-start
+  async customRpcMethod() {
+    // step 3
+    return this.requestManager.send({
+      // plugin has access to web3.js internal features like request manager
+      method: "custom_rpc_method",
+      params: [],
+    });
+  }
+	//highlight-end
 }
 
 module.exports = CustomRpcMethodsPlugin;
@@ -126,45 +142,49 @@ module.exports = CustomRpcMethodsPlugin;
   	attributes={{className: "typescript-tab"}}>
 
 ```typescript
-import { Web3PluginBase } from 'web3';
+import { Web3PluginBase } from "web3";
 
 export default class CustomRpcMethodsPlugin extends Web3PluginBase {
-	public pluginNamespace = 'customRpcMethods';
-
-	public async customRpcMethod() {
-		// step 3
-		return this.requestManager.send({
-			// plugin has access to web3.js internal features like request manager
-			method: 'custom_rpc_method',
-			params: [],
-		});
-	}
+  public pluginNamespace = "customRpcMethods";
+
+ //highlight-start 
+  public async customRpcMethod() {
+    // step 3
+    return this.requestManager.send({
+      // plugin has access to web3.js internal features like request manager
+      method: "custom_rpc_method",
+      params: [],
+    });
+  }
+  //highlight-end
 }
 ```
 
   </TabItem>
 </Tabs>
 
-4. Final step is setting up module [augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation), this will allow you to access plugin on web3 object.
+### Step 4: Enabling Access to the Plugin on the Web3 Object
+
+4. (For TypeScript) Final step is setting up module [augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation), this will allow you to access plugin on web3 object.
 
 <Tabs groupId="prog-lang" queryString>
 
   <TabItem value="javascript" label="JavaScript"
   	attributes={{className: "javascript-tab"}}>
 
 ```javascript
-const { Web3PluginBase } = require('web3');
+const { Web3PluginBase } = require("web3");
 
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-    pluginNamespace = 'customRpcMethods';
-
-    async customRpcMethod() {
-        return this.requestManager.send({
-            // plugin has access to web3.js internal features like request manager
-            method: 'custom_rpc_method',
-            params: [],
-        });
-    }
+  pluginNamespace = "customRpcMethods";
+
+  async customRpcMethod() {
+    return this.requestManager.send({
+      // plugin has access to web3.js internal features like request manager
+      method: "custom_rpc_method",
+      params: [],
+    });
+  }
 }
 
 module.exports = CustomRpcMethodsPlugin;
@@ -176,28 +196,30 @@ module.exports = CustomRpcMethodsPlugin;
   	attributes={{className: "typescript-tab"}}>
 
 ```typescript
-import { Web3PluginBase } from 'web3';
+import { Web3PluginBase } from "web3";
 
 export default class CustomRpcMethodsPlugin extends Web3PluginBase {
-	public pluginNamespace = 'customRpcMethods';
-
-	public async customRpcMethod() {
-		return this.requestManager.send({
-			// plugin has access to web3.js internal features like request manager
-			method: 'custom_rpc_method',
-			params: [],
-		});
-	}
+  public pluginNamespace = "customRpcMethods";
+
+  public async customRpcMethod() {
+    return this.requestManager.send({
+      // plugin has access to web3.js internal features like request manager
+      method: "custom_rpc_method",
+      params: [],
+    });
+  }
 }
 
+//highlight-start
 // Module Augmentation
-declare module 'web3' {
-	// step 4
+declare module "web3" {
+  // step 4
 
-	interface Web3Context {
-		customRpcMethods: CustomRpcMethodsPlugin;
-	}
+  interface Web3Context {
+    customRpcMethods: CustomRpcMethodsPlugin;
+  }
 }
+//highlight-end
 ```
 
   </TabItem>
@@ -207,7 +229,7 @@ declare module 'web3' {
 After the plugin is ready, it is recommended to publish it on the NPM registry.
 :::
 
-#### Using Web3 Custom PRC Plugin (with web3 instance)
+### Step 5: Using the Web3 `CustomRPCPlugin` with a Web3 Instance
 
 5. First add plugin in your plugin consumer project's `package.json`, create web3 and plugin instances, and after that use `.registerPlugin` method with some web3.js module (in following example its registered with main web3).
 
@@ -219,14 +241,16 @@ Once plugin is registered its custom methods will be available to use.
   	attributes={{className: "javascript-tab"}}>
 
 ```javascript
-const { Web3 } = require('web3');
-const CustomRpcMethodsPlugin = require('web3-plugin-example');
+const { Web3 } = require("web3");
+const CustomRpcMethodsPlugin = require("web3-plugin-example");
 
-const web3 = new Web3('http://127.0.0.1:8545');
+const web3 = new Web3("http://127.0.0.1:8545");
+
+//highlight-start
 web3.registerPlugin(new CustomRpcMethodsPlugin()); // step 5
 
-web3.customRpcMethods.customRpcMethod();
-// ...
+web3.customRpcMethods.customRpcMethod(); //usage
+//highlight-end
 ```
 
   </TabItem>
@@ -235,19 +259,22 @@ web3.customRpcMethods.customRpcMethod();
   	attributes={{className: "typescript-tab"}}>
 
 ```typescript
-import { Web3 } from 'web3';
-import CustomRpcMethodsPlugin from 'web3-plugin-example';
+import { Web3 } from "web3";
+import CustomRpcMethodsPlugin from "web3-plugin-example";
+
+const web3 = new Web3("http://127.0.0.1:8545");
 
-const web3 = new Web3('http://127.0.0.1:8545');
+//highlight-start
 web3.registerPlugin(new CustomRpcMethodsPlugin()); // step 5
 
-web3.customRpcMethods.customRpcMethod();
+web3.customRpcMethods.customRpcMethod(); //usage
+//highlight-end
 ```
 
   </TabItem>
 </Tabs>
 
-#### More Details of Plugin Feature
+## More Details of Plugin Feature
 
 For more details follow :