Wanna be in the same league as Damien Hirst, DC, and Niftys? Then build your NFT
on the Palm network! 

Infura and Palm NFT Studio [https://twitter.com/PalmNft] are excited to announce
that the Palm network is now available to all users of Infura. Nearly 430,000
developers now have access to create NFTs on the Palm network. 

The Palm NFT Studio

The Palm network is an Ethereum sidechain dedicated to selling, purchasing, and
trading NFTs that are associated with real-world and digital assets. Palm
provides low gas costs and fast transaction finality. The network is over 99%
more energy efficient than Proof of Work-based blockchain networks, providing
artists with a more sustainable solution today, while Ethereum upgrades to Proof
of Stake in the Merge, tentatively scheduled for release in July 2022.

The Palm NFT Studio has collaborated with Damien Hirst
[https://palm.io/studio/damien-hirst-currency-nft-updates/], DC
[https://palm.io/studio/creating-a-sustainable-future-for-digital-fandoms/], 
Niftys and Warner Brothers
[https://palm.io/studio/niftys-launches-the-matrix-resurrections-nft-project-on-the-palm-network/] 
and other artists in minting NFTs on the Palm network. 

How to mint an NFT on Palm

For users looking to mint NFT projects, the Palm network provides an effective
solution to create NFTs that are able to be bridged back to Ethereum.

To access the Palm mainnet or testnet endpoints, here’s how to get started:

1. Login [http://infura.io/login] to your Infura account and select an existing
Ethereum project (or create a new Ethereum project
[https://docs.infura.io/infura/create-a-project] if you have not yet). 

2. Click on the settings of the project to view the Palm API endpoints
[https://docs.infura.io/infura/networks/palm/getting-started/accessing-palm-api-endpoints]
.

Using Palm mainet and testnet is free as part of all Infura plans, and requests
sent to the API count as part of your existing plan. No action is required to
activate Palm, and the availability of Palm testnet allows you to have an
environment to begin developing and testing your NFT project before going live. 

See our documentation on Palm [https://docs.infura.io/infura/networks/palm] for
more information, as well as links to helpful tutorials
[https://docs.infura.io/infura/networks/palm/tutorials].

Get in touch and start building

Interested in creating your own NFTs, but do not know where to start? 

Learn more from Infura’s Director of Engineering, Kris Shinn, on minting NFTs
using Infura and Replit [/minting-nfts-with-infura-and-replit/], based on his 
EthDenver 2022 [https://www.youtube.com/watch?v=kim7T4GDFOM] presentation. 

Let us know how you are using NFTs in our Discord and feel free to ask questions
in our community [https://community.infura.io/]. 

Just getting started with Infura? Our docs will get you building
[https://docs.infura.io/infura/].

Ethereum Network Updates, Upgrades, Hard Forks

Infura - Ethereum Network Updates

Network

The Palm network is now available for all NFT creators on Infura

Last July, we published Ethereum JavaScript Libraries: web3.js vs. ethers.js
(Part I) [/ethereum-javascript-libraries-web3-js-vs-ethers-js-part-i/] to
provide “a comparison of web3.js and ethers.js, focusing on their similarities
and differences, so that you can better understand the nuances of the
libraries.”

To recap, we dove into the documentation of both libraries. We then used a
modified version of a software evaluation framework Andres Canal established in
his article “Using Quill,js to Build a WYSIWYG Editor for your Website
[https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/]
” to guide the reader toward making the best decision in choosing which library
to use.

The article was “written with the intent of educating developers to understand
the tradeoffs between the two libraries to be able to make a decision of which
library to use for their particular use case.”

How have the conclusions from that article changed over the course of the past
year?

Table 1: Comparison of Conclusions about Web3.js and Ethers.js

July 2020October 2021Web3.js has a community of users and maintainers associated
with the Ethereum Foundation. Web3.js has a good API reference and has been
around since 2015. Many projects are using it and the library has been the go-to
in many "Build Your First dApp" tutorials.Web3.js is best for those who prefer
the most-used Ethereum javascript library that is also maintained by a
blockchain-focused firm. Web3.js's strengths are its tests and community.
Documentation is currently modest in design and scope and can definitely be
improved.Ethers.js is excellent because it is a small, compact library with a
large number of test cases. It has good “Getting Started” documentation, making
it accessible to new users. Developers find ethers.js simple and intuitive and
the library has gained in popularity over the past two years, seeing increased
downloads and usage by projects.Ethers.js is best for those who prefer
lightweight, user-friendly libraries with robust testing and documentation.
Ethers.js’s strengths are its documentation, tests and community. It could have
more maintainers in order to create some redundancy in the development team -
currently a single individual.

Let’s dive into the updated data and explain why these conclusions have changed.

1) How important is the popularity of the library?
To use Andres Canal’s definition,

“A popular project on Github means exactly what you expect it to. Namely, that
there are lots of people questioning, contributing, and supporting it. This
activity tends to result in more reliable software. You can check the popularity
of any project by looking at how many stars it has, how many issues are opened,
how many pull requests are pending, and how many contributors worked on the
project.”

Web3.js has about 11,600 stars
[https://github.com/ChainSafe/web3.js/pulse/monthly] and ethers.js 3,100
[https://github.com/ethers-io/ethers.js/pulse/monthly] as of Oct. 14, 2021. 
Web3.js is used by 112,849 repositories
[https://github.com/ChainSafe/web3.js/network/dependents?package_id=UGFja2FnZS0xNTA1NzY4MA%3D%3D]
, compared with 65,519 for ethers.js
[https://github.com/ethers-io/ethers.js/network/dependents?package_id=UGFja2FnZS0xNjEzMjI4Ng%3D%3D]
.

Looking back to July 2020, Web3.js had nearly 8,800 stars while ethers.js had
nearly 1,500. Web3.js was used by 51,300 repositories on GitHub, compared with
18,500 for ethers.js. 

Web3.js remains the more popular library, but impressively for both libraries,
their dependencies have at least doubled over this time period. Web3.js remains
more popular, but the overall pie of dependent projects has grown from about
69,800 to 178,368. We will dive more into the dependencies in question 3.

2) How important is the maintenance of the library?
To quote ourselves from the last article,

“We want to use libraries that are updated frequently, so that bugs are squashed
and new features are added. Though it is not perfect, looking at a month (or
two) of commits, closed issues, active issues, and the number of maintainers
over that time period can give a sense of the strengths and weaknesses of an
open source project. This also reveals patterns of maintenance, giving some
insight to the user of a library when updates and bug fixes are generally
addressed, which can be used as a proxy metric for maintenance of the library.”

Using the same metrics from our last article, we see the following for both
libraries.

Table 2: GitHub Monthly Pulse for Sept. 14, 2021 to Oct. 14, 2021

LibraryCommits to Main BranchClosed IssuesActive IssuesMaintainersweb3.js2060107
10ethers.js217391
GitHub Pulse now reveals some additional useful information about the libraries,
which gives us even more context of why we are seeing what we are seeing.

For web3.js, we can see that a single individual is responsible for the majority
of the commits, though there are three individuals that have 10 or more commits.
This is something I see as a plus. This means there is redundancy built into the
development team, in case someone were to stop contributing to the project.
Web3.js has 121 commits to branches other than the main branch, as web3.js is
transitioning off of the 1.x version as outlined in this blogpost the roadmap
for web3.js
[https://medium.com/chainsafe-systems/the-future-of-web3-js-v3-0-0-release-ecc9feecb2de] 
(which we will reference again in the next section). This indicates a lot of
work is going into the future releases.

For ethers.js, Richard Moore continues to be the sole maintainer of the library,
but there are many more people contributing to the project by opening and
closing issues on the GitHub repository, indicating that there is a community of
individuals committed to the health of the library. By virtue of a single
maintainer, it is not surprising to see fewer overall commits.

3) Who is responsible for the development of the library and how many projects
use it?
ChainSafe [https://chainsafe.io/] is the lead maintainer of the web3.js library, 
having received a grant from the Ethereum Foundation to “continue the
maintenance and further development”
[https://medium.com/chainsafe-systems/chainsafe-receives-grant-from-ef-for-web3js-9e4376f5f36a] 
of web3.js in September 2020. ChainSafe’s outline of the future plans for
web3.js
[https://medium.com/chainsafe-systems/the-future-of-web3-js-v3-0-0-release-ecc9feecb2de]
reveals major changes coming, such as the deprecation of web3-bzz and web3-shh
packages in version 3.x and an eventual move to Typescript in version 4.x. These
are exciting additions, but the tradeoff is that ChainSafe will need time to
realize these while maintaining the existing library.

Ethers [https://ethers.org/] is the lead maintainer of the ethers.js library,
which is Richard Moore’s project, so we can think of Richard Moore = Ethers.
Ethers has been the lead maintainer of the project since the inception of it.
This can be a risk for some projects, but in this case, it has made ethers.js
very quick in adding features and capabilities. For example, ethers.js is fully
TypeScript-ready with “definition files and full TypeScript source” according
to
the documentation [https://docs.ethers.io/v5/#features]. 


Table 3: Dependent Repository and Package Counts, October 15, 2021

LibraryDependent RepositoriesDependent Packagesweb3.js113,0184,685ethers.js
66,9503,505

Web3.js, likely due to the longer existence of the project, has more
repositories and packages that are dependent upon it. When compared with metrics
from our last article, ethers.js is closing the gap with web3.js when it comes
to dependent packages.

4) How important is it that the library has tests?
Answer: Very important to any dApp developer worth their salt. Luckily for us,
both libraries have gotten even better since our last article.

Ethers.js has a test suite API documented for the current v5 release on their
GitHub repository
[https://github.com/ethers-io/ethers.js/tree/master/docs/v5/testing]. The
documentation of the testing is very impressive
[https://docs.ethers.io/v5/testing/]. Check it out.

Web3.js has added test documentation
[https://github.com/ChainSafe/web3.js/blob/1.x/TESTING.md] since our last
article. This documentation, based on my personal inspection, appears robust and
clearly written.

I believe ethers.js has the lead, but web3.js has done a great job catching up
in terms of its tests and their documentation, and I feel both have great
coverage when it comes to tests. Tests are a strength for both libraries now.

5) How important is the number of downloads of the library?
As of Oct. 15, 2021, web3.js has 30,767,910 downloads
[https://npm-stat.com/charts.html?package=web3&from=2015-01-01&to=2021-10-15] 
and ethers.js has 24,284,490 downloads
[https://npm-stat.com/charts.html?package=ethers&from=2015-01-01&to=2021-10-15].
Compare that with May 20, 2020, when we first looked at this statistic, when
web3.js had 14,703,432
[https://npm-stat.com/charts.html?package=web3&from=2015-01-01&to=2020-05-20] 
downloads and ethers.js had 8,500,336
[https://npm-stat.com/charts.html?package=ethers&from=2015-01-01&to=2020-05-20]
downloads. The overall pie has grown, but the difference in downloads is
surprisingly close: a difference in total downloads of 6,484,420 on Oct. 15,
2021 compared with a difference of 6,203,096 in late May of 2020. 

When we look at weekly downloads, the two libraries are practically even: 
web3.js at 330,102 [https://www.npmjs.com/package/web3] and ethers.js at 339,318
[https://www.npmjs.com/package/ethers]. Weekly downloads of both libraries have
nearly doubled since we last checked this statistic (May 20, 2020, for those
following along): web3.js at 175,661 [https://www.npmjs.com/package/web3] and
ethers.js at 184,798 [https://www.npmjs.com/package/ethers].

6) How important is web performance?
Web performance is indirectly measured by comparing the size of the libraries,
as we are assuming smaller libraries take less time to load in the browser. 

Both libraries are small. Web3.js has decreased the size of the library to 7.28
MB [https://www.npmjs.com/package/web3] unpacked (unpacked refers to the size of
the library when published) from 10.6 MB when we last checked. Ethers.js touts
its very small size, which has increased to 322 kb uncompressed
[https://www.npmjs.com/package/ethers] from 284 kb uncompressed over the same
time period. It’s unclear what occupies 322 kb within ethers.js. NPM shows
ethers.js 10.2 MB unpacked, and I confirmed this when I downloaded to my
personal machine and calculated the size of the ethers.js package using the
Finder application on Macs. So we have to take ethers.js's word that it is small
in size, which is a big plus, though I do need to do further research to confirm
this claim is valid.

7) How important is the quality of the documentation?
Ethers.js is the clear winner when it comes to the quality of the documentation
of the library and it stands out for three key reasons.

 1. Ethers.js has an extensive “Getting Started Guide,” which helps a user
    orient themselves to both the library and the vocabulary of Ethereum.
 2. Ethers.js has useful call outs and additional information provided as part
    of the documentation, giving the end user visual cues, convenient links, and
    other helpful user experience features that make reading and using the
    documentation an enjoyable experience.
 3. Ethers.js documentation has an extremely useful feature - a toggle to single
    page view, in which all documentation is provided on a single page. This
    makes using “Ctrl + f” in the documentation a breeze, and helps with finding
    the method you are looking for quickly.

Web3.js has not had many visible changes to the documentation since our last
article and could use an update to make the user experience more pleasant.

An indirect additional comment on the documentation - ethers.org provides a very
helpful “playground,” where you can try out the library in browser: 
https://playground.ethers.org/. This useful feature lets a user get started
playing around with the library quickly and easily. While it could be argued
that remix.ethereum.org provides a similar playground experience for web3.js,
this is not the goal of remix, and remix support ethers.js as well.

8) How important is the overall usage of the library?
The last time we looked at the numbers, web3.js was the clear winner in overall
usage, with ethers.js gaining users at a rate that appeared that it would only
be time before ethers.js caught up to web3.js. The results today show that both
have healthy ecosystems and a large number of users. My personal belief is that
the overall growth of the ecosystem shows that both libraries have been adopted
by a significant number of projects and users. So, while web3.js has more
downloads, stars, and overall metrics, ethers.js is competitive to web3.js in
its usage. It’s fair to say both have been widely adopted.

9) How important is the license?
This is one area that has not changed since we last reported. Web3.js still has
the LGPLv3 license and ethers.js the MIT license. I am not a lawyer, and so this
is the hardest area for me to pick a winner. It is worth reviewing Slava
Todavchich’s article “Understanding open-source and free software licensing
[https://medium.com/@moqod_development/understanding-open-source-and-free-software-licensing-c0fa600106c9]
,” which we suggested in our July 2020 blogpost.

But wait... there is a new category!

10) How important is the community and community experience?
Yes, I am adding a new way to evaluate the two libraries, based on my experience
in Developer Relations and Software Community. I am personally looking for
robust channels where developers using the software can interact with one
another, find information about updates and hotfixes, share their use cases and
help each other debug their code. The best software projects provide this for
their users and it is a differentiating factor.

Web3.js and ethers.js have both embraced Discord as a means to communicate
directly with their community of developers. Web3.js lives within the ChainSafe
Discord Server, in the channel #web3js-general. Web3.js has used this channel
not just to interact with developers, but  as of September 2021, to promote a
web3.js developer survey to help drive the direction of changes for version 4.x
of web3.js. Ethers.js utilizes the EF JavaScript Team Discord Server, in the
#ethers channel. Both are active channels with communication on a daily basis.

Both also use Twitter to communicate changes to their audiences, though both
have relatively light follower counts. @web3_js [https://twitter.com/web3_js] 
(1,250 followers) and @ethersproject [https://twitter.com/ethersproject] (1,279
followers) only tweet to announce updates and changes to the libraries, serving
as another way for notifications about updates to get through to developers.

ChainSafe also uses their Medium account to post some updates
[https://medium.com/chainsafe-systems] about web3.js, though not a regular
cadence.

GitHub continues to be a source of discussion for communities of both libraries,
though the shift to Discord by both reflects a growing trend in the Ethereum
community, as well as in software communities in general, to commit to this tool
for a mix of synchronous and asynchronous communication.

The verdict is that both take development and interaction with their communities
seriously.

What’s the next step? 

You should go ahead and test out the libraries themselves with Infura, and we
created a tutorial for just this purpose: Ethereum JavaScript Libraries:
web3.js
vs ethers.js (Part II)
[/ethereum-javascript-libraries-web3-js-vs-ethers-js-part-ii/]. The best way to
see if my evaluation is valid is to kick the tires on both libraries.

In conclusion, instead of declaring a winner, it seems that Ethereum itself is
benefitting from having two leading JavaScript front-end libraries. More
libraries being built that can utilize the features of web3.js and ethers.js
will push them to be even better (like web3-react
[https://github.com/NoahZinsmeister/web3-react], for example). In updating this
article, I have been struck by the growth of downloads and dependencies of both
libraries, making me of the opinion that you can choose either and feel
comfortable with the decision. I hope this illuminated some ways you can
evaluate both to choose what works best for you.

Get started [https://infura.io/register] building on Infura for free today.

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

Infura Developer Tutorials

Tutorials

Ethereum JavaScript Libraries: Web3.js vs Ethers.js: An Update

As the clock ticks down to the Merge, the Teku and Infura teams have continued
refining their collaboration. In case you missed it, these two teams have
created an eye-poppingly fast Ethereum 2.0 client sync experience
[https://consensys.net/blog/teku/teku-and-infura-team-up-to-make-the-fastest-ethereum-2-0-client-sync/]
. Since then, they have continued refining their integration and made some
important discoveries and improvements.

Attestations with Teku
One of those discoveries was that validators linked to a remote beacon node
could have significant performance issues: specifically, a lot of missed
attestations. Obviously, this is a pretty crucial issue. It turned out to be not
just a problem with a remote beacon node, but specifically a remote beacon node
behind load balancers, including Infura’s load balancers. 

If you’re interested in the blow-by-blow, check out the Github issue here
[https://github.com/ConsenSys/teku/issues/4090].

The solution the team came to was to implement an option to disable early
attestation publishing when the block is received: 

--validators-early-attestations-enabled[=<FALSE>]

Find the full Teku documentation on this issue here
[https://docs.teku.consensys.net/en/latest/Reference/CLI/CLI-Syntax/#validators-early-attestations-enabled]
.

This option allowed validators connecting to Infura beacon nodes to have
performance equivalent to validators connected to a local beacon node, which in
and of itself is impressive. It would appear that this is a fix not just for
nodes connecting through Infura, but for any context where Teku validators are
using load-balanced beacon nodes.

The second innovation the team has made surrounding attestations is batch 
attestations. This consists of sending all attestations produced for a given
slot to the beacon node in a single batch. In the context of Infura, this allows
running a lot more validators without hitting rate limits.

The future of history
Another feature that the team has been working on, which isn’t quite ready yet
for a full release, is an innovative way to store historical state without
having a hard drive the size of the Library of Alexandria. 

With increasing adoption of decentralized technology, there is more and more
demand, and even novel use cases, for historical chain data. The most
top-of-mind for many in the space is tax compliance. Institutions and even
individuals are increasingly in need of solutions for being able to query,
quickly and cheaply, historical chain data.

Like most great things in this space, the solution being developed uses Merkle
tries. Without getting too deep into the woods (pun intended), as it’s not
finished yet, the technique essentially takes the difference between slots and
stores the branch updates. The applicability for this is tremendous, so watch
this space for more updates.

Safety through Diversity
As we approach the reality of Ethereum 2.0, more and more voices are calling out
a topic of vital importance: client diversity. The Ethereum Proof of Work
consensus mechanism is, at this point, venerable and battle-tested, at least in
blockchain terms, and is resistant to 51% of attacks. As the network transitions
to Proof of Stake, the threat remains that a single Ethereum client will be
running on a majority of validator nodes. This opens the door not only for a
malicious attack, but also for single points of failure bringing down the entire
network. 

For more explanation, check out this very readable primer
[https://blog.ethereum.org/2020/08/21/validated-why-client-diversity-matters/] 
that should bring a lot of issues into focus. There are so many reasons to make
the move to a Proof-of-Stake consensus model, and the network is on track to do
so. It would be a stunning failure of vision and quite simply, wildly unsafe to
move Ethereum to a PoS network that has a majority of any Ethereum client. 

Even if we were to assume that all clients were going to act in the best
interests of the network as a whole, which in and of itself is a leap most
aren’t willing to take, the Ethereum network is a sprawling global entity with
external dependencies. No client should be able to be a single point of failure
for the entire network. 

As we build the Beacon Chain and validators up and out, client diversity must be
included as an essential consideration.

Learn more about Infura’s Eth2 API [https://infura.io/docs/eth2] here and sign
up [https://infura.io/register] for a free account.

Teku + Infura to 2.0: How to Handle Attestations

SoK: Validating Bridges as a Scaling Solution for Blockchains

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 [https://caddyserver.com/]. Once that’s downloaded, check
out their Getting Started guide here
[https://caddyserver.com/docs/getting-started]. 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
[https://caddyserver.com/docs/quick-starts/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
[https://caddyserver.com/docs/caddyfile/directives/reverse_proxy#load-balancing] 
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 [https://github.com/FiloSottile/mkcert],
and it’s incredibly easy to install by following these steps
[https://web.dev/how-to-use-local-https/]. 

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
[https://infura.io/customers/maker]. 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
[https://infura.io/docs/ethereum#section/Network-Add-Ons/Polygon-PoS]. 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
[https://consensys.net/blog/developers/how-to-save-time-on-devops-and-scale-with-infura-lessons-from-leading-ethereum-dapps/] 
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
[https://infura.io/register] 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 [https://infura.io/product/ethereum] to connect your app instantly
with a single line of code. Simplify your transaction management with Infura
Transactions (ITX)
[/why-you-should-use-infura-transactions-instead-of-building-your-own-in-house-relayer/] 
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”
[https://www.youtube.com/watch?v=EgbzVFfdZyg] at EdCon 2021.

Interested in building on Ethereum? Contact us [https://infura.io/contact]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
[https://www.trufflesuite.com/] 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 [https://infura.io/register] 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
[https://courses.consensys.net/courses/bootcamp-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
[https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository] 
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
[https://discord.gg/ADWNDYVb8b] if you want to continue the conversation, share
projects, ideas, and join the community!

Start here with a free Infura account > [https://infura.io/register]

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
[https://github.com/ethereum-optimism/optimism-tutorial/tree/main/truffle#truffle-configuration] 
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
[https://github.com/ethereum-optimism/optimism-tutorial/pull/60/files] 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
[https://remix-optimism-compiler-plugin.readthedocs.io/en/latest?xgtab&] 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? 
Figure 1: Average gas price over the past three months. Typically spikes when
the network is congested.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
[https://blockstream.com/sidechains.pdf]. 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
[https://stonecoldpat.medium.com/a-note-on-bridges-layer-2-protocols-b01f8fc22324] 
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
[https://wbtc.network/dashboard/partners]. 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 [https://polygon.technology/] 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
[https://github.com/barryWhiteHat/roll_up] 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 [/arbitrum-supported-by-infura/], Optimism
[/infura-launches-support-for-optimistic-ethereum/] and Polygon
[/polygon-now-available/]. 

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

The future of Ethereum is here! 
Start accessing the Eth2 Beacon Chain through the Infura Eth2 API.
You can use Infura’s Eth2 API to analyze the state of the Eth2 chain, as well as
simplify and increase the reliability of your Eth2 validator setup. Explore the
full functionality and API spec [https://infura.io/docs/eth2].

Access the Beta
[https://infura.io/dashboard/eth2?utm_source=infurablog&utm_medium=referral&utm_campaign=eth2openbeta]

*Notice: Eth2 public beta: deprecation of project IDs*
[https://community.infura.io/t/notice-eth2-public-beta-deprecation-of-project-ids/2503?utm_source=infurablog&utm_medium=referral&utm_campaign=eth2openbeta]

Other resources

 * Ethereum 2.0 refers to a set of interconnected upgrades that will make
   Ethereum more scalable, more secure, and more sustainable. Learn more.
   [https://ethereum.org/en/eth2/vision/] 
 * Ethereum Foundation: Ethereum 2.0 Explained [https://ethereum.org/en/eth2/]
 * Ethereum 2.0 Knowledge Base
   [https://consensys.net/knowledge-base/ethereum-2/?utm_source=infurablog&utm_medium=referral&utm_campaign=eth2openbeta]
 * How to query validator balances programmatically with Infura’s Eth2 API
   [/checking-your-eth-2-0-validator-balance/?utm_source=infurablog&utm_medium=referral&utm_campaign=eth2openbeta]
 * A Guide to ConsenSys’ Eth2 Products
   [https://consensys.net/blog/blog/a-guide-to-consensys-eth2-products/?utm_source=infurablog&utm_medium=referral&utm_campaign=eth2openbeta]

Infura news, product announcements, and press releases.

Infura News

News

Infura’s Eth2 API is Live! How to Access the Public Beta

Power-Up Your App Using JS with Infura!

Featuring:
Coogan Brennan, Ethereum Technical Trainer 
Sean Brennan, Infura Dev Rel Lead 
Ian Lapham, Uniswap Software Engineer 

In this webinar tutorial, developers from Infura and Uniswap walk you through
best practices of developing responsive React frontends that take advantage of
real-time Ethereum data and transactions. They guide you through using the
combination of Javascript, web3-react, and Infura; using code examples and
recent lessons from Uniswap's frontend team. 

Check out the recording below: 

Get the most out of this session by getting started on Infura for free
[https://infura.io/register].

Tutorial: State and Payment- Power Up Your App Using Javascript & Infura

In the previous post
[/dapp-frontend-network/?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=frontend_data_embark_subspace] 
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. 


UniswapTo do this, we’ll use a library called Subspace
[https://subspace.embarklabs.io/] 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
[https://github.com/embarklabs/subspace/tree/master/examples/react-hooks-example]
.  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
   [https://github.com/embarklabs/subspace/tree/master/examples/react-hooks-example] 
   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
[http://infura.io/register?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=frontend_data_embark_subspace]
. 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 anotheruseEffect() 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
[https://github.com/embarklabs/subspace/tree/master/examples/react-hooks-example]
, 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
[https://community.infura.io/c/tutorials?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=frontend_data_embark_subspace]
.

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



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
   [https://infura.io/?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=building_dapp_frontends] 
   as a JSON-RPC connection to the mainnet or testnets;
 * MetaMask [https://metamask.io/] to serve as the user’s wallet and web3
   provider;
 * OpenZeppelin [https://openzeppelin.com/] for contracts and Network JS, a
   javascript library for web3 (i.e. blockchain development). This code tutorial
   is inspired by their dapp creation guide
   [https://docs.openzeppelin.com/network-js/0.2/building-a-dapp-from-scratch].

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 [http://nodejs.org] with npm installed.
Let’s begin by creating a new project...

mkdir web3-infura && cd web3-infura

npm init -y

...and installing Network JS
[https://github.com/OpenZeppelin/openzeppelin-network.js/tree/master] 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
[https://github.com/facebook/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
[https://infura.io/register?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=building_dapp_frontends] 
to set up an account and create a Project
[/getting-started-with-infura-28e41844cc89/?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=building_dapp_frontends]
.
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 [https://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
[https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md].

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
[https://www.investopedia.com/terms/w/wei.asp]. 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
[https://github.com/trufflesuite/drizzle] framework to react in real time to
blockchain data changes on the frontend. 


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


Never miss a tutorial -- subscribe to our newsletter
[https://infura.us14.list-manage.com/subscribe?u=7bec10aa5be97e80fcb0e7c52&id=13433031de] 
to stay up to date. Ready to test out Infura? Sign up
[https://infura.io/register?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=building_dapp_frontends] 
to start building for free!

Building Dapp Frontends with React & Network.js

JSON RPC, methods, calls, requests - what does it all mean?! When you start
building a dapp on the Ethereum blockchain, you’re introduced to a host of new
concepts, request methods and naming conventions to employ - it can be
overwhelming. The Infura team are experts in web3 infrastructure. We build open
source tools and materials to help more developers interact with Ethereum and
IPFS. In this tutorial, we leverage the collective experience of our team to
bring you an in-depth guide to reading and writing requests to the Ethereum
blockchain, using Infura
[https://infura.io/?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=rpcs_tutorial]
.

Key Terms and Concepts
Before jumping into the meat of this tutorial, let’s clarify some key
terminology. Below is a list of important terms and their corresponding
definitions that you need to get familiar with.

Request
A developer interacts with Infura by sending a request through JSON RPC either
over HTTP or WebSocket; as a single request or as a batched array. Requests
follow this format:

{"id":1234, "method": "eth_foo", "params":[...] }

Because you should be posting this to an endpoint that has your v3 key in it, we
can always associate these requests with a key or a project.

Method
The method is essentially what function we are asking an Ethereum node to
execute. This will either request data from the node, execute an EVM function
and return a response, or transmit data to the Ethereum network (send a
transaction). Currently there are 65 methods which are supported by the popular
Ethereum clients (Geth [https://geth.ethereum.org/], Parity
[https://www.parity.io/ethereum/], Besu
[https://www.hyperledger.org/projects/besu], Nethermind [https://nethermind.io]
):

The most commonly used methods are highlighted in bold and comprise the vast
majority of Infura’s traffic:

These methods can be grouped into the following categories:

i) Block Data Related

 * eth_getBlockByHash: retrieves a block's details by its hash (a string
   representing the 32-byte hash of a block);
 * eth_getBlockByNumber: retrieves a block's details by its number (an integer
   block number, or the string "latest", "earliest" or "pending");
 * eth_blockNumber: retrieves the current block number.

These methods retrieve static data about a particular block in the blockchain.
This data is contained in the blockchain headers and could include information
like block number or transactions mined, for example.

ii) Per User (address) Data

 * eth_getTransactionCount: retrieves the nonce of an address (i.e: how many
   transactions have already been mined, per user, for that address). This is
   needed because when you go to send a new transaction, there’s a field called
   ‘the nonce’ which is intended to prevent you from accidentally rebroadcasting
   transactions and sending them out in an order that you didn’t intend.

This method retrieves the simple state data for addresses. It doesn’t matter
whether that address is a user or a smart contract. Any address can have an ETH
balance.

iii) Reading Existing Smart Contract Data

The concept of smart contracts, and interacting with them, is what makes
Ethereum different from other blockchains. A smart contract is two things:

 1. It’s a bit of code, usually written in Solidity, that compiles down into
    byte code - which is understood by the Ethereum Virtual Machine (EVM);
 2. It’s a means of storage. Think of it as halfway between ‘disc storage’ and
    ‘ram.’

Below are the most common methods for interacting with smart contracts:

 * eth_call: retrieves a constant EVM method on a Smart Contract and is the
   primary way to retrieve already mined data from the blockchain about a
   particular smart contract;
 * eth_getLogs: retrieves events published by smart contract transactions. Smart
   contracts can emit logs that are really user defined, so when you’re creating
   this smart contract you can decide the format of these log events. These
   dapps can then see when your smart contract has emitted these events, and
   respond accordingly; 
 * eth_getStorageAt: retrieves raw state storage for a smart contract;
 * eth_getCode: retrieves the compiled EVM code for a smart contract. There is
   no copy of a smart contract’s source code on the blockchain itself. So, for
   example, when you search an address on Etherscan [https://etherscan.io/] and
   the verified code of that smart contract is returned, that all happens off
   chain.

Using eth_call
ERC20 is one standard for how developers can create a token. Almost all wallet
software understands this standard, so if you want to create a token and make it
easier for people to interact with it, ERC20 is a good place to start. 
Eth_call is the most commonly used method for interacting with smart contracts, 
particularly ERC20 contracts. A typical eth_call request looks like this:

At first glance, it’s not clear what any of this information represents. Let’s
break it down:

The "id":1 field is an identifier string which is set by the requester, and
helps make sure the client and server are communicating in the same context. 

The "jsonrpc":"2.0" field specifies the version of the protocol and must be
exactly “2.0”, which the protocol expects.

The from field is the data requester, which could be any wallet address or smart
contract. This field is optional.

The to field is always a smart contract. There are two ways to find out what
that smart contract is:

 1. You can make a request on the blockchain using eth _getCode, but that would
    give you the compiled code. Unless you have tools to reverse-engineer the
    EVM byteCode, you’re not going to immediately know what that means.
 2. You can type the smart contract address into Etherscan. 
    Searching Etherscan is the most common way to find out what type of smart
    contract you’re dealing with. Let’s take the smart contract address 
    0x6B175474E89094C44Da98b954EedeAC495271d0F
    [https://etherscan.io/address/0x6b175474e89094c44da98b954eedeac495271d0f] 
    and type it in to see what happens:

Etherscan tells us that this smart contract is for the ‘Dai Stablecoin (DAI)’.
At this point, we also have the opportunity to inspect the original Solidity
code for this contract and confirm that it’s verified:

Great! Now we know that this address represents an ERC20 contract.

Deep-Dive into ERC20
Created in 2015, ERC20 is a relatively simple token standard and the most common
contract type on Ethereum. Within this standard, an ERC20 token has to implement
the following functions:

 * function totalSupply() public constant returns (uint);
 * function balanceOf(address tokenOwner) public constant returns (uint
   balance);
 * function allowance(address tokenOwner, address spender) public constant
   returns (uint remaining);
 * function transfer(address to, uint tokens) public returns (bool success);
 * function approve(address spender, uint tokens) public returns (bool success);
 * function transferFrom(address from, address to, token uint) public returns
   (bool success). 

At certain times, an ERC20 token also has to emit the following events:

 * event Transfer(address indexed from, address indexed to, uint tokens);
 * event Approval(address indexed tokenOwner, addressed indexed spender, uint
   tokens).

You can view the standard on GitHub
[https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20-token-standard.md] for
more detail about how these functions work and when to emit these events. For
now, let’s try to request the balance for some of the DAI tokens.

We know that our address is 0xDfBaf3E4c7496DAd574a1B842bC85B402BDC298D. 

We also know that the DAI contract address is 
0x6B175474E89094C44Da98b954EedeAC495271d0F.

To query our balance using eth_call, we use the balanceOf function of the token
contract. The JSON-RPC format expects eth_call to have a specific data field
format that requires normalizing the contract function balanceOf to a short 
Function Selector
[https://solidity.readthedocs.io/en/develop/abi-spec.html#function-selector]. To
do this, we take out the names and the type of inputs it takes, and take that as
a string. We then run it through Ethereum’s sha3 keccak hash
[https://solidity.readthedocs.io/en/develop/abi-spec.html#function-selector]:

web3_sha3(“balanceOf(address)”)[0..4]-> 0x70a08231

The first four bytes of this hash comprise it’s 4-byte signature. We then take
this 4-byte signature, pad it with zeros, add our address as an input and send
the eth_call:

This is a hexadecimal number, padded to a 32-byte length with zeroes. If we want
to, we can convert this output to a decimal number by using a hex-to-decimal
converter. This would return the result 3.890227426645114e+24, which is
scientific notation for 3.890227426645114 * 10^24. This is the contract’s
balance of Dai in wei, a standard unit of 10^18.

So finally, divide 3.890227426645114 * 10^24 by 10^18, and ta-da! Now we know
the balance of the wallet address 0xDfBaf3E4c7496DAd574a1B842bC85B402BDC298D in
this contract is 3,890,227.426645114 Dai.

Sending Transactions
Eth_calls are commonly used to read data from a smart contract. But what if you
want to write data to a smart contract?

Let’s say we wanted to call the transfer function. Again, we would need to
normalize the function first. We take the string transfer(address to, uint
tokens) and hash it to get the 4-byte signature. Again, we take that 4-byte
signature, pad it with zeros, insert the address and the amount of tokens, and
package this information into a data string. We then sign the transaction and
send it using eth_sendRawTransaction.

At this point, nodes start broadcasting our transaction out to the rest of the
network. Eventually a miner will get a copy of it, go through all their
proof-of-work stuff, get lucky and find a hash that matches the proof-of-work
and broadcast a block that contains our transaction. Every node that receives
this block reads the transactions within it, re-executes them, and holds our
ERC20 token transaction in the EVM to update.

Gas is sent along with any other values, and is spent running the EVM code. The
miner gets the block reward, plus all the gas spent in transactions. If you’d
like to learn more about how Ethereum mining works, these EthHub docs
[https://docs.ethhub.io/using-ethereum/mining/] are a great start.

Mined Transactions
When a transaction is mined, two important things happen: the on-chain Ethereum
state is changed via contract interactions, and Event Logs are published for
public viewing. Once the Event Logs are published, we can execute JSON-RPC
requests for eth_getLogs to investigate what changed, relative to the events
that we care about, and react to them. 

For example: an event ticketing service that wants to issue off-chain tickets
based on crypto payments, could use eth_getLogs to find payments to their
address, and react to these events by processing some logic in their backend
servers to issue tickets to users.

Using eth_getLogs
In the above sample request, we use the parameters "from block" and "to block" 
to specify the hexadecimal block number that we are interested in retrieving
logs from. Note that if this information is omitted, the method will return
information from "block 0" to "block latest" by default (the entire chain
history) and that’s not ideal. Infura has a cap on requests of 10,000 events per
query. Best practice is to request a single block, as we’ve done in this
example, and do that for each mined block.

What this request is saying to the blockchain is “hey, I want event logs
relating to address 0x6B175474E89094C44Da98b954EedeAC495271d0F emitted in block 
0x91F37C (hexadecimal for block 9565052) that matches topics 
0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef, 
0x000000000000000000000000ee25e1ba53c225d250861c8e5a9a3e0fe19c790e and
0x000000000000000000000000dfbaf3e4c7496dad574a1b842bc85b402bdc298d.

The response returned for this request is an array of events. In the example
we’re using, only one event for one address matched the specified topics.

Topics

Topics are events emitted by smart contracts. If we take a look at the original
DAI ERC20 Solidity contract
[https://etherscan.io/address/0x6b175474e89094c44da98b954eedeac495271d0f#code] 
again 0x6B175474E89094C44Da98b954EedeAC495271d0F, we can see two event
signatures that could be associated with it:

 * 94    event Transfer(address indexed from, address indexed to, uint tokens);
 * 95    event Approval(address indexed tokenOwner, address indexed spender,
   uint tokens).

How do we find out which topic (event) it actually was? You guessed it: we have
to create the Function Selector of the Event and take the hash of it. Let’s try
the event on line 94:

web3.sha3('Approval(address,address,uint256)')

The resulting hash is 
0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925. This doesn’t
match the hash provided in the initial request response. Now let’s try the event
on line 95 of the contract:

web3.sha3('Transfer(address,address,uint256)')

Bingo! The resulting hash is 
0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef, which
matches the hash provided in the initial request response. Now we know that 
0xddf25 is the Transfer event.

More Event logs
You might be wondering what the data provided in the request response means:

In this context, data refers to all the ‘non-indexed stuff’ that’s captured in
the events. In our example, for the Transfer topic, data represents the number
of tokens that were transferred. That is, that 0x41f900d25d6693623a6 or
19471.6949921 Dai tokens were transferred from 
ee25e1ba53c225d250861c8e5a9a3e0fe19c790e to 
dfbaf3e4c7496dad574a1b842bc85b402bdc298d. 

This completes our investigation 🎉


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

View our developer documentation
[https://infura.io/docs?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=rpcs_tutorial] 
to explore different ways to interact with Infura to read and write Ethereum
data. New to Infura? Sign up
[https://infura.io/register?&utm_source=infurablog&utm_medium=referral&utm_campaign=tutorials&utm_content=rpcs_tutorial] 
and get started for free!

Ethereum RPCs, Methods and Calls

A step-by-step tutorial to help you get set-up with Infura and start using the
Infura Ethereum API.
Updated 11/05/2020

Hey there, welcome to Infura [https://bit.ly/2ULKn2Q]! If you’ve never heard of
us before, Infura provides developers and enterprises with simple, reliable
access to Web3 tools and infrastructure. Our Ethereum and IPFS API suite serves
and supports thousands of decentralized applications every day.

In this post, we’ll walk you through how to get started with Infura so you can
connect to the Ethereum blockchain and start building awesome software.

We’ll cover:

 * Signing up for an account
 * Creating a new project
 * Security features like AllowList and how to protect your project credentials
 * Making requests.

Step One: Register
The first thing to do is to head to Infura.io [https://bit.ly/2ULKn2Q] and
create an account. Protecting user information is one of our core values. That’s
why you’ll notice that the only bit of info required to register an account is
an email address. You can add your name if you like, but it’s not necessary.

Infura only uses your email address to communicate with you about critical
service updates that may impact your usage. New product and features releases,
offers, industry, company and event news are communicated through our
newsletter. Our newsletter is opt-in so we strongly recommend you subscribe
[https://infura.us14.list-manage.com/subscribe?u=7bec10aa5be97e80fcb0e7c52&id=13433031de] 
to keep up to-date with the latest Infura product news, tips and tricks.

You need to verify your email address, by clicking the link sent to your inbox,
before your account can be activated.

Step Two: Create a Project
Once verified, you’ll be taken to your Infura Dashboard [https://bit.ly/2wXb37T]
. Think of it as ‘mission control.’ From this environment, you can create
projects, view dapp analytics and easily access helpful resources:

Once you’re in, navigate to your Ethereum workspace and create a Project:

You can test your new API credentials by sending a curl request inside terminal
or command prompt where your Project ID is appended to the end of your request
URL:

https://<network>.infura.io/v3/YOUR-PROJECT-ID

Be sure to replace YOUR-PROJECT-ID with a Project ID from your Infura Dashboard
and <network> with the network you are trying to connect to, e.g. mainnet or
rinkeby. You can view a full list of networks we support here
[https://infura.io/docs/gettingStarted/chooseaNetwork], or check your project
settings.

Authenticating using a Project ID and Project Secret
In addition to a Project ID, each project also has a Project Secret for sending
requests. As additional protection for your request traffic, you should use HTTP
Basic Authentication to securely send requests with your project secret.

Your Project ID doesn’t need to be kept secret, but, your Project Secret should
never be human readable in your application — be sure to keep it confidential!
If you are concerned that your ID and secret have been compromised, you can
easily create a new project and generate a new pair.

Remember, never expose your PROJECT_SECRET in client-side code such as
Javascript imported into a webpage or iOS or Android apps. Use the other options
for securing public project IDs instead:

curl — user :YOUR-PROJECT-SECRET \
https://<network>.infura.io/v3/YOUR-PROJECT-ID

Step Three: Copy Your Keys and Select Your Endpoint
Next, select which Ethereum endpoint you want to connect to. This could be the
Ethereum mainnet, or it could be to a test network, like Kovan, Goerli, Rinkeby,
or Ropsten:

Copy the endpoint URL. 

This is the URL that your app will use to send API requests from your
decentralized applications. It is your main connection point to the Ethereum
blockchain.

Using these endpoint URLs removes any need for you to set up and run your own
infrastructure.

Step Four: Control How Your API Can Be Used — Enable Your Custom Security
Settings.
If you are sending API requests from a web browser, or other client-side
application that does not have the ability to secure your Project Secret,
AllowListing can be used to prevent a third party from using your Project ID on
another website:

Understanding AllowList Behavior
 * If a project has no AllowLists enabled, any request will be accepted;
 * As soon as any AllowList entries are added, all requests must pass each
   AllowList type;
 * Each AllowList type is “AND”ed together;
 * Multiple entries of the same type are “OR”ed;
 * Protecting a client-side credential can be simple or complex depending on the
   scenario. Use the AllowList features that best fit your application. Don’t
   just use the User-Agent or Origin AllowList, use both whenever possible.

Visit our docs to see in-depth examples and best practices for your Project
Security Settings.
[https://infura.io/docs/gettingStarted/projectSecurity?&utm_source=infurablog&utm_medium=referral&utm_campaign=project_settings_v2&utm_content=infura_all]

Step Five: Start Making Requests!
Start interacting with Ethereum data by sending data requests using HTTP or
Websockets. Keep in mind that all requests are POST requests. To get you
started, here’s an example of how to send requests for two common use cases, and
the data that will be returned:

(i) Retrieve the Current Block Number
Below is a simple command you can run to retrieve the current block number.
Remember, you need to use your own unique project ID in place of YOUR-PROJECT-ID
:

curl https://mainnet.infura.io/v3/YOUR-PROJECT-ID \
-X POST \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"eth_blockNumber","params": [],"id":1}'

The response you receive back will look like this:

{"jsonrpc":"2.0","id":1,"result":"0x8d8abf"}

The data returned is in hexadecimal, prefixed with 0x. If you convert 8d8abf to
decimal, the resulting number is 9276095 representing the block number at the
time the query was made.

(ii) Check the Ether Balance For a Given Contract
For this example, we’ll need a contract address to check. Let’s pick TheDAO
Withdraw contract: 0xBf4eD7b27F1d666546E30D74d50d173d20bca754

curl https://mainnet.infura.io/v3/YOUR-PROJECT-ID \
-X POST \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"eth_getBalance","params": ["0xBf4eD7b27F1d666546E30D74d50d173d20bca754", "latest"],"id":1}'

The response you receive back will look like this:

{"jsonrpc":"2.0","id":1,"result":"0x1887fd3c2b394d81a33d"}

Once again, by converting the hexadecimal 1887fd3c2b394d81a33d to decimal,
you’ll get back 115845353546137586475837. What does this string of numbers mean? 
This the balance of Ether in that contract in wei. You may want to convert this
to Ether. If 1 Ether equals 10¹⁸ wei, simply move the decimal eighteen places to
the left. Voila! Now we know there’s a balance of 115845.353546137586475837
Ether in TheDAO Withdraw contract.

There are more sample queries in our documentation, so head to 
https://infura.io/docs and try them out.

Step Six: Use the Infura Dashboard to Gain Insight Into Your Application
Now that you’ve started issuing requests, your dashboard will start populating
with insights on performance and API usage.

Jump into your dashboard [https://bit.ly/2wXb37T] regularly to drill down into
specific request methods, bandwidth usage and most active usage times to
optimize your app and better understand your users.




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

We’ll be creating more tutorials to help you build with Infura. Subscribe to
our
newsletter
[https://infura.us14.list-manage.com/subscribe?u=7bec10aa5be97e80fcb0e7c52&id=13433031de] 
or follow us on Twitter [https://twitter.com/infura_io] to stay up-to-date.

Tutorials

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

Tutorial: State and Payment- Power Up Your App Using Javascript & Infura

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

Building Dapp Frontends with React & Network.js

Ethereum RPCs, Methods and Calls

Getting Started With Infura