change editor language for vyper contracts

lib/csp/policies/monaco.ts

@@ -10,6 +10,7 @@ export function monaco(): CspDev.DirectiveDescriptor {
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/editor/editor.main.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/editor/editor.main.nls.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/solidity/solidity.js',
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/basic-languages/elixir/elixir.js',
       'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/base/worker/workerMain.js',
     ],
     'style-src': [

ui/address/contract/ContractSourceCode.tsx

@@ -142,11 +142,19 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => {
     return (
       <>
         <Box display={ sourceType === 'primary' ? 'block' : 'none' }>
-          <CodeEditor data={ primaryEditorData } remappings={ primaryContractQuery.data?.compiler_settings?.remappings }/>
+          <CodeEditor
+            data={ primaryEditorData }
+            remappings={ primaryContractQuery.data?.compiler_settings?.remappings }
+            language={ primaryContractQuery.data?.language ?? undefined }
+          />
         </Box>
         { secondaryEditorData && (
           <Box display={ sourceType === 'secondary' ? 'block' : 'none' }>
-            <CodeEditor data={ secondaryEditorData } remappings={ secondaryContractQuery.data?.compiler_settings?.remappings }/>
+            <CodeEditor
+              data={ secondaryEditorData }
+              remappings={ secondaryContractQuery.data?.compiler_settings?.remappings }
+              language={ secondaryContractQuery.data?.language ?? undefined }
+            />
           </Box>
         ) }
       </>

ui/shared/monaco/CodeEditor.tsx

@@ -36,9 +36,10 @@ const EDITOR_HEIGHT = 500;
 interface Props {
   data: Array<File>;
   remappings?: Array<string>;
+  language?: string;
 }
 
-const CodeEditor = ({ data, remappings }: Props) => {
+const CodeEditor = ({ data, remappings, language }: Props) => {
   const [ instance, setInstance ] = React.useState<Monaco | undefined>();
   const [ editor, setEditor ] = React.useState<monaco.editor.IStandaloneCodeEditor | undefined>();
   const [ index, setIndex ] = React.useState(0);
@@ -53,6 +54,8 @@ const CodeEditor = ({ data, remappings }: Props) => {
 
   const editorWidth = containerRect ? containerRect.width - (isMobile ? 0 : SIDE_BAR_WIDTH) : 0;
 
+  const editorLanguage = language === 'vyper' ? 'elixir' : 'sol';
+
   React.useEffect(() => {
     instance?.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');
   }, [ colorMode, instance?.editor ]);
@@ -69,7 +72,7 @@ const CodeEditor = ({ data, remappings }: Props) => {
     const loadedModelsPaths = loadedModels.map((model) => model.uri.path);
     const newModels = data.slice(1)
       .filter((file) => !loadedModelsPaths.includes(file.file_path))
-      .map((file) => monaco.editor.createModel(file.source_code, 'sol', monaco.Uri.parse(file.file_path)));
+      .map((file) => monaco.editor.createModel(file.source_code, editorLanguage, monaco.Uri.parse(file.file_path)));
 
     loadedModels.concat(newModels).forEach(addFileImportDecorations);
 
@@ -185,7 +188,7 @@ const CodeEditor = ({ data, remappings }: Props) => {
     return (
       <Box overflow="hidden" borderRadius="md" height={ `${ EDITOR_HEIGHT }px` }>
         <MonacoEditor
-          language="sol"
+          language={ editorLanguage }
           path={ data[index].file_path }
           defaultValue={ data[index].source_code }
           options={ EDITOR_OPTIONS }
@@ -216,7 +219,7 @@ const CodeEditor = ({ data, remappings }: Props) => {
         <MonacoEditor
           className="editor-container"
           height={ `${ EDITOR_HEIGHT }px` }
-          language="sol"
+          language={ editorLanguage }
           path={ data[index].file_path }
           defaultValue={ data[index].source_code }
           options={ EDITOR_OPTIONS }