feat(address): add Vyper smart contract support and syntax highlighting#331
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 |
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.
| 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 }} /> |
There was a problem hiding this comment.
We're trusting Prism.js (the syntax highlighter library). Prism.highlight() takes plain text, tokenizes it using grammar rules, and
returns HTML with wrappers. It HTML-escapes the input text before wrapping — so even if the source code contains
Sourcify/Etherscan) is never injected as raw HTML — only Prism's deterministic markup is.
The XSS risk with dangerouslySetInnerHTML is when you inject untrusted HTML. Prism's output is deterministic markup based on its grammar
rules — even if the source code contained <script> tags, Prism would escape them into <script> tokens. So this is a safe and standard
pattern for syntax highlighting in React.
…support # Conflicts: # src/App.tsx # src/components/pages/evm/address/shared/ContractDetails.tsx # src/components/pages/evm/address/shared/ContractInfoCard.tsx
3 participants
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: