additional information about transactions displayed in popup/dialog#28
additional information about transactions displayed in popup/dialog#28awesamarth wants to merge 3 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @awesamarth, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience within the action request dialog by providing more comprehensive and understandable transaction details. It introduces a dedicated component to parse and display function names, contract addresses, and network paths, making complex transactions more transparent for users. The changes aim to give users a clearer picture of what a transaction entails before they approve it. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
The pull request introduces a new CallDetails component to display additional transaction information, such as the contract address, function name, and network path. It leverages the 4byte API to resolve function names from selectors and includes UI improvements like a copy button for addresses and dynamic loading states. The changes enhance the user experience by providing more context for transactions. However, there are a couple of areas for improvement regarding error handling and configuration.
| return firstCall.data.slice(0, 10) as `0x${string}` | ||
| }, [firstCall?.data]) | ||
|
|
||
| const erc20FunctionName = React.useMemo(() => { |
There was a problem hiding this comment.
An empty catch block can hide potential errors during decodeFunctionData. While it might be intended for graceful fallback, it's generally better to at least log the error to aid in debugging unexpected issues.
Consider adding a console.error or a more specific error handling mechanism here.
} catch (error) {
console.error("Failed to decode ERC20 function data:", error)
}
| return decoded.functionName | ||
| } catch {} |
There was a problem hiding this comment.
The URL for the 4byte API is hardcoded. This makes the application less flexible and harder to manage if the API endpoint changes or if different environments require different configurations. It's a good practice to manage external service URLs through environment variables or a centralized configuration.
Consider moving this URL to an environment variable or a configuration file.
const res = await fetch(
`${process.env.FOUR_BYTE_API_URL || 'https://api.4byte.sourcify.dev'}/signature-database/v1/lookup?function=${selector}`,
if function detected-> call sourcify api to get function name (similar to cast 4byte)
if selector found in directory-> show that
if error / not found -> hide row and just show the contract address
if no function detected (no op)-> hide function row and instead of "Contract", show "To"