Useful package that contains custom React hooks that can be used for rapid development while working with the Ethereum blockchain.
These hooks make use of various crypto APIs (free versions only) and save developer time by taking away the need for manual configuration and setup.
The following resources were utilized when building these client hooks:
This package uses AWS Lambda functions to construct authenticated API calls. The architecture follows a simple flow: Client Hook → useFetch → AWS Lambda → Response.
The AWS Lambda functions handle authentication automatically using pre-configured API keys for various blockchain services:
- OPENSEA_API_KEY - For NFT marketplace data
- MORALIS_API_KEY - For Web3 data aggregation
- BLK_API_KEY - For Blocknative gas and mempool data
- TRANSPOSE_API_KEY - For indexed blockchain data
- ALCHEMY_API_KEY - For Ethereum node access and enhanced APIs
No backend setup or environment variables are required on your end.
The hooks cover several areas of the Ethereum blockchain and can be used for Layer Two chains as well.
Each hook automatically connects to its dedicated AWS Lambda endpoint - no manual URL configuration is needed.
Starting with version 2.0.2, hooks are organized into grouped imports for better organization:
// ENS Hooks
import { useAddressENSLookup, useENSNameLookup, useENSAddressLookup, useENSIDLookup } from 'ethereum-hooks/ens';
// ERC20 Token Hooks
import { useERC20Holdings, useERC20Transfers, useERC20CollectionOwners } from 'ethereum-hooks/erc20';
// ERC721 Token Hooks
import { useERC721CollectionData, useERC721Holdings, useERC721LookupData } from 'ethereum-hooks/erc721';
// Gas Hooks
import { useGasLookup } from 'ethereum-hooks/gas';
// Price Hooks
import { useETHPrice, useERC20Price, useERC721Price, useLayerTwoPrice } from 'ethereum-hooks/prices';This structured approach makes it easier to:
- Import only what you need
- Understand which category each hook belongs to
- Maintain cleaner import statements
Here is a quick example of how you can work with client hooks. The following is a code snippet for working with React.js:
ENSToAddressPage.tsx
import React, { FC } from 'react';
import { useENSAddressLookup } from 'ethereum-hooks/ens';
// Incorporating the ENS to Address Client Hook.. using Vitalik Buterin's address
// No server setup required - connects directly to AWS Lambda
const ENSToAddressPage: FC = () => {
// Hook automatically connects to AWS Lambda - no server setup required
const addressInformation = useENSAddressLookup('vitalik.eth');
// Each client hook uses the useFetch custom hook
// It returns three states: data, error, loading
// We capture these states in a variable (like above) and conditionally render the component
if (addressInformation.loading){
return <div>Loading..</div>
}
else if (addressInformation.error){
return <div>Error loading data...</div>
}
else {
// Hardcoded some parts for demonstrative purposes only
return (
<div className='home-page'>
<table>
<tr>
<th>ENS</th>
<th>Address</th>
</tr>
<tr>
<td>vitalik.eth</td>
<td>{ addressInformation.data?.information }</td>
</tr>
</table>
</div>
)
}
}
export default ENSToAddressPage;A list of chains supported is provided below in the Types section.
The following table shows the 30 different client hooks and their corresponding AWS Lambda endpoints:
| Category | Client Hook Name | AWS Lambda Endpoint | Description |
|---|---|---|---|
| ENS | useAddressENSLookup(address: string) |
https://37zq2u4ntbygkw7inki3djjm440xctyd.lambda-url.us-east-1.on.aws/ |
Fetch the equivalent ENS name from a given address |
| ENS | useENSAddressLookup(ensName: string) |
https://jy3upsy3rgbengcktqlqfcwyhy0wcamb.lambda-url.us-east-1.on.aws/ |
Fetch the equivalent ETH address from a given ENS name |
| ENS | useENSIDLookup(id: string) |
https://ev6i3gsesgdvj7ouxiwpg4qafu0nfvdw.lambda-url.us-east-1.on.aws/ |
Fetch information of a given ENS ID |
| ENS | useENSNameLookup(ensName: string) |
https://f53actwgpl2a3rk6uynoryuoxq0eifuo.lambda-url.us-east-1.on.aws/ |
Fetch information of a given ENS name |
| ERC20 | useERC20CollectionOwners(contractAddress: string) |
https://hyrbuxy6aivjqjrgtogd3nx5we0gcxjr.lambda-url.us-east-1.on.aws/ |
Fetch list of owners of a particular ERC20 collection |
| ERC20 | useERC20CollectionTopCoins() |
https://2ebpropr2dgzqicposkbrvr5nq0ofyyx.lambda-url.us-east-1.on.aws/ |
Fetch list of the top ERC20 collections |
| ERC20 | useERC20CollectionTransfers(contractAddress: string) |
https://bwqre7ze2vm3sum5avrvwzwbrm0gyxcy.lambda-url.us-east-1.on.aws/ |
Fetch transfer activity of a particular ERC20 collection |
| ERC20 | useERC20Holdings(contractAddress: string) |
https://2i2neqclwlgygwimhbzlhdtjwa0dupee.lambda-url.us-east-1.on.aws/ |
Track wallet holdings of a particular ERC20 token activity |
| ERC20 | useERC20Transfers(contractAddress: string) |
https://msee4ccresifmjhm3mdedry3ki0xvdgx.lambda-url.us-east-1.on.aws/ |
Track the transfer activity of a particular ERC20 token in a wallet |
| ERC721 | useERC721CollectionAttributes(contractAddress: string) |
https://7rs4acgso6ld44zjpl25jras3q0szvag.lambda-url.us-east-1.on.aws/ |
Fetch attributes of a particular ERC721 collection |
| ERC721 | useERC721CollectionData(contractAddress: string) |
https://u2pdhfz4qbfkkyp6z4yg4n57hq0hzica.lambda-url.us-east-1.on.aws/ |
Fetch data of a particular ERC721 collection |
| ERC721 | useERC721CollectionExtraData(contractAddress: string) |
https://b5mkshxv54bbj4d54rxze5cj6q0xhptc.lambda-url.us-east-1.on.aws/ |
Fetch extra data of a particular ERC721 collection |
| ERC721 | useERC721CollectionFloorPrice(contractAddress: string) |
https://343rc276twphsdjwtzrzjytepu0xdxxn.lambda-url.us-east-1.on.aws/ |
Fetch floor price data of a particular ERC721 collection |
| ERC721 | useERC721CollectionMarketCap(contractAddress: string, duration: 2 | 14 | 30) |
https://o5ntejtug7ixeetoqf5uxjpwgq0mbtvt.lambda-url.us-east-1.on.aws/ |
Fetch market cap data of a particular ERC721 collection |
| ERC721 | useERC721CollectionSales(contractAddress: string) |
https://b5xcn2afinyiq32izaoxe4mzua0ggxvm.lambda-url.us-east-1.on.aws/ |
Fetch sales data of a particular ERC721 collection |
| ERC721 | useERC721CollectionTransfers(contractAddress: string) |
https://lrtnsabh6hkimp4hqonw3foi2e0zzuxq.lambda-url.us-east-1.on.aws/ |
Fetch transfer activity of a particular ERC721 collection |
| ERC721 | useERC721CollectionTrends() |
https://hmzkjpwut4bwaeovhryd6hie540fwvzi.lambda-url.us-east-1.on.aws/ |
Fetch trending ERC721 collection data |
| ERC721 | useERC721CollectionVolume() |
https://zlksxwjaikudsub4rmcc5c4eme0uqntg.lambda-url.us-east-1.on.aws/ |
Fetch ERC721 collections by volume data |
| ERC721 | useERC721Holdings(walletAddress: string) |
https://rmepnjzubrgdsvmb66kdwz5upm0khfor.lambda-url.us-east-1.on.aws/ |
Fetch ERC721 holdings of a particular wallet |
| ERC721 | useERC721LookupData(contractAddress: string, tokenID: string) |
https://rd7cae6wlnx3lsiuncgjgeap5e0lkbew.lambda-url.us-east-1.on.aws/ |
Fetch data of a particular ERC721 token |
| ERC721 | useERC721OpenseaData(contractAddress: string, tokenID: string) |
https://qoeq2n767jbu5gbiiy7463d56m0cwdec.lambda-url.us-east-1.on.aws/ |
Fetch Opensea data of a particular ERC721 token |
| ERC721 | useERC721RarityData(contractAddress: string, tokenID: string) |
https://eilobcax7r4wayov2rfscraqb40rodzv.lambda-url.us-east-1.on.aws/ |
Fetch rarity data of a particular ERC721 token |
| ERC721 | useERC721SalesData(contractAddress: string, tokenID: string) |
https://nhjz6tqihl6bdt7zukf5ru7wnu0ydoqq.lambda-url.us-east-1.on.aws/ |
Fetch sales data of a particular ERC721 token |
| ERC721 | useERC721TransferLookupData(contractAddress: string, tokenID: string) |
https://o66cbw3kaufg5t3k2fl5ydazbq0tvfaz.lambda-url.us-east-1.on.aws/ |
Fetch transfer data of a particular ERC721 token |
| ERC721 | useERC721TransfersData(walletAddress: string) |
https://gnfeczsyzj4v6rsyf4zmlpv23q0uixkv.lambda-url.us-east-1.on.aws/ |
Fetch ERC721 transfer activity of a particular wallet |
| Gas | useGasLookup() |
https://wsebjfjyi4k2kfb4mbcrcjyrqa0nwifh.lambda-url.us-east-1.on.aws/ |
Fetch gas information related to Ethereum or a supported layer two |
| Prices | useERC20Price(contractAddress: string, currentPrice: boolean, duration: 2 | 14 | 30) |
https://vw5caqjd3yg2oyslxcyxkln2dy0nqgxz.lambda-url.us-east-1.on.aws/ |
Fetch pricing data of a particular ERC20 collection |
| Prices | useERC721Price(contractAddress: string, tokenID: string) |
https://brjvjnlp35ln3solbquo6fiize0bnwje.lambda-url.us-east-1.on.aws/ |
Fetch pricing data of a particular ERC721 collection |
| Prices | useETHPrice(currentPrice: boolean, duration: 2 | 14 | 30) |
https://fl5mxvcm42g3n7wtodnxq52s2a0jeokj.lambda-url.us-east-1.on.aws/ |
Fetch Ethereum price data |
| Prices | useLayerTwoPrice(layerTwo: LayerTwoNetworks, currentPrice: boolean, duration: 2 | 14 | 30) |
https://jt7ds5ua6iix7cpa5ueg2ud2gi0joklo.lambda-url.us-east-1.on.aws/ |
Fetch Layer Two price data |
Custom hooks were incorporated into the main client hooks. The following table details the custom hooks used in this package:
| Custom Hook | Function |
|---|---|
useFetch(URL: string, options: RequestInit = {}) |
Readily fetch data using a set of defined parameters |
Custom data types were developed for monitoring data fetch status and defining a set of available layer two networks:
| Custom Data Type | Function |
|---|---|
FetchStateType |
Readily fetch data and track its state using a type with a set of defined states: { data: T | null, error: boolean, loading: boolean } |
LayerTwoType |
Set of defined Layer Two Networks: optimism, arbitrum, matic-network, zksync, immutable-x, starknet, boba-network, sushi, metis-token, hermez-network-token, celer-network, havven, devve, loopring, biconomy, bancor, aave, perpetual-protocol, cartesi, zora
|