Web3, DApps, ERC20 Tokens, NFTs & IPFS Explained

Intro

Web3, Dapps, ERC20 Tokens, and NFTs… it feels like these are the next set of tech buzzwords, But what do they all mean?

In this article, we would go over quite a few concepts starting from the evolution of the internet to web3.0. We’ll also, cover what are DApps?, DApp Architecture, ERC20 Tokens, NFTs, and how data is stored on the Blockchain.

It’s a long one, So let’s begin!

Web 1.0 vs Web 2.0 vs Web 3.0

The Web: An informational hub home to many of the largest sites used by billions across the world. Gaining Information, and human productivity has been drastically improved… many can self-educate, watch entertainment, or even earn a living through the web.

But how did we get to this stage?

In order to understand where we are with web 3.0, let’s understand where the web first started, with Web 1.0. Although there are no official dates, The Web evolution can be characterized by the following.

History of the Web Evolutions – Web 1.0

As a result, Users were seen as consumers of content, whereby the creator was usually the developer behind the site. (Approx. 1991 – 2004)

In fact, the first website was published by Tim Berners-Lee, 1991. Dedicated to information on the world wide web. A site providing an explanation of how to set up your own website.

Web 2.0 – Era of Internet Interaction

Web 2.0 refers to the current iteration, and what most technologies we use daily operate on.

Fast forward to the present time, and with the advancement of development tools and wider internet access. Users can create content and earn money, order meals from apps, earn a living within the gig economy, and even freelance.

As a result, web 2.0 can be characterized by the participants being both the Consumers and Creators through web iteration.

Knowledge hasn’t been spread faster on information, allowing people to experience events in real-time.

Web 3.0 – Era of Decentralization

So, What’s Web 3.0?

The big fundamental difference between web2 vs web3 is Decentralization.

Web 3.0, however, being a loose term refers to  “a decentralized, secure web where people can exchange money and information without the need of an unnecessary middleman like banks or a payment system.” – You become the owner of digital goods.

An Example of a Blockchain used in Web3 is Ethereum.

Ethereum, can be seen as a distributed network of computers where all participants (known as nodes) have to agree on the same state of the network of the data throughout the network.

Web3 ideally enhances the internet experience we have today, by providing a few other characteristics, such as:

Decentralized Application that runs on the Blockchain:

• Verifiable, Trusties, Permissionless, Self-governing, and Robust
• Not Centralised by any authority. Peer to Peer.

This Twitter thread also provides an argument for web3:

Why Web 3 matters ?

— cdixon.eth (@cdixon) September 26, 2021

Web 3 Use Cases:

There are many examples of existing applications running on web3 including DAO’s, DeFi, and DApps. (we’ll cover DApps shortly). In the meantime, below are some real-world examples of Web3 applications:

What Are DApps:

A DApp is a Decentralized Application.

DApps are similar to everyday apps that perform a utility for the user. In fact, the user interface is identical to a normal website or App. An example of a DApp is Uniswap, a decentralized crypto exchange.

TL;DR – The fundamental difference between a web2.0 website and a DApp, is that DApps have their backend code deployed to the blockchain, known as Smart Contracts.

How do DApps work?

In web 2.0, we usually build applications that run on a centralized server whereby the data is owned by the company and the app is operated by a central authority.

Typically, when we build a web application. (Consisting of a Frontend, Backend) the web application is deployed where the backend code resides on a centralized cloud hosting service like AWS, where it is managed and scaled to your needs.

Take Ethereum as an example, (note, there are many Blockchains that replicate a similar architecture.

For a decentralized app on the blockchain, your backend code is contained in a smart contract and deployed to the Blockchain, usually written in Solidity (language).

A smart contract can be viewed as a piece of code that executes a piece of logic and lives on the blockchain that we can interact with across multiple wallets.

Applications that interact with a Smart Contract on a Blockchain, are known as Decentralized apps. Or a DApps for short. (Hence the name).

The key characteristics of a smart contract are that Smart contracts are immutable. Once a DApp/smart contract is deployed on the Ethereum Network it’s for all to view and interact with.

Due to its immutable nature, once DApps/ Smart Contracts are deployed on the Ethereum network you can’t change them.

In summary, DApps are decentralized applications where the backend of the application is deployed to the Ethereum Blockchain known as Smart Contracts. Users interact with the front end to interact with data on-chain.

Advantages of a decentralized blockchain include:

1. Free from Censorship (Can’t be removed) – With Blockchain’s decentralized nature, there’s no centralized single point of failure
2. Built-in Payments – Send Payments to any wallet
3. Secured by Cryptography
4. Open Source – Encourages transparency

A Smart Contracts code, transaction history, and user activity can be seen on a Block Explorer, such as Etherscan.io. Here’s the Smart Contract for JoinSpace (Social Media DApp).

Social Media DApp:

JoinSpace.xyz – An example of DApp I’ve developed that runs 100% on-chain.
Users can earn tokens with upvotes, Tip eth, and own their content store on the Blockchain. Create a community known as subspace “s/” in relation to “/r” for subreddits.

Other use cases of DApps, include DAO, Arbitrage Trading, and many more that are being developed.

How can we develop a DApp?

Front End – ReactJS is a front-end JavaScript library for building web applications (alternatively HTML, JavaScript). Similar to any 2.0 web application.

Note: for Python developers,  web3py, and web3js are also popular alternatives.

MetaMask:

Frameworks: for testing, debugging Smart Contracts, creating a local blockchain instance, and deploying scripts:

• JS Developers: Hardhat – Ethereum development environment for professionals
• Python Developers: Brownie – Python-based development and testing framework.

Note: Before going into the Rabbit whole of DApp development. It would help to get a fundamental understanding of the Blockchain Stack, such as Ethereum miners and nodes.

Great, so we now got our Front End and Solidity Contract Deployed to the blockchain. Let’s now take a deep dive into how our DApp would interact with our Smart Contract Deployed to Blockchain.

How does the DApp Front End interact with Smart Contracts?

A Provider, allows a Dapp to communicate with smart contracts deployed on the blockchain. This allows our DApp to read the state/data stored on the Smart Contract.

However, If we wish to write to the same state, we’ll need to “sign” the transaction with our private key – validating that the transaction came from a genuine public wallet address. Known as a signer.

Note: A signer is not required when reading from the blockchain, only when submitting a transaction.

How to Connect a wallet to a DApp?

Unlike web2.0, where a user’s credentials are stored on a centralized database. With Web3.0 the end-user owns all their data. There isn’t a need for a developer to collect the username or password. 

With Web3.0, the end-user would require connecting to a browser extension such as MetaMask in order to make their wallet’s details available to a DApp.

Metamask stores the user’s private key in the browser, whenever the front end-user needs to sign a transaction, e.g buy a token, the MetaMask window is invoked.

The end-user has a public address that can receive payments and a private key that can sign transactions – to interact with the blockchain to send payments mint tokens, etc.

How does this look from a developer’s perspective?

MetaMask provides documentation on how to connect your DApp to MetaMask wallet
In summary: MetaMask injects a global API into websites visited by its users with a global variable, window.ethereum.

Once a user has connected their MetaMask wallet, the DApp can interact with the Globally available Ethereum API (window.ethereum) to access details regarding the wallet.

ERC20 Tokens – The Cryptocurrency Mania

What is a Token?

A token can represent virtually anything on the Blockchain that we can earn or trade with other people. Whether being points in an online game. No. of points to a user’s profile, lottery tickets, and of course… cryptocurrencies.

However, instead of every developer building their own token implementation. (Which would be chaotic)

There needs to be some standardization, making it easier for others such as exchanges to list these tokens by building functions into the smart contract to transfer, withdraw and swap these tokens. This is where the ERC20 standard comes in.

The ERC20 standard presents a token standard that helps keep track of Fungible tokens. Meaning, each token has the exact same properties (both in type and value) when compared to another token.

I.e, an ERC20 Token named ABC. One ABC Token is always equal to all the other ABC tokens. As a result, this makes ERC20 Tokens ideal for mediums of exchange – currency, staking, and voting rights.

In order for a Smart Contract to be called an ERC20 Token Smart Contract, the Smart Contract would need to comply with the ERC20 token standard.  (Ethereum Request for Comments 20)

Constructing an ERC20 Token Contract has been made simpler with OpenZepplin; which is a library that provides reusable templates for writing a smart contract that complies with the ERC20 standard.
Using OpenZepplin, we can inherit the methods where we can change the name, symbol, and decimals. These tokens are sent to an address specified during the minting process. Being the, msg.sender argument.

By default: ERC20 uses 18 decimals. Where 1 Eth, is equal to 10^18. Or (1 Ether = 1,000,000,000,000,000,000 wei).

You can have a look at an example of an ERC20 Smart Contract in Remix. In fact, OpenZepplin provides a Smart Contract Wizard for creating your own token.

Additionally, further examples of using tokens as reward points include gaming, loyalty points in online services, or even a gift card. (In the form of cryptocurrencies)/

This can even expand to social media platforms. JoinSpace.xyz is a decentralized social media platform I developed, which allows users to earn tokens based on their content quality.

NFTs and the Cryptocurrency Craze

What’s an NFT?

Taking the real-life art piece into the digital world means the art piece retains its unique characteristics and attributes such as rarity. Note: NFT is not only digital art, this can expand to concert tickets, unique fashion collectibles, proof of deed, etc.

TL; DR – NFT’s are unique tokens that we can associate unique characteristics to it in the form of rareties. The scarcity of the item increases value. Based on Supply & Demand.

There are two main types of Digital Artwork NFT, you’ll see:
– Non-Generative – NFT created by a person, e.g. Beeple NFT’s
– User-Generative – NFT’s that make use of generating unique attributes in the form of rareties such as look and traits. Bored Ape, CryptoPunks, CrypoKitties.

We’ll focus on the latter example:

So how does this work with NFTs?

On a high level, information about the NFT such as metadata, tokenURI/hash is stored on the blockchain, where the can be accessed off-chain.

To recap, an NFT is simply a token that can be distinguished from another.
From a developer’s perspective: Typically, this is how NFT’s work:

Say, for example, the Bored Ape Yatch Club Projects

The original image along with its attributes and metadata are stored on some form of a decentralized database. When stored, this provides us a hash which is a reference to where this image is located.

The hash of this image, along with its’ metadata is stored on the Smart Contract.
As a result, the Smart contract created the association, referencing where the image is stored along with its metadata and attributes.

Given that the image hash is stored on the blockchain (which is very difficult to change).
When a buyer purchases an NFT, the smart contract keeps track of the buyer’s wallet address.

Which can be easily looked up to verify who owns the NFT / as a proof of ownership on the Blockchain. But, you may be wondering where is this image stored in the first place. And similar to how fungible tokens follow an ERC20 token standard. NFT’s follow a separate standard known as ERC721 to mint your own NFT’s.

The following social media, I’m developing known as JoinSpace would involve ERC721 Standard to mint NFTs

This perfectly leads us to how data is stored on the blockchain. E.g. images etc.

Storing Data on the Blockchain – Introducing IPFS

“IPFS, (Interplanetary File System) is a distributed system for storing and accessing files, websites, applications, and data.” – ipfs.io

A peer-to-peer network for storing and sharing data in a distributed filesystem. Like how BitTorrent works.

When we require direct access to an image, the current internet (web2.0) requires you to put in the full URL address you’ll like to access. This is called location-based addressing. Every piece of content has its own unique address which is located where some server could serve the image to your browser.

The problem is that it leads to a single point of failure. If an image, information, or your favorite video. Gets deleted there’s no easy way of retrieving the file. This could be important for political censorship.

How can we store blockchain data off-chain with IPFS?

IPFS uses content-based addressing. Content-based addressing means that every file has its own address.

When files are uploaded to IPFS, each file is split into smaller chunks that are cryptographically hashed, a unique figure print is created called a CID (content identifier).

The interesting part is you can access any images using the URI. E.g. Filename: Ethereum-logo

Here’s an example of Ethereum’s logo uploaded to IPFS. (Look at the URI above – interesting, isn’t it?!)

This CID acts as a permanent record of the file. Due to its distributed nature when a user views or downloads your file. They also store a cache or copy of your content. Hence the more people view your content the more distributed the image becomes.

Given, that storing would be very expensive, the NFT represents a link to that image, which points to the content uploaded URI off-chain.

This can be as simple as storing the uploaded CID to the blockchain. IPFS solves this by passing the image through a hash function to provide you with a CID.

QmdyaWz9KGcGPrbBgUTYysqTL9XienaiHgh8Bou65hrFvP

https://ipfs.infura.io/ipfs/<CID>, where, the CID is the hash of the image.

Your meta URI can be accessed – E.g. View this image of the ETH Logo:

https://ipfs.infura.io/ipfs/QmdyaWz9KGcGPrbBgUTYysqTL9XienaiHgh8Bou65hrFvP

Note: In some cases, NFT has been found to be using a URL to a Google Drive or cloud storage (being centralized servers). The issue here is that anyone can replace the contents of the image after being sold.
Meaning you can receive an image that is different from what you bought. Or worse, a seller could simply delete the image. As a result, you own a transaction to a link that doesn’t exist.

As with Prometheus bringing fire to Humans. These new technologies such as ERC721/NFTs can bring new innovations / new industries – how they would be used would be down to the user. Which leads us to if Web3 is just hype?

Web3 Scepticism – Is web 3.0 all Hype?

In relation to Web3, DApps, and the Blockchain: in general, we’re still relatively in the early stages of web3/Dapps developments. And it’s definitely going to be the new Buzzword, and there are valid arguments for Blockchain ability to scale

With all-new technologies, it’s always good to have a cautious optimism to them and evaluate the best and worst case. There are valid arguments against web3 such as Former Twitter CEO, Jack Dorsey’s comments on Web3:

You don’t own “web3.”

The VCs and their LPs do. It will never escape their incentives. It’s ultimately a centralized entity with a different label.

Know what you’re getting into…

— jack⚡️ (@jack) December 21, 2021

Although this article doesn’t go into detail on the arguments against web3 the above Twitter thread does point out some main points such as insider’s ownership and scalability.

While on that point, this leads us to the current limitations of the Ethereum Blockchain.

Blockchain / Smart Contract Limitations:

Before being accused of spreading FUD, while the Blockchain provides a whole array of potential and realized advantages. There are current issues and limitations faced:

Hacks and Vulnerabilities – Although there are great frameworks and smart contract standards, such as OpenZeppelin. Your Smart Contract is only as good as you program it.

Given that Smart contracts can be viewed. Blackhat Hackers have the opportunity to probe through your code for weaknesses and vulnerabilities. One example is the DAO, Hack of 2016.