Create your first Web3 app

npm install genezio -g

genezio login

genezio create fullstack --backend=js --frontend=react-js --name=blockchain-project --region=us-east-1

npm install web3 mongoose

server/.env

# Replace these values with your own
CONTRACT_ADDRESS = <todo-paste-the-contract-address-here>
BLAST_API_RPC_ENDPOINT = <todo-paste-the-blast-api-rpc-endpoint-here>
MONGO_DB_URI = <todo-paste-the-mongo-db-uri-here>

server/abi.js

export const abi = <todo-paste-the-abi-here>

server/models/event.js

import mongoose from "mongoose";
const eventSchema = new mongoose.Schema({
  id: String,
  name: String,
  parameters: Map,
  blockNumber: Number,
  logIndex: Number,
});
export const EventModel = mongoose.models.Event || mongoose.model("Event", eventSchema);

server/blockchain.js

import Web3 from "web3";
import { abi } from "./abi.js";
import { EventModel } from "./models/event.js";
import { mongoose } from "mongoose";
import { GenezioDeploy, GenezioMethod } from "@genezio/types";
/**
 * The Blockchain server class that will be deployed on the genezio infrastructure.
 */
@GenezioDeploy()
export class BlockchainServer {
  constructor() {
    mongoose.connect(process.env.MONGO_DB_URI).catch((err) => {
      console.log(err);
      throw err;
    });
    try {
      this.web3 = new Web3(process.env.BLAST_API_RPC_ENDPOINT);
      this.contract = new this.web3.eth.Contract(JSON.parse(abi), process.env.CONTRACT_ADDRESS);
    } catch (err) {
      console.log(err);
      throw err;
    }
    this.knownEventTokens = this.contract.options.jsonInterface.filter((token) => {
      return token.type === "event";
    });
  }
}

server/blockchain.js

/**
 * Private method that decodes an event and returns the name and the parameters.
 *
 * This will not be callable using the genezio SDK. Only the public methods are exposed publicly.
 *
 * @param {*} event
 * @returns An object containing the name of the event and its parameters.
 */
#decodeEvent(event) {
  // Retrieve the event declaration from the ABI
  const eventToken = this.knownEventTokens.find((knownEventToken) => {
    return knownEventToken.signature === event.topics[0];
  });
  if (!eventToken) {
    console.log('cannot process log %d', event.logIndex);
    return undefined;
  }
  // Decode the event
  const decodedEvent = this.web3.eth.abi.decodeLog(
    eventToken.inputs,
    event.data,
    event.topics.slice(1),
  )
  // Parse the parameters in a simple dictionary
  const parameters = {}
  eventToken.inputs.forEach((input) => {
    parameters[input.name] = decodedEvent[input.name]
  })
  return {
    name: eventToken.name,
    parameters,
  }
}

server/blockchain.js

  /**
   * Method that will be called periodically by the genezio infrastructure to index the events.
   *
   * The creation of an Ethereum block will take up to 12 seconds.
   *
   * The frequency with which the method will be called can be modified from the genezio YAML file.
   *
   */
  @GenezioMethod({ type: "cron", cronString: "* * * * *" })
  async sync() {
    // Get the current block number and request the last 100 blocks
    let events;
    let blockNumber;
    const bigIntNumber = BigInt(100);
    try {
      blockNumber = await this.web3.eth.getBlockNumber();
      events = await this.web3.eth.getPastLogs({
        address: process.env.CONTRACT_ADDRESS,
        fromBlock: blockNumber - bigIntNumber,
        toBlock: blockNumber,
      });
    } catch (err) {
      console.log(err);
      return;
    }

    console.log(`New sync started with ${events.length} to save`);

    for (const event of events) {
      const decodedEvent = this.#decodeEvent(event);

      if (!decodedEvent) {
        continue;
      }

      // Insert the missing events.
      try {
        await EventModel.findOneAndUpdate(
          { id: `${event.transactionHash}-${event.logIndex}` },
          {
            $setOnInsert: {
              id: `${event.transactionHash}-${event.logIndex}`,
              name: decodedEvent.name,
              parameters: decodedEvent.parameters,
              blockNumber: event.blockNumber,
              logIndex: event.logIndex,
            },
          },
          { upsert: true }
        );
      } catch (err) {
        console.log(err);
        return;
      }
    }
  }

server/blockchain.js

  /**
   * Method used to get all the events in a paginated way.
   *
   * @param {*} from The starting index of the first event.
   * @param {*} limit The number of events that will be part of the response.
   * @returns
   */
  async getEvents(from, limit) {
    console.log(
      `Received getEvents request with from = ${from} limit = ${limit}`
    );
    let count;
    let events;
    try {
      count = await EventModel.countDocuments({});
      console.log("Event count", count);
      events = await EventModel.find(undefined, undefined, {
        skip: from,
        limit,
        sort: { blockNumber: -1, logIndex: -1 },
      });
    } catch (err) {
      console.log(err);
      return { success: false, err: err };
    }

    return {
      count,
      events: events.map((event) => ({
        id: event.id,
        name: event.name,
        parameters: event.parameters,
        blockNumber: event.blockNumber,
      })),
    };
  }

npm install @mui/material @emotion/react @emotion/styled

src/App.js

import { useEffect, useState } from "react";
import Pagination from "@mui/material/Pagination";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import "./App.css";
import { BlockchainServer } from "@genezio-sdk/blockchain-project";
import { Alert } from "@mui/material";

const CHUNKS = 10;

function App() {
  const [totalCount, setTotalCount] = useState(0);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [events, setEvents] = useState([]);

  const [errorAlert, setErrorAlert] = useState("");

  useEffect(() => {
    setCurrentIndex(0);
  }, []);

  useEffect(() => {
    // Use the SDK to get events from the BlockchainServer class hosted on genezio
    BlockchainServer.getEvents(currentIndex, CHUNKS)
      .then((response) => {
        if (!response) {
          setEvents([]);
          setErrorAlert(
            `Unexpected error: ${
              response.err
                ? response.err
                : "Please check the backend logs in the project dashboard - https://app.genez.io."
            }`
          );
          return;
        }
        setEvents(response.events);
        setTotalCount(response.count);
      })
      .catch((error) => {
        console.error("An error occurred!", error);
        setEvents([]);
      });
  }, [currentIndex]);

  const handleChange = (param, value) => {
    setCurrentIndex((value - 1) * CHUNKS);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Genezio Smart Contract Indexer</h1>

        {errorAlert != "" ? (
          <Alert severity="error">{errorAlert}</Alert>
        ) : (
          <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
            {events.map((event) => (
              <ListItem>
                <ListItemText
                  primary={event.name}
                  secondary={event.blockNumber + " " + JSON.stringify(event.parameters)}
                />
              </ListItem>
            ))}
          </List>
        )}
        <div>
          <Pagination count={Math.floor(totalCount / CHUNKS)} onChange={handleChange}></Pagination>
        </div>
      </header>
    </div>
  );
}

export default App;

npm install
npm run dev

genezio deploy