I started my journey to become a web3 developer and I stumbled upon this course by Alchemy University. So far this a great course, I've been learning new things daily by doing each and everything myself and creating weekly projects.

Block explorer is such a project which am going to discuss in this post. This project took me quite some time to build because of my little knowledge of ReactJS. I just knew javascript and that's all. If you wanna get started with this project, basic knowledge of React will be sufficient. I'm writing this blog to hone my skills and to help people like me who know little about React. Let's get started🎉

Github project link.

Live website link.

What is this project?

In this project, we get data from the Ethereum blockchain and display it on our front end, much like etherscan. You can start by cloning this repository, which provides the base code of the block-explorer project.

Let's first list what our project will contain.

• This project will consist of 4 pages: Home, address, transaction hash, and block number.

• The home page will have all the information related to transactions, blocks, and addresses. The address page will have more information about the addresses. Similar for transaction hash and block number.

What will you need to get started?

• Basic knowledge of ReactJs and React-routers.

• For designing Chakra UI (You can use other libraries or frameworks like bootstrap, tailwind css).

• Basic of EtherJs and javascript.

Structure of the project

I'm creating this project using React, Alchemy-SDK, and Chakra UI. React for the structure and functionality, Alchemy-SDK for web3 functionality(like to get information from blockchain), and Chakra for designing.

I created different js files for different pages. So I have a home, address, block number, and transaction hash, in total 4 pages. You need react-router to switch between these pages.

Here is my code for routing different pages

     <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/address/:id" element={<Address />} />
        <Route path="/block/:id" element={<Block />} />
        <Route path="/transactionHash/:id" element={<TransactionHash />} />
      </Routes>

Creating a home page.

Let's start to build the home page aka home.js. There are two things that we require to build the home page: Logic and frontend.

Let's start with the logic, here we need to get address, transaction hash and block number from the blockchain using Alchemy-SDK. To build this logic you need basic knowledge of etherjs the methods etherjs or Alchemy-SDK have to read the information on the blockchain, you will also need to know the useState and useEffect hooks from react. Here is the logic I've used:

const [blockNumber, setBlockNumber] = useState();
  const [recentBlocks, setRecentBlocks] = useState();
  const [recentTransactions, setRecentTransaction] = useState();
  useEffect(() => {
    const blockArray = [];
    const transactionArray = [];

    const getRecentBlocks = async () => {
      const blockNumber = await alchemy.core.getBlockNumber();
      setBlockNumber(blockNumber);
      for (let i = blockNumber; i >= blockNumber - 20; i--) {
        const block = await alchemy.core.getBlock(i);
        blockArray.push(block);
      }
      setRecentBlocks(blockArray);
      console.log("recentBlocks", recentBlocks);
    };

    const getRecentTransactions = async () => {
      const { transactions } = await alchemy.core.getBlockWithTransactions(
        blockNumber
      );
      for (let i = 0; i <= 10; i++) {
        transactionArray.push(transactions[i]);
      }
      setRecentTransaction(transactionArray);
      console.log("recentTransaction", recentTransactions);
    };

    getRecentBlocks();
    getRecentTransactions();
  }, []);

In my actual code, I've used 2 tables for displaying different information, but for simplicity, I've only given one table above. To see the actual code go to the github link provided in the Introduction section.

Now let's talk about the frontend. I'm using Chakra UI for designing purposes, you can use just CSS or any other framework if you want. In our frontend we want a table-like structure so we can store the block number, transaction receipt, and the amount of eth transferred in a block at the same place. Here is the table I've created using Chakra UI.

          <TableContainer
            overflowY="auto"
            maxHeight="630px"
            borderBottom={"2px solid white"}
          >
            <Table
              variant="simple"
              size="lg"
              bg={"black"}
              borderBottomEndRadius={"20px"}
            >
              <TableCaption
                placement="top"
                fontSize={"20px"}
                fontWeight={"bold"}
                bg={"black"}
                borderTopRadius={"20px"}
                color={"whiteAlpha.900"}
              >
                Latest Blocks
              </TableCaption>
              <Tbody>
                {recentBlocks.map((block, i) => {
                  return (
                    <Tr key={i}>
                      <Td>
                        Block{" "}
                        <Text
                          as="u"
                          color={"teal.100"}
                          _hover={{
                            color: "teal.200",
                          }}
                        >
                          <Link to={`/block/${block.number}`}>
                            {block.number}
                          </Link>
                        </Text>
                      </Td>
                      <Td>
                        Fee recipient{" "}
                        <Text
                          as="u"
                          color={"teal.100"}
                          _hover={{ color: "teal.200" }}
                        >
                          <Link to={`/address/${block.miner}`}>
                            {block.miner.slice(0, 16)}...
                          </Link>
                        </Text>
                      </Td>
                      <Td>
                        <Badge> {block.transactions.length} Txs</Badge>
                      </Td>
                    </Tr>
                  );
                })}
              </Tbody>
            </Table>
          </TableContainer>

Error Time

The thing is it takes time to fetch information from the Ethereum blockchain. So as soon as you render this table in your react app it's going to throw multiple errors because the information you are trying to display is not available yet. For instance block.number, block.miner.slice(0, 16) or block.transactions.length in the above code. In all of these instances, the block is not defined yet so it's going to throw an error. So now what to do?

Solution

It will be wise to wait till we get all the information required from the blockchain before we render our tables. While we are waiting we cannot provide an empty screen for the users, now can we? So instead put a progress bar or circular progress. If all you know is CSS then it might seem a little tough to apply, but if you use bootstrap or tailwind or chakra UI, it's a piece of cake. Let's see how to implement it.

        <CircularProgress isIndeterminate color="green.300" size={"55px"} />
          <Text fontSize={"17px"}>Fetching data from Ethereum...</Text>

Just 1 line of code is required and you are all set using chakra UI. But there is still a problem, we have to render it in such a way that either the circular progress is shown (when the data is not ready) or the table (when the data is ready). There is a simple solution, check it out:

return (
    <Box backgroundColor={"gray.900"} color={"white"} h={window.innerHeight}>

// Here is the logic we wanted
      {!recentBlocks || !recentTransactions ? (

         <CircularProgress isIndeterminate color="green.300" size={"55px"} />
          <Text fontSize={"17px"}>Fetching data from Ethereum...</Text>

      ) : (
        // rest of your code (tables and other things)
      )}
    </Box>
  );

Here recentBlocks and recentTransactions are the arrays where information from the blockchain is stored. If any of them is not defined we will show the circular progress, when both of them are defined we will render our remaining code like tables.

Now you are all set to build your own block explorer!

Other pages

If you are successful in creating the home page, there's nothing else new here. It's the same logic and the same frontend just different values. For eg. on the home page we required block, transaction, etc. In the address page, all we require is the address and the balance of that address.

You need one more thing to build other pages: const { id } = useParams(); this is part of react-router. We can extract the value in the URL with useParams(). Give it a read or watch a video and you are good to go!

If you find this blog helpful, let me know in the comments or you can reach me on my Twitter.

All the best 🎉

Nouns is a new Ethereum-based (now solana) NFT collectibles project just like CryptoPunks and Bored Ape Yatch Club with some differences. Instead of dropping a large amount of NFT collectibles onto the market like CryptoPunks and Bored Ape Yatch Club, Nouns mints and auctions a single NFT each day for indefinitely.

What is DAO

A DAO is an organization where control is spread out across the participants, instead of being built on a top-down hierarchy.

What is Nouns DAO

One of the main difference between CryptoPunks and Nouns is that all the money earned by selling CrytoPunks goes to the owners. In case of Nouns it goes to the Nouns Dao (decentralized autonomous organization), this DAO governs the project. And the DAO is controlled by the NFT owners. Each NFT is worth one vote. This vote can be used to vote for future governance decisions.

The founders reveive none of the money from the sales, but they get 1 out of every 10 Nouns for first 5 years. All the money in th DAO will be used to invest in other projects.

Why Nouns switched to Solana from Ethereum

For that let us understand what are the key differences between Solana and Ethereum

1. To begin with Solana is super is fast with transaction handling capacity upto 50,000per second, whereas Ethereum is quite slow in comparison with 30 transaction per second.
2. The block time of Solana is 400 milliseconds whereas that of Ethereum's is 10 seconds. Block time is the measure of the time it takes the miners or validators within a network to verify transactions.
3. Gas fee for ethereum is very expensive sometimes $1000 whereas for solana the fees are negligible around $0.0001.
4. Ethereum has high energy consumption to verify a transaction, Solana doesn't have such high consumption.
5. Solana has suffered many DDoS attacks recently

In brief, solana is better for low transaction fee and speedy transfer, while ethereum is better for security and decentralisation

The people in Nouns DAO thinks overall Solana is the best for them rather than Ethereum!

Decentralized Finance (DeFi) is an umbrella term for decentralized financial products and services accessible to anyone on the Blockchain.

But what is the need for something this complex?

Problem:

Suppose you want 10000$ urgently you ask your bank for it, they check your bank account it has only 5000$ so they refuse to send.

But you need the money urgently so what could you do?

Apply for a loan? But it could take several days to pass.

Now what?...

Defi comes to the rescue: Lending and borrowing

You go to a crypto borrowing and lending platform you put your crypto as collateral and in return get 10000$ in just a matter of hours, with a very low-interest rate as compared to the traditional banks!!

Now you must be thinking if the I have enough crypto why don't I just sell it instead of keeping it as collateral and take a loan. Remember crypto is an asset you don't sell it so soon, what if you sell it and the price goes up. But instead you keep it as collateral and even if the price increases you just have to give back the amount you borrowed and you will get your assets back!

Problems with centralized finance

• In the current financial system our money is controlled by banks:

  • They can stop you from borrowing money
  • They can even stop you from having a bank account

• Banks are vulnerable to fraud and corruption

• Traditional finance is very expensive

  • high personal loan interests (up to 18%)
  • high credit card interests ( up to 25%)

• Government create money out of thin air, giving rise to inflation -80% of all US dollars in existence were printed in the last 22 months

How defi helps to overcome those problems:

• Anyone having an internet connection can have access to financial services

  • 1.7 billion adults worldwide still don't have access to a bank account

• It is transparent, interoperable and faster!

• With very low rates

• Government don't have any control over it.

Other use cases of defi are:

• Decentralized exchange
• Stable coins
• Buying insurance
• Margin trading

A flash loan is a smart contract that enables you to borrow a large amount of money without putting in any collateral. But there is a catch, you have to pay back the loan in the same transaction where you borrowed the loan. I know it seems impossible, but it isn't. For the sake of simplicity let's say you have to pay the loan back within 13 secs of borrowing it!

Usage

To understand flash loans through examples, first, let's understand some terms.

Trading arbitrage

When you check out different cryptocurrency exchanges, let's say Coinbase and Binance. You will notice a slight price difference in the pricing of the same cryptocurrency. This is called trading arbitrage.

Suppose you borrow 100,000,000$ for free using flash loan. You then go to Coinbase and buy a token of 1$ with all of the money, then go to Binance and you see the same token is priced 1$ and 50 cents. You sell all your tokens and earn a profit of 50,000,000$! And then you return the loan with interest(about 0.1 percent) So after the interest deduction, you earned a badass profit of 40,000,000$! (40 Million Dollars)!!

Can I execute flash loans?

Yes! You can. All you need is a lending and borrowing platform and the ability to create smart contracts.

Getting rich??

As many tech-savvy people know about these flash loans. They have automated this process, they made bots and computer programs to create these smart contracts when there is a arbitrage.

So now it is very unlikely to take advantage of this:(

What is nft?

Non-fungible tokens (nfts) are tokens that we can use to represent ownership of unique items like art, videos, GIFS, in-game items, and music.

What is non-fungible??

Non-fungible means it can’t be replaced with something else and is unique. For example, you can't trade The Last Supper painting for another Last Supper painting, because there is only one original Last Supper painting.

Fungible means items that can be exchanged for one another because their value defines them rather than their unique properties. For example, Eth or dollars are fungible- a dollar can be traded for another dollar and you will have the same thing: a dollar

What are tokens?

Tokens are digital assets on top of the Ethereum blockchain. These tokens can represent anything from an art piece, video, GIFs to a physical object like gold.

Use cases of nfts!

1. Fashion and Wearables

Luxury brands are now coming to the NFT space. They provide physical assets like retail clothing and other accessories along with their digital companions as NFTs. Let’s say you bought Air Jordan and got its nft companion with it, which you can trade or use in the metaverse as your avatar’s shoes or just use it to flex.

2. Metaverse

NFT will be the primary asset class in the metaverse. Every digital property in the metaverse will be represented by nfts, be it a house, clothes, or a car.

3. Gaming

Let’s say you bought a gun skin in valorant or in pubg, with the integration of blockchain technology in games, users can sell their nfts (gun skin in this case) or even avatar(characters) to gain economic returns.

4. Defi

Let’s say you have an nft, you can use that nft as collateral for a loan. When you hand over the nft as collateral, you automatically get it back when you pay off your debt. And if you default?? Thanks to the smart contracts, the NFT gets transferred to the lender, eliminating the need for debt collection and bounty hunters.

5. Identification

NFTs can be useful for personal identification. NFTs have unique information stored in the tokens. These tokens can be used to store college degrees, birth certificates and the list goes on. These NFTs containing identification documents are on the blockchain which can be traced back to the owner

6. Health care

There are several use cases of nfts in healthcare, one of them is digitalizing medical records so that they can be brought to doctors easily and without hassle. This saves them the trip from going back and forth to the clinic or physical locations, as well as other platforms like email, drives, and more.

7. Real Estate

You can sell digital real estate in virtual worlds(metaverse) or in games

8. Digitalization of everything physical

We are spending most of our waking hours online, and this trend will continue to grow in the next 10-20 years. And we will have a lot of digital goods. There will come a point where every physical object from a car to a pen will come with its nft companions which we can use in a metaverse.

To understand this first we need to understand what is internet and how does it work:

What is internet and how does it work?

Suppose there are two computers, if they want to communicate, we have to connect them either physically (ethernet cable) or wirelessly (wifi, Bluetooth).

This network is not limited to only two computers, we can connect as many computers as we wish. If we are trying to connect more than 2 computers, let's say we are trying to connect 10 computers. We will require 45 cables to connect them all, while each computer requires 9 plugs each to connect the other 9 computers.

So now think about connecting all the computers in the world using this method, it is impossible, right? So to tackle this problem, each computer on a network is connected to a tiny computer called a router. Router makes sure that a message sent from a given computer arrives at the right destination computer. If computer A wants to send a message to computer B, computer A has to send a message to the router and the router forwards the message to computer B.

This system will work pretty well for 100 computers, what about connecting billions of them? A single router cannot connect to billions of computers across the world. So we connect different routers to each other because as I said above a router is a computer. By connecting computers to routers, then routers to routers, we are able to scale infinitely. Such a network is called the Internet.🌐

But think about this how we are going to connect these different routers to each other? Are we going to lay a cable from one city to another, is it even possible? Well, there are cables already linked to your house telephone cables. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem which turns information from our network into information manageable by the telephone network. Now we are connected to the telephone infrastructure. Now to send a message from our network to someone else's network who lives in another state, I have to connect our network to an Internet Service Provider(ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network.

And to connect between the countries, there are cables under the sea which connects different countries.

How can we make our own internet?

To do this, you'll need a server that can take your connection and direct it to the internet. Then, you need to apply to your country's ISP organization to get an IP address, however, you can't get one IP address, you have to buy a bunch of them. After that, you need to connect your server to your home, so you can get on the internet. You can do this by laying fiber cables(expensive).

Till this point, you have spent in 6 figures, so it will be best if you pay your ISP and get your internet!