How Decentralized Is It? An Example Ethereum Smart Contract and Front End Web App (dApp) Demo with Alchemy and Hardhat

How Decentralized Is It?  An Example Ethereum Smart Contract and Front End Web App (dApp) Demo with Alchemy and Hardhat

"Crypto" continues to move mainstream.  From the latest Biden administration executive order, an estimated 16% of adult Americans have engaged with crypto, with many millions more engaging worldwide.  Coinbase offers services to more than 89 million users in more than 100 countries.

We are seeing the effects of evolving rules for censorship, private property, and monetary policy play out every day.  In many cases, the centralization of such actions are pushing millions of people to look to decentralized options to preserve private property rights and transparency in our evolving digital world.

So just how decentralized are various aspects of blockchain networks?

In this article we will explore exactly how decentralized everything on top of the Ethereum stack is.  We will walk through the deployment of a smart contract to the Ethereum Ropsten network, build and deploy a decentralized web app (dApp) to interact with the smart contract, and review the interaction details along the way to understand how each component is decentralized and to what extent.

The web dApp can be seen here:

And all code and readme's for the smart contract and web app can be accessed here:

Part I - What is Ethereum?

Ethereum is the second largest cryptocurrency by market cap (behind Bitcoin), and is the leading crypto platform for smart contract development.  Ethereum is often considered one of the main platforms in web3.

From Andreas Antonopoulos:

GitHub - ethereumbook/ethereumbook: Mastering Ethereum, by Andreas M. Antonopoulos, Gavin Wood
Mastering Ethereum, by Andreas M. Antonopoulos, Gavin Wood - GitHub - ethereumbook/ethereumbook: Mastering Ethereum, by Andreas M. Antonopoulos, Gavin Wood
Ethereum is an open source, globally decentralized computing infrastructure that executes programs called smart contracts. It uses a blockchain to synchronize and store the system’s state changes, along with a cryptocurrency called ether to meter and constrain execution resource costs.

The internet at its core is a connection of physical cables (and now satellites) that stretch around the globe and connect computers.  Various protocols (TCP/IP and HTTP) exist for how computers interact when connected on this network.  And different companies (ISPs) own various parts of the physical network and help offer on ramps to average consumers.

Networking and Internet Fundamentals - Connecting Every Computer
Because of the internet, we are already in the metaverse. The internet is a massive infrastructure and set of protocols coordinated and decentralized among private corporations, governments, and individuals.

Ethereum is a new protocol built on top of the internet that governs how participating computers (nodes) interact with each other, and it offers many new options to build on top of its decentralized architecture.

Part II - What is a Smart Contract (and why do we need them)?

Where can the rules of the game be changed by those with more power?  And where does the result of that rule change lead to a worse outcome for the party with less power?

We see this around the world with fiat money creation and its resulting inflation (this is the problem that Bitcoin solves - among others).

There are other examples beyond fiat money printing where having preestablished and transparent rules is worth an order of magnitude increase in compute resources.  Smart contracts, that can automatically execute with no intervention or tampering offer a solution to centralization, power imbalances, and lack of transparency.

Reducing Counterparty Risk

What is the recourse when a large corporation refuses to act in good faith on a previous promise?  Litigation in many cases is not available, not affordable, or a lost cause when there is such an imbalance in resources or power.

77 Smart Contract Use Cases Enabled by Chainlink
Chainlink is a highly flexible oracle framework that provides developers the tools required to build a wide range of smart contract applications.

Putting insurance contracts with predefined terms on the blockchain offers protection to the party with more to lose.

Trust but Verify

How can we be sure that individuals or corporations are telling the truth?  We only need to go back to 2008 to see the mess of the financial crisis caused by overleverage, lack of oversight, and outright fraudulent behavior.  Or Enron before that.  Or WorldCom.

Requiring on chain attestation and provable reserves of banks for lending (and automatic repercussions for falling below limits) offers everyone guaranteed fairness and transparency.

Provable Identity

We have all seen the 'right click and save' memes about JPEGs, but NFTs offer a new possibility of cryptographic provability.  While some of the digital art collections are beyond my personal risk appetite, the idea that we can move provable ownership and private property on chain, with complete personal ownership, is (already) a very real and exciting opportunity.

This could soon include Stock Certificates, House Deeds, Car Titles, or proof of insurance.

We are shifting entire parts of the human experience and life into the digital realm.  Having rules, transparency, and ownership rights that cannot be circumvented by the whims of any other entity will become increasingly imperative.

Part III - Building and Deploying the Smart Contract

On to the demos... Most of the demo for this smart contract has been pulled from the excellent tutorial offered by Alchemy and the defaults bootstrapped by Hardhat.  It is the classic ‘Hello World’ example.

The contract here does two simple things - it allows the input and saving of a message, and the return of the last saved message.

All code and instructions can be seen here:

GreeterSmartContractDemo/SmartContract at main · apleroy/GreeterSmartContractDemo
An example smart contract and associated dapp frontend website for interacting with the smart contract. Uses hardhat and alchemy - GreeterSmartContractDemo/SmartContract at main · apleroy/GreeterS...

We'll look at common steps in the process of building and running the smart contract, who the parties are, and the (de)centralization at each step.

Deploying the Smart Contract

To deploy the contract requires a transaction onto the Ethereum network.  Submitting the transaction requires a private key signature and an account with eth.  Contract creation is expensive - to deploy this very simple contract to the Ethereum Mainnet would cost ~$50 at current gas prices (gas is the unit of account on the Ethereum network).  As a result, this whole demo is on the Ropsten test network where fake eth has no real world value.

Who can deploy something to the Ethereum network?  Anyone can do this - the requirements are to run a local Ethereum node (spec requirements here).  The Ethereum node software offers RPC API calls that enable the contract creation transaction to be submitted and propagated to the rest of the network for inclusion in an upcoming transaction block.

Hosting an Ethereum node can be time consuming, expensive, and complicated - so many individuals (and companies) outsource this to third party providers.  The logic here is the same as why many companies move their infrastructure to cloud providers.  For Ethereum, Alchemy offers a great way to handle all of the complication under the hood, and their company slide illustrates this concept perfectly.

Image credit: Alchemy

So while Alchemy - a centralized third party - is in the middle of this deployment process, it is important to remember that none of it is required - it just makes the process easier.  Alchemy also has competitors - ie Infura/ConsenSys.

After the contract is deployed, it receives a contract address on the network.  And it lives forever.  Here is the contract address for this example: 0x663C14C9a59c763D471AAc4368f9CEa6223af39f

Etherscan offers a blockchain explorer where many of the details can be seen for the contract, including the deployed and verified source code:

Getting the Smart Contract Data

With the contract deployed, we can access the single state variable in this contract ( string _greeting).  When we deployed this contract, we set it to HelloHardhat.  This contract and its initial state was propagated to every node running the Ethereum network.  So when we ask to see the state, this could be returned by any node on the network.  Again we aren’t running a full node, so we’ll use Alchemy in our case to serve the response to our request.

But how is the request to retrieve the message submitted?  This is a GET request to Alchemy.  There are various libraries that offer wrapper methods (in this case JavaScript) to read from the Ethereum network - web3.js, ethers.js, etc all offer libraries for interacting with the Ethereum network.  Nethereum offers a C# client library.  This is all completely decentralized - anyone is able to use these open source libraries, or build their own, and they all adhere to the common protocols of the network.

One way to interact and get the message from the smart contract would be via local program.  This can be seen in the example code.  Without Alchemy, an RPC call could be issued to a local Ethereum node.

const Utils = require("./utils"); 

const API_KEY = process.env.ROPSTEN_API_KEY;

const contract = require("../artifacts/contracts/Greeter.sol/Greeter.json");

// provider - Alchemy
const alchemyProvider = new ethers.providers.AlchemyProvider(network="ropsten", API_KEY);

// signer - you
const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider);

// contract instance
const greeterContract = new ethers.Contract(CONTRACT_ADDRESS, contract.abi, signer);

// interact with desired input
Utils.interact(greeterContract, "new message");

The other way would be a web application that serves as a ‘front end’ to the contract - which we’ll explore in the next section.

Submitting Data to the Contract (a State Change)

Anytime we wish to update the Ethereum network, we change the state of the global Ethereum network.  As a result, any state change must be included in a transaction block (which costs ether).  To ensure ether is paid, a private key signature is required along with the transaction details (the message update in this example).  

Managing private keys, their associated addresses, and transaction signing is complex and as a result nearly everyone uses wallet software to handle the details.  In the case of Ethereum, Metamask is one of the most common wallets.  On desktop, Metamask can be installed as a browser extension.

Just like reading the messages, we can submit new messages programmatically - or with wallet assistance.

We could use code locally to sign a transaction for an address with ether and submit the message.

Or we could use use wallet software (and the code backing that) to handle the details.  We’ll show this in the web app below.

Part IV - Building the Web App (dApp) to Interact with the Smart Contract

Again this tutorial and most of the source code comes from the fantastic resources provided by Alchemy here:

Integrating Your Smart Contract with the Frontend - Alchemy Documentation
In this tutorial, we’ll teach you how to create a full stack dApp by connecting your Hello World smart contract to a React frontend using Metamask and Web3 tools.

The dApp (decentralized web app) is simply a React site that connects to the smart contract on the backend.  Instead of connecting with an API backend, the Ethereum network serves as the backend and serves our smart contract.  The site could connect with any node on the Ethereum network to get or send the updates.  We could self host the node, but we use Alchemy to take care of all of these details.

As for hosting the source code of the website, this site is deployed to Azure (Azure DevOps) with a CI/CD pipeline.  The project yaml file can be seen in the root directory.  And the website can be seen here (only "formatted" for desktop - the CSS is desperately lacking):

Smart Contract Demo
Web site created using create-react-app

This is not decentralized.   It is reasonable to expect that if the dapp violated the terms of Azure, etc, then the site would get shut down.  However, this is just website code, and could be hosted anywhere.  It took me a few minutes to have Azure spin up a site, but theoretically I could have self hosted the website, or open sourced the code and sent it abroad for others to run.  So while Azure is not decentralized, the site is decentralized to the extent that it could be hosted anywhere.  

It would get a bit tricky as we are using Alchemy for Ethereum nodes, so in the event of needing to host the site elsewhere, the other party would need to either setup a new API key for alchemy and plug in the environment variable for the frontend connection, or host a full Ethereum node on the backend.

As for DNS records and everything else in the web stack, that would fall into being just as decentralized as the current internet.

There may be some other options (like hosting the site on IPFS), but we’ll get to that in later articles.

Beyond the web app, once data (in this case a text form) is submitted to the Ethereum network, that transaction log will remain forever.  It is completely decentralized to the extent the Ethereum network is decentralized.

How to Interact with the Demo App

This requires Metamask and test ether for the Ropsten network that can be obtained for free here.  With eth and a wallet address, you can follow the prompts on the UI button to connect your test account and submit a message.  This message will live forever!

Part V - Reviewing Decentralization and Conclusion

Throughout this walkthrough, we deployed and interacted with a smart contract on the Ethereum network, and we created and deployed a website that interacts with the deployed smart contract.

At the base layer of ‘decentralization’ of this stack is the Ethereum network itself.  This is beyond the scope of this article - Proof of Work and the soon to be Proof of Stake (for Ethereum) are consensus protocols and offer varying degrees of decentralization, that are quite complex and best discussed in a new article.  In addition to the network itself, there are other factors of decentralization - for example the Ethereum Improvement Proposal (EIP) process.  Same for Bitcoin with the processes for signing releases, signaling, etc.  We’ll explore these topics in the future.

But specifically on top of the Ethereum network, we see that Smart contract development and deployment is completely decentralized.  Anyone can deploy a contract and interact with it.  While third party services will centralize functionality (ie Alchemy), this is for convenience and speed (the benefits of centralization).  The network still offers the ability for anyone to get started and take care of this without any third parties.  Same thing with making transactions, using wallets, etc - it is this key concept of a check and balance that preserves the integrity (and value) of the network.

At the end of the day, building with, deploying, and interacting with the Ethereum is as decentralized to the extent that the underlying network is decentralized.

If you enjoy this kind of content, please subscribe to the Exponential Layers newsletter to get all updates on new videos and articles.