IDE stands for Integrated Development Environment and is an application with a set of tools designed to help programmers execute different tasks related to software development such as writing, compil
Last updated
Remix is a Solidity IDE that lets you write, compile, and debug Solidity code. Solidity is a high-level, contract-oriented programming language for writing smart contracts. C++, Python, and JavaScript are the languages that empower the Solidity.
Before starting to work with Remix for developing smart contracts, it is important to learn the basic concepts related to it.
A smart contract can be understood as a trust-less agreement between two parties with blockchain technology at its core. This smart contract enforces both the involved parties to adhere to the terms of the agreement. It eliminates the traditional method of trusting a middleman or using laws to handle disputes.
Using the Ethereum blockchain, you can smart contracts with the Solidity language (among others). However, Ethereum is not the only platform to create smart contracts, although it was designed from the start to support building them.
Dapp or decentralized application is a web3 application having its front-end written in traditional languages such as JavaScript, HTML, CSS, and a smart contract running on blockchain at the back-end.
The only difference between a smart contract and Dapp is that unlike a smart contract, Dapp has not to be deployed on the blockchain itself. Dapp can be hosted on a centralized server or on decentralized storage like Swarm.
Starting with accessing the Remix IDE in any of the following ways:
Online
Via a web browser such as Chrome
From a locally installed copy
From Mist (Ethereum Dapp browser)
Using Remix on Browser
It is quite easy to access the Remix IDE from your web browser without any prerequisite installation. Visit https://remix.ethereum.org/ and you’ll see a complete IDE consisting of the code editor and various panels to compile, run, and debug your smart contracts. A Ballot contract features as an example to help you start with.
You can learn more about Mist here.
To do so, execute the following commands after installing Node.js and npm:
npm install remix-ide -g
remix-ide
Lets us explore the various panels in the Remix IDE
You can view the created files stored in the browser’s storage from here. You can also rename or delete any file by right-clicking on it.
Note: The file explorer uses the local memory of the browser to store all your files. Hence, there is a risk that you may lose all your files if you clear it or the operating system automatically clears the storage.
Remixd is a tool available to perform advanced work. It is a Node.js tool and enables the Remix IDE to access your computer’s file system.
+ icon on the top left lets you create a new file in the local storage of the browser. Enter the file name in the pop-up window, click OK.
The second button from top left lets you open an existing Solidity file from your computer file system into the Remix IDE.
The third and fourth button lets you publish files from IDE as a public GitHub gist.
The fifth button from top left lets you copy files from local storage to another instance of Remix.
The sixth and last button lets you connect the Remix IDE to your local file system, provided you are running the Remixd tool.
The code editor is an interface to let you write the code including a variety of features such as syntax highlighting, auto-recompiling, auto-saving etc. It is easy to adjust the font size using +/- button and even open multiple tabs.
Located just below the editor, the terminal window integrates a JavaScript interpreter and a web3 object. Various tasks that a terminal help you to accomplish are:
Execute JavaScript code in the current context
Visualize the actions performed from the Remix IDE
Visualize all network transactions
Visualize transactions created from the Remix IDE
Search for data in it and clear the logs
The Compile Tab: Used for compiling a smart contract and publishing on Swarm.
The Run Tab: Used for sending transactions to the configured environment
The Settings Tab: Used for updating settings like the compiler version and many general settings for the editor
The Debugger Tab: Used for debugging transactions
The Analysis Tab: Used for getting information about the latest compilation
The Support Tab: Used for connecting with the Remix community
One notable feature of Remix IDE is that it provides many environments for executing the transactions:
JavaScript VM: a sandbox blockchain implemented with JavaScript in the browser to emulate a real blockchain
Injected Web3: a provider that injects web3 such as Mist and MetaMask, connecting you to your private blockchain
Web3 Provider: a remote node with geth, parity or any Ethereum client. It helps you to connect to a real network, or directly to your pirate blockchain without the need of MetaMask
Here’s an example of blockchain raffle to demonstrate Remix IDE at work. We will show you how to:
Compile a smart contract in Remix IDE
Errors and warnings in case of any mistakes
Deploy the contract on the JavaScript EVM
Make Transactions on the deployed contract
See examples reads and writes in the terminal IDE
Now, on breaking down the above example, we get: Some variables that the contract declares:
players array variable - holds the address of the raffle participants;
uniquePlayers mapping - mapped to a boolean, true or false, saves unique players so that they don’t participate multiple times from same address
winners array variable - holds the addresses of the winners
charity variable - holds a hardcoded address of a charity where the profits will go
It also declares:
payable - a fallback function that enables smart contracts to accept payments
play () - a function that enables participants to enter the raffle by providing an address
Learn about this contract in detail here
Let’s get started with the contract, open https://remix.ethereum.org/
Follow the below steps:
Create a new file by clicking on the + icon
Enter the filename in the dialog box, click OK
A new tab to write contract gets opened, copy and paste the previous contract code here
Start compiling the contract by clicking Start to compile button under the Compile tab
If there is anything wrong, you will get a warning about it.
If you want the compiler to emit any warning, you can do so by ticking the checkboxes in the Analysis tab
Now, we will deploy our contract with our JavaScript VM. Switch to Run tab, select JavaScript VM from the dropdown menu.
Click Deploy below the contract name
Once the contract is successfully deployed on the Javascript VM, a box opens at the bottom of the Run tab
The red buttons denote the actions that cause a write to the blockchain and need a transaction. Like fallback and play functions in the above image. The blue buttons denote the reading from blockchain. Like charity, players, uniquePlayers, winners public variables defined in the contract’s code.
As of now, only the charity variable holds a value. Since the address is hardcoded in the code so when you click on the corresponding button, you’ll get the value of that address.
The contract is built to allow a participant to enter the raffle by just sending ether to the address (using a payable callback function) or also call the play() function with the address of the participant.
To test the contract, JavaScript VM provides five fake accounts with 100 ether each.
Select a current account from the dropdown menu with the name Account below the Environment dropdown.
Set the value variable (between 0.001 and 0.1 ) and the unit (ether) to send money to the contract.
Done. The money is sent to the contract. By clicking on the players button, you can check the addresses of the added accounts.
Repeat the previous process to add participants by selecting a new account. If you try to add an account that has already participated, you will get a warning as well as the transaction will fail. Here’s how it will look:
For easy development and deployment of smart contracts, you have many alternatives such as:
Truffle
Embark
MetaMask
Dapp
We have provided a crisp understanding of using Remix IDE to develop smart contracts for the Ethereum blockchain. Get started on your own. Experiment with the codes, explore and learn.
web3.js is a collection of libraries which allow you to interact with a local or remote ethereum node, using a HTTP or IPC connection. It helps you to develop websites or clients that reads and writes data from the Ethereum blockchain with smart contracts. Performing actions like sending ether from one account to another, reading and writing data from smart contracts, creating smart contracts, and many more are possible with web3.JS.
Web3.JS interacts with The Ethereum Blockchain through JSON RPC, that is “Remote Procedure Call” protocol.
First thing we need is a Node Package Manager or NPM.
$ node -v
Install the web3.JS library with NPM in your terminal
$ npm install web3
Infura RPC URL
Accessing an Ethereum node in order to connect it to the JSON RPC on the Mainnet could be a time-consuming task if not for Infura. The benefit of Infura is that it provides access to the Ethereum node without having to run one on your own. In simple words, it provides a remote Ethereum node for free in just 3 steps.
Sign up
Obtain an API key
Obtain the RPC URL network you want to connect to
Once done, it’ll look like this: https://mainnet.infura.io/YOUR_INFURA_API_KEY
All your dependencies installed, you can start developing with Web3.JS.
Start Node console in your terminal
Fulfill the requirement of Web3.JS
Assign Infura URL to access a variable const rpcURL = "https://mainnet.infura.io/YOUR_INFURA_API_KEY"
Replace YOUR_INFURA_API_KEY with your actual API key, once done,your Web3 connection will look like this const web3 = new Web3(rpcURL)
When the web3 connection is live, you can now interact with an Ethereum mainnet. Now, you can check the ether balance for any account with web3.eth.getBalance().
Assign the address of the account you want to check the balance for to a variable
Run the below code to check the account balance
As you can see, we first call the web3.eth.getBalance() to assign the task. This callback function has two arguments that it can return with, an error or the balance itself. Initially Ethereum expresses balances in Wei, the smallest subdivision of Ether, similar to cents. Using web3.utils.fromWei(wei, 'ether') we can convert the balance into Ether for our understanding.
GitHub has all the code examples available for downloading for your convenience.
Here we will demonstrate how to comprehend the smart contract data from the Ethereum Blockchain.
Below are the prerequisites to get started with:
The Smart contract in its JavaScript form using web3.eth.Contract() function.
While reading the data, different ways to call the functions on the smart contract
The web3.eth.Contract() function expects two arguments: one for the smart contract ABI (Abstract Binary Interface) and the other for the smart contract address.
ABI is a JSON array depicting the way a specific smart contract works. An ABI can be an extremely long, unbroken array.
Let us proceed by taking the ABI for OmiseGo token, working on the ERC-20 token standard.
Store the address to the OMG token from the Ethereum main net const address = "0xd26114cd6EE289AccF82350c8d8487fedB8A0C07"
Once the values are assigned, create a complete JavaScript representation of the OMG token smart contract const contract = new web3.eth.Contract(abi, address)
3) Now, we will start calling functions to read data from the smart contract Since, we have taken the example of smart contract on the ERC-20 token standard, it implements several functions such as: totalSupply(), name(), symbol(), and balanceOf(), so we have to individually read each of those values, in the following manner:
Total supply of all OMG tokens
Name of OMG token
Symbol of OMG token
Check the balance of the account
Done. You have now learnt how to read data from smart contracts with Web3.JS.
Here you’ll learn how to create transactions on the Ethereum Blockchain with Web3.JS and all the fundamentals about its working on the Ethereum Blockchain. Also, we’ll show what happens when an Ethereum transaction is created and how to broadcast a transaction manually to the network with web3.JS.
Signing the transactions is the first step to broadcast transactions to the network. Here we’ll be using an additional JavaScript library, called ethereumjs-tx. Use the below commandline to install it:
For security purposes, we are using this library as we want to sign all the transactions locally as we will be using a remote node hosted by Infura. By using this library we will be able to manage all our transactions locally rather than providing the private keys to the remote node.
Create app.js file to run the code
Get access to the newly installed library
var Tx = require('ethereumjs-tx')
Set up a Web3 connection
const Web3 = require('web3')
const web3 = new Web3('https://ropsten.infura.io/YOUR_INFURA_API_KEY')
As we are working on the Ropsten test network to refrain from spending any money. Since all transactions cost gas in the form of Ether, we can use fake Ether on the Ropsten test net by obtaining them from the faucet. You can get them from:
http://faucet.ropsten.be:3001/
Now, we will send fake Ether from one account to another. For this we’ll be needing two accounts and their private keys.
Create new accounts with Web3.JS
After this, load both the accounts with fake Ether from a faucet
Now, we’ll assign them to variables in our script. In your case, you’ll be using the accounts you generated.
Save the private keys to the environment
Now, we’ll read private keys from our environment and store them to variables
Convert them to a string of binary data with a Buffer to sign transactions with the private keys
Now, we’ve all the variables set up and from here we will: 1. Build a transaction object 2. Sign the transaction 3. Broadcast the transaction to the network
Building the transaction object
To generate a transaction, we have all the values needed such as nonce, to, value, gasLimit, and **gasPrice. Here’s what they mean:
nonce: Previous transaction count for the given account. Assign a value of this variable and convert it to hexadecimal using Web3.js utility web3.utils.toHex() to: Account we’re sending Ether to
Value: Amount of Ether to be sent. Value is expressed in Wei and converted to hexadecimal. gasLimit: Maximum amount of gas consumed by the transaction. In general it is 21000 units of gas. gasPrice: Amount we want to pay for each unit of gas.
As from field is not mentioned here, it is to be inferred that we sign this transaction with account1’s private key.
1) Assign the value for nonce variable
2) Use etheremjs-tx library to create a new Tx object and then sign the transaction with privateKey1
3) Serialize the transaction and convert it to a hexadecimal string to pass it to Web3 as shown the code above 4) Send the signed serialized transaction to the test network
Done. With that final step, you have sent the transaction and broadcast it to the network.
Let’s get started with the deployment process. We will be using the same app.js file and the below code for tutorial:
Few steps that are similar to the previous lesson will be followed here too:
Build a transaction object
Sign the transaction
Send the transaction
Building the transaction object:
While nonce, gasLimit, gasPrice are the same fields as the object from the previous lesson, there are some key differences as well: nonce: Same as the previous lesson gasLimit: Maximum amount of gas consumed by the transaction. As deploying smart contracts require more gas, the limit will be higher than the previous lesson gasPrice: Amount we pay for each unit of gas. Same as previous lesson value: this field is absent as we are not sending any Ether to: Similarly, this field is also absent as we’re not sending Ether to any particular account but we’re sending it to an entire network, i.e. deploying a smart contract data: It’s the bytecode of the smart contract we want to deploy To assign a value to the data parameter, which is a compiled bytecode representation of the smart contract in hexadecimal, we first need a smart contract and then we have to compile it. Once you’ve compiled the contract, you can assign the data value to a variable.
Now, follow the steps:
Assign the nonce value by getting the transaction count
Sign the transaction and send it And, you’re done with the deployment of a smart contract with Web3.JS.
Here you will learn how to write data to smart contracts with Web3.JS. Let’s get started.
Same basic setup with an app.js just like previous lessons
Build a transaction object
Apart from the to and data fields, every other field is the same as the previous lessons.
to: Address of the deployed contract. Obtain and assign the value momentarily. data: The hexadecimal representation of the function we want to call on the smart contract. Obtain and assign the value momentarily.
Once done, we can create a JavaScript representation of the smart contract with Web3.JS
Now, we can fill out the data field of the transaction
const data = contract.methods.transfer(account2, 1000).encodeABI()
Done, We have now successfully encoded this function call for the transaction. After this, we can now sign and send the transaction. After this, we can log the values of the account balances to see that the smart contract function was called and that the token transfers were complete.
Here you will learn how to examine smart contract events on the Ethereum Blockchain with Web3.JS.
As Ethereum smart contracts have the ability to emit events that indicate that something happened with the code execution, consumers can subscribe to these events with the functionality of Web3.JS. We’ll use ERC-20 token standard that emit a Transfer event anytime an ERC-20 token is transferred.Here, we have the OmiseGO ERC-20 token to subscribe to the Transfer event
Starting just like the previous lessons, we will:
Set up the app.js file
Connect to the Ethereum Main net
Paste OmiseGo smart contract ABI and address obtained from Etherscan
Create a JavaScript representation of the smart contract with web3.js
After this, we can look at the past events for this smart contract with getPastEvents() function. Firstly, we’ll get all the events emitted by the contract.
Here we have two arguments: the event name and a set of filtering parameters. For successful execution we will limit the number of blocks we want to check from.
And it’s done. You can now see all of the recent transfer events for the OmiseGo ERC-20 token. This code may prove to be helpful if you want to build a transaction history for the OMG token in the crypto wallet.
Here you will learn how to inspect blocks with Web3.JS. As it is useful in analyzing history, we will show how the web3.js functionality helps us to do that.
Let’s get started with inspection of blocks.
Set up an app.js file
Connect to main net to inspect blocks
At first, get the latest block number web3.eth.getBlockNumber().then(console.log)
Then acquire all the data for the latest block web3.eth.getBlock('latest').then(console.log)
Additionally if you want to build a block history feature, you can get a list of the most recent blocks in the chain. Use a for loop to fetch the most recent blocks and previous 10 blocks in the chain.
With Web3.JS, you can also inspect transactions contained within a specific block. const hash = '0x66b3fd79a49dafe44507763e9b6739aa0810de2c15590ac22b5e2f0a3f502073' web3.eth.getTransactionFromBlock(hash, 2).then(console.log) And it’s done. You can now successfully inspect blocks with Web3.JS. ### Web3.JS Utilities Here you will learn about the utilities included with web3.JS, their use and some additional tips and tricks. Let’s get started with our bonus information. 1. Set up an **app.js** 2. Connect to the Ethereum Main net
Now, let’s explore the tips and tricks. 1. You can get the average gas price currently for the network
You can get direct access to hashing functions and use them console.log(web3.utils.sha3('Dapp University'))
You can handle (pseudo) randomness by generating a 32 byte random hex console.log(web3.utils.randomHex(32))
You can also get access to external library when in need
That’s all. These are some of the bonus tips and tricks you can use with Web3.JS.
