At Infura, we believe testnet ETH should be free and easily accessible.

As an Ethereum developer, you know how important it is to test your dapps before deploying them to the mainnet. However, testing can be challenging when you need to acquire Sepolia testnet ETH to fund your smart contracts and there’s nowhere to turn.

Aligned with Infura’s mission of making building in web3 easy and accessible to everyone, we're releasing Infura’s new Ethereum testnet faucet that drips 0.5 ETH daily requests.


Why we created the Infura testnet faucet


At Infura, we believe testnet ETH should be free and easily accessible. Recent shortages of testnet ETH have caused significant problems for developers, who have had to purchase GoETH on the open market.

The monetization of GoETH led to speculators driving the price to $1.61 per token, and one user even purchased a Cryptopunk using funds from GoETH transactions.

Because testnet ETH should be free and easily accessible, the Ethereum Foundation is shutting down Goerli testnet and requesting that developers migrate to the Sepolia Testnet.

Infura's new testnet faucet is here to help the ecosystem by providing a reliable, high-volume drip of Sepolia ETH. Facilitating web3 development QA procedures on a test network is critical to the future of blockchain implementation at the protocol level. Access to a stable, high-volume faucet will make web3 development easier for developers.

With this faucet, you can request free testnet ether with just a few clicks. Want to see for yourself?

Here’s how.


How to use the Infura testnet faucet


To use the Infura testnet faucet, follow these simple steps:

First, to go: https://www.infura.io/faucet/sepolia.  

Then enter your Ethereum address into the open field. (More detailed steps to do this are here: How to get your Sepolia Wallet address on MetaMask)

Next, click the login button to access your Infura account.

Click "Receive ETH" and wait for the transaction to be processed. You can follow the Etherscan link for transaction verification.

Check your MetaMask wallet to confirm you’ve received your testnet ETH. You can do this on the Sepolia network. (Reminder: Secure your MetaMask wallet)



It's that easy! You can request testnet ETH as often as you need to, but please be aware of the 0.5 ETH daily limit.


Keep learning with Infura


Congratulations! Now you have the ETH you need to test your dapp, publishing a few smart contracts, and even mint some NFTs. Below are a few helpful resources to keep learning with Infura:

 * Getting Started with Infura
 * The Developer’s Guide to the Web3 Stack
 * Get started with using Infura’s NFT API + SDK
 * Read our Infura NFT API Documentation for more ideas
 * Deploy a Smart Contract on Sepolia Testnet and test it out!


Frequently Asked Questions


Q: Can I receive more testnet ETH?

A: The current limit is 0.5 testnet ETH per day, but this could change later.

We may increase testnet ETH rewards for engaging with Infura in the future. Open emails and follow us on Twitter to get the latest updates on test ETH withdrawal limits!

Q: Will you support upcoming testnets like Holesky?

A: We're working closely with the Ethereum Foundation on launching and providing services to additional testing and development in the Ethereum ecosystem. The upcoming Shanghai / Capella upgrade is in scope with upcoming iterations of the feature.

Q: What other features can we expect in the future?

A:  With the recent acquisition of Hal by ConsenSys, we plan to implement an example monitoring service to notify users when transactions are  fully processed. We already use Hal for internal monitoring of transaction processing for manual retries.

Additional FAQs are answered directly on the faucet site.

We hope the new Infura testnet faucet makes your developer experience easier and more pleasant so you can keep shipping your innovations and building the future of web3.

Infura product updates and feature announcements.

Infura Product & Features

Product & Features

Introducing Infura’s ETH testnet faucet: Get 0.5 ETH daily to test your dapps!

The Developer’s Guide to the Web3 Stack

Infura’s NFT API + SDK are packed with all the tooling you need to mint your innovations with ease.

Have you ever wanted to create something beautiful with a few lines of code? What if with just three lines of code you could build an NFT marketplace? Or mint digital art? With the announcement of Infura's NFT API + SDK general release today, you can! It’s never been easier to mint any-NFT-thing you want.  

Over the past several months, the Infura team has been hard at work to create the best NFT tooling possible. It was only June of last year when we started the private beta with a handful of developers, using a handful of endpoints that connected to Ethereum and Polygon.

“ConsenSys products have powered the NFT experience since the very beginning, with a significant volume of NFT transactions in the ecosystem passing through the MetaMask wallet backed by web3’s strongest infrastructure from Infura. Since the limited beta release of our NFT API and SDKs in June 2022, our team has made significant strides in making the NFT toolkit the best tooling builders need to bring their NFT innovation to the world,” said Rob Dawson, Chief Technology Officer, ConsenSys Software.

Today, the Infura NFT API comes with 14 endpoints so developers have access to all the metadata they need for building. The NFT API also includes read and write capabilities from eight blockchain networks, in four languages, with integrated IPFS access.

“With the general availability of the Infura NFT API, we are focused on helping even more developers capture the huge demand of the NFT market and accelerate their building journey with instant access to cross-chain data, pre-built templates, and the ability to mint NFT collections to 8 networks in one integrated product,” Rob added.

Today we want to thank you the 500 participants who took part in our beta programs and gave us such valuable feedback that has allowed us to build the NFT API + SDK we believe will empower creators.

Let’s learn more.


The Infura NFT API + SDK offers superior security with ConsenSys Diligence


While other RPC-providers might have similar endpoint offerings, Infura’s NFT API + SDK is a clear choice for creators and developers who value the safety of their smart contracts.

The Infura NFT SDK comes with three ERC-721 and ERC-1155  templates that cover more than 85% of all NFT use cases. Each template has been pre-audited by leading blockchain security platform, ConsenSys Diligence. This means these templates are not only easily customized with metadata to create and mint NFTs in minutes, but also provide top security.

Being pre-audited means Infura’s NFT templates have been run through Diligence’s smart contract security software, Diligence Fuzzing.

The fuzzing tool battle tests contracts by attacking them with millions of scenarios over and over again until the contract is deemed error-free. The blockchain is immutable and immutable means forever. Why risk your IP using anything else?


The Infura NFT API + SDK offers multi-chain options and compatibility


Infura is an industry leader when it comes to multi-chain compatibility with RPC endpoints to 14 networks. When it comes to the NFT API, 14 endpoints with read/write capability are supported across 8 networks.

This includes early access to the new zkEVM launched by ConsenSys that’s scheduled to be available to the general public in April. Its zero knowledge-rollup technology will reduce blocktimes, latency, and gas fees–significant for NFT dapps.


The Infura NFT API + SDK offers accelerated development with the ConsenSys product suite


Developers using the Infura NFT API can take advantage of accelerated development for their NFT innovations with easy integration to the ConsenSys product suite. Add Infura, Diligence, ConsenSys zkEVM, and MetaMask to your tooling to take your NFT project to the next level.

Developers and creators can use the Truffle Suite to build an NFT dapp, spin up a dev environment to test for free, then check the Truffle dashboard for results and predict gas fees.

Next, download the MetaMask Unity SDK to use the wallet as a login authenticator and automatically connect users and their wallets to your NFT dapp or blockchain game.


Hear what devs using the Infura NFT API + SDK are saying


"Infura’s NFT API removed all the legwork to provide NFT capabilities for our web3 gaming platform. We no longer have to analyze every smart contract on-chain to determine whether they are NFTs or store NFT data and metadata. Using the Infura NFT API means we don't need to worry about scaling our database to account for increased traffic of our wallet application. Infura does it all for us." - Jay Chung, Global Business Development at Intella X / Neowiz

“Infura’s NFT API and SDK helped us very quickly build a dashboard and advanced filtering system for our users by leveraging the high-level API. We did not need to parse a long list of blockchain transactions ourselves to display meaningful information. And compared to some concurrent providers, we’ve never had any issues with the API stability and the rate limiting. Plus, the first tier of pricing helped us grow in our first months without being too expensive.” - Louis Pinsard, Co-Founder & CTO at Dialog


The Infura NFT API + SDK is only getting better


While we believe the Infura NFT API + SDK are built to empower NFT creators today we’re certainly not finished making it the best tooling on the market. Here’s what to expect from the product roadmap:  

 * Six more Diligence-secured NFT smart contracts
   
 * Expansion of the read function, making it even easier for developers to extract, manipulate, and report on metadata.
   
 * Low code and no code offerings for those non-technical creators to ensure every kind of builder can participate in the NFT creator economy.


Get started today


Check out the below demo for step-by-step instructions to get started using the Infura NFT API + SDK today.



The Infura NFT API + SDK is now available for all Infura users. Don’t have any Infura account to use the NFT tooling?

No problem. You can create an account in just three steps for free on infura.io/register.

Happy minting!

Empowering creators with the Infura NFT API + SDK

Ethereum Network Updates, Upgrades, Hard Forks

Infura - Ethereum Network Updates

Network

How To Choose The Right Blockchain For Your Next Dapp

Blockchain development can be complex. And no wonder—when working within a decentralized system operating on a set of complex protocols there are many factors you need to consider. Even for even the simplest of activities, you need to access blockchain nodes, check gas prices, pay for gas, sign transactions, and more.

Infura is a powerful suite of APIs and developer tools that abstracts away these complexities on the most popular blockchains, including Ethereum, Linea, Arbitrum, StarkNet, IPFS, and more. By using Infura, you can spend more time building your dapp, and less time worrying about details such as scalability and uptime.

This guide provides all the steps necessary to set up and get started using Infura. You’ll be able to set up an Infura API key, access the Ethereum (Sepolia) blockchain, and use Infura to build your dapp. By the end of this guide, you’ll see why leading dapps and tools such as MetaMask, Uniswap, and MakerDAO rely on the reliability, ease of use, and scale of Infura to power their ventures.


Prerequisites

To get started, you’ll need a one-time setup of some tools and software essential to creating and deploying your dapp.


Set up MetaMask

First, in order to conduct transactions on a blockchain (for example, deploying a contract or minting an NFT), you’ll need a crypto wallet.

Several options for wallets are available in the market, but we’ll use the most popular and easy to use, MetaMask. MetaMask is a self-custodial wallet that gives users full control over their crypto and transaction authorizations. MetaMask is available for free as a browser extension.

Once you install the extension, MetaMask will ask you to complete a series of simple steps to set up a wallet for you. In the process, you’ll receive a secret phrase for accessing and managing your wallet. Make sure you store this secret phase safely (ideally both in a digital and physical space), and never share this publicly. If someone learns your secret phrase, they can then steal the assets in your wallet. We recommend creating a separate wallet address for development purposes, where your valuable assets wont be stored.


Switch to the Sepolia test network

Once your wallet is set up, navigate to the top-right of the wallet window and click on Show/Hide Test Networks. After showing test networks, you’ll see the drop-down option for Sepolia. Switch your network from Ethereum mainnet to Sepolia test network.

If this is your first time using a wallet, you should see a balance of 0 SepoliaETH. We’ll fund this wallet in a later step.


Node.js and npm

We’ll use Truffle to create the foundation of your project. Truffle is an industry-leading Ethereum development environment that allows you to create, test, and deploy smart contracts to EVM-based blockchains.

To use Truffle, you need to first install Node.js and npm. You can install both on your local machine by following these instructions.

You can verify their successful installations using the command line. (Your version numbers might be different from what’s shown below.)

$ node -v

v16.13.0

$ npm -v

9.1.1


Step #1: Obtain an Infura API key

As mentioned earlier, Infura is a tool that gives you easy, fast, and reliable access to most major public blockchains and L2s, including Ethereum. Infura does this by giving you access to RPC endpoints. Think of RPC endpoints as API endpoints to which you can send requests. In order to access these endpoints, you’ll need an Infura API key.


Create an account

To get an API key, you’ll first need to sign up for an Infura account that is free. Once you’ve signed up, you’ll be taken to the dashboard. This dashboard allows you to complete a variety of tasks, such as:

 * Create new API Keys
 * View analytics
 * Access support and other helpful resources
 * Setup project security
 * Upgrade your plan and activate add-on networks
 * Get network endpoints for mainnet and testnets
 * And more


Create API key

From the dashboard, click Create New API Key. This will open a pop-up form. For network, choose Web3 API. You can name the project anything you want.



Once you click Create, Infura will create a new API key for you and redirect you to the key’s dashboard page. Navigate to the Endpoints page for your key. project.

On this page, you’ll see all the RPC endpoints that you can access. Under Ethereum endpoints, select the endpoint for Sepolia. The endpoint should be of the format https://sepolia.infura.io/v3/[YOUR API KEY].


After this step, we recommend that you add your own RPC endpoint to MetaMask by adding a new customer network. This will allow you to track your MetaMask requests directly from the Infura dashboard and understand what is happening in the backend when you send transactions from your MetaMask wallet.


Step #2: Set up your development environment

With a MetaMask wallet and an Infura RPC endpoint in hand, you can begin setting up your development environment using Truffle.


Initialize a Node.js project

First, let’s set up a Node project and install all necessary packages. Create an empty Node repository by running the following commands:

$ mkdir infura-project && cd infura-project

$ npm init -y

Next, install Truffle:

$ npm -g install truffle

Remember that we installed MetaMask so that we could pay for transactions conducted on the blockchain. You’ll need to give Truffle access to your wallet so it can perform that action on your behalf. For this, you’ll need another package: hdwallet-provider.

$ npm install @truffle/hdwallet-provider

You’ll be sharing your wallet secret phrase with your Truffle project. Under no circumstance do we want these secrets to ever be made public. You should never hard-code your secret phrase or credentials into your project. Instead, provide them through environment variables.

We’ll use dotenv  and gitignore to do this. This prevents you from being committed to version control systems and reduces the risk of accidental exposure when sharing code repositories like GitHub.

$ npm install dotenv

Touch .env 

Add your project keys here, and wallet address.

touch .gitignore

Next, add “.env” to make sure GitHub doesn’t include the file containing your keys publicly.


Create a Truffle project

Now, we can create a barebones Truffle project. Run the following command from within your Node.js project root folder:

$ npx truffle init

To ensure that everything works correctly, run the following command:

$ npx truffle test


Compiling your contracts...

===========================

> Everything is up to date, there is nothing to compile.

✓ Downloading compiler. Attempt #1.


  0 passing (1ms)

If you don’t receive any errors, you can proceed with your project. If you have any issues, check out the Truffle support and help page.

In your project, you should now see a contracts subfolder. Within this folder, let’s create an extremely simple smart contract in a file called Donations.sol. This contract does the following:

 1. Allow anyone to make a donation.
 2. Allow the owner of the contract to withdraw all the donations made.

The code Donations.sol should look like this:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Donations {
  address public owner;

  constructor() {
    owner = msg.sender;
  }

  // Function to donate
  function donate() public payable {
    require(msg.value > 0, "Donation needs to be a positive value");
  }

  // Withdraw ether
  function withdraw() public payable {
    require(msg.sender == owner, "Only the owner can withdraw!");

    uint balance = address(this).balance;
    require(balance > 0, "No ether left to withdraw");

    (bool success, ) = (msg.sender).call{value: balance}("");
    require(success, "Transfer failed.");
  }
}

Compile the contract with the following command:

$ npx truffle compile


Compiling your contracts...

===========================

> Compiling ./contracts/Donations.sol

> Artifacts written to /home/user/infura-project/build/contracts

> Compiled successfully using:

   - solc: 0.8.20+commit.a1b79de6.Emscripten.clang


Configure Truffle and environment variables

Next, we’ll need a file to store our environment variables. This is where we’ll put your project secrets—namely, your MetaMask wallet secret phrase and the Sepolia RPC endpoint which contains your Infura API key.

In your project root folder, create a file called .env with the following information:

INFURA_ENDPOINT = "https://sepolia.infura.io/v3/<Your-API-Key>"

MNEMONIC = "<Your-MetaMask-Secret-Recovery-Phrase>"

Next, let’s inject this information and configure your Truffle project. Replace the contents of truffle.config.js with the following:

require('dotenv').config();

const HDWalletProvider = require('@truffle/hdwallet-provider');

const { INFURA_ENDPOINT, MNEMONIC } = process.env;


module.exports = {

  networks: {

    development: {

      host: "127.0.0.1",

      port: 8545,

      network_id: "*"

    },

    sepolia: {

      provider: () => new HDWalletProvider(MNEMONIC, INFURA_ENDPOINT),

      network_id: '11155111',

    },

  },

  compilers: {

    solc: {

      version: "0.8.19",

    }

  }

};


Step #3: Deploy your smart contract to Sepolia

Now that we’ve configured our Truffle project and written the smart contract, we can deploy it to the Sepolia blockchain.


Use the Infura faucet to get some test SepoliaETH

Although we’ve set up your MetaMask wallet and configured it to use the Sepolia network, your wallet balance is still 0 SepoliaETH. In order to conduct any transactions—such as deploying your contract, making donations, and even retrieving donations—you’ll be required to pay gas. So, you’ll need some SepoliaETH in your wallet.

Since we’re deploying our contract to a test network (Sepolia), you can obtain these tokens for free through the Infura Sepolia faucet.

Once you’ve filled up your wallet, you should see a small SepoliaETH balance.



Deploy smart contract to Sepolia

In order to deploy your contract to Sepolia, we’ll write a script called 1_deploy_contract.js. Create the file in the migrations folder and paste in the following code:

const Donations = artifacts.require("Donations");


module.exports = async function (deployer) {

    try {

        // Deploy the Donations contract

        await deployer.deploy(Donations);


        // Get the deployed instance

        const donationsInstance = await Donations.deployed();


        console.log("Donations contract deployed at:", donationsInstance.address);

    } catch (error) {

        console.error("Error deploying the contract:", error);

    }

};

Then, deploy the smart contract:

$ npx truffle migrate --network sepolia

If all goes well, you should see output that looks something like this:

Compiling your contracts...

===========================

> Everything is up to date, there is nothing to compile.



Migrations dry-run (simulation)

===============================

> Network name:    'sepolia-fork'

> Network id:      11155111

> Block gas limit: 30000000 (0x1c9c380)


…


Starting migrations...

======================

> Network name:    'sepolia'

> Network id:      11155111

> Block gas limit: 30000000 (0x1c9c380)



1_deploy_contract.js

====================


   Deploying 'Donations'

   ---------------------

   > transaction hash:    0xab4650f9fb25379fcb7d95e18c42f3235069566da2cb75d5f654e7b9a5100f3b

   > Blocks: 0            Seconds: 20

   > contract address:    0xb658FB9c330381a059e8A14363F71fb7D4648f2A

   > block number:        3558024

   > block timestamp:     1685040444

   > account:             0x147A4cb54D7181222B7E10a91A492d5b4892b4aC

   > balance:             0.499121902496838849

   > gas used:            351239 (0x55c07)

   > gas price:           2.500000009 gwei

   > value sent:          0 ETH

   > total cost:          0.000878097503161151 ETH


Donations contract deployed at: 0xb658FB9c330381a059e8A14363F71fb7D4648f2A

   > Saving artifacts

   -------------------------------------

   > Total cost:     0.000878097503161151 ETH


Summary

=======

> Total deployments:   1

> Final cost:          0.000878097503161151 ETH


Congratulations! Your contract is now live! You can double-check this by searching for your contract address on Sepolia Etherscan.

You can also verify your contract on Etherscan by uploading the source code, which Etherscan will match and compare against the code on the blockchain. On the Etherscan page, click the Contract tab and then click Verify and Publish.

After this verification is complete, you’ll see the green check mark over the Contract tab.


Step #4: Send a transaction using MetaMask

Now let’s donate a small amount (0.001 ETH) to this contract. Navigate to the Contract tab and then to the Write Contract tab. Click on Connect to Web3.

This will open a modal to prompt you to connect to a wallet. Select your MetaMask wallet.

Once your wallet is connected, you can click donate. Enter an amount to donate (0.001), and then click Write.

Your MetaMask wallet will pop up, and you’ll be asked to confirm this transaction. Click Confirm.



After you’ve confirmed the transaction, you can view the transaction details. The list of transactions for the smart contract also shows the recent transaction.


And that’s it! With just a few clicks, you were able to make a donation through MetaMask on your smart contract. Every single step in the process was powered by Infura.


Step #5: Track smart contract activity on the Infura dashboard

To see the work done by Infura under the hood, you can check out the analytics associated with our Infura project. Navigate to the main Infura dashboard, find your project, and click View Stats.

If this is a project that you’ve just created, change the timeline to Last 1 Hour.

You will be able to see the number of requests made during that window.

You should also be able to see the specific requests made to the Sepolia Ethereum blockchain. On the surface, you’ve only made a few clicks, but hundreds of requests have been propagated to make what we wanted to do possible.

To also see your MetaMask transactions, you will need to update your MetaMask RPC endpoint by switching from the default MetaMask RPC to your Infura one.


Step #6: Start building

Infura simplifies your job as a blockchain developer by allowing you to connect to different blockchain networks without having to run your own nodes. This takes care of the scalability, uptime, and the reliability of your dapp so you can focus on the core logic of your business or product.

Now that you’re set up, let’s start building with the following resources:

 * How to Choose the Right Blockchain for your Application
 * The Developer’s Guide to the Web3 Stack
 * Full Stack Frontend using IPFS
 * Infura NFT API + SDK
 * Infura Help Center
 * Infura Discord

Stay up to update on all Infura product releases and news by following us on Twitter.

Infura product tips and Web3 tutorials for developers building decentralized applications.

Infura Developer Tutorials

Tutorials

Getting Started With Infura

So, why would you need a hybrid infrastructure model alongside Infura?

Let’s think about how your database is set up. You probably have your own database, which is great. What happens if that database goes down? Would your app continue to run seamlessly, delivering the experience you want your customers to get? Or, would your database shutdown cause outages and crashes in your app?

If the dataset you’re hosting is a public dataset, you have a new paradigm for making your infrastructure much more resilient and reliable by integrating Infura into your overall strategy. Infura implements a reverse proxy pattern internally and can be a highly reliable and performant node in your infrastructure stack, allowing you the ability to have a portion (or all) of your traffic routed to Infura.

You can choose to keep your database as your primary database with Infura as a backup, or vice versa. In this way, Infura will act as an always-on backup for your database, providing a level of flexibility previously not available with a single database running.

You also have the opportunity to use Infura as a stats comparison tool to make sure your performance is up to par. Alternatively, you may need to handle more load (request traffic) than your infrastructure can currently handle. You can route the overflow to an Infura project ID to handle spikes in traffic so your service stays up and running.

There are many opportunities for you to use Infura alongside your own in-house node infrastructure to improve your user experience. Let’s dive a little deeper on how we accomplish this.


What does it mean when Infura implements a reverse proxy pattern?

Let’s review what a normal proxy is first, and then we’ll flip it and reverse it, a la Missy Elliott, to talk about the reverse proxy. A proxy server (or web proxy or forward proxy) is a server located in front of a group of client machines (computers). When those computers make requests, the proxy server intercepts those requests and communicates with the target web servers on behalf of those clients. Basically, a proxy is a fancy word for a request/response middleman.

If you’re a visual learner, here’s a diagram from Cloudflare that shows just where that forward proxy sits:


What is a reverse proxy?

A reverse proxy is a server that typically sits on the edge of your infrastructure. It is responsible for receiving requests from web clients and subsequently routing them to one or more backend web servers.

Here’s another great diagram from Cloudflare to show how the reverse proxy fits in to the whole flow:




One of the main reasons to use a reverse proxy server is load balancing, ensuring the flow of traffic between clients and servers remains smooth. This is one of the main advantages of using both your own node and Infura. In addition, it allows you to cache content and provides web acceleration for improved performance. Lastly, reverse proxies allow for more efficient, secure SSL encryption and protection from DDoS attacks and related security issues.

As we previously mentioned, Infura can be used as a reverse proxy to assist with ensuring the flow of traffic for your clients and servers stays as smooth as possible, making for a more enjoyable user experience.


Some examples of a reverse proxy in action

Let’s first look at how we can set up a very simple reverse proxy using Caddy.

We will use our localhost and a backend HTTP service running on 127.0.0.1:9000 to make sure we’re getting our reverse proxy working correctly.

First, download Caddy. Once that’s downloaded, check out their Getting Started guide here. Or, follow along to learn how to set up a simple reverse proxy!


At this point, you may be running your own node, but since it takes too long to sync one for this article, we can substitute with a simple NodeJS stub to check that our reverse proxy is working correctly. I simply named mine main.js.


const http = require('http');

const hostname = '127.0.0.1';
const port = 9000;

const server = http.createServer((req, res) => {
   res.statusCode = 200;
   res.setHeader('Content-Type', 'text/plain');
   res.end('Reverse proxy success!\n');
});

server.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
});



This sets up a backend HTTP service running on 127.0.0.1:9000 mentioned earlier and will display a “Reverse proxy success!” message if our proxy is working correctly. To start this, run `node main.js` in a different terminal window and leave that connection open!

Next, we will want to create a Caddyfile (literally create a new text file in whatever directory you’re working in and name it Caddyfile). Once you have that set up, we will set up our simple reverse proxy itself inside the Caddyfile with just two lines:

localhost 

reverse_proxy 127.0.0.1:9000



In this instance, reverse_proxy is where we want to get our information from (the original site), and localhost is where we are redirecting to using our reverse proxy.

Now, from the same directory as your Caddyfile in a new terminal window from your `node main.js`, run:  

caddy run



This will start the caddy server and will allow your reverse proxy to work! Now, you’ll notice when you run this that you don’t see the “Reverse proxy success!” message popping up.

That’s because this just started the server. You now need to make a request to “https://localhost” and you’ll see the message. To do this, open another terminal window (that makes three now, for those of us keeping track), and simply run:

curl https://localhost



Running this command will give you the “Reverse proxy success!” message we were looking for, and now you know you’ve successfully set up a simple reverse proxy.


Enter Infura!

Now that we’ve gotten a basic reverse proxy up and running, let’s try one using an Infura endpoint. We will keep our overall setup of using a Caddyfile the same, but we won’t need the backend HTTP service running in the background, as that will be switched to an Infura endpoint.

We’re going to change up how our Caddyfile looks:

localhost 

reverse_proxy https://rinkeby.infura.io {
   header_up Host {/v3/<YOUR_PROJECT_ID>}
}



You will notice that we’ve added in a “header_up Host” inside the reverse_proxy section. This allows us to include our Project ID to both the Rinkeby endpoint and the localhost endpoint we are proxying to.

To test this out, we will need to send a request, so I used web3_clientVersion as an example:

curl https://localhost/v3/<YOUR_PROJECT_ID> \
-X POST \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"web3_clientVersion","params": [],"id":1}'



When we run this, we get the following output:

{"jsonrpc":"2.0","id":1,"result":"Geth/v1.10.8-omnibus-aef5bfb3/linux-amd64/go1.16.7"}



Cool! But how do I know my reverse proxy is working? Well, if you switch out `localhost` in our curl command to `rinkeby.infura.io`, you get the same output, which shows that our reverse proxy is running properly.


How do you use Infura as a backup for your own node?

We’re going to set things up initially the same as we did in the previous example but with two upstreams, one to our localhost and the other to the Infura node.

Next, we’re going to set up load balancing. Now, what’s load balancing? Load balancing acts like a traffic cop sitting in front of your application servers, routing client requests across all the servers that can fulfill those requests quickly and efficiently.

So how do we set that up?

Since we’re using Caddy, we can refer to their docs for the basics of how to use more than one upstream. When we look at lb_policy, there are many ways to determine which upstream Caddy will use first. Caddy will default to using the first listed upstream and will move down the list if the servers stop responding. In our example, we want to have localhost:9000 from our main.js file be the first upstream, meaning we want our reverse proxy to send the data through our localhost first, so we will identify that by putting it first in our list of upstreams (we will leave our Infura Rinkeby endpoint in as the second upstream):

localhost

reverse_proxy localhost:9000 https://rinkeby.infura.io {
   header_up Host {/v3/66172ed429624788ac264604755ba42c}
}



Since we are using the localhost:9000 port, we want to get that server back up and running. In another terminal window, start the Node server with node main.js.

To make sure everything is set up correctly, let’s run our request through by running the same request from earlier but with the :9000 port included, expecting to get the “Reverse proxy success!” message:

curl http://localhost:3000/v3/<YOUR_PROJECT_ID> \
-X POST \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"web3_clientVersion","params": [],"id":1}'



and we get the following output:

Reverse proxy success!



Excellent! Now, how do we incorporate the Infura endpoint to be a fallback?

You’ll notice we left the Infura endpoint in our Caddyfile where it originally stood and we asked our proxy to load balance using the first upstream (our localhost), which was how we got that “Reverse proxy success!” message.

Now that we confirmed that we set everything up correctly on our end, we’re going to kill the localhost server, mimicking what would happen if your private node went down. Once we do that, our requests should automatically start routing to the Infura node and we should get something similar to the below output:

{"jsonrpc":"2.0","id":1,"result":"Geth/v1.10.8-omnibus-aef5bfb3/linux-amd64/go1.16.7"}* Closing connection 0



But wait! We don’t get that! Instead, we get an error message.

This is because Caddy only allows us to use either two HTTP or two HTTPS endpoints - in our case, localhost is HTTP and our Infura endpoint is HTTPS.

Luckily, there is a tool we can use to make this work with localhost that will create a TLS certificate and sign it with a CA trusted locally by your device and browser. That tool is called mkcert, and it’s incredibly easy to install by following these steps.

Keep in mind if you’re doing this with your own private HTTPS node, you likely will not need this additional step.

If you are following our tutorial step-by-step (using localhost), be sure to follow all the steps, including updating your main.js file to the below to include the HTTPS requirement and the options constant.

const https = require('https');
const fs = require('fs')
const options = {
   key: fs.readFileSync('<PATH_TO_CERTIFICATE-KEY_FILE>.pem'),
   cert: fs.readFileSync('<PATH_TO_CERTIFICATE_FILE>.pem')
};

const hostname = '127.0.0.1';
const port = 9000;

const server = https.createServer(options, function(req, res) {
   res.statusCode = 200;
   res.setHeader('Content-Type', 'text/plain');
   setTimeout(() => {res.end('Reverse proxy success!\n');}, 1000)
});

server.listen(port, hostname, () => {
   console.log(`Server running at https://${hostname}:${port}/`);
});



When you run the mkcert localhost command from the tutorial, the certificate key file and certificate file used in the code above will be created.

Now that we have our localhost running with HTTPS, we can continue! Since we are running everything with HTTPS, we need to update our Caddyfile to reflect those changes.

localhost:3000 

reverse_proxy https://localhost:9000 https://rinkeby.infura.io {
   header_up Host {/v3/66172ed429624788ac264604755ba42c}
}



Now that we have all our files in order, let’s make sure our Node.js server is running and send that request again.

curl http://localhost:3000/v3/<YOUR_PROJECT_ID> \
-X POST \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"web3_clientVersion","params": [],"id":1}'



What do we get?

Reverse proxy success!



Perfect! That’s exactly what we want to get, as we have asked our reverse proxy to go to https://localhost:9000 first.

Now, what happens if we kill the Node server and send our request again? Remember last time we did this, we got an error message. This time we should be getting the result from our Infura Rinkeby node:

{"jsonrpc":"2.0","id":1,"result":"Geth/v1.10.8-omnibus-aef5bfb3/linux-amd64/go1.16.7"}



Success!

Our reverse proxy is, in essence, ignoring the localhost node, as it’s not functioning, and is defaulting to the Infura Rinkeby node!

Super easy, right? Now you know how to use Infura as a backup node to keep your services up and running smoothly!


Where can I learn more about reverse proxies?

Take a look at our client story from MakerDAO. They currently use Infura for a multitude of reasons, including using us as a backup node solution to ensure all developers can use the MakerDAO toolkit!

Another great example is the Polygon PoS network. We initially began working with Polygon to share some traffic load for their network, allowing users to access the Polygon networks via Infura endpoints and effectively ensuring their network remains fast and functional, regardless of traffic spikes they may see. We have since increased our partnership so we are now handling 100% of their network traffic.

Check out this blog post highlighting multiple companies across all verticals using a hybrid infrastructure model of their own nodes plus Infura. Get some ideas on how we can help you accomplish your needs, from verifying transactions to providing backup database services!

If you would like to run an Infura node in addition to your own, sign up for a free trial today.

How to Run Your Own Node AND an Infura Node

When enterprise developers build dapps on Ethereum, they often have to consider the entire tech stack and development process. The list of considerations range from application features such as Web2 interfaces to deployment, which is usually on a permissioned network hosted by a preferred cloud provider. Since most full-stack software engineers build off of SDKs and API calls, it’s important to establish the value of the application with consideration of the deployment network.



Get the best of both Web2 and Web3 worlds

Many enterprise blockchain business cases build on the principles of traditional Web2 development. Web2 focuses on operating with a fluid user experience with attention to detail on scalable and responsive code on multiple devices. A valuable decentralized application (dapp) in Web3 redesigns the economics and industry roles while building on complementary existing systems -- instead of fully replacing those systems with analogous Web3 features.

Say you would like to reinvent a syndicated loans issuance platform such as IPREO. This effort would require significant IT resources to spin up a minimum viable product from the ground up if you’re recreating features like tranche issuance calculations or calendar date exceptions. Instead, consider a path to lesser resistance: blockchain modules that connect these digital assets to new liquidity networks. The functionality is a re-issuance of an existing financial instrument to ABC network with a listing on XYZ automatic market maker rather than the full end-to-end dashboard.

To connect to pockets of liquidity, an enterprise developer must deploy with the same smart contract language that is compatible with the Ethereum Virtual Machine (EVM) and look to bridge the assets to networks with the desired investor and issuer markets.


Why build on public Ethereum?

Until now, publishing enterprise dapps on Ethereum requires significant system integration, executive buy-in and high set-up costs. Recently, we have seen more public blockchains working with enterprises to cover non-functional technical needs in order to meet minimum requirements of security audits and performance. However, the relatively tribal nature of the blockchain developer subculture means that mainstream enterprises are still conservative when it comes to building on Ethereum.

If you are an enterprise developer, consider the following advantages of building on public Ethereum vs. permissioned networks:

1. Faster setup and lower total cost of ownership

2. Immutability and longevity of the data stored with thousands of independent nodes

3. Composability and low barrier of entry to decentralized finance (DeFi)




1. Faster set-up and lower total cost of ownership

This is a standard private blockchain journey for a consortium:

After you develop your dapp, a lot of time is focused on node deployment adhering to enterprise software standards. On the business side, you are also trying to build a consortium to agree on the benefits and adoption before the tech is tested.

The consortium model usually chooses a separate tech vendor that does not have single ownership from one consortium member to prevent conflicts of interest. The tech vendor determining deployment and long-term support likely runs the Ethereum nodes on behalf of participants. This will get the product to market faster and focus on the business benefits.

The last step involves time and licenses for adding more nodes and mutualizing infrastructure costs across participants. Compared with private networks that remove tokens from their operation, public networks require ownership of native tokens to fund transactions. This gas cost pays for the infrastructure -- third parties running full nodes and running operations for mining/validating. In my time building enterprise projects, we have never seen this happen.

The public journey is much more straightforward. After you develop your dapp, the deployment is a choice between public networks with updated configurations on your Truffle setup. The added complexity is the gas costs for funding and running your transactions on this network.

To simplify connectivity to EVM-compatible networks, you can use Infura’s Ethereum API to connect your app instantly with a single line of code. Simplify your transaction management with Infura Transactions (ITX) using prepaid accounts without holding ETH on your balance sheets. ITX is a transaction relayer that manages your transactions to prevent dropped or stuck transactions.

You will also likely want to work with a team such as Diligence that can audit your contracts and monitor them when they’re live.

Public Ethereum has an overall lower total cost of ownership when you compare the operational cost of running a system on mainnet rather than focusing on the ownership and maintenance of the network itself.

A consortium may have more control in the private chain and face less security and treasury reviews at first. However, your infrastructure overhead and negotiations on consortium network matters tend to outweigh the convenience and added features of connecting to mainnet.


2. Immutability and Longevity

The Ethereum mainnet is secured by the interaction of thousands of independent nodes run by individuals and miners throughout the world. Private chains typically have a small number of nodes controlled by one or a few organizations. Those nodes can be tightly controlled, but only a few need to be compromised in order to rewrite the chain or commit fraudulent transactions.

At ConsenSys, we’ve recommended public networks to enterprise developers for their resilience of replicated data as you are able to recover more quickly with a larger network of more than 15,000 independent nodes. The more peers you have, the easier it is to find a seed and fully recover your recorded transactions. In consensus decisions, the more blockchain validators there are to verify transactions, the more difficult it is to coordinate a majority decision that may lead to an attack.

In a permissioned network, the security is governed by the node with the least security. Your network is only as secure as the weakest link. Any added nodes to the network may also increase the surface area of attack. Most institutions will recommend a base software security test in order to join as a full node owner. The node owner will have to pass standard penetration testing to prevent any hacking on the node in case it is a bad actor to the entire network.


3. Composability and Low Barrier to Entry on DeFi


The Ethereum network powers a vibrant ecosystem of third party applications and technology including DeFi and NFTs. A highly composable and interoperable system allows you to connect to DeFi to build financial products that enable and combine multiple apps to match specific user needs. The Ethereum mainnet offers enterprise developers the ability to gain access to market liquidity and provide innovative ways for users to participate in the exchange, trading or growth of that liquidity.

When we say composable, it’s much more than just an open banking API. It’s a set of open source live protocol contracts that can be called and extended. We’ve seen pure forks of open source code like with Uniswap to get sushiswap. The market has seen countless copies of DeFi models such as Compound and Aave, and it doesn’t look like things are slowing down anytime soon.

There’s more and more real value happening in DeFi leading us to believe that cryptocurrencies are not a fad. It is here to stay.

Watch Clemens’ presentation “Pitching Public Ethereum to Enterprises” at EdCon 2021.

Interested in building on Ethereum? Contact us to get support on starting your enterprise project.

3 things enterprise developers should consider when deploying on Ethereum

Are you excited by blockchain but don’t have a great deal of experience coding? It can be easy to fall down a rabbit hole of technical tutorials that make assumptions regarding your initial development knowledge. A particularly important topic to grasp is basic security within your code.

As you begin to build out your very own dApp, you will have to include information such as an Infura API key, along with a mnemonic.

If you are new to coding, this is the equivalent of giving a stranger your social security number and keys to your home. Once this information is public, there is no definitive way to ensure it hasn’t been captured by a person or web crawler, which could result in malicious behavior.

So, how can we address this?

Thankfully, we can use dotenv along with git to protect our sensitive information within our project when / if we push to github.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env, storing configuration in the environment separate from the code. It is often a convention for environment variables to be stored in a .env file or other mechanisms based on the server you are using.

Note: This article will focus on building out a project using Truffle and Infura.

In our project, we will need to run the following command:

npm i dotenv


Once the process in our terminal has been completed, we will want to make sure we have the dependency successfully installed. Head over to your package.json file and check to ensure that dotenv has been added under dependencies.

Next, at the root of our project, let’s create a .env file:

Here is where you will add all of the sensitive information that should not be shared.

We will make sure we can access our .env information in our truffle.config file. At the top of the truffle.config file, add the following:

require("dotenv").config


This will tell your project to load anything that is in the .env into an environment variable, granting you access to it.

Now, instead of having to put our Infura api key or mnemonic in an exposed file, we can import that information from our .env file.

When it comes to gaining access to our project key we are going to use, sign up to Infura and create a project. In your dashboard, you should see something similar to this:

The following code is an example between the usage of .env and exposed information within truffle.config:

const HDWalletProvider = require('@truffle/hdwallet-provider');

const infuraURL = 'https://rinkeby.infura.io/v3/<project id here>'

const mnemonic = "Your mnemonic here"


rinkeby: {

provider: () => new HDWalletProvider (mnemonic, infuraURL),

network_id: 4,

gas: 5500000,

confirmations: 2,

timeoutBlocks: 200,

skipDryRun: true

},


Imagine if you pushed this up to github. Anyone would have the ability to open your truffle.config file could take advantage of your exposed mnemonic and project id from Infura.

Let’s take a look at that same code and implement better security practices.

Notice how we are calling upon the information without having to directly add to our file.

One important detail, as of now even with an .env file: if you push this project to github, it will show the .env file, which would defeat the purpose!

Take a look for yourself.

This is where .gitignore comes into play. We will need to create a .gitignore file, so we can push this project up to github.

Without getting into git, a quick summary could be git is version control software that keeps track of all of your files and the versions of them. What .gitignore does is it tells git not to keep track of this file along with everything it contains.

If you want to dive deeper into git along with other foundational material, have a look at our Basic Training, a free course that helps ensure you have the fundamental tools when developing.

At our root (similar to the level our .env file lives), we will create a .gitignore. Inside of that file, we will add .env along with any other files you would rather not be pushed to github.

We can now push our project up to github and notice that our .env file is no longer exposed. Our sensitive information is now much more secure.

If you are experimenting with this, make sure you add your .env file to your .gitignore before pushing.

If you are running into issues, remember gitignore ignores only untracked files. If your files were committed in the past, they are now tracked by git. To ignore them, you first need to delete said files, git rm them, commit and then ignore.

Otherwise, you can delete the .env file and run

Git rm .env --cached


Here is a helpful link discussing the removal of sensitive data from a repo if it was previously committed and discusses how to clean the git history. Savvy attackers don't just look at the most recent repository info, they'll look at the history of it as well.

Note: If you come across it in documentation, a question you might have is
“What is env. example”

An env. example file, on the contrary to this tutorial, is actually included in the repository, it is used as an example file for you to know what KEY=VALUE pairs you need for your project. Most often, it is used to copy the .env file and then change the values.

Example of execution:
Enter to the project root directory using your terminal.

Check if .env the file exists or not.

If the file does not exist then create a file named .env.

Now execute the command

cp .env.local .env.


So the .env.sample file has all the ENV declarations defined but without their values. It helps other developers establish/set up the project without having to reverse-engineer the codebase.

So after git clone, you usually execute the command `cp .env.sample .env` and fill in the values with the Infura credentials as we saw in the example above.

Note: When you create a new repo using github, if you scroll down you should see the option to include a .gitignore file so you don’t have to create one yourself in the future.

Hopefully, you found this article on basic security practices helpful as you begin to develop your very own projects. Feel free to join our Discord if you want to continue the conversation, share projects, ideas, and join the community!

Start here with a free Infura account >

How to Use .env to Enhance Basic Security Within Your DApp

Optimistic Ethereum is a rollup scaling solution that allows users to submit transactions on the Ethereum network and get them executed faster for a much lower gas cost. From the perspectives of users and developers, this is a "parallel universe" called Layer 2, or L2, where users typically have the same addresses as they do on the Ethereum blockchain (also called Layer 1 or L1). There are gateways that allow messages and assets to be transferred between the universes.

The Optimism network API largely uses the same JSON-RPC specification as Ethereum and Infura supports all the necessary API methods for building a fully functional application on the Optimistic Ethereum network.


Why are transactions cheaper on Optimism?

On L1 Ethereum, thousands of nodes run your transaction to verify that the proposed block that includes it is valid. This process is expensive and has to be paid for. Unlike on L1 Ethereum, Optimistic roll ups provide faster and cheaper transactions because it allows users to perform most of their tasks off-chain in a "layer 2" protocol. On Optimistic Ethereum, the smart contract has only two tasks: deposits/withdrawals and verifying proofs of transactions on chain. This makes the process more efficient and a lot cheaper.


Why is this safe?

The great thing about decentralization is you can trust that transactions are executed correctly because there are thousands of computers executing them. Honest miners would reject such a transaction. With rollups, you don't have that level of redundancy.

The answer, in the case of optimistic rollups, is incentives. Every node in the network has to put up a stake before it can propose a new block with the execution results of a transaction. Every other node can check up on those results, and if it thinks they are incorrect, dispute them. The dispute is resolved on L1, so it is as trustworthy as anything else in Ethereum. Whichever node lies, either proposer or disputer, loses its stake and most of it goes to the other node involved.

Of course, the whole point is to avoid running transactions in L1. This system achieves that by making it pointless to cheat. Any proposer who attempts to cheat is going to be caught by the other nodes, lose its stake, and not get the invalid transaction result accepted as valid. A disputer can force a single transaction to go into L1 arbitration as a denial of service attack, but the stake is high enough that it wouldn't be worth doing.


How does Infura work with Optimism?

Infura exposes endpoints for Optimistic Ethereum (the production network) and Optimistic Kovan (the test network). You use them the same way you use any other network, by selecting them from the menu and using the specified endpoint.

There are a few small differences between building on Layer 1 Ethereum and Optimism:

1. You must use the JSON-RPC API as we do not support Websockets yet.
2. Search filters are not yet supported


How to Get Started on Optimism...



The main difference between Optimism and regular L1 Ethereum (other than the cost) is the access point URL.

| Network          | RPC URL |


… If you are using the Truffle development environment

Infura users can add the free Truffle Optimism add-on directly on their Infura dashboard. The Truffle Optimism box also contains the configuration definitions required to use Infura. Currently, you will need to manually add the gas costs of transactions when you use Truffle to run deployments or tests on Optimistic Kovan or the main Optimistic Ethereum network.


… If you are using Hardhat

To use Optimistic Ethereum or Kovan, edit hardhat.config.js's modules.export.networks to add these definitions:

"optimistic-kovan": {
    url: 'https://optimism-kovan.infura.io/v3/<Infura Project ID>',
    accounts: { mnemonic: <your account mnemonic goes here> },
    gasPrice: 15000000,
    ovm: true // This sets the network as using the ovm and ensure
                      // contract will be compiled against that.
},
"optimistic-ethereum": {
  url: 'https://optimism-mainnet.infura.io/v3/<Infura Project ID>',
  accounts: { mnemonic: <your account mnemonic goes here> },
  gasPrice: 15000000,
  ovm: true // This sets the network as using the ovm and ensure
                    // contract will be compiled against that.
}



Then you simply run:

npx hardhat --network optimistic-<kovan or ethereum> <command>



… If you are using Remix

When you use the Remix Optimism plugin to develop for Optimism, network connections are created through the wallet. If you use MetaMask, you can select the network Custom RPC and fill in the details:

What is Optimistic Ethereum?

Infura now supports additional networks including Arbitrum, Optimism and Polygon.

All three projects are essentially new blockchain networks. They offer low transaction fees and faster confirmation times compared to Ethereum. Crucially, they extend the utility of Ethereum as users can transact using their assets that fundamentally reside on Ethereum.

This scaling approach is called off-chain protocols and we have put together a short post to help explain how they help to scale (and extend the utility) of Ethereum.


Why not just transact on Ethereum? What is the scalability bottleneck?

Ethereum supports around 15 transactions per second and as seen in Figure 1 the network fees tend to skyrocket when users exceed the network’s throughput ceiling. In some ways, the throughput limitation is self-imposed by the community in the pursuit of decentralization.

The goal for decentralization is to maximise the percentage of the world’s population who can verify the blockchain’s integrity (and transactions) in real-time. This goal is essential to minimise the trust in block producers as the community can self-enforce the set of consensus rules that govern the validity of blocks. Depending on the target percentage of the world’s population, there is a limit to the computational, storage and bandwidth available to the network for processing transactions.

Our challenge as a community is to figure out how to increase the network’s throughput while adhering to the imposed resource constraints.


Why should we care about off-chain protocols like sidechains or rollups?

Most approaches to scale the network focus on:

 * Distributing verification. The verification task is distributed amongst nodes on the network as opposed to requiring all nodes to replicate the same work (Ethereum today).
 * Better utilize the network's available resources. The network's resources should be continuously utilised and not allowed to sit idle. For example, short block intervals to better utilize bandwidth.  

Scaling solutions still remain a few years away from adoption as they require major changes to the underlying Ethereum protocol.

An alternative and popular scaling approach, off-chain protocols, is a solution that is immediately available. It scales the network in a following way:

Off-chain protocols: Transaction processing is moved away from Ethereum to another network while still transacting with the same assets that reside on Ethereum.

We consider this a scaling solution as other blockchain networks are not limited by the same resource constraints as Ethereum. They can experiment with various scaling protocols (or simply test the limits of go-ethereum) while extending the utility of Ethereum.


Where are my assets held when transferred to another network?

A bridge contract is responsible for holding the user’s assets on one blockchain (Ethereum) and notifying the other network to mint an equal quantity of coins for the user. Once minted, the user can transact on the other network and eventually withdraw their funds back to the original blockchain (Ethereum) via the bridge contract.

Not all bridge contracts are equal. We must consider the bridge contract's process for deciding when to release funds back to the user. Ideally, the funds should only be released if the bridge contract is convinced the other network is not compromised. This is called the underlying trust assumption that ultimately protects the user’s funds. It can often cause controversy when discussing whether an off-chain protocol is truly scaling Ethereum.

On one hand, some users only consider a new blockchain network a scalability solution if the other network can retain the same (or very close to) security of Ethereum.  Protocols that can achieve this level of security are often called rollups. Whereas, other users will be satisfied with stronger trust assumptions as long as the funds locked into the other network are secure enough (sidechains).

Rollups, that retain the same security as the main-chain, will require more resources from Ethereum. For example, every transaction on the rollup network generates a state update that is published to the bridge contract. Whereas a side-chain does not necessarily require significant resources from Ethereum as validation of transactions is performed by a set of external parties. This trade-off on security/resources will be felt financially by the users and as a result there is no free-lunch.

Regardless, we believe that different bridge contracts will emerge and implement different degrees of trust. In the end, all blockchain networks which support transacting assets that reside on Ethereum will increase the utility of Ethereum. It is just important that users are aware of the trust assumptions and risks before deciding to lock funds into a bridge contract.


What is a sidechain?

The term sidechain originates from a paper by Blockstream. It was an interoperability solution to enable two blockchains to verify information about each other’s progress via light-weight proofs. The intention was to allow bitcoins to be locked in Bitcoin and to be released in the other network (and vice versa) without trusting any intermediary with the funds.

Over the years, the term sidechain has taken on a life of its own. It is often used to imply that an independent blockchain network has a relationship with another blockchain network. In practice, this is implemented with a bridge contract that allows assets to be moved from the main-chain (Ethereum) to another blockchain network.

There are three type of bridge contracts that are used for side-chains:

 * Single organisational. A single party has custody of the funds locked in the bridge contract.
 * Multi organisational. A fixed set of independent parties (K of N) has custody of funds that are locked.
 * Crypto-economic. A dynamic set of parties, determined by their weight in assets, have custody of the funds.

For example, WBTC is a single organisational bridge as the BTC is held by BitGo. The Liquid Network and RSK blockchain implement a multi-organisational bridge as an appointed set of parties will authorise assets to be moved across from one blockchain to another (i.e., implemented as a multi-sig). Polygon is a crypto-economic bridge as it relies on (⅔)+1 of stake to appoint validators who post periodic checkpoints about the network’s state to the bridge contract (and this checkpoint can be used to automate user withdrawals).

Crucially, the bridge contract for a sidechain does not verify the integrity of the other network and instead it relies on a set of parties to attest to its validity. It is assumed that at least a threshold of parties should have a financial incentive to remain honest and protect the user’s funds.

While the cost of a sidechain transaction consumes no additional Ethereum resources, the trade off is that the network will not retain the security of Ethereum and ultimately, trustlessness.


What is a rollup?

The term rollup originates from barry whitehat’s zkrollup and it emerged from the research on Plasma.

A rollup is still an independent blockchain network, but the transacted assets that reside on Ethereum are protected by the bridge contract. It must be continuously convinced the rollup network is not compromised and the funds are not at risk. In the worst-case, the bridge will bypass the other network and allow users to unwind and eventually withdraw their funds.

A rollup can retain the same (or very close to) the security of Ethereum and this is accomplished by solving the following problems:

 * Data availability. The bridge contract must be convinced that all data is publicly available. This allows anyone to independently compute the rollup’s stateful database.
 * State transition integrity. The bridge contract must be convinced that all state transitions (transactions) are valid.
 * Censorship-resistance. The bridge contract will self-enforce transaction inclusion to ensure a user can eventually withdraw their funds if the network is compromised (or no longer making progress).

As a quick summary on potential solutions. The data availability problem is solved by just posting all data to the Ethereum network and this is where the name rollup originates (to roll up the data). The state transition integrity problem is solved using a fraud proof (Optimistic rollup) or a validity proof (zero knowledge rollups) system. The censorship-resistance problem is a little trickier, and often not discussed, but it requires the bridge contract to self-force the inclusion and eventual execution of user-generated transactions.

There is an on-going financial cost for rollup. The network must continuously provide evidence to the bridge contract that all finalised transactions are valid and the network is not compromised. This consumes resources from Ethereum and impacts the scalability that is attainable by rollups. However in the immediate term, it can significantly reduce the cost of a transaction. For example, in Arbitrum, a swap costs 1,600 gas compared to 120,000 gas on Ethereum.


What is the difference between a sidechain and a rollup?

Sidechains, such as Polygon and rollups, such as Optimism and Arbitrum are just independent blockchain networks. They have their own set of block producers and smart contract environments. The core difference between a sidechain and a rollup is found in the bridge contract that locks funds from Ethereum onto the other network. Precisely, it is the trust assumption that protects the funds held by the bridge contract.

 * Sidechain. The bridge contract may receive information about the other network, but it does not validate its correctness. A set of parties who govern the bridge are responsible for checking the other network is not compromised and attesting this fact to the bridge contract.
 * Rollup. A set of parties (sequencers) are responsible for providing evidence about the state of the other network to the bridge contract. It is up to the bridge contract to validate the evidence’s correctness and to independently verify the other network is not compromised.

It is a subtle difference, but it boils down to whether the bridge contract can self-enforce the validity of transactions on the other network or if it must rely upon a trusted set of parties to attest that it is valid.

Of course, there is no free lunch. Rollup networks can retain the security of Ethereum, but it also consumes more resources of Ethereum. This increases the financial cost to transact on a rollup network compared to a side-chain.  As a user or developer, you will need to consider the security offered by the other network and the potential financial cost that it entails.

Choose a solution that best suits your use case.


How can I get started with rollups and sidechains?

You can check out our blog announcements for the networks we support which includes Arbitrum, Optimism and Polygon.

All networks adhere to the same JSON RPC standard as the Ethereum network and they support EMV-compatible smart contracts. You can activate the networks in your Infura account, update the provider URL and start interacting with the networks immediately.

Arbitrum and Optimism are still in beta and in the progress of preparing for their mainnet launch. You may need to contact the teams if you want to deploy a smart contract to their mainnet. Polygon is already launched and you can start deploying contracts immediately.

We hope you found this article about rollups and side-chains informative. At Infura, we have supported Ethereum for over 5 years and we are excited to now support new projects that extend the utility (and scalability) of Ethereum.

Off-chain protocols: Sidechains and Rollups

Last week, Protocol Labs gave us the opportunity to participate in the first ever IPFS Pinning Summit to share the past, present, and future for IPFS as an essential component of Infura’s Web3 development suite. For those of you who are familiar with Infura, you will know we have a long history of support for IPFS and we’d like to thank Protocol Labs for the opportunity to share our progress. Here’s a quick recap of what we spoke about.

Infura was formed in 2016 initially as a project to provide shared Ethereum node infrastructure to support other projects within ConsenSys. By providing a connection to the Ethereum network via an API endpoint, Infura freed up developers from having to manage that infrastructure themselves. While at the time, running an Ethereum node wasn't particularly difficult, scaling an application meant more nodes, more disk space, full-time infrastructure engineers, and ultimately more costs. We quickly realized that a service such as Infura would make building and scaling applications on Ethereum easier, and would be incredibly valuable for the ecosystem as a whole.


Ethereum is great for computation, but what about storage?

As decentralized, Web3 development design patterns began to emerge, it was quickly obvious that while Ethereum provided trustless computation, truly decentralized applications would need a storage solution to complement it. The S3 to EC2 if you will. Based on this, we decided to set up one of the first public IPFS APIs and Gateway alongside our Ethereum API to build the foundation of our Web3 development suite.

Over the last 4 years, we have worked with our community of developers to explore exciting use-cases, debug common issues, and serve IPFS as a key part of our Web3 strategy. We have worked with users storing documents, art assets, music, videos, social network information, photos, and so much more.


Our IPFS Service Today

We have primarily focused on making improvements to our underlying IPFS architecture in order to support the amazing adoption of this service.  We support pinning and accessing pinned content directly via the API and allow users to access data pinned across the IPFS network via the Gateway. We have supported over 40 million unique objects and are currently handling over 2 TB of data transfer per day.

We have also committed to providing contributions to the open source IPFS community. You can learn more about two of our internal tools, ipfs-pump and go-ipfs-datadog-plugin here.

Check out our documentation for a full list of our supported functionality.


What’s Next?

Looking forward, we are preparing for the launch of our premium IPFS product. This new product will expand on the current API and Gateway functionality, full dashboard and the latest auth integration, and an overall more reliable and scalable solution for developers with production ready applications. We will have much more on this in the coming months.

Subscribe to our newsletter so you can be the first to know when our new IPFS product has launched. As always, if you have questions or feature requests, you can join our community or reach out to us directly.

Infura Blog | Community News and Announcements

Infura Community News and Announcements

Community

What You Missed at IPFS Pinning Summit

Hey there 👋

We hope you’re keeping safe, healthy and productive during this unprecedented time. The Infura team has been hard at work, shaping some awesome new releases that are really going to excite the developer community, so make sure you subscribe to our newsletter to stay up-to-date.

This month’s roundup brings you new Web3 development tutorials, the chance to win $500 ETH, first dibs on our invite-only Eth2 testnet beta and more. Read on  👀


Eth 2.0 is coming - and so is our multi-client testnet Beacon Chain API Beta!

Apply Now For Invite-Only Access

In preparation for the launch of Ethereum 2.0, we’re planning a limited time release of Infura’s beta version Eth2 multi-client testnet API. This version will provide a Beacon Chain API and will be available by invite-only to a select group of existing Infura users. We are limiting this to a small set of users to help refine the product before making it more widely available. If you want the chance to help shape our Eth2 testnet API and utilize it for free, apply now and register your interest. Documentation will be sent out directly to users who are accepted into the beta.


New Web3 Tutorials Are Up!

Want to learn how to display real-time Ethereum data in a frontend? We show you just how easy it can be, using Infura and the Subspace library from the Status ‘Embark’ Project. Check out our latest tutorial.


State and Payment: Power Up Your App Using JS & Infura

Earlier this month, we participated in a livestream with Uniswap and ConsenSys Academy to walk through the process of developing responsive React frontends that take advantage of real-time Ethereum data and transactions. Our Developer Relations Lead Sean Brennan guided viewers through using Javascript, web3-react, and Infura in concert, while Ian Lapham from Uniswap shared code examples and key insights from his frontend team.
Missed the livestream? Don’t worry, you can view it here.


Improve Infura For Your Chance to Win $500 ETH!

Developers like you are always sharing ideas to help improve Infura - and we want to reward you for it. Help make our platform richer by contributing to our 2020 roadmap via this survey, and help us tailor products, support, and pricing more directly to your needs.

We know your time is precious. To show our appreciation for your constructive input, every Infura user who completes this survey will enter a draw to win a $500 worth of ETH, DAI or an Amazon Gift Card of equivalent value.


How to Save Time on DevOps and Scale With Infura: Lessons from Leading Ethereum Dapps

We have been taking the time to chat with some of our power users to understand more about how they utilize Infura’s cloud-hosted infrastructure to power the applications. Explore the range of ways that Ethereum development teams have been able to optimize their Infura usage to save time, money, and engineering resources across Crypto-Finance, Gaming and Dapp Development use cases.


Ethereal Virtual Summit is next week!

The Ethereal Summit is going virtual this year on May 7th and 8th to stream a hotly anticipated lineup of web3 speakers live to your living room! Register for your FREE ticket to access 2 days of keynotes, panels and roundtable discussions and 100+ speakers from the comfort of your couch. On Day 2, Infura’s Sean Brennan will demo Versus: our new open-source API benchmarking tool that lets you compare your workload across different node implementations and Web3 providers.

Our blog is a great way to stay up to date on all things Infura, but if you prefer a different format, you can subscribe to our newsletter or join us on Twitter. Remember, if you ever need a little help or have new feature ideas to share, head to the Infura Community forum or drop us an email here. We’re always happy to hear from you 😊

Cheers,

Team Infura

News

Infura April 2020 Update

In the previous post on frontend development, we ended with a website that allowed a user to connect via MetaMask and it displayed their account balance of Ether. Yet many Ethereum use-cases such as DeFi involve sending and receiving ERC20 tokens, which are tracked differently than native Ether. In this guide, we’ll show how to track a deployed contract’s transactions, and display and update those numbers in the frontend as they can potentially update in each new confirmed block. For this example, let’s track the Dai<>Eth trades on Uniswap.


To do this, we’ll use a library called Subspace from the Embark team at Status. Our preferred way to track real-time data is using React Hooks, so we’ll walk through setting up a frontend with Ethereum data streaming by working through Embark’s example code found here.  So in total this frontend uses Infura, React (with helper libraries), and Subspace.

 * This tutorial is a separate website from the prior frontend tutorial.  We’ll go through the important pieces of code but not all of it, so it’s recommended to clone the example repository and then run npm install and npm start in the root directory (or alternatively use yarn) which will get your website up on localhost:3000 . From there, we’ll see how adding more data tracking is easy with Hooks and useEffect().  
   

There’s only 3 important files to go over. To start, look in the short file of src/index.js, in it we have <SubspaceProvider> wrapping the entire App, which gives every component access to the web3 object, which is our connection to Ethereum through Infura as the web3 provider. We’ll set that up later in App.js to use Infura for the web3 connection.

const rootElement = document.getElementById('root')
ReactDOM.render(
  <SubspaceProvider web3={web3}>
    <App />
  </SubspaceProvider>,
  rootElement
);

In contracts/exchange_abi.json we have the ABI of Uniswap, which is a specification for the deployed Uniswap contract of every function that we have Subspace track. The ABI is specified in JSON, and we’ll use it for web3’s Contract object to interact with Uniswap throughout the dapp. Every deployed contract on Ethereum has an ABI, so you could add any existing contract to this frontend and track it’s transactions by knowing it’s ABI and the deployed contract’s address.


    {
        "name": "TokenPurchase",
        "inputs": [
            {
                "type": "address",
                "name": "buyer",
                "indexed": true
            },
            {
                "type": "uint256",
                "name": "eth_sold",
                "indexed": true
            },
  ... and a lot more

In App.js, we start by initializing the web3 object with our Infura connection. If you don’t have an API key, you can get one for free by signing up. Next, create a Contract object by combining the ABI and contract address of that ABI. This address is Uniswap’s contract that holds the Dai in its liquidity pool.

 * Note, you can now go back to index.js to add this same Infura URL as the Web3 provider there.

const web3 = new Web3("wss://mainnet.infura.io/ws/v3/806ce35b64344f04a9a7e47379d9ca41");
const dai = new web3.eth.Contract(exchangeABI, '0x2a1530C4C41db0B0b2bB646CB5Eb1A67b7158667');

In this next part, we set up the React state variables that Subspace will use. The subspace object is created from useSubspace(), and we pass in the Contract object we just created. Then a couple definitions for helping work with values in wei coming from the transactions.

function App(props) {

    const subspace = useSubspace();
    const daiContract = subspace.contract(dai);

    const [txnObserver, setObservable] = useState();
    const [last5Observable, setlast5Observable] = useState();
    const [latestBlock, setBlock] = useState();
    const [last5, setLast5] = useState([]);

    //Trade details object for calculating exchange rate
    function TradeDetails(tokensSold, ethBought) {
        this.tokensSold = web3.utils.fromWei(tokensSold);
        this.ethBought = web3.utils.fromWei(ethBought);
        this.exchangeRate = this.tokensSold / this.ethBought;
    }

These next 3 code blocks are the Hooks that are the magic of the dapp and give us the real-time streaming we want. We’ll set it up so that we look at the last 50 mined blocks, and show the 5 most recent Eth->Dai trades that happen in those blocks, which will continuously update as more blocks are mined and trades happen.  

useEffect(() => {
        web3.eth.getBlockNumber().then((block) => setBlock(block));
        if (typeof(latestBlock) != "number") 
            return;

        const EthPurchased$ = daiContract.events.EthPurchase.track({
            fromBlock: latestBlock - 50
        });
        const last5$ = EthPurchased$.pipe($latest(5));
        setObservable(EthPurchased$);
        setlast5Observable(last5$)
    },[latestBlock])

The above useEffect() sets up the Hook that gets the last 5 EthPurchase events from the latest 50 Ethereum blocks. Importantly, the setObservable(EthPurchased$) is every trade event we are tracking, and we restrict it to five events shown in the frontend by using the pipe operator (imported from RxJS) and creating an Observable of those five.

Next, we have another  useEffect() Hook that subscribes to all transactions fitting the requirements we defined above for EthPurchase, and just puts them in console.log

   useEffect(() => {
        if ((txnObserver === undefined) || (typeof latestBlock != "number")) {
            return;
        }
        txnObserver.subscribe((trade) => {
            console.log(trade);
        });
    
        return () => { txnObserver.unsubscribe(); }
    }, [txnObserver, latestBlock]);

From the last5Observable created in our first Hook, we get the transaction details of those here:

  useEffect(() => {
        if (last5Observable === undefined) {
            return;
        }
        last5Observable.subscribe((fiveTrades) => {
            const prices = fiveTrades.map(trade => {
                const txnDetails = new TradeDetails(trade.tokens_sold, trade.eth_bought);
                return {'block': trade.blockNumber, 'rate': txnDetails.exchangeRate}
            });
            setLast5(prices);
        });
    
        return () => { last5Observable.unsubscribe(); }
    }, [last5Observable]);

Lastly, we have some React UI code and than you can see the frontend!  Here's a gif showing it. This was recently started, and there have been 3 trades so far.  In the developer console, we can see the additional transaction details of each of those trades. As the trades we are watching stream in, the oldest will fall off the stack.

We hope this was a useful explanation of the Subspace library, which really makes frontend development for dapps simple and easy, especially when it uses Infura for web3 data! So clone this boilerplate repo here, use Subspace, and if you have any questions on this please discuss it with us here For more tutorials, visit the Tutorials section in our Community.

Tutorial: Real-time Frontend Data with Embark's Subspace and Infura

In the past year alone, we have seen the rapid evolution and adoption of decentralized finance (DeFi) applications that are working to create an open financial system with new financial assets and protocols. These applications allow people to do things like trade digital assets on decentralized exchanges, borrow using crypto assets as collateral, or earn interest on their crypto holdings via multiple interest rate markets. Yet ultimately, the interoperability, programmability, and composability of DeFi applications lends itself to infinite possibilities.

One application in particular that has made massive strides is the interest rate protocol Compound Finance. Compound is creating a decentralized protocol for the frictionless borrowing of Ethereum assets and a safe positive-yield approach to storing assets. At the time of writing, they have over $110M of assets earning interest across 8 markets and in 2019, they were the leader in the “finance” sub-category, according to a recent Binance Research Report.

We caught up with Geoffrey Hayes, CTO of Compound, to learn more about the protocol, how the team is batching requests to optimize their Infura usage, and why they chose Infura for their infrastructure needs.

Can you introduce Compound, for those who aren’t familiar with the company?

Hayes: “Compound provides interest rate markets on the Ethereum blockchain, allowing users to earn interest on their crypto. The goal for the organization is to integrate the Compound Protocol into many products across the globe, ensuring that all assets, when sitting idle, are moved into Compound and are utilized to earn interest.”

As a blockchain-based platform, your product operates on Web3 infrastructure. How was Compound handling infrastructure before you started using Infura?

Hayes: “We used to run a node in Kubernetes. We tried running both Geth and Parity, but both applications hogged memory, bandwidth and disk IO from our other containers in the cluster. With this set up, performing a basic task, like pulling event logs from the blockchain, required a significant chunk of our DevOps' time. Additionally, we needed to upgrade to maintain compatibility with hardforks.”

Is that what drew you to Infura?

Hayes: “Joe Lubin and Consensys really helped pioneer a large number of tools that have become the backbone of Ethereum development. To this day, no other blockchain seems to have a wealth of resources that Ethereum does, and I believe it's due to this early focus on developers. Founded by infrastructure engineers, Infura seemed at the time to have unlimited capacity for querying the blockchain. It was a no-brainer to make the switch.”

How does Compound use Infura to interact with the Ethereum blockchain?

Hayes: “First, our Compound interface uses Infura to pull all of the details of the Compound protocol and the user's account. We decided to build our interface on Web3 directly instead of our APIs to make sure that users always see what's on the blockchain. Second, to power our API, we query all event logs from the blockchain. We push those events into a stream processor and read from that stream to populate the data in our API.”

How has Infura helped you simplify operations?

Hayes: “Simply we don't need to run Ethereum nodes, which is a huge time-saver. Additionally, as our Compound interface reads directly from Infura, even if Compound servers have an issue, users can still access Compound through our interface.”

Have you found any ways to optimize your Infura usage that you’d be willing to share with the dev community?

Hayes: “The biggest optimization, that we are in the process of integrating, is to unify all of our requests on chain into one large request via a view contract. That is, instead of pulling the user's balance in each supported asset, we can create and deploy a contract that, given a user address, loops and returns all the balances for a user in a single Web3 call. Given the amount of data points required to populate a page, this can save a huge amount of round-trips to Infura.”

How important is Infura's service to the future of Compound's growth?

Hayes: “Infura has been rock-solid and saved us from having to roll our own solution. Additionally, Infura provides our users with a high-availability solution to access their account data even in the craziest of times in crypto. The Infura team is full of competent engineers, which is a refreshing view in a world where companies focus on marketing first. The APIs provided by Infura have been rock-solid for years.”

To learn more from top Web3 applications like Compound, or for more case studies, follow us on Twitter and subscribe to the Infura newsletter.

Case studies highlighting customer and partner success with Infura products and solutions.

Customer case studies highlighting customer and partner success with Infura products and solutions.

Infura Case Studies and Customer Stories

Case Studies

How the Compound Team Optimizes Infura Usage to Power Their DeFi Protocol

Building a dapp frontend, using React & Network.js, that can connect and request data from the Ethereum mainnet using Infura & Metamask

Developing a service or business on Ethereum can be difficult, due to the intricacies of working with a blockchain and the novel UX / UI issues to solve. This series of guides aims to serve as a quickstart to Ethereum dapp development, with a focus on front-end solutions. Thankfully, you don’t need to reinvent the chain. There are many pre-existing tools and services that can be leveraged to get a dapp running quickly, including:

 * Infura as a JSON-RPC connection to the mainnet or testnets;
 * MetaMask to serve as the user’s wallet and web3 provider;
 * OpenZeppelin for contracts and Network JS, a javascript library for web3 (i.e. blockchain development). This code tutorial is inspired by their dapp creation guide.

Using these products together has the benefit of replacing database setup and user credential management, resulting in a quick-to-start blockchain infrastructure. In this tutorial, we’ll create a React dapp using Network JS that can interact with MetaMask, which uses Infura as its connection to the Ethereum mainnet.

Environment Setup

Before we start you should have Node.js with npm installed. Let’s begin by creating a new project...

mkdir web3-infura && cd web3-infura

npm init -y

...and installing Network JS by OpenZeppelin to get library methods for working with web3:

npm install @openzeppelin/network

Now we’re ready to create a Dapp

Using a common React boilerplate called create-react-app we create the initial version of our dapp. This is easy to setup with npx (npm’s package runner). One line and we’ll have the scaffolding files for our dapp:

npx create-react-app client

In order to use Infura inside your dapp, you’ll need to register to set up an account and create a Project.

In the client/src/App.js file, we find the react project and look for the placeholder code written in App.js. We replace the placeholder code with the following:

import React from 'react';
import './App.css';
import { useWeb3 } from '@openzeppelin/network/react';
const infuraProjectId = '<YOUR_INFURA_PROJECT_ID';
function App() {
const web3Context = useWeb3(`wss://mainnet.infura.io/ws/v3/${infuraProjectId}`);
const { networkId, networkName, providerName } = web3Context;
return (
<div className="App">
	<div>
	<h1>Infura/MetaMask/OpenZeppelin Dapp</h1>
		<div>
    	Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'}
		</div>
		<div>
		Provider: {providerName}
		</div>
	</div>
</div>
);
}
export default App;



Our dapp will now reveal which Ethereum network (mainnet or a testnet) it is currently connected to, and the web3 provider it’s using.

Let’s test this out by saving and starting the browser by running npm start from within the /client directory. Test it out by replacing the mainnet in the Infura websocket URL to rinkeby. If MetaMask is already installed, disable the extension here as you will see it takes precedence.

How this works is that in the above code we import useWeb3 from the React implementation of Network JS (@openzeppelin/network/react) in order to get a web3Context. This is a Javascript hook that will attempt to retrieve an injected web3 provider which, by default, is MetaMask. If no provider is injected, it will use the Infura URL set as web3Context.  The term injected means code or data that comes from a user's browser and is available for the website to use.

Please note there are a variety of Ethereum web3 libraries available in many languages, and while the implementation specifics differ, they all implement creating a web3 connection through a ‘provider’ or ‘signer’ so this step is important to understand.

The useWeb3 hook attempts to obtain an injected web3 provider first, before falling back to a network connection. Alternatively use useWeb3Injected for an injected web3 provider or useWeb3Network for a network provider such as Infura or a private node.

Add a React Component

Our next goal is to move the display of the current Ethereum network to a component and see how components are re-rendered when changes are made, such as the network.

To do this, the first step is to select a web3 provider to be injected, and install it. We’re going to use MetaMask as our web3 provider in this tutorial, so head to metamask.io to install it.

In the code below, the Web3Data component expects a web3Context. The networkId, networkName and providerName are obtained from the web3Context and displayed in the component.

We then create a components directory in the client/src directory, and create a Web3Data.js file with the code below:

import React from 'react';
export default function Web3Data(props) {
const { web3Context } = props;
const { networkId, networkName, providerName } = web3Context;
return (
<div>
	<h3> {props.title} </h3>
	<div>
    Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'
	</div>
	<div>
	Provider: {providerName}
	</div>
</div>
);
}



Now back inside App.js, we’ll add the Web3Data component to provide a web3Context. In the client/src/App.js file, add this import for the Web3Data component:

import Web3Data from './components/Web3Data.js';

Then replace the entire contents of the App function in App.js with the following code:

const web3Context = useWeb3(`wss://mainnet.infura.io/ws/v3/${infuraProjectId}`);
return (
<div className="App">
	<div>
	<h1>Infura React Dapp with Components!</h1>
	<Web3Data title="Web3 Data" web3Context={web3Context} />
	</div>
</div>
);



Let's run npm start from within the client directory to start the dapp again to see how React components are re-rendered by Network JS when changes are made to accounts, connection type or network. You can test this out by changing networks in MetaMask.

Requesting Access to Account Address

Requesting a user’s account address and displaying it is one of the most common patterns among dapps. However, injected web3 providers don’t give the dapp access to a user’s address until that user has given permission. This bit of friction has been intentionally designed to protect user privacy and prevent bad actors from using an account address to track the user around the internet. You can learn more about this communication protocol here.

In our Web3Data.js file, we replace the contents of the component with the following code:

import React, { useCallback } from 'react';
export default function Web3Data(props) {
const { web3Context } = props;
const { networkId, networkName, accounts, providerName } = web3Context;
const requestAuth = async web3Context => {
try {
	await web3Context.requestAuth();
	} catch (e) {
	console.error(e);
	}
};
    
const requestAccess = useCallback(() => requestAuth(web3Context), []);

return (
<div>
<h3> {props.title} </h3>
	<div>
    Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'}
	</div>
	<div>
	Your address: {accounts && accounts.length ? accounts[0] : 'Unknown'}
	</div>
	<div>
	Provider: {providerName}
	</div>

	{accounts && accounts.length ? (
	<div>
	Accounts & Signing Status: Access Granted
	</div>
	) : !!networkId && providerName !== 'infura' ? (
	<div>
	<button onClick={requestAccess}>Request Access</button>
	</div>
	) : (
	<div></div>
	)}
</div>
);
}



Here’s what the above code is doing:

 * Accounts are pulled from the web3Context and, if available, the user’s address is displayed in the dapp;
 * If the accounts we have requested are not available, the dapp will produce a button that enables the user to give the dapp access to their address;
 * When the user presses that button, the requestAuth function in web3Context is called and the injected web3 provider can display a dialog to the user to request access. Using React functionality, useCallback is used to set up the callback for account request access.

Now, we start the dapp again by running npm start from within the client directory.

In the browser, we press ‘Request Access’ to request access to the user’s address, and then accept the request in the Metamask popup (or extension if no popup). The user’s address will then be displayed. To restart the process, logging out of Metamask will make the user request access again.

Account Balance

Finally, our third goal is to add to the React component to display the account balance.

In the code below, we get the lib object, which contains the blockchain data we want, from the web3Context, which is an initialized instance of web3.js (a library that Network.js relies upon).

We use lib for the method getBalance to request the balance of an account, which returns the balance as in value in units of wei. It’s easier to work with in units of ether, so we convert it with the method fromWei.

Since we want to track the state of the account balance, we use a React-specific function called useState. We also use useEffect to watch for if the account address or networkId has changed, and update accordingly.

To get our dapp to display the account balance, we replace the contents of the component in our Web3Data.js file with the following code:

import React, { useState, useEffect, useCallback } from 'react';
export default function Web3Data(props) {
const { web3Context } = props;
const { networkId, networkName, accounts, providerName, lib } = web3Context;
const [balance, setBalance] = useState(0);
const getBalance = useCallback(async () => {
	let balance = accounts && accounts.length > 0 ? lib.utils.fromWei(await lib.eth.getBalance(accounts[0]), 'ether') : 'Unknown';
	setBalance(balance);
}, [accounts, lib.eth, lib.utils]);
    
useEffect(() => {
getBalance();
}, [accounts, getBalance, networkId]);

const requestAuth = async web3Context => {
	try {
		await web3Context.requestAuth();
	} catch (e) {
		console.error(e);
	}
};
const requestAccess = useCallback((web3Context) => requestAuth(web3Context), []);
return (
<div>
<h3> {props.title} </h3>
	<div>
    Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'}
    </div>
	<div>
    Your address: {accounts && accounts.length ? accounts[0] : 'Unknown'}
    </div>
	<div>
    Your ETH balance: {balance}
    </div>
	<div>
    Provider: {providerName}
    </div>
	{accounts && accounts.length ? (
	<div>
    Accounts & Signing Status: Access Granted
    </div>
	) : !!networkId && providerName !== 'infura' ? (
	<div>
	<button onClick={requestAccess}>Request Access</button>
	</div>
	) : (
	<div></div>
	)}
</div>
);
}



We start the dapp again by running npm start from within the client directory and ta-da! The dapp should now display the account balance.

What you have now built is a dapp frontend (using Network.js) that can connect to the Ethereum mainnet and request data from it (using Infura). Users “login” (using Metamask), and the dapp displays the information the user cares about and reacts to state changes.  

Keep Learning

Our next tutorial will show you how to display the ERC20 balance of a user and let them transfer it. Further web3 development guides will include topics such as building with Ethers.js, using OpenZeppelin’s Starter Kits, and more complex integrations such as setting up Eth Log filters with Truffle’s Drizzle framework to react in real time to blockchain data changes on the frontend.


Never miss a tutorial -- subscribe to our newsletter to stay up to date. Ready to test out Infura? Sign up to start building for free!

Recent Posts (page 33)

What You Missed at IPFS Pinning Summit

Infura April 2020 Update

Tutorial: Real-time Frontend Data with Embark's Subspace and Infura

How the Compound Team Optimizes Infura Usage to Power Their DeFi Protocol

Building Dapp Frontends with React & Network.js