How to Use Web3.js to Interact With the Ethereum Virtual Machine in Remix | by Jennifer Fu | Apr, 2022

Photograph by Shubham Dhage on Unsplash

The time period, Net 1.0, was coined by Tim Berners-Lee in 1989. It’s handled as the primary era of the World Huge Net, which exists from the time interval of 1991 — 2004.

Throughout this time interval, most web sites had been static internet pages, and the overwhelming majority of customers had been customers, not producers, of content material. Pages had been constructed with Server Facet Contains or Frequent Gateway Interface (CGI). Frames and tables had been used to place and align the weather on a web page.

The time period, Net 2.0, was coined by Darcy DiNucci in 1999, and later popularized by Tim O’Reilly and Dale Dougherty on the first O’Reilly Media Net 2.0 Convention in October 2004.

Net 2.0 refers back to the worldwide web sites that spotlight user-generated content material, usability, and interoperability for finish customers. It facilities on user-created content material uploaded to boards, social media and networking companies, blogs, and wikis. Net 2.0 begins from 2004, and continues to the present day. The online browser applied sciences are extensively adopted, which incorporates AJAX and JavaScript frameworks. Information is often formatted in XML or JSON.

In 2006, the semantic internet was described as a part of Net 3.0. The time period was coined by Tim Berners-Lee. It’s an environment friendly method to characterize information on the net, or as a database that’s globally linked to the content material of paperwork on the Net, in a fashion comprehensible by machines.

Web3, often known as Net 3.0, or web3, generally refers to a brand new iteration of the World Huge Net that’s primarily based on blockchain expertise, which covers the shared ledger techniques utilized by cryptocurrencies like Bitcoin and Ethereum.

The time period, Web3, was coined by Polkadot founder and Ethereum co-founder Gavin Wooden in 2014. It’s a new web service that comes with ideas corresponding to decentralization and token-based economics. The thought gained curiosity in 2021 from cryptocurrency fans, massive expertise firms, and enterprise capital companies.

Chris Dixon outlined that Web3 is the web owned by the builders and customers, orchestrated with tokens.

Net 1.0 and Net 2.0 are constructed on high of centralized-platforms. Web3 allows peer-to-peer switch of digital belongings with none intermediaries, and is predicted to be simply as impactful because the Web.

A blockchain is a public database that’s up to date and shared throughout many computer systems in a community. Block refers to information and state being saved in consecutive teams. Chain refers to the truth that every block cryptographically references its father or mother. i.e. blocks get chained collectively.

Within the Ethereum universe, there’s a single, canonical laptop (i.e. Ethereum Digital Machine, or EVM), whose state is agreed by everybody on the Ethereum community. Mainnet is the first public Ethereum manufacturing blockchain.

Nodes are the real-life machines which can be storing the EVM state. They be certain that everybody interacting with the blockchain has the identical information. To perform this distributed settlement, blockchains want a consensus mechanism.

Anybody who needs so as to add a brand new block to the chain should resolve a troublesome puzzle that requires a whole lot of computing energy, which is named mining. Mining is often brute drive trial and error, however efficiently including a block is rewarded in ETH, the native cryptocurrency of Ethereum.

Good contract is a program that’s revealed into the EVM state, and executed by the community customers with a payment paid to the community. Good contracts are apps and companies, corresponding to marketplaces, monetary devices, video games, and many others. They’re usually referred to as Decentralized Apps (dapps).

A dapp has its backend code working on a decentralized peer-to-peer community. It could possibly have frontend code/consumer interfaces written in any language to make calls to the backend.

The decentralized peer-to-peer network architecture
Picture by writer

Infura gives the instruments and infrastructure that permit builders to simply take their blockchain apps from testing to scaled deployment. Its EVM equivalence is now dwell on the optimistic Ethereum mainnet.

Infura is the EVM equivalence.
Picture by writer

Infura provides free entry to the Ethereum APIs and permits as much as 3 initiatives. We create our first venture with Ethereum, among the many selections of Ethereum, ETH2, IPFS, and Filecoin.

The product type has the choices of Ethereum, ETH2, IPFS, and Filecoin.
Picture by writer

Title the venture, jennifer-web3.

The submission form is filled with the product type and the project name.
Picture by writer

After the submission, we get the venture ID. Based mostly on the venture ID, we have now two endpoints for mainnet, one for HTTPS (Hypertext Switch Protocol Safe) and one for WSS (WebSocket Safe). The 2 addresses are named within the format of <community>.infura.io/v3/<PROJECT-ID>.

The screenshot shows the detail information about project ID, project secret, and two endpoints.
Picture by writer

Infura is a service supplier for constructing decentralized purposes. It doesn’t require syncing, which normally takes very long time for a decentralized peer-to-peer community. The Ethereum node setup can be easy. Subsequently, it’s a nice infrastructure advisable for creating dapps.

web3.js is a group of JavaScript libraries to work together with an area or distant Ethereum node utilizing HTTP, IPC or WebSocket. It’s developed and maintained by the Ethereum Basis, and it serves effectively for the dapp backend.

The decentralized peer-to-peer network architecture with web.js
Picture by writer

Remix is a full-stack React framework that has the frontend consumer interface, together with the backend server. Now we have written an article on how Remix works and how the client/server folders and files are structured. Right here, we use Remix as working surroundings to discover web3.js.

Create a Remix venture:

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

Arrange web3, together with two JSON packages:

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

These packages turn out to be a part of dependencies in bundle.json:

In Remix, app/entry.server.jsx is the primary little bit of JavaScript that can run when a request hits the server. Remix masses solely the required information, however builders must deal with the response. This file renders the React app to a string/stream that’s despatched as a response to the consumer.

Right here is the modified app/entry.server.jsx:

At line 3, web3 is imported as Web3, which is used to assemble the web3 occasion at line 5. This occasion makes use of the WebSocket endpoint hook up with Infura.

app/routes/index.jsx is the listed route that’s invoked by default. This file is modified to indicate the content material of the web3 occasion and a few helpful strategies:

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

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

In line 4, the web3 occasion is imported from app/entry.server.jsx.

The loader perform (strains 6–33) is a particular API. It’s exported to be referred to as on the server earlier than rendering. It fetches information from the web3 occasion. At strains 8–31, various web3.eth’s get strategies are invoked to question the occasion state, that are displayed on the execution console.

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

At line 36, useLoaderData is invoked to retrieve the loaded information, consequence.

At line 37, JSONPretty exhibits consequence on the browser.

Execute the Remix app by npm run dev, and go to the browser window. We see an extended record of the web3 object.

The long list of the web3 object that is displayed on the browser
Picture by writer

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

The collapsed web3 object that shows the first-level modules
Picture by writer

It exhibits the first-level modules:

  • web3.eth: It’s used to work together with the Ethereum community.
  • web3.shh: It’s used to work together with the whisper protocol.
  • web3.bzz: It’s used to work together with the swarm community.

web3.eth consists of the next get strategies to retrieve the Ethereum state/information:

  • 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 are able to guess the performance. However, what does Uncle imply?

Within the blockchain, when two blocks are mined and despatched to the ledger at across the identical time, the one with a better share of proof of labor is accepted and enters the ledger. The opposite one is rejected, and turns into an uncle’s block.

There are additionally strategies to govern the state/information:

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

Amazingly, we are able to use web3.js to function on an area or distant Ethereum node.

Now we have walked by means of the evolution of Net 1.0, Net 2.0, Net 3.0, and Web3. Within the Remix working surroundings, we have now proven the best way to use web3.js to work together with the Ethereum digital machine, through Infura.

Certainly, we are able to use JavaScript to govern the blockchain. As Web3 grows exponentially, we can’t wait to see how JavaScript will proceed to form the web’s future.

More Posts