[Docs] Guides & Tutorials improvement (#6676)

* restructure the folders and add category.yml to all of them for clear structure * created introduction file withshort packages explanation * finished quickstart guide with basic examples * finished introduction * delete features file (added this in introduction) * fixed typo * metamask (react and html) connection * added emojis to the categories * separated the examples into different files * removed transactions sections and put them into wallet sections * rewrote mastering wallet and accounts * reorder and changed name of promievents * rewrote local wallet tutorial * rewrote/reorganized signing tutorial * added diagram of wallet and accounts for the index * rewrote/reorganized transactions section * added little warning to node_wallet and changed title * restructure the examples into several tutorials * renamed file * removed CJS imports * rename file and reorganized folder structure of infer guide * removed CJS imports * renamed label * created different file to show all the explained web3-eth methods * fixed some typos * removed step 7 which is in another file * removed folder and renamed the file * removed folder and renamed the file * fixed typos and reorganized structure of the file * fixed format of tree shaking guide * organized typos/structure but didn't change the code at all * added showcase section and rephrase the intro * reorganized the spaces in the code samples * reorganized spaces in the codesamples * reorganized spaces in the codesamples * changed headings * removed glossary in the sidebar and added it to guides and tutorials * Revert "removed glossary in the sidebar and added it to guides and tutorials" This reverts commit b2bc267. * fixed broken links * fixed broken links x2 * shorten name to have it only in 1 line * add info about personal api is deprecated * renamed web3eth without dash to be consistent * added parenthesis * added link to web3js/plugins * deleted glossary tab since it was added to the guides section * Revert "deleted glossary tab since it was added to the guides section" This reverts commit 2801bd0. * changed all double-quotes to single-quotes * organized pre-requisites for each section * separated injected provider from truffle file * changed title from truffle to third party provider * replaced double quotes for single quotes * Update docs/docs/guides/wallet/signing.md Co-authored-by: Muhammad Altabba <[email protected]> * Update docs/docs/guides/wallet/transactions.md Co-authored-by: Muhammad Altabba <[email protected]> * changed main header in for `Truffle` --------- Co-authored-by: Muhammad Altabba <[email protected]>
web3 · Jan 7, 2024 · 65a9862 · 65a9862 · github-actions · Jan 7, 2024
1 parent 23d69ba
commit 65a9862
Show file tree

Hide file tree

Showing 52 changed files with 3,616 additions and 3,726 deletions.
diff --git a/docs/docs/guides/advanced/_category_.yml b/docs/docs/guides/advanced/_category_.yml
@@ -1,5 +1,5 @@
-label: 'Advanced'
+label: '🧠 Advanced'
 collapsible: true
 collapsed: true
 link: null
-position: 5
+position: 11
diff --git a/...d/support_additional_rpc_methods/index.md → docs/docs/guides/advanced/custom_RPC.md b/...d/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,186 +18,208 @@ 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>
+<Tabs groupId='prog-lang' queryString>
 
-  <TabItem value="javascript" label="JavaScript"
-  	attributes={{className: "javascript-tab"}}>
+  <TabItem value='javascript' label='JavaScript'
+  	attributes={{className: 'javascript-tab'}}>
 
 ```javascript
 const { Web3PluginBase } = require('web3');
 
+//highlight-start
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-	// step 1
-	// ...
+  // step 1
+  // ...
 }
+//highlight-end
 
 module.exports = CustomRpcMethodsPlugin;
 ```
 
   </TabItem>
 
-  <TabItem value="typescript" label="TypeScript" default
-  	attributes={{className: "typescript-tab"}}>
+  <TabItem value='typescript' label='TypeScript' default
+  	attributes={{className: 'typescript-tab'}}>
 
 ```typescript
 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.
 
 
-<Tabs groupId="prog-lang" queryString>
+<Tabs groupId='prog-lang' queryString>
 
-  <TabItem value="javascript" label="JavaScript"
-  	attributes={{className: "javascript-tab"}}>
+  <TabItem value='javascript' label='JavaScript'
+  	attributes={{className: 'javascript-tab'}}>
 
 ```javascript
 const { Web3PluginBase } = require('web3');
 
 class CustomRpcMethodsPlugin extends Web3PluginBase {
-	pluginNamespace = 'customRpcMethods'; // step 2
+//highlight-start
+  pluginNamespace = 'customRpcMethods'; // step 2
+//highlight-end
 }
 
 module.exports = CustomRpcMethodsPlugin;
 ```
 
   </TabItem>
 
-  <TabItem value="typescript" label="TypeScript" default
-  	attributes={{className: "typescript-tab"}}>
+  <TabItem value='typescript' label='TypeScript' default
+  	attributes={{className: 'typescript-tab'}}>
 
 ```typescript
 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>
+<Tabs groupId='prog-lang' queryString>
 
-  <TabItem value="javascript" label="JavaScript"
-  	attributes={{className: "javascript-tab"}}>
+  <TabItem value='javascript' label='JavaScript'
+  	attributes={{className: 'javascript-tab'}}>
 
 ```javascript
 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;
 ```
 
   </TabItem>
 
-  <TabItem value="typescript" label="TypeScript" default
-  	attributes={{className: "typescript-tab"}}>
+  <TabItem value='typescript' label='TypeScript' default
+  	attributes={{className: 'typescript-tab'}}>
 
 ```typescript
 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>
+<Tabs groupId='prog-lang' queryString>
 
-  <TabItem value="javascript" label="JavaScript"
-  	attributes={{className: "javascript-tab"}}>
+  <TabItem value='javascript' label='JavaScript'
+  	attributes={{className: 'javascript-tab'}}>
 
 ```javascript
 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;
 ```
 
   </TabItem>
 
-  <TabItem value="typescript" label="TypeScript" default
-  	attributes={{className: "typescript-tab"}}>
+  <TabItem value='typescript' label='TypeScript' default
+  	attributes={{className: 'typescript-tab'}}>
 
 ```typescript
 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
+  // step 4
 
-	interface Web3Context {
-		customRpcMethods: CustomRpcMethodsPlugin;
-	}
+  interface Web3Context {
+    customRpcMethods: CustomRpcMethodsPlugin;
+  }
 }
+//highlight-end
 ```
 
   </TabItem>
@@ -207,47 +229,52 @@ 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).
 
 Once plugin is registered its custom methods will be available to use.
 
-<Tabs groupId="prog-lang" queryString>
+<Tabs groupId='prog-lang' queryString>
 
-  <TabItem value="javascript" label="JavaScript"
-  	attributes={{className: "javascript-tab"}}>
+  <TabItem value='javascript' label='JavaScript'
+  	attributes={{className: 'javascript-tab'}}>
 
 ```javascript
 const { Web3 } = require('web3');
 const CustomRpcMethodsPlugin = require('web3-plugin-example');
 
 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>
 
-  <TabItem value="typescript" label="TypeScript" default
-  	attributes={{className: "typescript-tab"}}>
+  <TabItem value='typescript' label='TypeScript' default
+  	attributes={{className: 'typescript-tab'}}>
 
 ```typescript
 import { Web3 } from 'web3';
 import CustomRpcMethodsPlugin from 'web3-plugin-example';
 
 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 :
Benchmark suite	Current: `65a9862`	Previous: `6c075db`	Ratio
`processingTx`	`9629` ops/sec (`±3.74%`)	`9301` ops/sec (`±4.81%`)	`0.97`
`processingContractDeploy`	`39163` ops/sec (`±9.81%`)	`39129` ops/sec (`±7.62%`)	`1.00`
`processingContractMethodSend`	`19973` ops/sec (`±5.74%`)	`19443` ops/sec (`±5.19%`)	`0.97`
`processingContractMethodCall`	`40286` ops/sec (`±4.36%`)	`38971` ops/sec (`±6.34%`)	`0.97`
`abiEncode`	`44194` ops/sec (`±8.42%`)	`44252` ops/sec (`±6.92%`)	`1.00`
`abiDecode`	`31357` ops/sec (`±6.88%`)	`30419` ops/sec (`±8.89%`)	`0.97`
`sign`	`1680` ops/sec (`±1.18%`)	`1656` ops/sec (`±4.08%`)	`0.99`
`verify`	`379` ops/sec (`±0.59%`)	`373` ops/sec (`±0.78%`)	`0.98`