balance

NFT Explorer and Ether Transaction Dapp

Comment

Inspiration

Web3.0 is a cutting-edge technology and it is gaining more and more interest from all over the world. Being a part of the same world, I also got interested in exploring blockchain-based technology.

What it does

It is a NFT and block explorer that makes use of Moralis API, etherscan API and stepzen. There is a home page where user can search for NFTs. After typing some text in the search bar, user have to click the search button. In a moment, user can see the related NFT cards (if any match found) which are returned by the moralis API. If the user clicks a NFT card, a modal box will open with some details of the NFT.

In the modal box table, if the user clicks on the "Token Address", it will take the user to the /nft-collection/{tokenAddress} page. This page shows some metadata of the NFT collection (e.g. name, contractType, Symbol etc.) along with the NFTs it contains. All the NFTs are displayed as NFT Cards (like in the home page) along with modal box when clicked.

In the Navbar, there is a option on the right side to saying "Connect Wallet" (if not already connected). If the user clicks that button, it will connect the web app with the user's corresponding metamask account (Metamask needs to be installed in the browser). Else, there will be a "My account" button which if clicked, will take to the /me page.

me page retrieves user account address (currently selected metamask account) and the balance in that account. There are two sections in the /me page --

  1. A form to transfer ethers to other address, and
  2. A section with two buttons - Transactions and NFTs. If the Transactions tab is selected (which is selected by default), A Transactions table will show up below the Tab section. The table displays all the transaction details made the address. In the table, the from and to column values contains a link that points to /address/{address} page. When the NFT tab is clicked, the table below it, will be replaced by a NFT card list (just like the home page). If a NFT card is clicked, a modal box will show up with some NFT details.

In the Navbar, there is a network selector button. User can select a network, and the transactions in the Transactions table will use the selected network to fetch the transactions in the selected network. This way, user can see the transactions of the user in different networks.

The form in the left section can be used to transfer ethers to other accounts, they can add a message too.

How we built it

  • I used React-Next.js for the frontend, material ui for styled-components.
  • For the smart contract, I used solidity to write the contract, hardhat to compile and alchemy-rinkeby network to deploy the contract.
  • To obtain the NFTs I used Moralis API along with stepzen graphql tool to make Graphql requests to moralis api.
  • Etherscan API along with stepzen-graphql is used to fetch user account balances, transactions etc.
  • ether.js is used to connect to the smart contract and metamask based ethereum is used to transfer ethers to other accounts.

Challenges we ran into

Before starting the project, I didn't have any experience with graphql and NFT concepts. I had to spend a significant amount of time learning those technologies. Apart from that, I had to customize the graphql schemas for my use cases. While customizing and adding new schemas, I got to learn how to use stepzen graphql directives, specially the @rest directive along with options as required.

Accomplishments that we're proud of

It was my first time working on a graphql and blockchain based project. So, graphql and blockchain both are new to me. Therefore, it was a very appealing experience for me to learn both revolutionary technologies. It was exciting for me to build my own smart contract and use it.

What we learned

I learned graphql and blockchain technologies to complete this project. I learned to use Solidity to create smart contract, deploy it on rinkeby testnet network using alchemy and finally integrate the smart contract with the frontend.

What's next for balance

I have the following goals for balance in near future --

  • Give option to buy NFT
  • Show more details of a NFT token
  • Add pagination wherever needed (This project lacks pagination for now)
  • Automatically refresh the balance after the user transfers ethers to other addresses.
  • and much more

Built With

Share this project:

Updates