Contract page events | Issue #38 #64
Conversation
|
@armandocodecr is attempting to deploy a commit to the Walnut Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
@armandocodecr Nice PR, this is definitely heading in the right direction, please make the requested changes and keep up the good work.
package.json
Outdated
| @@ -30,6 +31,7 @@ | |||
| "clsx": "^2.1.1", | |||
| "date-fns": "^3.6.0", | |||
| "date-fns-tz": "^3.1.3", | |||
| "ethers": "^6.13.2", | |||
There was a problem hiding this comment.
Do not introduce redundant dependencies, this project already use viem and you must stick to it (see https://viem.sh/docs/ethers-migration).
| return ( | ||
| <Card> | ||
| <CardHeader>Latest 25 Contract Events</CardHeader> | ||
| <CardContent>CONTRACT EVENTS</CardContent> |
There was a problem hiding this comment.
Move your table inside the card content and keep the header.
Also please move your table into its own component in a separate file.
| import { formatEventLog, formatTimestamp } from "@/lib/utils"; | ||
|
|
||
| import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"; | ||
| import { DecodedLogDisplay } from "@/components/ui/decodedLog-display" |
There was a problem hiding this comment.
components/ui is only for shadcn/ui components, move your DecodedLogDisplay component under pages/address.
| l2PublicClient.getLogs({ address, fromBlock, toBlock: 'latest' }), | ||
| ]); | ||
|
|
||
| const signatureLookup = new whatsabi.loaders.OpenChainSignatureLookup(); |
There was a problem hiding this comment.
Please use loadFunctions from lib/signatures.ts instead of raw whatsabi.
| ...formattedLog, | ||
| transactionHash: log.transactionHash, | ||
| blockNumber: log.blockNumber, | ||
| timestamp: { |
There was a problem hiding this comment.
I'm not sure you should use formatTimestamp here, I think it's better to just get the timestamp from the block and call formatTimestamp in the render function.
| href={`/block/${item.blockNumber}`} | ||
| className="text-sm font-medium leading-none" | ||
| > | ||
| {item.blockNumber.toString().slice(1)} |
| </div> | ||
| </TableCell> | ||
| <TableCell className="align-top"> | ||
| {item.method} |
There was a problem hiding this comment.
You should display the transaction signature here with TxMethodBadge.
src/lib/utils.ts
Outdated
| @@ -1,4 +1,7 @@ | |||
| import { type ClassValue, clsx } from "clsx"; | |||
| import { getBytes, hexlify, getAddress as ethersGetAddress, isHexString } from "ethers"; | |||
There was a problem hiding this comment.
You will need to replace these by their viem counterpart.
src/lib/utils.ts
Outdated
| }; | ||
| } | ||
|
|
||
| const eventSignatures = await signatureLookup.loadEvents(log.topics[0] as Address); |
There was a problem hiding this comment.
Likewise, we have loadEvents in lib/signatures.ts now.
|
Hi @saimeunt ! I have uploaded a few commits that resolve the changes you suggested. I look forward to your feedback! |
Resolves #38
Implement Contract Events List on Contract Details Page
Summary
This pull request addresses the user story of displaying a list of events involving a contract on its details page. The events are presented in a table format, similar to the Etherscan contract details events page.
Changes
1.
address-events.tsxThe
AddressEventscomponent was updated to fetch and display contract events. The component now retrieves the contract's bytecode and logs, decodes the logs using the ABI, and formats the data to display in a table. The table shows the transaction hash, block number, timestamp, method, and decoded logs.2.
utils.tsNew utility functions were added to
utils.tsto support the decoding and formatting of logs and timestamps:decodeData: Decodes log data from hexadecimal to human-readable formats (hex, number, address).formatEventLog: Formats logs with decoded arguments, including function name, topics, and decoded data.formatTimestamp: Formats timestamps to include distance from the current time, UTC, and timezone-specific formats.3. New Component
DecodedLogDisplayA new component
DecodedLogDisplaywas created to handle the display of decoded log details. This component provides an interface for selecting the display format of the log data (hex, number, address) and dynamically updates the displayed information based on user selection.4. New Component
select.tsxTo facilitate the selection functionality in
DecodedLogDisplay, a newSelectcomponent was created using theshadcn/uilibrary. This component allows users to choose the format in which they want to view the decoded log data.5.
package.jsonThe
package.jsonfile was updated to include new dependencies:@radix-ui/react-selectfor the Select component.ethersfor handling hexadecimal and address conversions. Theethers.jslibrary was necessary for more robust handling of Ethereum data formats, ensuring accurate decoding and formatting of log data.6. New Interface File
events.interface.tsA new file
events.interface.tswas created to define TypeScript interfaces for the decoded arguments and formatted logs. These interfaces ensure consistent typing across the application for decoded event data.7.
getLogsFunction IntegrationThe
getLogsfunction fromviemwas integrated to fetch logs emitted from the specified contract. This function is essential for retrieving event logs to display on the contract details page.Validation
Resources
Additional Information
I have created a video on YouTube demonstrating the functionality of my code. Please refer to it for a visual representation of the implemented features.
Demo issue