Skip to content
This repository was archived by the owner on Mar 5, 2025. It is now read-only.

Commit 65a9862

Browse files
Santiago Trujillo ZuluagaMuhammad-Altabba
Santiago Trujillo Zuluaga
and
Muhammad-Altabba
authored
[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 <24407834+Muhammad-Altabba@users.noreply.github.com> * Update docs/docs/guides/wallet/transactions.md Co-authored-by: Muhammad Altabba <24407834+Muhammad-Altabba@users.noreply.github.com> * changed main header in for `Truffle` --------- Co-authored-by: Muhammad Altabba <24407834+Muhammad-Altabba@users.noreply.github.com>
1 parent 23d69ba commit 65a9862

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+3616
-3726
lines changed

‎docs/docs/guides/advanced/_category_.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
label: 'Advanced'
1+
label: '🧠 Advanced'
22
collapsible: true
33
collapsed: true
44
link: null
5-
position: 5
5+
position: 11

docs/docs/guides/advanced/support_additional_rpc_methods/index.md renamed to docs/docs/guides/advanced/custom_RPC.md

Lines changed: 111 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 0
2+
sidebar_position: 1
33
sidebar_label: Add custom RPC methods
44
---
55

@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
88

99
# Add custom RPC methods
1010

11-
#### Introduction
11+
## Introduction
1212

1313
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.
1414

@@ -18,186 +18,208 @@ In Web3.js 1.x, `web3.extend()` function could be used to add new JSON-RPC metho
1818

1919
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.
2020

21-
#### Creating new RPC methods Plugin in 4 Steps
21+
## Creating new RPC methods Plugin in 4 Steps
22+
23+
### Step 1: Setting Up Web3.js as a Peer Dependency and Creating a TypeScript Class
2224

2325
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.
2426

2527
:::info
2628
This will give your plugin access to [requestManager](/api/web3-core/class/Web3Context#requestManager) and [accountProvider](/api/web3-core/class/Web3Context#accountProvider).
27-
:::caution
28-
29+
:::
2930

30-
<Tabs groupId="prog-lang" queryString>
31+
<Tabs groupId='prog-lang' queryString>
3132

32-
<TabItem value="javascript" label="JavaScript"
33-
attributes={{className: "javascript-tab"}}>
33+
<TabItem value='javascript' label='JavaScript'
34+
attributes={{className: 'javascript-tab'}}>
3435

3536
```javascript
3637
const { Web3PluginBase } = require('web3');
3738

39+
//highlight-start
3840
class CustomRpcMethodsPlugin extends Web3PluginBase {
39-
// step 1
40-
// ...
41+
// step 1
42+
// ...
4143
}
44+
//highlight-end
4245

4346
module.exports = CustomRpcMethodsPlugin;
4447
```
4548

4649
</TabItem>
4750

48-
<TabItem value="typescript" label="TypeScript" default
49-
attributes={{className: "typescript-tab"}}>
51+
<TabItem value='typescript' label='TypeScript' default
52+
attributes={{className: 'typescript-tab'}}>
5053

5154
```typescript
5255
import { Web3PluginBase } from 'web3';
5356

57+
//highlight-start
5458
export default class CustomRpcMethodsPlugin extends Web3PluginBase {
55-
// step 1
56-
// ...
59+
// step 1
60+
// ...
5761
}
62+
//highlight-end
5863
```
5964

6065
</TabItem>
6166
</Tabs>
6267

68+
### Step 2: Adding a Public `pluginNamespace` Property to the Plugin Class
69+
6370
2. After that add public `pluginNamespace` property. This will be used to access your plugin, as mentioned in step number 5 code example.
6471

6572

66-
<Tabs groupId="prog-lang" queryString>
73+
<Tabs groupId='prog-lang' queryString>
6774

68-
<TabItem value="javascript" label="JavaScript"
69-
attributes={{className: "javascript-tab"}}>
75+
<TabItem value='javascript' label='JavaScript'
76+
attributes={{className: 'javascript-tab'}}>
7077

7178
```javascript
7279
const { Web3PluginBase } = require('web3');
7380

7481
class CustomRpcMethodsPlugin extends Web3PluginBase {
75-
pluginNamespace = 'customRpcMethods'; // step 2
82+
//highlight-start
83+
pluginNamespace = 'customRpcMethods'; // step 2
84+
//highlight-end
7685
}
7786

7887
module.exports = CustomRpcMethodsPlugin;
7988
```
8089

8190
</TabItem>
8291

83-
<TabItem value="typescript" label="TypeScript" default
84-
attributes={{className: "typescript-tab"}}>
92+
<TabItem value='typescript' label='TypeScript' default
93+
attributes={{className: 'typescript-tab'}}>
8594

8695
```typescript
8796
import { Web3PluginBase } from 'web3';
8897

8998
export default class CustomRpcMethodsPlugin extends Web3PluginBase {
90-
public pluginNamespace = 'customRpcMethods'; // step 2
99+
//highlight-start
100+
public pluginNamespace = 'customRpcMethods'; // step 2
101+
//highlight-end
91102
}
92103
```
93104

94105
</TabItem>
95106
</Tabs>
96107

108+
109+
### Step 3: Creating Custom RPC Methods in the Plugin Class
110+
97111
3. Once plugin class is created using above mentioned steps, its very easy to add new RPC methods like:
98112

99-
<Tabs groupId="prog-lang" queryString>
113+
<Tabs groupId='prog-lang' queryString>
100114

101-
<TabItem value="javascript" label="JavaScript"
102-
attributes={{className: "javascript-tab"}}>
115+
<TabItem value='javascript' label='JavaScript'
116+
attributes={{className: 'javascript-tab'}}>
103117

104118
```javascript
105119
const { Web3PluginBase } = require('web3');
106120

107121
class CustomRpcMethodsPlugin extends Web3PluginBase {
108-
pluginNamespace = 'customRpcMethods';
109-
110-
async customRpcMethod() {
111-
// step 3
112-
return this.requestManager.send({
113-
// plugin has access to web3.js internal features like request manager
114-
method: 'custom_rpc_method',
115-
params: [],
116-
});
117-
}
122+
pluginNamespace = 'customRpcMethods';
123+
124+
//highlight-start
125+
async customRpcMethod() {
126+
// step 3
127+
return this.requestManager.send({
128+
// plugin has access to web3.js internal features like request manager
129+
method: 'custom_rpc_method',
130+
params: [],
131+
});
132+
}
133+
//highlight-end
118134
}
119135

120136
module.exports = CustomRpcMethodsPlugin;
121137
```
122138

123139
</TabItem>
124140

125-
<TabItem value="typescript" label="TypeScript" default
126-
attributes={{className: "typescript-tab"}}>
141+
<TabItem value='typescript' label='TypeScript' default
142+
attributes={{className: 'typescript-tab'}}>
127143

128144
```typescript
129145
import { Web3PluginBase } from 'web3';
130146

131147
export default class CustomRpcMethodsPlugin extends Web3PluginBase {
132-
public pluginNamespace = 'customRpcMethods';
133-
134-
public async customRpcMethod() {
135-
// step 3
136-
return this.requestManager.send({
137-
// plugin has access to web3.js internal features like request manager
138-
method: 'custom_rpc_method',
139-
params: [],
140-
});
141-
}
148+
public pluginNamespace = 'customRpcMethods';
149+
150+
//highlight-start
151+
public async customRpcMethod() {
152+
// step 3
153+
return this.requestManager.send({
154+
// plugin has access to web3.js internal features like request manager
155+
method: 'custom_rpc_method',
156+
params: [],
157+
});
158+
}
159+
//highlight-end
142160
}
143161
```
144162

145163
</TabItem>
146164
</Tabs>
147165

148-
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.
166+
### Step 4: Enabling Access to the Plugin on the Web3 Object
167+
168+
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.
149169

150-
<Tabs groupId="prog-lang" queryString>
170+
<Tabs groupId='prog-lang' queryString>
151171

152-
<TabItem value="javascript" label="JavaScript"
153-
attributes={{className: "javascript-tab"}}>
172+
<TabItem value='javascript' label='JavaScript'
173+
attributes={{className: 'javascript-tab'}}>
154174

155175
```javascript
156176
const { Web3PluginBase } = require('web3');
157177

158178
class CustomRpcMethodsPlugin extends Web3PluginBase {
159-
pluginNamespace = 'customRpcMethods';
160-
161-
async customRpcMethod() {
162-
return this.requestManager.send({
163-
// plugin has access to web3.js internal features like request manager
164-
method: 'custom_rpc_method',
165-
params: [],
166-
});
167-
}
179+
pluginNamespace = 'customRpcMethods';
180+
181+
async customRpcMethod() {
182+
return this.requestManager.send({
183+
// plugin has access to web3.js internal features like request manager
184+
method: 'custom_rpc_method',
185+
params: [],
186+
});
187+
}
168188
}
169189

170190
module.exports = CustomRpcMethodsPlugin;
171191
```
172192

173193
</TabItem>
174194

175-
<TabItem value="typescript" label="TypeScript" default
176-
attributes={{className: "typescript-tab"}}>
195+
<TabItem value='typescript' label='TypeScript' default
196+
attributes={{className: 'typescript-tab'}}>
177197

178198
```typescript
179199
import { Web3PluginBase } from 'web3';
180200

181201
export default class CustomRpcMethodsPlugin extends Web3PluginBase {
182-
public pluginNamespace = 'customRpcMethods';
183-
184-
public async customRpcMethod() {
185-
return this.requestManager.send({
186-
// plugin has access to web3.js internal features like request manager
187-
method: 'custom_rpc_method',
188-
params: [],
189-
});
190-
}
202+
public pluginNamespace = 'customRpcMethods';
203+
204+
public async customRpcMethod() {
205+
return this.requestManager.send({
206+
// plugin has access to web3.js internal features like request manager
207+
method: 'custom_rpc_method',
208+
params: [],
209+
});
210+
}
191211
}
192212

213+
//highlight-start
193214
// Module Augmentation
194215
declare module 'web3' {
195-
// step 4
216+
// step 4
196217

197-
interface Web3Context {
198-
customRpcMethods: CustomRpcMethodsPlugin;
199-
}
218+
interface Web3Context {
219+
customRpcMethods: CustomRpcMethodsPlugin;
220+
}
200221
}
222+
//highlight-end
201223
```
202224

203225
</TabItem>
@@ -207,47 +229,52 @@ declare module 'web3' {
207229
After the plugin is ready, it is recommended to publish it on the NPM registry.
208230
:::
209231

210-
#### Using Web3 Custom PRC Plugin (with web3 instance)
232+
### Step 5: Using the Web3 `CustomRPCPlugin` with a Web3 Instance
211233

212234
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).
213235

214236
Once plugin is registered its custom methods will be available to use.
215237

216-
<Tabs groupId="prog-lang" queryString>
238+
<Tabs groupId='prog-lang' queryString>
217239

218-
<TabItem value="javascript" label="JavaScript"
219-
attributes={{className: "javascript-tab"}}>
240+
<TabItem value='javascript' label='JavaScript'
241+
attributes={{className: 'javascript-tab'}}>
220242

221243
```javascript
222244
const { Web3 } = require('web3');
223245
const CustomRpcMethodsPlugin = require('web3-plugin-example');
224246

225247
const web3 = new Web3('http://127.0.0.1:8545');
248+
249+
//highlight-start
226250
web3.registerPlugin(new CustomRpcMethodsPlugin()); // step 5
227251

228-
web3.customRpcMethods.customRpcMethod();
229-
// ...
252+
web3.customRpcMethods.customRpcMethod(); //usage
253+
//highlight-end
230254
```
231255

232256
</TabItem>
233257

234-
<TabItem value="typescript" label="TypeScript" default
235-
attributes={{className: "typescript-tab"}}>
258+
<TabItem value='typescript' label='TypeScript' default
259+
attributes={{className: 'typescript-tab'}}>
236260

237261
```typescript
238262
import { Web3 } from 'web3';
239263
import CustomRpcMethodsPlugin from 'web3-plugin-example';
240264

241265
const web3 = new Web3('http://127.0.0.1:8545');
266+
267+
//highlight-start
242268
web3.registerPlugin(new CustomRpcMethodsPlugin()); // step 5
243269

244-
web3.customRpcMethods.customRpcMethod();
270+
web3.customRpcMethods.customRpcMethod(); //usage
271+
//highlight-end
245272
```
246273

247274
</TabItem>
248275
</Tabs>
249276

250-
#### More Details of Plugin Feature
277+
## More Details of Plugin Feature
251278

252279
For more details follow :
253280

0 commit comments

Comments
 (0)