Latest L1->L2 transactions page

[saimeunt]

Latest L1->L2 transactions page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

• As a user, I want to see the list of the latest L1->L2 transactions created on the blockchain by visiting /txs-enqueued
• I want to see a table of the list of newly created L1->L2 transactions. The detail for each tx should be L1 block number, L2 tx hash, timestamp, L1 tx hash, L1 tx origin and gas limit.

Validation

It should look like the Etherscan latest L1->L2 txs list: https://optimistic.etherscan.io/txsEnqueued

Don't forget to add external links to L1 block number, L1 tx hash, L1 tx origin and an internal link to L2 tx hash.
You can take inspiration from here: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/home/latest-l1-l2-transactions.tsx

Do NOT include the Queue index column.
Do NOT add a "Download Page Data" button.
Do NOT add pagination, it will be done in another separate issue.
Do NOT add a "Show rows" dropdown, this is out of scope for this issue.

Implementation

Use a simple table from shadcn/ui, always display the last 50 txs from placeholder data.
Update the fetchLatestL1L2Transactions (https://github.com/walnuthq/op-scan/blob/main/src/lib/utils.ts#L86) function to return all the fields necessary and 50 records instead of 6.

Resources

• shadcn/ui Table component: https://ui.shadcn.com/docs/components/table

[manlikeHB]

I would like to take on this issue.

[addegbenga]

Hi, I’m Adeyemi with over 4 years of experience with React and Nextjs.
To work on this, I will create a txs-enqueued page inside component pages.
This page will render the result from the fetchLatestL1L2Transactions utility function and display the latest L1->L2 transactions in a shadcn table showing the following details: L1 block number, L2 tx hash, timestamp, L1 tx hash, L1 tx origin, and gas limit.
When users click on external links like L1 block number, L1 tx hash, and L1 tx origin, they will be redirected to the block explorer in a new tab.
Internal links will go to the internal tx page.
I'll ensure the design matches Etherscan design.
Looking to complete this in 2 days.

[coxmars]

Hello @saimeunt,

I'm a Software Developer with a strong background in front-end and back-end development and I'm excited to contribute to this project.

Component:

I will enhance the existing latest-l1-l2-transactions.tsx component to display the latest L1 -> L2 transactions by:

Data Fetching:

I will update the fetchLatestL1L2Transactions function to return all necessary fields and 50 records instead of 6.
I will ensure external links to L1 block number, L1 tx hash, L1 tx origin, and an internal link to L2 tx hash are included.

Component Structure:

Parent Component: Fetch the transaction data and iterate over the transactions and pass details to the child component.

Child Component (latest-l1-l2-transaction.tsx): Render individual transaction details with appropriate external links for L1 block number, L1 tx hash, L1 tx origin, and internal link for L2 tx hash.

Table Implementation:

I will use the shadcn/ui Table component to display the transactions, following the given example from Etherscan.
The table will display the last 50 transactions, with the following details:

• L2 tx hash
• Age (timestamp)
• L1 tx hash
• L1 tx origin
• Gas limit

I will exclude the "Queue index" column as specified.

Validation:

I will validate the implementation to ensure it looks like the Etherscan latest L1 -> L2 txs list provided in the example.

References:
GitHub: https://github.com/coxmars
OnlyDust: https://app.onlydust.com/u/coxmars
Portfolio: https://marcox-portfolio.netlify.app/

I am looking forward to your feedback and the opportunity to contribute to this project.

[armandocodecr]

Plan to Resolve the Issue: Latest L1->L2 Transactions Page

Hello Walnut team,

I'm Armando, and I'm interested in working on the "Latest L1->L2 transactions page" problem. I have experience developing with Next.js and React, and I feel I can effectively contribute to solve this problem.

Description

The goal is to create a Next.js page that displays a list of the latest L1->L2 transactions created on the blockchain. This list should include details such as L1 block number, L2 transaction hash, timestamp, L1 transaction hash, L1 transaction origin, and gas limit. The visualization should be similar to the L1->L2 transactions list on Etherscan, providing external links for certain fields and excluding additional columns not requested.

Implementation

Create the Route for L1->L2 Transactions

• Route: /txs-enqueued
  • Description:
    • Develop a dedicated page to display L1->L2 transactions.
    • Use React Server Components to efficiently handle data fetching and rendering.
    • This ensures data is fetched from the server and presented immediately upon page rendering, improving performance.

Update the fetchLatestL1L2Transactions Function

• File: src/lib/utils.ts
  • Description:
    • Modify the fetchLatestL1L2Transactions function to return the 50 most recent records with the necessary fields: L1 block number, L2 transaction hash, timestamp, L1 transaction hash, L1 transaction origin, and gas limit.
    • Ensure that all relevant data for each transaction is obtained and displayed.

Implement the Table Component

• Description:
  • Use the Shadcn table component to display transactions in a structured table.
  • The table should show 50 transactions by default, following the structure provided in the Etherscan reference.
  • Add external links to the relevant fields: L1 block number, L1 transaction hash, and L1 transaction origin, and an internal link for the L2 transaction hash.

Technical Details

Route: /txs-enqueued

• Route /txs-enqueued:
  • Create the route using a page.tsx file in the app/txs-enqueued/ folder.
  • The page will use React Server Components to fetch data from the server.

Table Component

• Description:
  • Implement a table component that takes the transactions returned by the fetchLatestL1L2Transactions function as input.
  • Ensure that fields are correctly mapped to table columns and are presented clearly and orderly.
  • Use <Link> tags of NextJS for fields with external and internal URLs.

fetchLatestL1L2Transactions Function

• Description:
  • Modify the function to fetch updated data and transform it to include the required fields.
  • Implement tests to ensure the function returns accurate and complete data, aligned with the issue's requirements.

Verification and Testing

Data Validation

• Description:
  • Test data fetching and display to ensure L1->L2 transactions are correctly shown.
  • Confirm that external and internal links redirect to the correct pages.

Manual Testing

• Description:
  • Manually verify the /txs-enqueued page to ensure transaction data is displayed correctly and all links work.

Conclusion

This plan outlines a clear and precise strategy to implement the L1->L2 transactions page in Next.js. It focuses on following best practices of React and Next.js for data fetching and rendering, using Shadcn components for a consistent user interface. The proposed solution ensures users receive a seamless and visually similar experience to the transactions list on Etherscan, with external and internal links to facilitate navigation.

I look forward to the opportunity to work on this issue and contribute significantly to the project. Thank you for considering my proposal.

[saimeunt]

@coxmars Thank you for your proposal, I've assigned you the issue.

Please note that you should NOT update the existing latest-l1-l2-transactions.tsx component, this one is specific to the home page.
What you should do instead is create a completely new top-level route and accompanying page async React Server Component to display the table of L1->L2 transactions. See work done on the block txs page for example: https://github.com/walnuthq/op-scan/pull/16/files#diff-2c257bfdf7a507af25cb686d28fbe76c4140147b9410bf455716eda82fb1dd35

@armandocodecr I appreciate the quality of your comment but I'm willing to give a chance to everyone to get their own issue. Don't worry there will be more issues early next week and you might automatically be assigned without the need to comment on similar issues in the coming days if there's no sign of draft PR from assignees 💪

[armandocodecr]

Don't worry @saimeunt , I know @coxmars from the Dojo Coding community of which I am a part and I am sure he will do an excellent job on this issue. 💪🚀

[coxmars]

@coxmars Thank you for your proposal, I've assigned you the issue.

Please note that you should NOT update the existing latest-l1-l2-transactions.tsx component, this one is specific to the home page. What you should do instead is create a completely new top-level route and accompanying page async React Server Component to display the table of L1->L2 transactions. See work done on the block txs page for example: https://github.com/walnuthq/op-scan/pull/16/files#diff-2c257bfdf7a507af25cb686d28fbe76c4140147b9410bf455716eda82fb1dd35

@armandocodecr I appreciate the quality of your comment but I'm willing to give a chance to everyone to get their own issue. Don't worry there will be more issues early next week and you might automatically be assigned without the need to comment on similar issues in the coming days if there's no sign of draft PR from assignees 💪

Okay, thanks for the advice and the opportunity 🫡

[saimeunt]

@coxmars how is it going with the issue? Are you still working on this? Please note that if you're not providing at least a draft PR by the end of Wednesday we'll have to assign someone else.

[coxmars]

@coxmars how is it going with the issue? Are you still working on this? Please note that if you're not providing at least a draft PR by the end of Wednesday we'll have to assign someone else.

Hi @saimeunt, I'm working on it and will send the first PR for review tomorrow.