feat(address): add Vyper smart contract support and syntax highlighting#331
Open
AugustoL wants to merge 1 commit intoopenscan-explorer:devfrom
Open
feat(address): add Vyper smart contract support and syntax highlighting#331AugustoL wants to merge 1 commit intoopenscan-explorer:devfrom
AugustoL wants to merge 1 commit intoopenscan-explorer:devfrom
Conversation
Detect Vyper contracts from Etherscan's CompilerVersion (vyper: prefix) and Sourcify's compilation.language field. Use correct .vy file extension instead of hardcoded .sol. Add CodeBlock component with Prism.js for syntax highlighting of Solidity (.sol) and Vyper (.vy) source files. Test with CRV token (Vyper, verified on Sourcify): 0xd533a949740bb3306d119cc777fa900ba034cd52
|
🚀 Preview: https://pr-331--openscan.netlify.app |
Collaborator
josealoha666
left a comment
josealoha666
left a comment
There was a problem hiding this comment.
Looks good overall. The Vyper detection path in useEtherscan and the shared CodeBlock wiring make sense, and I don't see a blocker in the diff itself.
Not approving yet because the PR is currently in a merge-conflict state against dev and the E2E jobs are still pending. Once those are green and the branch is rebased, this should be in good shape.
MatiasOS
reviewed
Mar 19, 2026
| return ( | ||
| <pre className="source-file-code"> | ||
| {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Prism.highlight output is safe — it only tokenizes source code we control */} | ||
| <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: highlighted }} /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add proper support for Vyper smart contracts across the explorer, including correct file extension detection, language identification, and syntax highlighting for source code display.
Closes #327
Related Issue
Closes #327
Type of Change
Changes Made
.solhardcoding inuseEtherscan.ts: Detect Vyper contracts by checking if the compiler version starts withvyper:and use.vyextension accordinglylanguage: "Vyper"or"Solidity"based on compiler version detectionCodeBlockcomponent: Reusable syntax-highlighted code display using Prism.js with support for Solidity, Vyper (Python grammar), and JSONprismjs) with a VS Code-inspired theme incode-highlight.cssContractDetailsandContractInfoCard: Replace plain<pre>blocks with the newCodeBlockcomponent for highlighted source displayScreenshots (if applicable)
N/A
Checklist
npm run format:fixandnpm run lint:fixnpm run typecheckwith no errorsnpm run test:runAdditional Notes
CompilerVersionfield from Etherscan API is used for language detection — Vyper compilers report versions prefixed withvyper: