From aa730b3e4419738bb68280567e45824a518710e9 Mon Sep 17 00:00:00 2001 From: santiagodevrel Date: Thu, 25 Apr 2024 15:09:33 +0300 Subject: [PATCH 1/7] added videos to the guide --- docs/docs/guides/web3_plugin_guide/index.md | 279 -------------------- 1 file changed, 279 deletions(-) delete mode 100644 docs/docs/guides/web3_plugin_guide/index.md diff --git a/docs/docs/guides/web3_plugin_guide/index.md b/docs/docs/guides/web3_plugin_guide/index.md deleted file mode 100644 index 0e23b5a85e7..00000000000 --- a/docs/docs/guides/web3_plugin_guide/index.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -sidebar_position: 1 -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... - -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) - -- 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) - -## Create a plugin - -```javascript -//1. import the `Web3PluginBase` module -import { Web3PluginBase } from "web3"; - -//2. Create a Class extending the `Web3Pluginbase` -class MyPlugin extends Web3PluginBase { - - //3. Add a name to the plugin - pluginNamespace = "pluginExample"; - - //4. Create any methods with your desired functionality - async doSomething(){ - console.log("Hello web3!"); - //send transactions - //initialize contracts - //deploy or interact with contracts - //add your own library, logic or functionality - //much more... - } -} - -module.exports = MyPlugin; -``` - -## Use a plugin - -```javascript -//1. import the plugin and web3 module -import { Web3 } from "web3"; -import MyPlugin from "./plugin"; - -//2. Initialize the web3 instance -const web3 = new Web3("https://eth.llamarpc.com"); - -//3. Register plugin to add the current Web3Context -web3.registerPlugin(new MyPlugin()); - -//4. Use the plugin methods -web3.pluginExample.doSomething(); -//--> Hello web3! -``` - -## Using web3 packages on the plugin - -### Use Eth module - -```js -import { FMT_NUMBER, Web3PluginBase, eth } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - async getChainId() { - //`this` is the web3context used when you register the plugin in the usage - return await eth.getChainId(this, { number: FMT_NUMBER.NUMBER }); - } - - async getBlockNumber() { - return await eth.getBlockNumber(this, { number: FMT_NUMBER.NUMBER }); - } - - //more web3.eth. methods... -} - -export default MyPlugin; -``` - -### Use Utils - -```js -import { Web3PluginBase, utils } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - weiToEth(value) { - //`this` is the web3context used when you register the plugin in the usage - return utils.fromWei(value, 'ether'); - } - - //more web3.eth. methods... -} - -export default MyPlugin; - -``` - - -### Use Accounts - - -```js -import { Web3PluginBase, eth } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - async createAccount() { - const account = eth.accounts.create(); - console.log("account:", account); - /* - account: { - address: '0x59E797F2F66AffA9A419a6BC2ED4742b7cBc2570', - privateKey: '0x52a81fc3a7fd6ce9644147c9fb5bfbe1f708f37b4611b3c3310eb9a6dc85ccf4', - signTransaction: [Function: signTransaction], - sign: [Function: sign], - encrypt: [Function: encrypt] - } - */ - } -} - -export default MyPlugin; -``` - -### Use Wallet - - -```js -import { Web3PluginBase, eth } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - async createWallet() { - //1. Create a random account - const accounts = eth.accounts.create(); - //2. Add the account to the wallet - 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', - privateKey: '0x6856adf06dd803e0354450ccf251f829a2c9ef1177ce371f8835bbfb56cd0898', - signTransaction: [Function: signTransaction], - sign: [Function: sign], - encrypt: [Function: encrypt] - }, - _accountProvider: { - create: [Function: createWithContext], - privateKeyToAccount: [Function: privateKeyToAccountWithContext], - decrypt: [Function: decryptWithContext] - }, - _addressMap: Map(1) { '0x233725561b1430be2c24ce9eeabe63e4b46ec9e3' => 0 }, - _defaultKeyName: 'web3js_wallet' - ] - */ - } -} - -export default MyPlugin; -``` - - -### Use Contract - - -```js -import { Web3PluginBase, Contract } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - 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}) - } -} - -export default MyPlugin; -``` - -### Use ENS - -```js -import { Web3PluginBase } from "web3"; -import { ENS } from "web3-eth-ens"; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = "pluginExample"; - - async getAddressENS() { - const ens = new ENS(undefined, this); //link to current web3Context - return ens.getAddress("ethereum.eth"); - } - -} - -``` -:::info -More ENS methods [here](https://docs.web3js.org/libdocs/ENS#methods) -::: - - -## Web3 requestManager (custom RPC) - -```js -import { Web3PluginBase } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - async customRPC() { - return await this.requestManager.send({ - method: "custom_RPC_call", - params: [], - }); - } - - async getNonce() { - return await this.requestManager.send({ - jsonrpc: "2.0", - method: "eth_getTransactionCount", - params: ["0xEA9eEca67682Cd9c6Ce3DdD1681049D7A897289F", "latest"], - }); - } - - async getBlockNumber() { - return await this.requestManager.send({ - jsonrpc: "2.0", - method: "eth_blockNumber", - params: [], - }); - } - -} -``` - -:::info -All the Ethereum JSON-RPC API [here](https://ethereum.org/en/developers/docs/apis/json-rpc/#eth_gettransactioncount) -::: - -## Web3 Config Params - -```js -import { Web3PluginBase } from 'web3'; - -class MyPlugin extends Web3PluginBase { - pluginNamespace = 'pluginExample'; - - async configParams() { - this.config.handleRevert = true; - this.config.defaultTransactionType = 0x1; - //more params... - } -} -``` -:::info -All web3 config params [here](https://docs.web3js.org/guides/web3_config/) -::: \ No newline at end of file From 927fab7bb31caea328e416176c913622c162ab7f Mon Sep 17 00:00:00 2001 From: santiagodevrel Date: Thu, 25 Apr 2024 15:09:47 +0300 Subject: [PATCH 2/7] added videos to the guide --- docs/docs/guides/web3_plugin_guide/index.mdx | 294 +++++++++++++++++++ 1 file changed, 294 insertions(+) create mode 100644 docs/docs/guides/web3_plugin_guide/index.mdx diff --git a/docs/docs/guides/web3_plugin_guide/index.mdx b/docs/docs/guides/web3_plugin_guide/index.mdx new file mode 100644 index 00000000000..4b8776a086f --- /dev/null +++ b/docs/docs/guides/web3_plugin_guide/index.mdx @@ -0,0 +1,294 @@ +--- +sidebar_position: 1 +sidebar_label: 'Getting started' +--- + +import ReactPlayer from 'react-player' + +# 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... + +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) + +- 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) + +## Create a plugin + +```javascript +//1. import the `Web3PluginBase` module +import { Web3PluginBase } from "web3"; + +//2. Create a Class extending the `Web3Pluginbase` +class MyPlugin extends Web3PluginBase { + + //3. Add a name to the plugin + pluginNamespace = "pluginExample"; + + //4. Create any methods with your desired functionality + async doSomething(){ + console.log("Hello web3!"); + //send transactions + //initialize contracts + //deploy or interact with contracts + //add your own library, logic or functionality + //much more... + } +} + +module.exports = MyPlugin; +``` + +## Use a plugin + +```javascript +//1. import the plugin and web3 module +import { Web3 } from "web3"; +import MyPlugin from "./plugin"; + +//2. Initialize the web3 instance +const web3 = new Web3("https://eth.llamarpc.com"); + +//3. Register plugin to add the current Web3Context +web3.registerPlugin(new MyPlugin()); + +//4. Use the plugin methods +web3.pluginExample.doSomething(); +//--> Hello web3! +``` + +## Using web3 packages on the plugin + +### Use Eth module + +```js +import { FMT_NUMBER, Web3PluginBase, eth } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + async getChainId() { + //`this` is the web3context used when you register the plugin in the usage + return await eth.getChainId(this, { number: FMT_NUMBER.NUMBER }); + } + + async getBlockNumber() { + return await eth.getBlockNumber(this, { number: FMT_NUMBER.NUMBER }); + } + + //more web3.eth. methods... +} + +export default MyPlugin; +``` + +### Use Utils + +```js +import { Web3PluginBase, utils } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + weiToEth(value) { + //`this` is the web3context used when you register the plugin in the usage + return utils.fromWei(value, 'ether'); + } + + //more web3.eth. methods... +} + +export default MyPlugin; + +``` + + +### Use Accounts + + +```js +import { Web3PluginBase, eth } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + async createAccount() { + const account = eth.accounts.create(); + console.log("account:", account); + /* + account: { + address: '0x59E797F2F66AffA9A419a6BC2ED4742b7cBc2570', + privateKey: '0x52a81fc3a7fd6ce9644147c9fb5bfbe1f708f37b4611b3c3310eb9a6dc85ccf4', + signTransaction: [Function: signTransaction], + sign: [Function: sign], + encrypt: [Function: encrypt] + } + */ + } +} + +export default MyPlugin; +``` + +### Use Wallet + + +```js +import { Web3PluginBase, eth } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + async createWallet() { + //1. Create a random account + const accounts = eth.accounts.create(); + //2. Add the account to the wallet + 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', + privateKey: '0x6856adf06dd803e0354450ccf251f829a2c9ef1177ce371f8835bbfb56cd0898', + signTransaction: [Function: signTransaction], + sign: [Function: sign], + encrypt: [Function: encrypt] + }, + _accountProvider: { + create: [Function: createWithContext], + privateKeyToAccount: [Function: privateKeyToAccountWithContext], + decrypt: [Function: decryptWithContext] + }, + _addressMap: Map(1) { '0x233725561b1430be2c24ce9eeabe63e4b46ec9e3' => 0 }, + _defaultKeyName: 'web3js_wallet' + ] + */ + } +} + +export default MyPlugin; +``` + + +### Use Contract + + +```js +import { Web3PluginBase, Contract } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + 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}) + } +} + +export default MyPlugin; +``` + +### Use ENS + +```js +import { Web3PluginBase } from "web3"; +import { ENS } from "web3-eth-ens"; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = "pluginExample"; + + async getAddressENS() { + const ens = new ENS(undefined, this); //link to current web3Context + return ens.getAddress("ethereum.eth"); + } + +} + +``` +:::info +More ENS methods [here](https://docs.web3js.org/libdocs/ENS#methods) +::: + + +## Web3 requestManager (custom RPC) + +```js +import { Web3PluginBase } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + async customRPC() { + return await this.requestManager.send({ + method: "custom_RPC_call", + params: [], + }); + } + + async getNonce() { + return await this.requestManager.send({ + jsonrpc: "2.0", + method: "eth_getTransactionCount", + params: ["0xEA9eEca67682Cd9c6Ce3DdD1681049D7A897289F", "latest"], + }); + } + + async getBlockNumber() { + return await this.requestManager.send({ + jsonrpc: "2.0", + method: "eth_blockNumber", + params: [], + }); + } + +} +``` + +:::info +All the Ethereum JSON-RPC API [here](https://ethereum.org/en/developers/docs/apis/json-rpc/#eth_gettransactioncount) +::: + +## Web3 Config Params + +```js +import { Web3PluginBase } from 'web3'; + +class MyPlugin extends Web3PluginBase { + pluginNamespace = 'pluginExample'; + + async configParams() { + this.config.handleRevert = true; + this.config.defaultTransactionType = 0x1; + //more params... + } +} +``` +:::info +All web3 config params [here](https://docs.web3js.org/guides/web3_config/) +::: + + +## Videos + +### Create your first plugin in 20 minutes! + + + + + +### Chainlink plugin: web3.js, viem, ethers vs web3 plugin🧩 + + From 1a694d26bdc5b894e30e113ea4cae5ae76378058 Mon Sep 17 00:00:00 2001 From: santiagodevrel Date: Thu, 25 Apr 2024 15:10:00 +0300 Subject: [PATCH 3/7] installed react-player --- docs/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index 4df7ece9893..28670fb3e24 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,10 +21,12 @@ "@mdx-js/react": "^3.0.0", "classnames": "^2.3.2", "clsx": "^2.0.0", + "docusaurus": "^1.14.7", "docusaurus-lunr-search": "^3.3.1", "prism-react-renderer": "^2.3.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-player": "^2.16.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.0.0", From a6185314cb064c000d1d433b8296dcad13bbba7f Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Thu, 25 Apr 2024 15:39:55 +0300 Subject: [PATCH 4/7] update links --- docs/docs/guides/web3_plugin_guide/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/guides/web3_plugin_guide/index.mdx b/docs/docs/guides/web3_plugin_guide/index.mdx index 4b8776a086f..d4d709d8c76 100644 --- a/docs/docs/guides/web3_plugin_guide/index.mdx +++ b/docs/docs/guides/web3_plugin_guide/index.mdx @@ -285,10 +285,10 @@ All web3 config params [here](https://docs.web3js.org/guides/web3_config/) ### Create your first plugin in 20 minutes! - + ### Chainlink plugin: web3.js, viem, ethers vs web3 plugin🧩 - + From 3fe97cba80859ce004841715254cd1bd7f664a6d Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Thu, 25 Apr 2024 15:43:26 +0300 Subject: [PATCH 5/7] changed react player for youtube embed --- docs/docs/guides/web3_plugin_guide/index.mdx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/docs/guides/web3_plugin_guide/index.mdx b/docs/docs/guides/web3_plugin_guide/index.mdx index d4d709d8c76..69a39859415 100644 --- a/docs/docs/guides/web3_plugin_guide/index.mdx +++ b/docs/docs/guides/web3_plugin_guide/index.mdx @@ -3,8 +3,6 @@ sidebar_position: 1 sidebar_label: 'Getting started' --- -import ReactPlayer from 'react-player' - # 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... @@ -285,10 +283,9 @@ All web3 config params [here](https://docs.web3js.org/guides/web3_config/) ### Create your first plugin in 20 minutes! - - + ### Chainlink plugin: web3.js, viem, ethers vs web3 plugin🧩 - + From 00c7f6efd9a24cea40fdd6824b33cce06f3cea99 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Thu, 25 Apr 2024 15:44:56 +0300 Subject: [PATCH 6/7] removed react-player and docusaurus --- docs/package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index 28670fb3e24..e4b99e1156d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,12 +21,10 @@ "@mdx-js/react": "^3.0.0", "classnames": "^2.3.2", "clsx": "^2.0.0", - "docusaurus": "^1.14.7", "docusaurus-lunr-search": "^3.3.1", "prism-react-renderer": "^2.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-player": "^2.16.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.0.0", From 1a75886e7219e5d8f6d0fd79cb0e99c792925620 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Thu, 25 Apr 2024 15:45:34 +0300 Subject: [PATCH 7/7] fixed comma --- docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index e4b99e1156d..4df7ece9893 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,7 +24,7 @@ "docusaurus-lunr-search": "^3.3.1", "prism-react-renderer": "^2.3.0", "react": "^18.2.0", - "react-dom": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.0.0",