Merge pull request #331 from AugustoL/feat/vyper-support

feat(address): add Vyper smart contract support and syntax highlighting

Author: AugustoL

bun.lock

@@ -21,6 +21,7 @@
 		"i18next": "^25.8.0",
 		"i18next-browser-languagedetector": "^8.2.0",
 		"jszip": "^3.10.1",
+		"prismjs": "^1.30.0",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-i18next": "^16.5.4",
@@ -68,16 +69,17 @@
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.11",
 		"@playwright/test": "^1.57.0",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/prismjs": "^1.26.6",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^5.1.2",
 		"dotenv": "^17.2.3",
 		"happy-dom": "^20.1.0",
 		"vite": "^7.3.1",
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/react": "^16.2.0",
-		"@testing-library/user-event": "^13.5.0",
 		"vitest": "^4.0.14"
 	}
 }

package.json

@@ -20,6 +20,7 @@ import "./styles/rainbowkit.css";
 import "./styles/responsive.css";
 import "./styles/ai-analysis.css";
 import "./styles/rpcs.css";
+import "./styles/code-highlight.css";
 import "./styles/helper-tooltip.css";
 
 import Loading from "./components/common/Loading";

src/App.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import Prism from "prismjs";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-solidity";
+
+function detectLanguage(fileName?: string): string | undefined {
+  if (!fileName) return undefined;
+  const ext = fileName.split(".").pop()?.toLowerCase();
+  if (ext === "sol") return "solidity";
+  if (ext === "vy") return "python";
+  if (ext === "json") return "json";
+  return undefined;
+}
+
+interface CodeBlockProps {
+  code: string;
+  fileName?: string;
+  language?: string;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ code, fileName, language }) => {
+  const lang = language ?? detectLanguage(fileName);
+  const grammar = lang ? Prism.languages[lang] : undefined;
+
+  const highlighted = useMemo(() => {
+    if (!grammar || !lang) return null;
+    return Prism.highlight(code, grammar, lang);
+  }, [code, grammar, lang]);
+
+  if (highlighted) {
+    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 }} />
+      </pre>
+    );
+  }
+
+  return (
+    <pre className="source-file-code">
+      <code>{code}</code>
+    </pre>
+  );
+};
+
+export default CodeBlock;

src/components/common/CodeBlock.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { useState } from "react";
 import type { ABI } from "../../../../../types";
 import { useTranslation } from "react-i18next";
+import CodeBlock from "../../../../common/CodeBlock";
 import FieldLabel from "../../../../common/FieldLabel";
 import ContractInteraction from "./ContractInteraction";
 
@@ -201,7 +202,7 @@ const ContractDetails: React.FC<ContractDetailsProps> = ({
                 {sourceFiles.map((file) => (
                   <div key={file.path} className="source-file-container">
                     <div className="source-file-header">📄 {file.name || file.path}</div>
-                    <pre className="source-file-code">{file.content}</pre>
+                    <CodeBlock code={file.content} fileName={file.name || file.path} />
                   </div>
                 ))}
               </div>

src/components/pages/evm/address/shared/ContractDetails.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import type { Address, ABI } from "../../../../../types";
 import { useTranslation } from "react-i18next";
+import CodeBlock from "../../../../common/CodeBlock";
 import FieldLabel from "../../../../common/FieldLabel";
 import ContractInteraction from "./ContractInteraction";
 import type { VerificationSource } from "../../../../../hooks/useContractVerification";
@@ -357,7 +358,7 @@ const ContractInfoCard: React.FC<ContractInfoCardProps> = ({
                       {sourceFiles.map((file) => (
                         <div key={file.path} className="source-file-container">
                           <div className="source-file-header">📄 {file.name || file.path}</div>
-                          <pre className="source-file-code">{file.content}</pre>
+                          <CodeBlock code={file.content} fileName={file.name || file.path} />
                         </div>
                       ))}
                     </div>

src/components/pages/evm/address/shared/ContractInfoCard.tsx

@@ -39,6 +39,7 @@ interface StandardJsonSources {
 function parseSourceFiles(
   sourceCode: string,
   contractName: string,
+  compilerVersion?: string,
 ): { name: string; path: string; content: string }[] {
   if (!sourceCode) return [];
 
@@ -62,8 +63,9 @@ function parseSourceFiles(
     }
   }
 
-  // Plain Solidity source
-  const fileName = `${contractName || "Contract"}.sol`;
+  // Detect language from compiler version — Vyper compilers start with "vyper:"
+  const ext = compilerVersion?.toLowerCase().startsWith("vyper:") ? ".vy" : ".sol";
+  const fileName = `${contractName || "Contract"}${ext}`;
   return [{ name: fileName, path: fileName, content: sourceCode }];
 }
 
@@ -159,14 +161,20 @@ export function useEtherscan(
           abi = undefined;
         }
 
-        const files = parseSourceFiles(result.SourceCode, result.ContractName);
+        const files = parseSourceFiles(
+          result.SourceCode,
+          result.ContractName,
+          result.CompilerVersion,
+        );
         const evmVersion =
           result.EVMVersion && result.EVMVersion !== "Default" ? result.EVMVersion : undefined;
 
+        const isVyper = result.CompilerVersion?.toLowerCase().startsWith("vyper:");
         const contractDetails: SourcifyContractDetails = {
           name: result.ContractName || undefined,
           compilerVersion: result.CompilerVersion || undefined,
           evmVersion,
+          language: isVyper ? "Vyper" : "Solidity",
           abi,
           files,
           match: "perfect",

src/hooks/useEtherscan.ts

@@ -0,0 +1,59 @@
+/* Prism.js syntax highlighting theme for OpenScan */
+.source-file-code code[class*="language-"] {
+  text-shadow: none;
+}
+
+.source-file-code .token.comment,
+.source-file-code .token.prolog,
+.source-file-code .token.doctype,
+.source-file-code .token.cdata {
+  color: #6a9955;
+}
+
+.source-file-code .token.punctuation {
+  color: #d4d4d4;
+}
+
+.source-file-code .token.property,
+.source-file-code .token.tag,
+.source-file-code .token.boolean,
+.source-file-code .token.number,
+.source-file-code .token.constant,
+.source-file-code .token.symbol {
+  color: #b5cea8;
+}
+
+.source-file-code .token.selector,
+.source-file-code .token.attr-name,
+.source-file-code .token.string,
+.source-file-code .token.char,
+.source-file-code .token.builtin {
+  color: #ce9178;
+}
+
+.source-file-code .token.operator,
+.source-file-code .token.entity,
+.source-file-code .token.url {
+  color: #d4d4d4;
+}
+
+.source-file-code .token.atrule,
+.source-file-code .token.attr-value,
+.source-file-code .token.keyword {
+  color: #569cd6;
+}
+
+.source-file-code .token.function,
+.source-file-code .token.class-name {
+  color: #dcdcaa;
+}
+
+.source-file-code .token.regex,
+.source-file-code .token.important,
+.source-file-code .token.variable {
+  color: #d16969;
+}
+
+.source-file-code .token.decorator {
+  color: #dcdcaa;
+}