Fetch block transactions from database

[saimeunt]

Fetch block transactions from database

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a rollup developer using op-scan, I want to fetch the block transactions data either from JSON-RPC (current behavior) or from a database fed from op-indexer.
The data source should be abstracted away in a dedicated function and is configured using an environment variable.

Validation

It should fetch the exact same data whether calling the RPC directly or querying the database.
It MUST adhere to the existing design pattern already implemented in the tx details page.

Implementation

Create a new helper function under components/pages/block-txs/fetch-block-transactions.ts, use the same logic found in components/pages/tx/fetch-transaction-details.ts, a top level exported function which is data source agnostic and 2 separate functions fetching data from either JSON-RPC (this is already implemented here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/block-txs/index.tsx#L11-L37) or from the database (this is what has to be implemented).
Move the block transactions data fetching logic from the block txs page to this helper function and just call this function in the block txs page top-level server component.

Run op-indexer as a background task in another terminal along the explorer to keep an up-to-date database mirroring what you'd fetch from the JSON-RPC endpoint.

Resources

• fetch tx details helper function: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/fetch-transaction-details.ts
• data source agnostic function called in tx detail page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx#L10
• op-indexer getting started https://github.com/walnuthq/op-scan/blob/main/README.md#run-the-indexer

[ShantelPeters]

@saimeunt can I work on this issue?
This would be my first time contributing to a project

[onlydustapp]

Hi @ShantelPeters!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[ShantelPeters]

I am applying for this use via https://app.onlydust.com/p/opscan-by-walnut

@saimeunt .. please can I be assigned to this issue ?

[onlydustapp]

Hi @ShantelPeters!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[raizo07]

@saimeunt I'll to work on this

[onlydustapp]

Hi @raizo07!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[ShantelPeters]

Hi @saimeunt i am applying to this issue via https://app.onlydust.com/p/opscan-by-walnut

I’m a front end developer and I would love to be assigned to this issue
This would be my first time contributing to an issue

[renzobanegass]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Renzo, a Software Engineer with over 5+ years of experience in the industry, I recently started in Web3 as a member of Dojo Coding and this would be one of my first contributions to the ecosystem!

How I plan on tackling this issue

1. Read any relevant documentation and investigate how to implement the Database client.

2. Create a New Helper Function:

   • I will create a new file fetch-block-transactions.ts under components/pages/block-txs/.
   • This file will contain the main function fetchBlockTransactions which will abstract the data source selection logic based on an environment variable.

3. Implement Data Source Functions*:

   • Inside fetch-block-transactions.ts, I will create two functions:
     • fetchFromJSONRPC: This will use the existing logic from index.tsx to fetch data from JSON-RPC.
     • fetchFromDatabase: This will implement the logic to fetch data from the database.

4. Refactor index.tsx:

   • I will move the block transactions data fetching logic from components/pages/block-txs/index.tsx to the newly created fetch-block-transactions.ts.
   • The index.tsx file will then call the fetchBlockTransactions function.

5. Run op-indexer:

   • I will set up and run op-indexer as a background task to keep the database up-to-date.

File Changes

• New File:

  • components/pages/block-txs/fetch-block-transactions.ts

• Modified File:

  • components/pages/block-txs/index.tsx

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience working with databases, JSON manipulation and typescript and i would like to contribute to this project.

How I plan on tackling this issue

1. Create a New Helper Function: Create a new file fetch-block-transactions.ts in the components/pages/block-txs/ directory.
2. Abstract Data Source Logic: Implement a data source function that decides whether to fetch data from JSON-RPC or the database based on an environment variable.
3. Implement Database Fetching Logic: Implement a function to fetch block transaction data from the database using Prisma.
4. Move Existing Logic: Move the block transactions data fetching logic from components/pages/block-txs/index.tsx to the new helper function.
5. Update Block Transactions Page: Modify the block transactions page to use the new helper function.
6. Run op-indexer: Ensure op-indexer is running in the background to keep the database up-to-date.

[od-hunter]

Hello @saimeunt , Please can i be assigned this issue? This is my first time contributing to this ecosystem and I would love to be given the opportunity. I am a front-end Developer, and my experience includes html, css, react, JavaScript and a little of TypeScript.

To solve this issue, I’ll follow the implementation guidelines strictly and make sure I follow it in details and I’ll create the function and test the function I was asked to create in the implementation guideline. Please assign me. I’ll begin work ASAP!

[onlydustapp]

Hi @od-hunter!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I am a fullstack developer with 4 years of experience. I'm thrilled about the chance to contribute to the Op Scan Project. With 4 years of solid experience in Next.js, TypeScript, Shadcn, and React, Nodejs and PHP I'm confident in my ability to deliver an efficient and user-friendly Contract page for transactions.

How I plan on tackling this issue

Create fetch-block-transactions.
I will create a new file components/pages/block-txs/fetch-block-transactions.ts.

Update or create lib/fetch-database.ts to include the function for querying block transactions from the database using Prisma.
I will ensure pagination and other necessary logic are implemented.

I will move the block transactions data fetching logic from lib/fetch-data.ts to components/pages/block-txs/fetch-block-transactions.ts.
I will ensure it is used appropriately in your components.

Then update Block Transactions Page Component

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, with a robust background in TypeScript, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷. This is my first contribution to Walnut’s Repositories.

How I plan on tackling this issue

To implement fetching block transactions from either JSON-RPC or a database, I propose the following steps:

1. Create a new file components/pages/block-txs/fetch-block-transactions.ts with a top-level exported function fetchBlockTransactions.

2. Implement two separate functions:

   • fetchBlockTransactionsFromJsonRpc: Move the existing logic from the block-txs page.
   • fetchBlockTransactionsFromDatabase: Implement new logic using Prisma to query the database.

3. Use an environment variable (e.g., DATABASE_URL) to determine which data source to use, similar to the transaction details implementation.

4. Update the block transactions page to use the new fetchBlockTransactions function.

5. Ensure that both functions return data in the same format.

6. Implement error handling and fallback to JSON-RPC if the database query fails.

Here's a skeleton of the fetch-block-transactions.ts file:

import { l2PublicClient } from "@/lib/chains";
import { prisma } from "@/lib/prisma";
import { 
  fromViemTransactionWithReceipt, 
  TransactionWithReceipt,
  fromPrismaTransactionWithReceipt
} from "@/lib/types";
import { getSignatureBySelector } from "@/lib/4byte-directory";

type FetchBlockTransactionsReturnType = {
  transactions: TransactionWithReceipt[];
  blockNumber: bigint;
  blockTimestamp: bigint;
};

const fetchBlockTransactionsFromJsonRpc = async (number: bigint): Promise<FetchBlockTransactionsReturnType> => {
  const block = await l2PublicClient.getBlock({
    blockNumber: number,
    includeTransactions: true,
  });
  if (!block) {
    throw new Error(`Block ${number} not found`);
  }
  const [receipts, signatures] = await Promise.all([
    Promise.all(
      block.transactions.map(({ hash }) =>
        l2PublicClient.getTransactionReceipt({ hash }),
      ),
    ),
    Promise.all(
      block.transactions.map(({ input }) =>
        getSignatureBySelector(input.slice(0, 10)),
      ),
    ),
  ]);
  const transactions = block.transactions.map((transaction, i) =>
    fromViemTransactionWithReceipt(
      transaction,
      receipts[i],
      block.timestamp,
      signatures[i],
    ),
  );
  return { transactions, blockNumber: block.number, blockTimestamp: block.timestamp };
};

const fetchBlockTransactionsFromDatabase = async (number: bigint): Promise<FetchBlockTransactionsReturnType> => {
  const block = await prisma.block.findUnique({
    where: { number: number.toString() },
    include: { 
      transactions: {
        include: { receipt: true }
      }
    },
  });

  if (!block) {
    return fetchBlockTransactionsFromJsonRpc(number);
  }

  const transactions = await Promise.all(block.transactions.map(async (transaction) => {
    const signature = await getSignatureBySelector(transaction.input.slice(0, 10));
    return fromPrismaTransactionWithReceipt(transaction, transaction.receipt, signature);
  }));

  return {
    transactions,
    blockNumber: BigInt(block.number),
    blockTimestamp: BigInt(block.timestamp),
  };
};

const fetchBlockTransactions = process.env.DATABASE_URL
  ? fetchBlockTransactionsFromDatabase
  : fetchBlockTransactionsFromJsonRpc;

export default fetchBlockTransactions;

This implementation follows the pattern established in the transaction details fetching, using the DATABASE_URL environment variable to determine the data source. It also includes a fallback to JSON-RPC if the database query fails or returns no results.
The block transactions page (components/pages/block-txs/index.tsx) should be updated to use this new function instead of directly querying the JSON-RPC endpoint.

[onlydustapp]

Hi @martinvibes!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp]

The maintainer saimeunt has assigned renzobanegass to this issue via OnlyDust Platform.
Good luck!

[saimeunt]

@renzobanegass this one goes to you, good luck!

@PoulavBhowmick03 really appreciate your comment as it was a very solid proof of your understanding of the issue, but I'm afraid we try to only assign one issue per person during the hack (in case we have alternative good enough applications) to give a chance to everyone.

[renzobanegass]

Thanks, I´ll start right away!

[renzobanegass]

PR created! Waiting for feedback!