Web3.js
Web3.js JavaScript Library
Introduction
Web3.js is a set of libraries that allow developers to interact with Ethereum nodes using HTTP, IPC, or WebSocket protocols with JavaScript. Phron has an Ethereum-like API available that is fully compatible with Ethereum-style JSON-RPC invocations. Therefore, developers can leverage this compatibility and use the Web3.js library to interact with a Phron node as if they were doing so on Ethereum.
In this guide, you'll learn how to use the Web3.js library to send a transaction and deploy a contract on Phron.
Checking Prerequisites
For the examples in this guide, you will need to have the following:
An account with funds. You can get DEV tokens for testing on Phron once every 24 hours from the Phron Faucet
To test out the examples in this guide on Phron, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers
NoteThe examples in this guide assume you have a MacOS or Ubuntu 22.04-based environment and will need to be adapted accordingly for Windows.
Installing Web3.js
To get started, you'll need to start a basic JavaScript project. First, create a directory to store all of the files you'll be creating throughout this guide, and initialize the project with the following command:
mkdir web3-examples && cd web3-examples && npm init --yFor this guide, you'll need to install the Web3.js library and the Solidity compiler. To install both NPM packages, you can run the following command:
Setup Web3.js with Phron
You can configure Web3.js to work with any of the Phron networks. To configure your project for Phron, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers.
The simplest way to get started with each of the networks is as follows:
Save this code snippet, as you'll need it for the scripts that are used in the following sections.
Send a Transaction
During this section, you'll be creating a couple of scripts. The first one will be to check the balances of your accounts before trying to send a transaction. The second script will actually send the transaction.
You can also use the balance script to check the account balances after the transaction has been sent.
Check Balances Script
You'll only need one file to check the balances of both addresses before and after the transaction is sent. To get started, you can create a balances.js file by running:
Next, you will create the script for this file and complete the following steps:
Set up the Web3 provider
Define the
addressFromandaddressTovariablesCreate the asynchronous
balancesfunction, which wraps theweb3.eth.getBalancemethodUse the
web3.eth.getBalancefunction to fetch the balances for theaddressFromandaddressToaddresses. You can also leverage theweb3.utils.fromWeifunction to transform the balance into a more readable number in DEVLastly, run the
balancesfunction
To run the script and fetch the account balances, you can run the following command:
If successful, the balances for the origin and receiving address will be displayed in your terminal in DEV.
Send Transaction Script
You'll only need one file to execute a transaction between accounts. For this example, you'll be transferring 1 DEV token from an origin address (from which you hold the private key) to another address. To get started, you can create a transaction.js file by running:
Next, you will create the script for this file and complete the following steps:
Set up the Web3 provider
Define the
accountFrom, including theprivateKey, and theaddressTovariables. The private key is required to create a wallet instance. Note: This is for example purposes only. Never store your private keys in a JavaScript fileCreate the asynchronous
sendfunction, which wraps the transaction object, and the sign and send transaction functionsCreate and sign the transaction using the
web3.eth.accounts.signTransactionfunction. Pass in thegas,addressTo,value,gasPrice, andnoncefor the transaction along with the sender'sprivateKeySend the signed transaction using the
web3.eth.sendSignedTransactionmethod and pass in the raw transaction. Then useawaitto wait until the transaction is processed and the transaction receipt is returnedLastly, run the
sendfunction
To run the script, you can run the following command in your terminal:
If the transaction was successful, in your terminal, you'll see the transaction hash has been printed out.
You can also use the balances.js script to check that the balances for the origin and receiving accounts have changed. The entire workflow would look like this:
Common Errors When Sending Transactions
When sending a transaction with Web3.js, it is important that you have all of the required data for the transaction. You'll need to provide the from address or the nonce of the sender, the gas or gasLimit, and the gasPrice.
If you do not specify the from address or the nonce of the sender, you may receive the following error:
To fix this, simply add either the from or nonce field to the transaction object.
If you do not specify the gas correctly, you may receive the following error:
To resolve this error, you'll need to make sure that you've provided a gasPrice for the transaction. You can use await web3.eth.getGasPrice() to programmatically get this value.
Deploy a Contract
The contract you'll be compiling and deploying in the next couple of sections is a simple incrementer contract, arbitrarily named Incrementer.sol. You can get started by creating a file for the contract:
Next, you can add the Solidity code to the file:
The constructor function, which runs when the contract is deployed, sets the initial value of the number variable stored on-chain (the default is 0). The increment function adds the _value provided to the current number, but a transaction needs to be sent, which modifies the stored data. Lastly, the reset function resets the stored value to zero.
NoteThis contract is a simple example for illustration purposes only and does not handle values wrapping around.
Compile Contract Script
In this section, you'll create a script that uses the Solidity compiler to output the bytecode and interface (ABI) for the Incrementer.sol contract. To get started, you can create a compile.js file by running:
Next, you will create the script for this file and complete the following steps:
Import the
fsandsolcpackagesUsing the
fs.readFileSyncfunction, you'll read and save the file contents ofIncrementer.soltosourceBuild the
inputobject for the Solidity compiler by specifying thelanguage,sources, andsettingsto be usedUsing the
inputobject, you can compile the contract usingsolc.compileExtract the compiled contract file and export it to be used in the deployment script
Deploy Contract Script
With the script for compiling the Incrementer.sol contract in place, you can then use the results to send a signed transaction that deploys it. To do so, you can create a file for the deployment script called deploy.js:
Next, you will create the script for this file and complete the following steps:
Import the contract file from
compile.jsSet up the Web3 provider
Define the
accountFrom, including theprivateKey, and theaddressTovariables. The private key is required to create a wallet instance. Note: This is for example purposes only. Never store your private keys in a JavaScript fileSave the
bytecodeandabifor the compiled contractCreate the asynchronous
deployfunction that will be used to deploy the contractCreate the contract instance using the
web3.eth.ContractfunctionCreate the constructor and pass in the
bytecodeand the initial value for the incrementer. For this example, you can set the initial value to5Create and sign the transaction using the
web3.eth.accounts.signTransactionfunction. Pass in thedata,gas,gasPrice, andnoncefor the transaction along with the sender'sprivateKeySend the signed transaction using the
web3.eth.sendSignedTransactionmethod and pass in the raw transaction. Then useawaitto wait until the transaction is processed and the transaction receipt is returnedLastly, run the
deployfunction
To run the script, you can enter the following command into your terminal:
If successful, the contract's address will be displayed in the terminal.
Read Contract Data (Call Methods)
Call methods are the type of interaction that doesn't modify the contract's storage (change variables), meaning no transaction needs to be sent. They simply read various storage variables of the deployed contract.
To get started, you can create a file and name it get.js:
Then you can take the following steps to create the script:
Import the
abifrom thecompile.jsfileSet up the Web3 provider
Create the
contractAddressvariable using the address of the deployed contractCreate an instance of the contract using the
web3.eth.Contractfunction and passing in theabiandcontractAddressCreate the asynchronous
getfunctionUse the contract instance to call one of the contract's methods and pass in any inputs if necessary. For this example, you will call the
numbermethod which doesn't require any inputs. You can useawait, which will return the value requested once the request promise resolvesLastly, call the
getfunction
To run the script, you can enter the following command in your terminal:
If successful, the value will be displayed in the terminal.
Interact with Contract (Send Methods)
Send methods are the type of interaction that modifies the contract's storage (change variables), meaning a transaction needs to be signed and sent. In this section, you'll create two scripts: one to increment and one to reset the incrementer. To get started, you can create a file for each script and name them increment.js and reset.js:
Open the increment.js file and take the following steps to create the script:
Import the
abifrom thecompile.jsfileSet up the Web3 provider
Define the
privateKeyfor the origin account, thecontractAddressof the deployed contract, and the_valueto increment by. The private key is required to create a wallet instance. Note: This is for example purposes only. Never store your private keys in a JavaScript fileCreate an instance of the contract using the
web3.eth.Contractfunction and passing in theabiandcontractAddressUse the contract instance to build the increment transaction using the
methods.incrementfunction and passing in the_valueas an inputCreate the asynchronous
incrementfunctionUse the contract instance and the increment transaction you previously created to sign the transaction with the sender's private key. You'll use the
web3.eth.accounts.signTransactionfunction and specify thetoaddress,data,gas,gasPrice, andnoncefor the transactionSend the signed transaction using the
web3.eth.sendSignedTransactionmethod and pass in the raw transaction. Then useawaitto wait until the transaction is processed and the transaction receipt is returnedLastly, call the
incrementfunction
To run the script, you can enter the following command in your terminal:
If successful, the transaction hash will be displayed in the terminal. You can use the get.js script alongside the increment.js script to make sure that value is changing as expected:
Next, you can open the reset.js file and take the following steps to create the script:
Import the
abifrom thecompile.jsfileSet up the Web3 provider
Define the
privateKeyfor the origin account and thecontractAddressof the deployed contract. The private key is required to create a wallet instance. Note: This is for example purposes only. Never store your private keys in a JavaScript fileCreate an instance of the contract using the
web3.eth.Contractfunction and passing in theabiandcontractAddressUse the contract instance to build the reset transaction using the
methods.resetfunctionCreate the asynchronous
resetfunctionUse the contract instance and the reset transaction you previously created to sign the transaction with the sender's private key. You'll use the
web3.eth.accounts.signTransactionfunction and specify thetoaddress,data,gas,gasPrice, andnoncefor the transactionSend the signed transaction using the
web3.eth.sendSignedTransactionmethod and pass in the raw transaction. Then useawaitto wait until the transaction is processed and the transaction receipt is returnedLastly, call the
resetfunction
To run the script, you can enter the following command in your terminal:
If successful, the transaction hash will be displayed in the terminal. You can use the get.js script alongside the reset.js script to make sure that value is changing as expected:
This tutorial is for educational purposes only. As such, any contracts or code created in this tutorial should not be used in production.The information presented herein has been provided by third parties and is made available solely for general information purposes. Phron does not endorse any project listed and described on the Phron Doc Website (https://docs.Phron.ai/). Phron does not warrant the accuracy, completeness or usefulness of this information. Any reliance you place on such information is strictly at your own risk. Phron disclaims all liability and responsibility arising from any reliance placed on this information by you or by anyone who may be informed of any of its contents. All statements and/or opinions expressed in these materials are solely the responsibility of the person or entity providing those materials and do not necessarily represent the opinion of Phron. The information should not be construed as professional or financial advice of any kind. Advice from a suitably qualified professional should always be sought in relation to any particular matter or circumstance. The information herein may link to or integrate with other websites operated or content provided by third parties, and such other websites may link to this website. Phron has no control over any such other websites or their content and will have no liability arising out of or related to such websites or their content. The existence of any such link does not constitute an endorsement of such websites, the content of the websites, or the operators of the websites. These links are being provided to you only as a convenience and you release and hold Phron harmless from any and all liability arising from your use of this information or the information provided by any third-party website or service.
Last updated