Building an ERC721 Mint Dashboard Using Hemera and UDFs

• Extract all mint events for a given ERC721 contract address.
• Showcase this data on a sleek frontend.

What’s So Special About UDFs?

1. Efficiency: UDFs query only what you need. Want to extract just ERC721 mints? Done.
2. Reusability: Write your logic once, use it across multiple projects.
3. Scalability: Handle massive amounts of blockchain data without breaking a sweat.
4. Customization: Whether it’s DeFi, NFTs, or GameFi, UDFs adapt to your needs.

Overview of What We’re Building

• Define a UDF to fetch mint events.
• Store the data in a Postgres database.

• Display the mint data in a user-friendly dashboard.
• Include features like search, filters, and charts for mint statistics.

Building the UDF for ERC721 Mints

• Data Class: Defines the structure of the extracted data.
• Models: Maps the data to the Postgres database.
• UDF Logic: Contains the actual logic to process the blockchain data.

Step 1: Define the Data Class

• Purpose: Acts as a schema for the data output.
• Fields:
  • token_id: The ID of the ERC721 token being minted.
  • minter: The address of the wallet minting the token.
  • timestamp: The block timestamp when the mint occurred.

from hemera.udf import DataClass

class ERC721MintData(DataClass):
    token_id: str
    minter: str
    timestamp: str

 

Step 2: Create the Model

• Purpose: Stores data in a structured format for easy querying.
• Fields:
  • token_id: Stored as a string in the database.
  • minter: Stored as a string representing the wallet address.
  • timestamp: Stored as a DateTime field for chronological sorting.

from hemera.db import Model

class ERC721MintModel(Model):
    __tablename__ = 'erc721_mints'
    token_id = Model.Column(Model.String)
    minter = Model.Column(Model.String)
    timestamp = Model.Column(Model.DateTime)

 

Step 3: Write the UDF Logic

• Purpose: Defines the actual data extraction process.
• Flow:
  • Listens for mint events on the blockchain (e.g., an ERC721 Transfer event where from = 0x0).
  • Extracts token_id, minter, and timestamp from the event.
  • Passes the processed data to the model for storage.

from hemera.udf import UDF, Trigger

class ERC721MintUDF(UDF):
    def execute(self, event):
        token_id = event.params['tokenId']
        minter = event.params['to']
        timestamp = event.block_time

        self.output(ERC721MintModel(token_id=token_id, minter=minter, timestamp=timestamp))

Running the UDF with the Indexer

Step 1: Configure Your UDF

• Update the Indexer Configuration: Modify the indexer-config.yaml file to include the contract address. Example: https://github.com/HemeraProtocol/hemera-indexer/blob/feature/add-demo-job/config/indexer-config-template.yaml

Step 2: Start the Hemera Indexer

Option 1: Dockerized Setup

sudo docker compose up

Option 2: Command Line Execution

python hemera.py stream \
    --provider-uri https://eth.llamarpc.com \
    --debug-provider-uri https://eth.llamarpc.com \
    --postgres-url postgresql+psycopg2://devuser:devpassword@localhost:5432/hemera_indexer \
    --output jsonfile://output/eth_blocks_20000001_20010000/json,csvfile://output/hemera_indexer/csv,postgresql+psycopg2://devuser:devpassword@localhost:5432/eth_blocks_20000001_20010000 \
    --start-block 20000001 \
    --end-block 20010000 \
    --output-types block,transaction,log \
    --block-batch-size 200 \
    --batch-size 50 \
    --max-workers 8

Step 3: Verify Data Output

SELECT * FROM erc721_mints ORDER BY timestamp DESC;

 

Building the Frontend Dashboard

Frontend Architecture

1. Header: Displays the dashboard title and relevant details like the contract address.
2. API Route: Fetches data from the Postgres database.
3. Transfer Table: Displays the mint data in a structured tabular format.
4. Transfer Chart: Visualizes mint trends over time.
5. Dashboard Wrapper: Combines all components and manages the overall state.

Building the Frontend Dashboard with Next.js

Frontend Architecture

1. Header: Displays the dashboard title and relevant details like the contract address.
2. API Route: Fetches data from the Postgres database.
3. Transfer Table: Displays the mint data in a structured tabular format.
4. Transfer Chart: Visualizes mint trends over time.
5. Dashboard Wrapper: Combines all components and manages the overall state.

1. Header Component

Key Features

• Displays the Hemera logo.
• Shows the wallet address of the smart contract being tracked.

Code Snippet

const Header: React.FC<HeaderProps> = ({ walletAddress }) => (
    <HeaderWrapper>
        <Logo>
            <Image src="/hemera-logo.jpg" alt="Hemera Logo" width={100} height={100} />
        </Logo>
        <Title>Token Transfer Tracker</Title>
        <Description>Contract: {walletAddress}</Description>
    </HeaderWrapper>
);

2. API Route

Key Features

• Fetches the 100 most recent ERC721 mints.
• Converts address fields into human-readable hex strings.
• Handles errors gracefully.

Code Snippet

const result = await pool.query('SELECT * FROM erc721_token_mint ORDER BY block_timestamp DESC LIMIT 100');

const formattedData = result.rows.map(row => ({
    ...row,
    address: Buffer.from(row.address.slice(2), 'hex').toString('hex'),
    token_address: Buffer.from(row.token_address.slice(2), 'hex').toString('hex'),
}));

res.status(200).json(formattedData);

3. Transfer Table

Key Features

• Address Formatting: Shortens long wallet addresses for readability.
• Timestamp Formatting: Converts blockchain timestamps to a human-readable format.
• Hover Effects: Highlights rows for better usability.

Code Snippet

const formatAddress = (address: string | null) =>
            address ? `${address.slice(0, 6)}...${address.slice(-4)}` : 'N/A';

const TransferTable: React.FC<Props> = ({ transfers }) => (
    <Table>
        <thead>
            <tr>
                <Th>Address</Th>
                <Th>Token Address</Th>
                <Th>Token ID</Th>
                <Th>Block</Th>
                <Th>Timestamp</Th>
                <Th>Transaction</Th>
                <Th>Log Index</Th>
            </tr>
        </thead>
        <tbody>
            {transfers.map(transfer => (
                <Row key={`${transfer.transaction_hash}-${transfer.log_index}`}>
                    <Td>{formatAddress(transfer.address)}</Td>
                    <Td>{formatAddress(transfer.token_address)}</Td>
                    <Td>{transfer.token_id}</Td>
                    <Td>{transfer.block_number}</Td>
                    <Td>{new Date(transfer.block_timestamp).toLocaleString()}</Td>
                    <Td>{formatAddress(transfer.transaction_hash)}</Td>
                    <Td>{transfer.log_index}</Td>
                </Row>
            ))}
        </tbody>
    </Table>
);

4. Transfer Chart

Key Features

• Plots token transfer amounts against timestamps.
• Includes smooth line curves and data points for better visualization.

Code Snippet

const TransferChart: React.FC<Props> = ({ transfers }) => {
    const data = {
        labels: transfers.map(transfer => transfer.timestamp),
        datasets: [
            {
                label: 'High-Value Transfers',
                data: transfers.map(transfer => transfer.amount),
                borderColor: '#3a3f51',
                backgroundColor: '#f4a261',
                pointRadius: 3,
                tension: 0.2,
            },
        ],
    };

    return (
        <ChartWrapper>
            <Line data={data} options={{ responsive: true, maintainAspectRatio: false }} />
        </ChartWrapper>
    );
};

5. Dashboard Wrapper

Key Features

• Fetches data using fetchTransfers from the /api/transfers endpoint.
• Handles loading and error states gracefully.
• Integrates all sub-components seamlessly.

Code Snippet

useEffect(() => {
    const fetchData = async () => {
        try {
            const data = await fetchTransfers();
            setTransfers(data);
        } catch (err) {
            setError('Failed to fetch transfers');
        } finally {
            setLoading(false);
        }
    };
    fetchData();
}, []);

Next Steps: Enhancing Your Dashboard

Feature Enhancements

• Allow users to filter by date ranges, specific wallets, or token IDs for more granular analysis.
• Example: Show mints only for a specific wallet over the past week.
   

• Add aggregated metrics like:
  • Top Wallets by Mints
  • Most Active Days for Minting

Scaling Beyond the Dashboard

• DeFi Protocol Tracking: Build dashboards to track lending or staking activities across protocols.
• Portfolio Analytics: Fetch wallet balances and transaction histories for comprehensive user portfolios.
• GameFi Stats: Monitor token mints, transfers, and burn events for gaming platforms.

Joining the Hemera UDF Builder Program

Why Join?

• Exclusive Rewards
  Earn tier-based stipends and one-time bounties for UDF contributions.
• Industry Recognition
  Get featured in Hemera’s newsletter, blog, and social media.
• Network Opportunities
  Connect with industry leaders, partners, and investors.
• Learn and Grow
  Work on real-world use cases, get feedback, and access one-on-one mentorship.

Get Started Today

• Visit the UDF Builder Program Page
• Check out the Hemera Documentation to learn more about UDFs and ACI.
• Clone the https://github.com/thecoderpanda/token-transfer-tracker/ repository to start building right away.