feat: evm contract shortcuts #1217
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
6 Skipped Deployments
|
WalkthroughThe pull request updates the project’s EVM contract details functionality. The changelog now lists a new feature for adding method shortcuts on the overview section. An old overview component has been removed, and several new React components have been added to construct a revamped contract details overview, including components for command groups, contract information, verified commands, and verified information. Additionally, the main page component has been updated to import the new overview components and accept extra verification props. A new optimizer validation schema has also been introduced in the verification types. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant O as EvmContractDetailsOverview
participant VI as OverviewInfo
participant VV as OverviewVerifiedInfo
participant VC as OverviewVerifiedCmds
participant CG as EvmContractCmdGroup
U->>O: Request contract details
O->>VI: Render basic contract information
O->>VV: Render verification details (if available)
O->>VC: Render verified command shortcuts
VC->>CG: Display command group for interactions
CG-->>U: Navigate based on command selection
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedInfo.tsx (1)
14-17: Add aria-label to the section for better accessibility.The heading looks good, but adding an aria-label to the VStack would improve accessibility.
- <VStack spacing={4} alignItems="flex-start"> + <VStack spacing={4} alignItems="flex-start" aria-label="Contract Verification Information">src/lib/pages/evm-contract-details/components/evm-contract-details-overview/index.tsx (1)
20-34: Consider grouping related props for better maintainability.The props interface is well-defined but could be organized better by grouping related props into sub-interfaces.
+interface ContractIdentifiers { + contractAddressBech: BechAddr20; + contractAddressHex: HexAddr20; + hash: Option<string>; + evmHash: Nullish<string>; +} +interface ContractMetadata { + sender: Option<BechAddr>; + created: Option<Date>; + isContractInfoLoading: boolean; +} +interface VerificationInfo { + evmVerifyInfo: Option<EvmVerifyInfo>; + proxyTargetEvmVerifyInfo: Option<EvmVerifyInfo>; +} interface EvmContractDetailsOverviewProps { - contractAddressBech: BechAddr20; - contractAddressHex: HexAddr20; - hash: Option<string>; - evmHash: Nullish<string>; - sender: Option<BechAddr>; - created: Option<Date>; - isContractInfoLoading: boolean; + ...ContractIdentifiers; + ...ContractMetadata; onViewMoreAssets: () => void; onViewMoreTxs: () => void; tab: TxsTabIndex; setTab: (tab: TxsTabIndex) => void; - evmVerifyInfo: Option<EvmVerifyInfo>; - proxyTargetEvmVerifyInfo: Option<EvmVerifyInfo>; + ...VerificationInfo; }src/lib/services/types/verification/evm.ts (1)
50-53: Consider adding constraints to the optimizer runs.The optimizer runs should typically be a positive number. Consider adding validation.
const zEvmOptimizer = z.object({ enabled: z.boolean(), - runs: z.number(), + runs: z.number().positive(), });src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedCmds.tsx (1)
56-87: Consider adding loading state for proxy target info.The proxy target section could benefit from a loading indicator while
proxyTargetEvmVerifyInfois being fetched.- {proxyTargetEvmVerifyInfo && ( + {(proxyTargetEvmVerifyInfo || isProxyTargetLoading) && ( <VStack spacing={4} alignItems="flex-start"> <Heading as="h6" variant="h6"> Proxy target contract </Heading> + {isProxyTargetLoading ? ( + <Spinner size="sm" /> + ) : ( <HStack spacing={2} alignItems="center">src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewInfo.tsx (1)
28-39: Consider adding aria-label for better accessibility.The Grid component could benefit from an aria-label to improve screen reader experience.
<Grid + aria-label="Contract Overview Information" gridTemplateColumns={{ base: "1fr", md: "minmax(0, 160px) repeat(3, minmax(0, 240px))", }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
CHANGELOG.md(1 hunks)src/lib/pages/evm-contract-details/components/EvmContractDetailsOverview.tsx(0 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx(1 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewInfo.tsx(1 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedCmds.tsx(1 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedInfo.tsx(1 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/index.tsx(1 hunks)src/lib/pages/evm-contract-details/index.tsx(2 hunks)src/lib/services/types/verification/evm.ts(2 hunks)
💤 Files with no reviewable changes (1)
- src/lib/pages/evm-contract-details/components/EvmContractDetailsOverview.tsx
✅ Files skipped from review due to trivial changes (1)
- CHANGELOG.md
🧰 Additional context used
🪛 Biome (1.9.4)
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx
[error] 17-17: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedInfo.tsx (1)
18-41: LGTM! Well-structured grid layout.The responsive grid layout and information display are well implemented. Good use of proper spacing and alignment.
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/index.tsx (1)
51-83: LGTM! Well-structured component composition.The component layout and conditional rendering are well implemented. Good use of the Stack component for spacing.
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx (1)
54-81: LGTM! Well-implemented button group.The button group implementation with proper styling and event handling is clean and maintainable.
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedCmds.tsx (1)
41-54: LGTM! Well-structured command group layout.The responsive layout with conditional rendering based on mobile state is well implemented. The command groups are logically separated between read and write operations.
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewInfo.tsx (1)
64-98: LGTM! Well-handled transaction hash display.Good implementation of transaction hash display with proper fallbacks and copy functionality.
src/lib/pages/evm-contract-details/index.tsx (1)
163-177: LGTM! Props properly passed to EvmContractDetailsOverview.The verification info props are correctly passed to the overview component, with proper loading state handling in the parent component.
.../pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx
Show resolved
Hide resolved
...pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedCmds.tsx
Show resolved
Hide resolved
.../pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/lib/components/ContractCmdButton.tsx (1)
2-2: LGTM! Consider improving the fallback text.The type change to
Option<string>improves type safety. However, displaying "undefined" as fallback text might not be user-friendly.Consider using a more descriptive fallback text:
- {cmd || "undefined"} + {cmd || "No command available"}Also applies to: 4-7
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx (1)
54-81: Consider the following improvements to the ButtonGroup implementation.
- Add a comparison function to
sort()for consistent ordering across browsers.- Move inline styles to a theme or styled component.
- Define the navigation path as a constant.
+const INTERACT_PATH = "/evm-contracts/[contractAddress]/[tab]"; + +const compareAbiSections = (a: JsonFragment, b: JsonFragment) => + (a.name ?? "").localeCompare(b.name ?? ""); + <ButtonGroup flexWrap="wrap" - sx={{ - "> button": { - marginInlineStart: "0 !important", - marginInlineEnd: "1", - }, - }} + className="evm-contract-cmd-group" gap={2} > - {abiSections.sort().map(({ name }, index) => ( + {abiSections.sort(compareAbiSections).map(({ name }, index) => ( <ContractCmdButton key={`${interactTab}-cmd-${name}-${index}`} cmd={name} onClickCmd={() => { navigate({ - pathname: "/evm-contracts/[contractAddress]/[tab]", + pathname: INTERACT_PATH, query: { contractAddress,Add to your theme or styled components:
const theme = { components: { ButtonGroup: { variants: { 'evm-contract-cmd-group': { '> button': { marginInlineStart: '0 !important', marginInlineEnd: '1', }, }, }, }, }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/lib/components/ContractCmdButton.tsx(1 hunks)src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx
[error] 17-17: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
src/lib/pages/evm-contract-details/components/evm-contract-details-overview/EvmContractCmdGroup.tsx (2)
9-21: Remove redundant case clause in switch statement.The case for
InteractTabsIndex.WriteProxyis redundant since it falls through to the default case.const getGroupTitle = (interactTab: InteractTabsIndex) => { switch (interactTab) { case InteractTabsIndex.Read: return "Read"; case InteractTabsIndex.Write: return "Write"; case InteractTabsIndex.ReadProxy: return "Read as Proxy"; - case InteractTabsIndex.WriteProxy: default: return "Write as Proxy"; } };🧰 Tools
🪛 Biome (1.9.4)
[error] 17-17: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
23-27: LGTM! Props interface is well-defined.The interface uses appropriate types that ensure type safety and match the ethers.js library types.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor