avatarJennifer Fu

Summary

This context provides a detailed guide on using web3.js to interact with the Ethereum Virtual Machine (EVM) in Remix, covering the evolution of web technologies, blockchain basics, Infura, and web3.js.

Abstract

The context begins by explaining the evolution of web technologies, starting from Web 1.0 to Web 3.0, and then introducing Web3, which is based on blockchain technology. It explains the concept of blockchain, Ethereum, and its components such as nodes, smart contracts, and dApps. The context then introduces Infura, a service provider for building decentralized applications, and explains how to set up a project with Infura.

The context then moves on to web3.js, a collection of JavaScript libraries used to interact with a local or remote Ethereum node. It explains how to set up web3.js in a Remix project and demonstrates how to use web3.js to interact with the Ethereum network. The context provides examples of how to use web3.js to retrieve data from the Ethereum network and manipulate its state.

Bullet points

  • Web 1.0, Web 2.0, Web 3.0, and Web3 are different iterations of the World Wide Web.
  • Web3 is based on blockchain technology, which enables peer-to-peer transfer of digital assets without intermediaries.
  • Blockchain is a public database that is updated and shared across many computers in a network.
  • Ethereum is a blockchain platform that enables the creation of smart contracts and dApps.
  • Infura is a service provider for building decentralized applications that simplifies the process of setting up an Ethereum node.
  • web3.js is a collection of JavaScript libraries used to interact with a local or remote Ethereum node.
  • web3.js can be used to retrieve data from the Ethereum network and manipulate its state.
  • The context provides examples of how to use web3.js to interact with the Ethereum network in a Remix project.

How to Use Web3.js to Interact With the Ethereum Virtual Machine in Remix

Walking through the evolution of Web 1.0, Web 2.0, Web 3.0, Web3, and working with web3.js. Is JavaScript ready for blockchain?

Photo by Shubham Dhage on Unsplash

Web 1.0

The term, Web 1.0, was coined by Tim Berners-Lee in 1989. It is treated as the first generation of the World Wide Web, which exists from the time period of 1991 — 2004.

During this time period, most websites were static web pages, and the vast majority of users were consumers, not producers, of content. Pages were built with Server Side Includes or Common Gateway Interface (CGI). Frames and tables were used to position and align the elements on a page.

Web 2.0

The term, Web 2.0, was coined by Darcy DiNucci in 1999, and later popularized by Tim O’Reilly and Dale Dougherty at the first O’Reilly Media Web 2.0 Conference in October 2004.

Web 2.0 refers to the worldwide websites that highlight user-generated content, usability, and interoperability for end users. It centers on user-created content uploaded to forums, social media and networking services, blogs, and wikis. Web 2.0 starts from 2004, and continues to the current day. The web browser technologies are widely adopted, which includes AJAX and JavaScript frameworks. Data is typically formatted in XML or JSON.

Web 3.0

In 2006, the semantic web was described as a component of Web 3.0. The term was coined by Tim Berners-Lee. It is an efficient way to represent data on the web, or as a database that is globally linked to the content of documents on the Web, in a manner understandable by machines.

Web3

Web3, also known as Web 3.0, or web3, commonly refers to a new iteration of the World Wide Web that is based on blockchain technology, which covers the shared ledger systems used by cryptocurrencies like Bitcoin and Ethereum.

The term, Web3, was coined by Polkadot founder and Ethereum co-founder Gavin Wood in 2014. It is a new internet service that incorporates concepts such as decentralization and token-based economics. The idea gained interest in 2021 from cryptocurrency enthusiasts, large technology companies, and venture capital firms.

Chris Dixon defined that Web3 is the internet owned by the builders and users, orchestrated with tokens.

Web 1.0 and Web 2.0 are built on top of centralized-platforms. Web3 enables peer-to-peer transfer of digital assets without any intermediaries, and is predicted to be just as impactful as the Internet.

Blockchain

A blockchain is a public database that is updated and shared across many computers in a network. Block refers to data and state being stored in consecutive groups. Chain refers to the fact that each block cryptographically references its parent. i.e. blocks get chained together.

In the Ethereum universe, there is a single, canonical computer (i.e. Ethereum Virtual Machine, or EVM), whose state is agreed by everyone on the Ethereum network. Mainnet is the primary public Ethereum production blockchain.

Nodes are the real-life machines that are storing the EVM state. They ensure that everyone interacting with the blockchain has the same data. To accomplish this distributed agreement, blockchains need a consensus mechanism.

Anyone who wants to add a new block to the chain must solve a difficult puzzle that requires a lot of computing power, which is known as mining. Mining is typically brute force trial and error, but successfully adding a block is rewarded in ETH, the native cryptocurrency of Ethereum.

Smart contract is a program that is published into the EVM state, and executed by the network users with a fee paid to the network. Smart contracts are apps and services, such as marketplaces, financial instruments, games, etc. They are often called Decentralized Apps (dapps).

A dapp has its backend code running on a decentralized peer-to-peer network. It can have frontend code/user interfaces written in any language to make calls to the backend.

Image by author

Infura

Infura provides the tools and infrastructure that allow developers to easily take their blockchain apps from testing to scaled deployment. Its EVM equivalence is now live on the optimistic Ethereum mainnet.

Image by author

Infura offers free access to the Ethereum APIs and allows up to 3 projects. We create our first project with Ethereum, among the choices of Ethereum, ETH2, IPFS, and Filecoin.

Image by author

Name the project, jennifer-web3.

Image by author

After the submission, we get the project ID. Based on the project ID, we have two endpoints for mainnet, one for HTTPS (Hypertext Transfer Protocol Secure) and one for WSS (WebSocket Secure). The two addresses are named in the format of <network>.infura.io/v3/<PROJECT-ID>.

Image by author

Infura is a service provider for building decentralized applications. It does not require syncing, which usually takes long time for a decentralized peer-to-peer network. The Ethereum node setup is also simple. Therefore, it is a great infrastructure recommended for developing dapps.

web3.js

web3.js is a collection of JavaScript libraries to interact with a local or remote Ethereum node using HTTP, IPC or WebSocket. It is developed and maintained by the Ethereum Foundation, and it serves well for the dapp backend.

Image by author

Remix is a full-stack React framework that has the frontend user interface, along with the backend server. We have written an article on how Remix works and how the client/server folders and files are structured. Here, we use Remix as working environment to explore web3.js.

Create a Remix project:

% npx create-remix my-remix-app
% cd my-remix-app

Set up web3, along with two JSON packages:

npm i web3 json-stringify-safe react-json-pretty

These packages become part of dependencies in package.json:

In Remix, app/entry.server.jsx is the first bit of JavaScript that will run when a request hits the server. Remix loads only the necessary data, but developers need to handle the response. This file renders the React app to a string/stream that is sent as a response to the client.

Here is the modified app/entry.server.jsx:

At line 3, web3 is imported as Web3, which is used to construct the web3 instance at line 5. This instance uses the WebSocket endpoint connect to Infura.

app/routes/index.jsx is the indexed route that is invoked by default. This file is modified to show the content of the web3 instance and some useful methods:

At line 2, the stringify method is imported from json-stringify-safe, which resolves the circular reference issue. The method is used at line 32.

At line 3, react-json-pretty is imported as JSONPretty, which prettifies JSON data. This component is used at line 37.

At line 4, the web3 instance is imported from app/entry.server.jsx.

The loader function (lines 6–33) is a special API. It is exported to be called on the server before rendering. It fetches data from the web3 instance. At lines 8–31, a number of web3.eth’s get methods are invoked to query the instance state, which are displayed on the execution console.

At line 32, the loader function is resolved with the serialized web3 object.

At line 36, useLoaderData is invoked to retrieve the loaded data, result.

At line 37, JSONPretty shows result on the browser.

Execute the Remix app by npm run dev, and go to the browser window. We see a long list of the web3 object.

Image by author

Collapse the web3 object by http://jsonviewer.stack.hu/:

Image by author

It shows the first-level modules:

  • web3.eth: It is used to interact with the Ethereum network.
  • web3.shh: It is used to interact with the whisper protocol.
  • web3.bzz: It is used to interact with the swarm network.

web3.eth includes the following get methods to retrieve the Ethereum state/data:

  • getAccounts
  • getBalance
  • getBlock
  • getBlockNumber
  • getBlockTransactionCount
  • getBlockUncleCount
  • getChainId
  • getCode
  • getCoinBase
  • getFeeHistory
  • getGasPrice
  • getHashrate
  • getNodeInfo
  • getPastLogs
  • getPendingTransactions
  • getProof
  • getProtocolVersion
  • getStorageAt
  • getTransaction
  • getTransactionCount
  • getTransactionFromBlock
  • getTransactionReceipt
  • getUncle
  • getWork

By the API names, we can guess the functionality. But, what does Uncle mean?

In the blockchain, when two blocks are mined and sent to the ledger at around the same time, the one with a higher share of proof of work is accepted and enters the ledger. The other one is rejected, and becomes an uncle's block.

There are also methods to manipulate the state/data:

  • estimateGas
  • isMining
  • isSyncing
  • requestAccounts
  • sendSignedTransaction
  • sendTransaction
  • setProvider
  • sign
  • signTransaction
  • submitWork
  • subscribe

Amazingly, we can use web3.js to operate on a local or remote Ethereum node.

Conclusion

We have walked through the evolution of Web 1.0, Web 2.0, Web 3.0, and Web3. In the Remix working environment, we have shown how to use web3.js to interact with the Ethereum virtual machine, via Infura.

Indeed, we can use JavaScript to manipulate the blockchain. As Web3 grows exponentially, we cannot wait to see how JavaScript will continue to shape the internet’s future.

Thanks for reading. I hope this was helpful. If you are interested, check out my other Medium articles.

JavaScript
Blockchain
Web3
Remix
Programming
Recommended from ReadMedium