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
Web 1.0 can be characterized as the first iteration of the Web. A static, read-only page. Web 1.0 consisted of sites serving static content to the user.
Revolutionary for the time, users could collect knowledge on anything, by navigating around through a series of documents connected by Hyperlinks.
Web 1.0 was read-only meaning a user was typically served a static page. You could not interact with the site, apart from clicking on different documents.
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
Fast Forward to around 2004, where we saw an adoption of websites providing user interactivity.
Characterized by the ability for users to interact with the web, Web2.0 started off simply as a user being able to change the state of a website, which lead to ordering books, flights booking with a backend database.
Fast forward to the present time, and now the user can create and earn money, order meals from apps, gig economy, and freelancing.
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.
However, over time we’ve seen a degree of centralization of services where a few corporations make up what we use every day. Whereby in most cases, you don’t have control of your data, or how it is stored.
Additionally, certain business models, such as Meta/Facebook operate on collecting personal data on users to sell to advertisers. In effect, making us the product.
The important takeaway is a high proportion of Web 2.0 apps and services we use every day are owned by Big Tech.
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:
- Free from Censorship (Can’t be removed) – With Blockchain’s decentralized nature, there’s no centralized single point of failure
- Built-in Payments – Send Payments to any wallet
- Secured by Cryptography
- 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?
Building a DApp requires a few different pieces a few tools and can be its own separate article on its own. However, this is the overview of building a DApp on the Ethereum Blockchain.
Solidity is an object-oriented, high-level programming language used to write Smart Contracts. You can test and deploy your Smart Contract with Remix, Ethereum Browser IDE.
Web Client Libraries:
Ether.js – Proves your applications a way to interact with the smart contract. to communicate with the End User and Smart Contract on the Blockchain. Two popular libraries. (Note: Ethers is supported on JS Only)
Handles account management and connects the currently active user to the blockchain. Once a user has connected their MetaMask wallet, we (developers), can interact with the Globally available Ethereum API (window.ethereum).
Provider: A provider links to a running node that talks to the Ethereum network
Infura API – Provided you wish to deploy to a Testnet like Ropsten. As well as providing access for Ethereum and IPFS networks based on its hosted Ethereum node cluster.
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.
Note: Your private key is used to sign cryptographic hashes with your wallet. This is why as a user/ wallet holder it’s important to keep your private keys secure.
Once a private key is compromised anyone with access has full control over your wallet!
We have covered what is a Dapp, how to build DApps, and the Web3.0 DApp architecture. Let’s take a detour into the world of tokens and Cryptocurrencies.
ERC20 Tokens – The Cryptocurrency Mania
ERC20 Tokens – the technology standard behind your favorite projects. From decentralized stablecoins such as DAI to the crypto meme coins of SHIBA. With all that’s going on within this space, ERC20 Tokens can be a whole much more than dog coin projects. Let’s dive in.
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)
Examples of the methods and events that would need to be implemented:
- Transfer() – Transfer tokens from one account to another account /wallet address.
- balanceOf() – Get the current token balance of the account
- totalSupply() – Total supply available on the blockchain network (e.g. mainnet).
- approve() – Approve whether a token amount can be spent or transferred by a third-party account. E.g. use for AirDrops etc.
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.
As interesting as it is, this can theoretically make anyone their own federal reserve of their own currency. This may explain the 500,000+ Tokens deployed on the Ethereum main net. It’s important to note, some are only designed to part you from your cash. (Given that, anyone could literally recreate your smart contract, name, ID, and symbol). That’s why, It’s important to verify the contract address, and whether it’s legitimate.
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
Bore Ape Yatch Club, NFT
Ah, yes, we’ve now hit the Crescendo of the current Crypto Craze. Welcome to the world of NFT’s where digital arts and collectibles are being immortalized on the Blockchain, Artists, celebrities, and influencers alike selling digital arts for an are eye-watering sum to buyers. However, NFT’s do get a fair share of a bad rep. It should be emphasized that Digital art is just a one-use case of using an NFT.
What’s an NFT?
NFTs stands for non-fungible token. For the purpose of a high-level overview, non-fungible means the item in question is unique and can’t be replaced. An example of a non-fungible in the real world can involve assets such as Land, your passport, or an original piece of art. Something unique like the Mona Lisa.
Which in turn is the exact opposite of what fungible is. A fungible item in the real world is an item that you can readily replace with an equivalent type. A Dollar bill is a great example. $1 is $1, or a piece of gold can be easily replaceable with another piece.
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
Unlike current software web2.0 where we can store data on a centralized database. Storing data on the blockchain would not be practical, and in fact, very expensive (if possible).
As a result, Data is primarily stored off-chain with decentralized networks like 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.
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:
This is essentially how Images works are stored “on-chain”. By storing the IPFS URI along with the image properties. Meaning, you “own” the transaction which has the record of the CID address. This means, you theoretically “own” the image. As you (the user) own is the receipt of the transaction stored on the blockchain.
The Current Web3 social media DApp, JoinSpace.xyz being developed incorporates IPFS. So, you can upload your own images or mint your own “NFT”.
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.”— jack⚡️ (@jack) December 21, 2021
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…
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.
Gas Fees – Specifically for the Ethereum network. High Gas fees are a notorious issue, with some gas fees costing more than the transaction itself. However, with the upcoming Eth2.0 and release of ZK-Rollups, these issues are hoped to be resolved/ significantly reduced.
User Experience – This may be subjective but worth noting specifically to DApps. When any transaction is required to be written on the blockchain, this would require a new window confirming the transaction – typically via MetaMask or a similar Wallet Provider. This may lead to bad UX for new users.
Scaling: At this current stage, the Ethereum Blockchain is known for its scale issues. Leading to other scaling solutions such as Polygon, (a Layer 2 Scaling solution).
We’ll cover this more in the next post about Building a Social Media DApp on Web 3.0.