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

Commit 6bba077

Browse files
Merge branch '4.x' into 6640-mainnet-release-tests-estimategas-error
2 parents 8d57d0a + 2a40b66 commit 6bba077

Some content is hidden

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

76 files changed

+6462
-5777
lines changed

CHANGELOG.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2287,7 +2287,7 @@ If there are any bugs, improvements, optimizations or any new feature proposal f
22872287

22882288
#### web3-utils
22892289

2290-
- Fix unecessary array copy when pack encoding (#6553)
2290+
- Fix unnecessary array copy when pack encoding (#6553)
22912291

22922292
## [Unreleased]
22932293

@@ -2322,4 +2322,4 @@ If there are any bugs, improvements, optimizations or any new feature proposal f
23222322

23232323
#### web3-utils
23242324

2325-
- Fix unecessary array copy when pack encoding (#6553)
2325+
- Fix unnecessary array copy when pack encoding (#6553)
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
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)