File Explorers

On File Explorer module, you can manage your workspaces and create contract files under workspaces. When you work on multiple projects, workspaces can help organize your files in different project workspaces. You can create smart contract files, create folders, and upload local files to the current workspace. It is very similar to other cloud browser-based tools, like google drive, dropbox, etc. Under contracts folder, Remix creates three default contracts for you. If you don’t use, you can delete them.

A screenshot of a interface labeled default workspace illustrates 3 markings for 3 icons. The markings are create new contact, create new folder and load local file to current workspace.

Solidity Compiler

On the Solidity compiler module, you can select a different version of the Solidity compiler, the current version at this writing is 0.8.7. Since Solidity evolves quite frequently, you need to pay close attention to choosing the configuration you need. Once you create Solidity files, you can compile files by clicking the compile button. The Remix contract section will display a file compilation information, for example, error and warning. The Remix will auto-save the current file change continuously every 5 seconds.

A screenshot of an interface labeled solidity compiler illustrating advanced configurations with file selection and run options.

Deploy and Run Transactions

After you have compiled a smart contract, you can use deploy and run transactions module to deploy the contract. You need to select one contract in the Contract Editor to deploy if you have multiple contracts compiled.

A screenshot labeled deploy and run transactions page with environment, account, gas limit, value and contract details filling form. Lower part illustrates adress adding, transactions recorded, and deployed contacts section.

This module provides multiple EVM Environments:

JavaScript VM – JS VM has its own sandbox blockchain simulated Environment running in your browser. It runs transactions very fast (no mining). When you execute transactions, the data is only saved temporarily in the browser. Once you close or reload the page, all transaction data will be lost. You will have to start from scratch. It is very useful for a quick try and tests simple contracts.

A screenshot of the a section from an interface labeled environment. Environment has a box for selection of java scripts, web providers and connect list.

Injected Provider – Remix will connect to a web3 provider injected in the browser (commonly known as a browser extension for your wallet). Metamask is currently the most popular Injected Provider. You can also use other popular wallets like Coinbase wallet, Trust Wallet, and Ledger. You can connect to Ethereum’s main network or various testnets through the provider. This allows the Remix to interact with a real network.

Web3 Provider – Remix will connect to a remote node. You will need to provide the URL for the selected provider. Infura, Alchemy, and QuikNode are some popular Web3 providers.

Other Modules

We have introduced the important remix modules, which we typically use often. Other modes like plugin module allow you to install the needed plugin like debug plugin, Solidity static analysis module, Solidity Unit test module, and Settings module. If interested, you can refer to the remix document for detail (https://remix-ide.readthedocs.io).

At this stage, we should have the basic knowledge of Remix.

Let’s start to learn Solidity by writing “Hello, World!” smart contract.

Write a Contract

On Remix File Explorer module, under contracts folder, click the create new contract icon (page icon) or use context menu by right-clicking to add our first contract. We will name our first smart contract HelloWorld.sol. Solidity Smart contracts will always have an extension of .sol as file type.

Define Contract

To make the code cleaner, you typically leave a blank line after the pragma entry. Then, in the following line of code, you start to declare the contract. In Solidity, we use the contract keyword followed by the name of the contract. In our case, it will be HelloWorld. The contract name should match the filename you created. The contents of the contract will be enclosed within curly braces {}:

contract HelloWorld {

}

So far, the contract should look like Figure 5-7.

A screenshot of the solidity compiler configuration and compiling the hello world.

Define Contract Constructor

The next thing is to create a constructor function:

    constructor(string memory initMessage) {

      message = initMessage;

    }

The HelloWorld.sol will be like Figure 5-8.

A screenshot of hello world contract with messages.

The constructor is a function that can be compared to a factory machine. Once given an input, they can run a specific task to return a result.

To declare a constructor, we use the constructor keyword. Once we create our constructor, we can create many different contracts using the same constructor. Whenever a new contract is created, the system automatically calls on the constructor; they only need to use the constructor once to create the contract. If a constructor is not defined explicitly, the Solidity compiler will create a default constructor, which does not require any input.

Most often, you may need a constructor that passes one or more parameters. Inside the {}, we add the initialization logic. In our example, we pass “string memory initMessage” input. The memory keyword we use here indicates that we want initMessage parameter to be mutable, or changeable, and the initMessage value is assigned to message variable and initialized during contract creation time.

Define Functions

HelloWorld contract will have two functions. One to update message and the other to get message:

1. 1.

   Update contract message function

   Update function will be like as follows:

       function update(string memory newMessage) public {

         message = newMessage;

       }
    
2. 2.
   Get contract message function

       function getMessage() public view returns (string memory) {

           return message;

       }
    

A Solidity function is defined with the function keyword, followed by

• The name of the function. Here “update” is the function name.

• A list of parameters to the function is enclosed in parentheses and separated by commas (parameter1, parameter2, ...). It could be empty (). (string memory newMessage) are parameters in the HelloWorld function.

• Function visibility – public, private, internal, and external.

• Functions behavior – pure, view, and payable.

• Followed by optional returns keyword and return value type (type1, type2, ...) when the function has return values. In our update function, we don’t have a return value. But in getMessage, we return (string memory)

• A statement block that defines the function, surrounded by curly brackets, {...}.

Syntax

The basic syntax is shown as follows:

function function_name(<parameter types>…) {internal|external|private|public} [pure |view|payable] [returns(<return types>…)] {

        //statements

}

Function Visibility

A function’s scope of visibility can be set by one of these four modifiers:

• Public – It can be called internally or externally.

• Internal – Internal functions can only be accessed from inside the current contract and related deriving contracts.

• External – It can be called from other external contracts, but cannot be called internally (inside the current contract).

• Private – Like internal visibility, but the function cannot be accessed from related deriving contracts.

Functions Behavior

The pure, constant, view, and payable keywords dictate a Solidity functions behavior.

If the function behavior is not specified, it will read and modify the state of the blockchain.

Pure Functions: It ensures that the caller can’t read or modify the state.

View Functions: View functions are read-only functions that ensure that state variables will not be modified after calling them.

Payable: A payable fallback function is also executed for plain Ether transfers.

Once you completed HelloWorld.sol, you should have 15 lines of code, as shown in Figure 5-9.

A screenshot of the hello world completed code.

Compile a Contract

As we learned in the EVM section, the smart contract needs to be compiled to Bytecode, before it can be deployed to the blockchain. In this step, we will compile our HelloWorld smart contract.

Remix IDE allows us to compile our Solidity smart contracts directly from our browser. Click on the compiler icon in the navigation. On the Solidity compiler page, select 0.8.15 compiler version; click the compile button to compile HelloWorld smart contract. If it compiles successfully, you will see a green checkmark on the compiler icon in the navigation. Notice also that compilation details button with Application Binary Interface (ABI) and Bytecode will show up after compiling. ABI contains JSON format data which encodes smart contract information that EVM understands and provides the standard way for Dapp to interact with contracts. You can check compilation detail by clicking the button, as shown in Figure 5-10. The result will have Bytecode, Abi, Assembly (Opcode), and other useful compiled contract information. You should copy abi content to some place; we will use this abi String in Dapp section to call with smart contract.

Snapshot of the hello world contract with sections marked as bytecode, a b i, storage layout, web 3 deploy, meradata hash, function hashes, gasestimates, devdoc, userdoc, runtime bytecode, and assembly.

Deploy and Run a Contract

To deploy our contract, click on deploy and run transactions module on the left menu. You should see a dropdown menu listing all the available smart contracts under the Contract Heading, HelloWorld. HelloWorld.sol will be the default selected contract, with an orange Deploy button directly beneath it.

A screenshot of deploy and run transactions interface displaying hello world code on the right. The left side illustrates options for selecting environment, account, gas limit, value, and contract.

So far the contract hasn’t been deployed yet. So, to deploy HelloWorld, we need to provide the string initMessage just beside the Deploy button.

We can leave Environment as default selected JavaScript VM, default selected account, Gas limit, and value. Let’s enter Hello Solidity and click the Deploy button.

A screenshot of an interface labeled deploy and run transactions illustrating hello world contract entry and deployed contracts on the left and the code on the right.

The built-in terminal console shows deployment information. The default account amount was reduced by a small amount of gas fee, or a transaction fee, from 100.00000 ETH to 99.99999 ETH.

Under deployed contracts panel, you will see deployed HelloWorld contract with the contract address.

If you expand the deployed HelloWorld contract entry, it will show all contract items—state variables or functions—defined as public in your smart contract.

We can see the update, getMessage function, and message variables in our case.

When you click the message button, you should see “Hello Solidity” under the message button. The same thing happens when you click the getMessage button.

A screenshot labeled as deployed contacts illustrates a section as hello world message deployed to contracts.

To change the message, enter “Hello Ethereum” for the update function and then click the button to set the new value.

You can validate that the message variable was updated by clicking on the getMessage function or message variable.

A screenshot of the hello world message updated. The new message is hello ethereum.

Congratulations! You have successfully written your very first Hello World smart contract in Solidity and deployed it to the blockchain. To learn more about Solidity, you can visit the Solidity Official Documentation (https://docs.soliditylang.org/en/v0.8.15/contracts.html).

Getting Started

Before proceeding with this section, you need to install the following:

Install HelloWorld Dapp Project

Open terminal, navigate to helloworld project location. Run npm install

A screenshot of the hello world project location.

This will install node library needed to run Helloworld Dapp

The project structure should be similar to the one shown in Figure 5-26.

A screenshot of the project structure folders illustrating options after selecting client dot js.

Note, the source code points to the Goerli test network contract address at:

0xe02cfad8b29d0aad478862facb2e6a9b1fed7bc9

You can use this address for testing or you modify this address to your own deployed contract address.

Open client.js, update line 3 of your own address. If you modified the contract and have different contract abi, replace line 4 with your own contract abi.

A screenshot of the address testing for own contract address.

Run HelloWorld Dapp Project

Run the following command shown after the helloworld folder from terminal:

node index.js

This will bring up node server to host HelloWorld Dapp. The port number is 3000.

A screenshot of the dapp node server address.

Open HelloWorld Dapp from Browser

Now you can open Dapp from the browser by entering http://localhost:3000. You should see the HelloWorld Dapp page. You can see the top right corner has connect button, which will connect to Metamask. On the middle of the page, there is a blue message button that can be used to retrieve the blockchain message. The red update button with a Message input field will update contract message content.

A screenshot of E 2 E hello world dapp page. A box captioned message update is located at the centre.

Connect to Metamask

Once connected, we can get user wallet, network, and account information from the provider. provider.getSigner() will get Ethereum Accounts from Metamask wallet. provider.getNetwork() returns current Ethereum Network that wallet connected.

Here is a snippet of the code:

A screenshot of the snippet code.

Since you are running Dapp for the first-time and are not connected to Metamask yet, the Dapp page connect button will be orange. So let’s click the connect button to connect to Metamask. Once again, if you are not signed in, you will see a popup from Metamask asking you to sign in.

Screenshot of an interface labeled E 2 E hello world dapp and a metamask page asking for login information.

Login to Metamask. The page will automatically connect to Metamask and display related account and network information on the green display area across the top.

A screenshot of an interface labeled E 2 E hello world dapp and a success icon on the right displaying a box for message update.

Get Contract and Call Get Message

In Remix smart contract compile and deployment, we have gotten abi and contract address information. Ether.js is provided below api to get contract information and you can use new ethers.Contract(contactAddress, abi, provider) API to get deployed contract instances.

A screenshot of the read only contract message code.

With ether contract object, you can start “call getMessag” function:

A screenshot of the call get message function code.

You will get the Hello Solidity message from the Goerli test network:

A screenshot of the hello solidity message update box in the E 2 E hello world dapp interface.

Get Contract and Call Update Message

When you need to call state-changing methods, such as an update message, you must connect to the signer and pay a gas fee to send the state-changing transaction:

A screenshot of the signer contract object input message to update contract.

With the signer contract object, you can now pass input message to update contract:

A screenshot of the a sync function update message.

Let’s update our message, enter “Hello Ethereum.”

A screenshot of the reject and confirm transactions page in the E 2 E hello world dapp with the message hello ethereum.

Metamask will popup and ask to confirm transaction with an estimated gas fee. You review the transaction and submit. The block explorer allows you to view transactions.

A screenshot of the update message and the details of transactions with a message confirmed and from and to information.

Click view on block explorer to see your transaction in etherscan.

A screenshot of the etherscan transaction details with a message success highlighted.

Once the transaction is confirmed, you will get transaction receipt in page popup.

A screenshot of a transaction receipt with a message success at the right and a box communicating a localhost message with an option marked ok.

Finally, verify your updated message by clicking the message button. “Hello Ethereum” should show on the page.

A screenshot of the update message saying hello Ethereum in the E 2 E hello world dapp interface.

Congratulations, you have successfully published your first smart contract to the public testnet and built a Dapp to call and update the message content! You have now completed an end-to-end Dapp development cycle, which is a huge accomplishment. Pat yourself on the back, because that was a lot of work.

Despite the fact that we have spent enough time exploring Ethereum Dapp and Solidity principles to get you to build a Dapp, this book only provides a basic introduction. There are a lot of good online documentation covering all aspects of Javascript, JQuery, express.js, and ether.js.

Here are some useful links:

• ether.js: the document can be found at https://docs.ethers.io/v5/

• JQuery: the document can be found at https://jquery.com/

• express.js: the document can be found at https://expressjs.com/en/starter/hello-world.html

• Node.js: he document can be found at https://nodejs.org/en/docs/guides/getting-started-guide/

ERC-20

ERC-20 is the most popular Ethereum token standard and was proposed on November 19, 2015 by Fabian Vogelsteller. Most ICOs (Initial Coin Offering) that have issued their tokens on the Ethereum platform or EVM-based blockchain (like Binance) are ERC-20 tokens. The ICO is cryptocurrency version of the IPO (initial public offering), which is used in the stock market to raise capital or participate in investment opportunities. There are around 508k ERC-20 tokens in the Ethereum mainnet on March 2022. The total market cap of all ERC-20 tokens is around $18.7 billion, and there are more than 160K ERC-20 in Binance.

20 is a unique identification number to distinguish the ERC-20 standard from others.

totalSupply(): Gets the total number of token supply.

balanceOf(): Gets the account balance for the specified address.

allowance(): Returns the amount of tokens which the spender is allowed to withdraw from the owner.

transfer(): Transfer the balance from the owner’s account to another specified address and must fire the transfer event.

transferFrom (): Send the amount of tokens from address `from` to address `to`. The transferFrom method is used for a withdraw workflow, allowing contracts to transfer tokens on your behalf.

approve(): Allows spender to withdraw the specified amount of tokens from your account multiple times.

In Etherscan, you can find many ERC-20-compliant tokens that have been deployed mainnet. Here is a real-world example of an ERC-20 token transaction on the Etherscan.

A screenshot of an interface labeled token kucoin token highlighting an overview, profile summary and transfer information with 34, 718 transactions found marked as transfer and transfer from.

The screenshot shows the amount of ERC-20 tokens being transferred from one address to another address by the transfer or transferFrom method.

In ERC-20 token, tokens are fungible, meaning that each token has exactly the same type and value as another token. If you swap one ERC-20 for another, there will be no difference in authenticity or value; they are interchangeable and represent a single entity.

For example, Tether (USDT) is an ERC-20 Token. It is a stablecoin—a crypto asset value pegged to the US dollar at a 1 to 1 ratio and 100% backed by Tether’s equivalent reserves. These reserves are a mix of assets, including cash. USDT is similar to the ETH, meaning that 1 Token is and will always be equal to all the other USDT Tokens. They are the same type, represent the US dollar, and are mutually interchangeable. USDT is also divisible, which can be broken down into smaller units like cents.

So fungible tokens have the following properties: interchangeable, uniform, and divisible.

Next let’s talk about tokens that are not mutually interchangeable or, in other words, nonfungible.

ERC-721

All ERC-20 tokens (like USDT) are identical and provide the same value. So what matters is how many tokens you own in the wallet, not their individual identities. Nonfungible tokens (NFTs) can be uniquely identified; they are assets whose data is stored on blockchain networks. NFTs are not interchangeable with other NFTs because they are unique. Think of a unique work of art created by an artist, luxury brands item from fashion companies, and different videos.

ERC-721 is a standard interface for nonfungible tokens, also known as deeds, and is available at https://eips.ethereum.org/EIPS/eip-721. The proposal for the creation of this new standard was created in Jan 2018, proposed by William Entriken, Dieter Shirley, Jacob Evans, and Nastassia Sachs. According to a Bloomberg report, NFT Market surpassed $40 Billion in 2021 and over $37 billion in NFT marketplaces in 2022 on May 1.

balanceOf: Gets the account balance for the specified address.

ownerOf: The function returns the unique address of the owner of a token based on the provided tokenId.

safeTransferFrom: Transfers the ownership of an NFT from one address to another address. It is required that msg.sender is the current owner, an authorized operator, or the approved address for this NFT.

transferFrom (): Send the amount of tokens from address `from` to address `to`. The transferFrom method is used for a withdraw workflow, allowing contracts to transfer tokens on your behalf.

approve(): Allows spender to withdraw the specified amount of tokens from your account multiple times.

setApprovalForAll: Assign or revoke approval rights for the given operator to manage all of `msg.sender`’s assets.

getApproved: Get the approved address for a single NFT

isApprovedForAll: Check if the given operator address has access right to operate for the given owner’s tokens.

The most known example of ERC-721 is the CryptoKitties game, the first NFT token. In the game, there are thousands of CryptoKittie. Each cat has their own profile, which includes unique genes, name, color, shape, price, and other profiles. The game player can collect and breed adorable kittens. As shown in Figure 5-38, each cryptoKittie as a collectible digital asset can be traded, sold, and bought by the player:

A screenshot of an animated cat and a label marked as kitty hash 1111 with information like owner, born, generation, block number, block hash, official profile, and attributes. On the lower side information is displayed under the label genes.

We can find CryptoKittie in etherscan. These tokens are bid and trade daily by game player. Some individual cryptokitties have sold for more than $300,000 a piece.

A screenshot of the ether scan crypto kitties inventory.

NFT collectibles market continues to grow as fan engagement increases, which will likely increase mainstream adoption. NFTs can have only one owner at a time. True ownership is one of the key characteristics of any NFT, and it has the potential to play a critical role in bringing the digital and physical worlds closer together than they have ever been.