Fetch latest transactions from database

[saimeunt]

Fetch latest 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 latest 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/txs/fetch-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/lib/fetch-data.ts#L30-L111) or from the database (this is what has to be implemented).
Move the fetchLatestTransactions data fetching logic from the lib/fetch-data.ts to this helper function and just call this function in the txs page top-level server component.
You will need to make sure the pagination logic is preserved when querying data via Prisma.

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

[Bosun-Josh121]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Software engineering background with previous odhack contributions & works on similar tasks looking to make a first contribution on this project

How I plan on tackling this issue

Buy creating the required function and fetching data. And carrying out all necessary implementation with updates & feedback. Looking to complete within 48hrs

[martinvibes]

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.
Please give me the opportunity to contribute to this ecosystem, this is my first time applying here.

How I plan on tackling this issue

how I'll solve this issue I'll:

Create a New Helper Function(that is I'll create a file components/pages/txs/fetch-transactions.ts.

Implement Data Fetching Logic

I'll then update the transactions page to use the new helper function(I'll make sure the helper function works identically

and also create an env file and do the required task to get it done.

hopefully I get assigned and be a contributor

[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

I would love to contribute to this issue
I would come up with a PR within 3-5 working days after been 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.

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience working with databases and i would like to contribute to this project.

How I plan on tackling this issue

1. Create a new helper function in components/pages/txs/fetch-transactions.ts.
2. Use the logic from components/pages/tx/fetch-transaction-details.ts for fetching transaction details.
3. Implement the function to fetch data from the database using Prisma.
4. Move the existing fetchLatestTransactions logic from lib/fetch-data.ts to the new helper function.
5. Call this new helper function in the txs page top-level server component.
6. Ensure pagination logic is preserved when querying data via Prisma.
7. Run op-indexer as a background task to keep the database up-to-date.

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 30 contributions across 9 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure.
I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges.
As we surf through Edition 6, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

I will...

1. Set up the development environment:

   • Clone the op-scan repository
   • Install all necessary dependencies
   • Set up the database and ensure it's properly configured

2. Read and understand the contributors' guidelines:

   • Carefully review the CONTRIBUTING.md file
   • Take note of any specific coding standards or practices
   • Understand the process for submitting pull requests

3. Analyze the existing codebase:

   • Review the current implementation of fetchLatestTransactions in lib/fetch-data.ts
   • Examine the fetch-transaction-details.ts file to understand the existing design pattern
   • Study the txs page top-level server component to see how it currently fetches data

4. Create a new helper function:

   • Create a new file: src/components/pages/txs/fetch-transactions.ts
   • Define an exported function that will be data source agnostic
   • Implement logic to determine the data source based on an environment variable

5. Implement RPC fetching:

   • Move the existing fetchLatestTransactions function from lib/fetch-data.ts to the new file
   • Refactor the function to work within the new structure
   • Ensure all pagination logic is preserved

6. Implement database fetching:

   • Create a new function to fetch data from the database using Prisma
   • Structure the Prisma query to match the pagination used in RPC calls
   • Include 'from' and 'to' relations in the query to fetch all necessary data
   • Transform the database results to match the structure of RPC results

7. Update the transactions page component:

   • Modify src/components/pages/txs/index.tsx to use the new fetch-transactions function
   • Remove any direct calls to the old fetchLatestTransactions function
   • Ensure the component works with both data sources

8. Set up environment variable:

   • Add a new environment variable (e.g., DATA_SOURCE) to .env file
   • Update the fetch-transactions function to use this variable for source selection
   • Document the usage of this new environment variable

9. Implement error handling and logging:

   • Add try-catch blocks to handle potential errors in data fetching
   • Implement appropriate error messages for different failure scenarios
   • Add logging to track the data source being used and any issues that arise

10. Write unit tests:

    • Create test cases for both RPC and database fetching
    • Test pagination logic thoroughly
    • Ensure data consistency between the two sources

11. Set up and run op-indexer:

    • Follow the instructions in the README to set up op-indexer
    • Run op-indexer as a background task to keep the database updated
    • Verify that the database is being populated correctly

12. Perform integration testing:

    • Test the entire flow from the UI to the database
    • Verify that switching between data sources works as expected
    • Ensure that the UI behaves identically regardless of the data source

13. Optimize performance:

    • Profile the database queries and optimize if necessary
    • Consider implementing caching mechanisms if appropriate

14. Update documentation:

    • Add comments to the new fetch-transactions function explaining its usage
    • Update the project README with information about the new feature
    • Create or update API documentation if necessary

15. Prepare the pull request:

    • Create a new branch for this feature
    • Commit changes with clear, descriptive commit messages
    • Push the branch to the repository
    • Create a pull request with a detailed description of the changes

16. Address review feedback:

    • Respond to any comments or questions on the pull request
    • Make necessary adjustments based on reviewer feedback
    • Re-run tests after making changes to ensure everything still works

17. Finalize the implementation:

    • Ensure all CI/CD checks pass
    • Squash commits if required by the project guidelines
    • Merge the pull request once approved

[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

Having studied the codebase and discovered that the op-indexer was updated some hours ago, I will try to follow the current components logic and run op-index while fetching the latest transactions.

1. I will review the existing code for fetching transaction details in components/pages/tx/fetch-transaction-details.ts and the data source agnostic function in components/pages/tx/index.tsx.
   Then Look at the current implementation of fetchLatestTransactions in lib/fetch-data.ts and understand how it interacts with JSON-RPC.

I will create a helper function fetch-transactions.ts
Define a top-level exported function that is data source agnostic. This function will handle the logic for fetching transactions, regardless of whether it's from JSON-RPC or the database.

Implement fetchFromDatabase

Create or update lib/fetch-database.ts, implement the function that queries transactions from the database using Prisma.
I will Ensure pagination logic is preserved.

3. Update lib/fetch-data.ts

   I will Move the fetchLatestTransactions function logic from lib/fetch-data.ts to the new helper function. Then call the new function from components/pages/txs/fetch-transactions.ts.

4. Then update the Page Component

[blessingbytes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a background in web development, with experience in JavaScript, react, APIs, and also a blockchain developer.

How I plan on tackling this issue

To tackle this problem i will First, define a new environment variable to configure the data source.

• i will create a new helper function that abstracts the data fetching logic based on the environment variable.
  *I will Implement the function to fetch transactions from the database using Prisma. Ensure this function mirrors the data structure returned by the RPC method.
  *I will refactor the existing fetch logic from lib/fetch-data.ts to the new helper function.
  *Modify the TXS page to use the new fetchTransactions helper function.
  *Ensure that the pagination logic is consistent across both data fetching methods.
  *Ensure op-indexer is running to keep the database updated. Test the application by switching the DATA_SOURCE environment variable between jsonrpc and database to ensure that the transactions are fetched correctly from both sources.

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

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

2. Implement two separate functions:

   • fetchLatestTransactionsFromJsonRpc: Move the existing logic from lib/fetch-data.ts.
   • fetchLatestTransactionsFromDatabase: Implement new logic using Prisma to query the database.

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

4. Ensure the pagination logic is preserved when querying data via Prisma in the database function.

5. Update the transactions page (pages/txs/index.tsx) to use the new fetchLatestTransactions function instead of directly calling fetchLatestTransactions from lib/fetch-data.ts.

6. Add necessary type definitions and imports.

7. Implement error handling and fallback to JSON-RPC if 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.

This approach will maintain the existing design pattern and abstract away the data source, allowing for easy switching between JSON-RPC and database queries.

[danielcdz]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello! In the last ODhack I contributed to creating the component that shows the latest 10 transactions from the JSON-RPC, I want to help on this one since I have enough context.

How I plan on tackling this issue

Basically following what you already proposed, I have context on the components and the functions that is used now to fetch the JSON-RPC data.

[adrianvrj]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my is Adrian, I am a passionate developer looking to collaborate with innovating web3 projects, I got experience using the Typescript language and the Nextjs framework

How I plan on tackling this issue

Validation Criteria

1. The function must fetch the exact same data whether it is calling the RPC directly or querying the database.
2. The implementation must adhere to the existing design pattern already implemented in the transaction details page.

Implementation Steps

1. Create a Helper Function:
   • Location: components/pages/txs/fetch-transactions.ts
   • Logic: Utilize the logic found in components/pages/tx/fetch-transaction-details.ts.
   • Structure:
     - A top-level exported function that is data source agnostic.
     - Two separate functions fetching data from either JSON-RPC (already implemented) or the database (to be implemented).
   • Ensure the function uses an environment variable to determine the data source.
2. Move Existing Logic:
   • Move the fetchLatestTransactions data fetching logic from lib/fetch-data.ts to the newly created helper function.
   • Update the top-level server component in the transactions page to call this helper function.
3. Pagination Logic:
   • Ensure the pagination logic is preserved when querying data via Prisma.
4. Run op-indexer:
   • Run op-indexer as a background task in another terminal alongside the explorer.
   • Ensure the database is up-to-date, mirroring what is fetched from the JSON-RPC endpoint.

Code References

1. Existing JSON-RPC Implementation:
   • https://github.com/walnuthq/op-scan/blob/main/src/lib/fetch-data.ts#L30-L111
2. Fetch Transaction Details Helper Function:
   • https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/fetch-transaction-details.ts
3. Data Source Agnostic Function in Transaction Details Page:
   • https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx#L10
4. Op-indexer Getting Started Guide:
   • https://github.com/walnuthq/op-scan/blob/main/README.md#run-the-indexer

Technical Details

1. Environment Variable:
   • Define an environment variable (e.g., DATA_SOURCE) to switch between JSON-RPC and database.
2. Database Fetching Implementation:
   • Implement the database fetching logic using Prisma.
   • Ensure the function integrates seamlessly with the existing data fetching mechanism.
3. Function Structure:
   • fetchLatestTransactions (top-level function)
   • fetchFromJSONRPC (existing function)
   • fetchFromDatabase (new function)
     4 . Preserving Pagination:
   • Ensure the pagination logic within fetchFromDatabase matches the existing JSON-RPC pagination logic.
4. Testing and Validation:
   • Test the new implementation thoroughly to ensure data consistency between JSON-RPC and database fetches.
   • Validate the pagination and data integrity against the current implementation.

Final Notes

• Ensure all changes adhere to the existing codebase’s design patterns and coding standards.
• Document the new helper function and any modifications clearly for future contributors.

[johnkennedyb]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Nnawuihe Johnkennedy . I am a software developer with couple years of experience , i build using mern stack and i belive this skills can be leverage and used to solve problems. This is my portfolio: https://johnkennedy.vercel.app/

How I plan on tackling this issue

As a rollup developer using op-scan, fetch the latest transactions data from either JSON-RPC (current behavior) or a database fed by op-indexer. Abstract the data source in a dedicated function, configured via an environment variable, to ensure flexibility and ease of configuration.

[onlydustapp]

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

[saimeunt]

@danielcdz this one goes to you since you're a returning contributor having work on a similar issue in the last hack, good luck!

[danielcdz]

@saimeunt Thank you sir! working on it