Open saimeunt opened 1 week ago
Can I take this?
Hello @saimeunt ! I'm Ugo, a fullstack(js,React,Node,Next.js,Three.js) developer with a strong track record in OD hack projects. I've been actively involved since Edition 2, contributing to various initiatives, and I'm thrilled to be part of Edition 5! Having used OnlyDust extensively (see my profile: https://app.onlydust.com/u/Ugo-X. and my Github: https://github.com/Ugo-X), I'm confident in my ability to tackle new challenges within this edition. I'm eager to leverage my skills and experience to contribute effectively.
/txs
route:Fetching Latest Transactions Server-Side:
getBlockWithTransactions
method provided by ethers.js. This ensures we retrieve blocks with their associated transactions.Using shadcn/ui Table Component:
shadcn/ui
library to display the transaction data in a user-friendly table format.Creating Links for Detailed Views:
/tx/:hash
(detailed transaction view)./block/:number
(detailed block view)./address/:address
(detailed address view).Following User Stories and Validation Criteria:
Hi @saimeunt,
I'm a full-stack web developer with a strong background in front-end and back-end development. I'm excited to contribute to this project.
Create TransactionsPage Component: I will create a file containing a TransactionsPage
component.
Build Transactions Table: The table will include columns for transaction hash, method ID, block number, timestamp, source address, destination address, value, and transaction fee using @shadcn/ui
.
Update fetchL2LatestBlocks Function: I will update the fetchL2LatestBlocks
function to add necessary parameters and customize the table. I will utilize the getBlock
function to fetch up to 10 blocks and limit the table to 50 rows using the reduce
method.
Set Links in Table: I will loop through the transactions in the table, setting the correct links for each: details page (/tx/:hash
), block details page (/block/:number
), and source/destination addresses (/address/:address
).
I will ensure the following restrictions are adhered to:
If needed, I can use the Highlight feature on the table to make it easier for users to identify matching addresses.
Best regards,
Joel
@saimeunt,
I'm highly interested in tackling this task. I have expertise in designing and implementing frontend UIs and functionalities using Next.js, TypeScript, Shadcn, React, Redux, and other frontend libraries. I’m confident in delivering an efficient and user-friendly transactions page. You can check out my GitHub profile here: My Github Profile.
src/pages/txs.tsx
and use the Shadcn UI table component to display the transactions.Using React Server Components and Next.js's getServerSideProps
or getStaticProps
, I will fetch the latest 10 blocks and their transactions from the blockchain with getBlock({ blockNumber: N, includeTransactions: true })
.
transaction hash
, method ID (4 bytes selector)
, block number
, timestamp
,from/to addresses
, value
, and transaction fee
.transaction hash
, **block number**
, and **address**
will link to their respective details pages (/tx/:hash, /block/:number, /address/:address)
.@Ugo-X Thank you for your proposal, I'm assigning you for this issue.
Please note however that we're not using ethers.js
but viem
, don't worry though, they're pretty similar.
@Ugo-X Thank you for your proposal, I'm assigning you for this issue.
Please note however that we're not using
ethers.js
butviem
, don't worry though, they're pretty similar.
alright chief, I will be sure to take note of that. Thank you.
@Ugo-X 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.
Hello @saimeunt I'm almost done and will send a PR by tomorrow.
Latest transactions page
⚠️ Reading contributors guidelines to get assigned is MANDATORY!
Read contributors guidelines
User stories
/txs
Validation
It should look like the Etherscan latest txs list: https://optimistic.etherscan.io/txs
For the method ID column, just display the 4 bytes selector, function name mapping is out of scope. Don't forget to add links to tx details page
/tx/:hash
, block details page/block/:number
and from/to addresses/address/:address
.Do NOT include txs metrics such as txs count over 24h, pending txs, etc. 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 the last 10 most recent blocks. Extract transactions from blocks using
getBlock({ blockNumber: N, includeTransactions: true })
and sort them by descending timestamp.You must use React Server Components and fetch the blocks server-side, you can use work done on the block txs page as an inspiration.
Resources