Fetch block details from database

[saimeunt]

Fetch block details 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 details 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/fetch-block-details.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/index.tsx#L9) or from the database (this is what has to be implemented).
Move the block details data fetching logic from the block page to this helper function and just call this function in the block details 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

[Iwueseiter]

Hi @saimeunt can I work on this?

[onlydustapp]

Hi @Iwueseiter!
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.

[Josh-121]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Software engineering background mainly in backend development with contributions in previous odhacks. Looking to make first contribution on this project

How I plan on tackling this issue

I understand I'm to create a function following the implementation of the referenced function and other required functions as hinted including the indexer. I'll make use of all provided resources and be sure to deliver as required

[Jemiiah]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @saimeunt I would love to work on this issue I'm a frontend developer and I have made contribution to other repositories, and this would be my first contribution on this repository I would love to contribute to this project!!

[od-hunter]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please I will like to be assigned this issue. I am a front-end Developer, and my experience includes html, css, react, JavaScript and a little of TypeScript.

[martinvibes]

I'm applying this issue via Onlydust Platform

hi @saimeunt I'll love to be assigned

I'm a frontend developer and I'll love to be a contributor to this repo

Steps

• Create the new helper function fetch-block-details.ts:This will be similar to the fetch-transaction-details.ts function.Implement two separate functions: one for fetching data from JSON-RPC and another for fetching from the database.Export a top-level function that abstracts away the data source selection based on an environment variable.
• Move the existing block details fetching logic from the block page to this new helper function.
• Update the block details page to call the new helper function.
• Ensure op-indexer is running to keep your database synchronized.

this issue is easy to tackle
I'll also add my .env file and so on

hopefully I get assigned

[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.

[ShantelPeters]

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

@saimeunt can I be assigned to this issue ?

My background in software development, JavaScript, and data fetching can be leveraged to efficiently complete this task.

To approach this problem, I would:

1. Study the provided resources, including the tx details helper function and op-indexer documentation.
2. Create a new helper function in fetch-block-details.ts with a data source agnostic approach.
3. Implement the database fetching logic using op-indexer as a background task.
4. Move the block details data fetching logic from the block page to the helper function.
5. Test the function to ensure it fetches the exact same data from either JSON-RPC or the database.

[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.

[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

I will create a new file components/pages/block/fetch-block-details.ts.

Update or create lib/fetch-database.ts to include a function for querying block details from the database using Prisma. I will make sure the implementation handles the block ID and adheres to existing design patterns.

i will update lib/fetch-data.ts

[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 details from either JSON-RPC or a database, I propose the following steps:

1. Create a new file components/pages/block/fetch-block-details.ts with a top-level exported function fetchBlockDetails.

2. Implement two separate functions:

   • fetchBlockDetailsFromJsonRpc: Move the existing logic from the block page.
   • fetchBlockDetailsFromDatabase: Implement new logic using Prisma to query the database.

3. In the top-level fetchBlockDetails function, use an environment variable (e.g., USE_DATABASE) to determine which data source to use.

4. Update the block details page (components/pages/block/index.tsx) to use the new fetchBlockDetails function instead of directly calling l2PublicClient.getBlock().

5. Ensure that the fetchBlockDetailsFromDatabase function returns data in the same format as the JSON-RPC method.

6. Add necessary type definitions and imports.

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

8. Add unit tests to verify the functionality of both data sources.

9. Update documentation to reflect the new configurable data source option.

10. Ensure the op-indexer is running as a background task to keep the database up-to-date.

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

import { l2PublicClient } from "@/lib/chains";
import { prisma } from "@/lib/prisma";
import { fromViemBlock, Block } from "@/lib/types";

const fetchBlockDetailsFromJsonRpc = async (number: bigint): Promise<Block | null> => {
  const block = await l2PublicClient.getBlock({ blockNumber: number });
  return block ? fromViemBlock(block) : null;
};

const fetchBlockDetailsFromDatabase = async (number: bigint): Promise<Block | null> => {
  const block = await prisma.block.findUnique({
    where: { number: number.toString() },
    include: { transactions: true },
  });
  
  if (!block) return null;
  
  // Transform the Prisma block to match the Block type
  // This may require additional logic depending on your database schema
  return {
    number: BigInt(block.number),
    hash: block.hash,
    parentHash: block.parentHash,
    timestamp: BigInt(block.timestamp),
    nonce: block.nonce,
    difficulty: BigInt(block.difficulty),
    gasLimit: BigInt(block.gasLimit),
    gasUsed: BigInt(block.gasUsed),
    miner: block.miner,
    extraData: block.extraData,
    baseFeePerGas: block.baseFeePerGas ? BigInt(block.baseFeePerGas) : null,
    transactions: block.transactions.map(tx => tx.hash),
  };
};

const fetchBlockDetails = process.env.USE_DATABASE === 'true'
  ? fetchBlockDetailsFromDatabase
  : fetchBlockDetailsFromJsonRpc;

export default fetchBlockDetails;

[GoSTEAN]

@saimeunt Please can you assign this to me.

[onlydustapp]

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

[saimeunt]

@PoulavBhowmick03 this one goes to you as you provided a clear description of what's needed to implement the fetchBlockDetails function.

There's no need to introduce another environment variable, stick to the pattern used here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/fetch-transaction-details.ts#L77-L79
When the block is not found in the database, you can fallback to fetching from the JSON-RPC endpoint just like this: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/fetch-transaction-details.ts#L30-L32
There's already a utility function found in lib/types.ts that converts a PrismaBlock to an op-scan Block, use this instead of writing your own conversion.