This is a deliverable for the assignment of 3rd week Alchemy University Ethereum Dev. Bootcamp. The objective of the project is to implement an Ethereum block explorer (such as etherscan.io) by means of ethers.js, Alchemy's API, and react. This version for submission consists of the following features.
- Main page "/" for chain information on the Ethereum mainnet, providing the latest block number, the ETH market price, the gas price, and the current time.
- Block page "/block" for the block's information, providing the list of transactions (txHash, from , to, and value).
- Transaction page "/tx" for the information on a transaction, providing also gas price, gas limit, max fee per gas (if available), and max priority fee per gas (if available), in addition to the information given in the block page.
- Address page "/address" for the information on an address, providing the ETH balance and the list of NFTs owned (title, description, NFT contract address, and NFT type).
The rest of this README is just to keep the original README given by alchemy.com.
The lessons this week covered the Ethereum JSON-RPC API and the ethers.js library giving us the ability to query the Ethereum blockchain and make transactions!
Let's put that knowledge to the test by building our very own Ethereum Block Explorer!
Blockexplorers give us the ability to view lots of different information about the blockchain including data about:
- the blockchain network itself
- blocks in the blockchain
- transactions in a block
- accounts
- and many other things
Etherscan is a good example of an Ethereum blockexplorer. Check it out to get familiar with how blockexplorers generally work.
This particular project is very much open-ended. We'll add some challenges here to get your imagination going, but use Etherscan as a guide for features you might consider building in your project.
Clone this project to pull down some basic starter code.
After that cd into the base directory of the project and run npm install to download all the project dependencies.
In this project we chose to use React for a front-end and added minimal front-end code to get you going, but feel free to use any front-end stack you like.
Unlike the lessons this week that used the Ethereum JSON-RPC API and the ethers.js library to communicate with the Ethereum network, the starter code in this project uses the AlchemySDK. The AlchemySDK's core package wraps almost all of the ethers.js provider functionality that we learned about and should feel very familiar to you.
For example, the following ethers.js code
const blockNumber = await provider.getBlockNumber();can be written using the AlchemySDK like so:
const blockNumber = await alchemy.core.getBlockNumber()Another ethers.js example
const transcations = await provider.getBlockWithTransactions(SOME_BLOCK_NUMBER)translates to
const transactions = await alchemy.core.getBlockWithTransactions(SOME_BLOCK_NUMBER)and so on.
There are some ethers.js provider functions that are not often-used and therefore not included in alchemy.core. But if you ever need the full ethers provider functionality you can access the provider directly with the following code:
const ethersProvider = await alchemy.config.getProvider();You can find lots of good docs on the AlchemySDK here:
Alright, without further ado, let's get started!
If you have not already done so, create a unique Alchemy API Mainnet key for your project as described here.
Create an empty .env file in the base directory of this project.
Add the following line to the .env file replacing YOUR_ALCHEMY_API_KEY with your api key.
REACT_APP_ALCHEMY_API_KEY=YOUR_ALCHEMY_API_KEYDo not remove the REACT_APP_ prefix. React uses that to import env variables.
Your Alchemy API Mainnet Key is a sensitive piece of data. If we were
building an enterprise app to conquer the world we would never place
this sensitive data in the client code of our blockexplorer project that
could potentially be read by anyone.But hey, we're just learning this stuff right now, not conquering anything
yet! :-) It won't be the end of the world to put the Alchemy API key in our
front-end code for this project.
npm start
Running the command above will run the app in the development mode. Open http://localhost:3000 to view it in your browser.
The webpage will automatically reload when you make code changes.
What you'll see in the browser is Ethereum Mainnet's current block number. Not very exciting, but that's where you come in to save the day!
The starter code pulls down the current block number for you.
Can you get more information about the current block and display it in the page? Take a look at alchemy.core.getBlock() for how you might go about that.
Blocks contains transactions. Can you get the list of transactions for a given block? Can you use alchemy.core.getBlockWithTransactions() for this?
How about getting details for individual transactions? The alchemy.core.getTransactionReceipt() looks handy.
- Connecting the dots.
- Allow users to click on a block listed in the webpage to get the block's details including its list of transactions
- From the list of transactions allow users to click on specific transactions to get the details of the transaction
- Make an accounts page where a user can look up their balance or someone else's balance
By using the AlchemySDK you can really supercharge your projects with additional API functionality that isn't included in the ethers.js package including:
- NFT methods
- WebSocket methods
- Alchemy's Transact API functionality
- endpoints for using Alchemy's Notify Webhooks
Read more about the above in the Alchemy SDK Surface docs. Using the SDK can implement the following features?
- Given a contract address and token id, can you get the NFT's metadata?
- What is the floor price of an NFT right now?
- Did a pending transaction get mined?
- What transfers did an address receive this year?
Good luck and have fun!