Create your first Web3 app

npm install genezio -g

genezio login

blockchain-project/
├── server-blockchain-project/
│   ├── genezio.yaml
│   ├── event.js
│   ├── blockchain.js
│   ├── abi.js
│   └── config.js
└── client-blockchain-project/
    ├── src/
    │   ├── sdk/
    │   └── App.js
    └── build/

mkdir blockchain-project && cd blockchain-project

genezio init

What is the name of the project: server-blockchain-project
What region do you want to deploy your project to? [default value: us-east-1]: us-east-1

Your genezio project was successfully initialized!

The genezio.yaml configuration file was generated. You can now add the classes that you want to deploy using the 'genezio addClass <className> <classType>' command.

cd server-blockchain-project

npm init -y

npm install web3 mongoose

// server-blockchain-project/config.js

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

// server-blockchain-project/abi.js
export const abi = <todo-paste-the-abi-here>

// server-blockchain-project/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-project/blockchain.js
import Web3 from "web3"
import { mongoose } from "mongoose";
import { abi } from "./abi.js";
import { CONTRACT_ADDRESS, BLAST_API_RPC_ENDPOINT, MONGO_DB_URI} from "./config.js";
/**
 * The Blockchain server class that will be deployed on the genezio infrastructure.
 */
export class BlockchainServer {
  constructor() {
    mongoose.connect(MONGO_DB_URI);
    this.web3 = new Web3(BLAST_API_RPC_ENDPOINT);
    this.contract = new this.web3.eth.Contract(JSON.parse(abi), CONTRACT_ADDRESS);
    this.knownEventTokens = this.contract.options.jsonInterface.filter((token) => {
      return token.type === 'event';
    });
  }
}

/**
 * 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,
  }
}

/**
 * Method that will be called periodically by the genezio infrastructure to index the events.
 *
 * The frequency with which the method will be called can be modified from the genezio YAML file.
 *
 */
async sync() {
  // Get the current block number and request the last 100 blocks
  const blockNumber = await this.web3.eth.getBlockNumber()
  let events = await this.web3.eth.getPastLogs({ address: CONTRACT_ADDRESS, fromBlock: blockNumber - 50, toBlock: blockNumber });
  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.
    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 });
  }
}

/**
 * Method used to get all the events in a paginated way.
 *
 * The method will be part of the genezio SDK.
 *
 * @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}`)
  const count = await EventModel.count()
  console.log("Event count", count)
  const events = await EventModel.find(undefined, undefined, { skip: from, limit, sort: { "blockNumber": -1, "logIndex": -1 } })
  return {
    count,
    "events": events.map((event) => ({ id: event.id, name: event.name, parameters: event.parameters, blockNumber: event.blockNumber }))
  }
}

genezio addClass blockchain.js

name: blockchain-project
region: us-east-1
sdk:
  language: js
  path: ../client-blockchain-project/src/sdk/
classes:
  - path: ./blockchain.js
    type: jsonrpc
    methods:
      - name: sync
        type: cron
        cronString: "* * * * *"

cd ../
mkdir client-blockchain-project
cd client-blockchain-project

npx create-react-app .

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

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 "./sdk/blockchainServer.sdk"

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

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

  useEffect(() => {
    // Use the SDK to get events from the BlockchainServer class hosted on genezio
    BlockchainServer.GetEvents(currentIndex, CHUNKS)
      .then((response) => {
        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>
        <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;

cd ../server-blockchain-project

genezio local

Generating your SDK...✅
Your code was deployed and the SDK was successfully generated!

Test your code at https://app.genez.io/test-interface/local?port=8083

Server listening on port 8083

npm start

name: blockchain-project
region: us-east-1
sdk:
  language: js
  path: ../client-blockchain-project/src/sdk/
scripts:
  preFrontendDeploy: cd ../client-blockchain-project && npm install && npm run build
frontend:
  path: ../client-blockchain-project/build
classes:
  - path: ./blockchain.js
    type: jsonrpc
    methods:
      - name: sync
        type: cron
        cronString: "* * * * *"

cd server-blockchain-project/
genezio deploy

Deploying your backend project to genezio infrastructure...

Bundling your code and uploading it...✅
Checking your credentials...✅
Doing the final touch-ups...✅

Your code was deployed and the SDK was successfully generated!

Your backend project has been deployed and is available at https://app.genez.io/project/<project-id-here>

Deploying your frontend to genezio infrastructure...

No subdomain specified in the genezio.yaml configuration file. We will provide a random one for you.

Frontend successfully deployed at https://cyan-light-owl.app.genez.io.