add icon for vyper contracts

ui/shared/monaco/CodeEditorFileIcon.tsx

+import { Icon, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import iconFile from './icons/file.svg';
+import iconSolidity from './icons/solidity.svg';
+import iconVyper from './icons/vyper.svg';
+
+interface Props {
+  className?: string;
+  fileName: string;
+}
+
+const CodeEditorFileIcon = ({ className, fileName }: Props) => {
+  const as = (() => {
+    if (/.vy$/.test(fileName)) {
+      return iconVyper;
+    }
+
+    if (/.sol|.yul$/.test(fileName)) {
+      return iconSolidity;
+    }
+
+    return iconFile;
+  })();
+
+  return <Icon className={ className } as={ as } boxSize="16px"/>;
+};
+
+export default React.memo(chakra(CodeEditorFileIcon));

ui/shared/monaco/CodeEditorFileTree.tsx

@@ -4,10 +4,9 @@ import React from 'react';
 
 import type { FileTree } from './types';
 
-import iconFile from './icons/file.svg';
+import CodeEditorFileIcon from './CodeEditorFileIcon';
 import iconFolderOpen from './icons/folder-open.svg';
 import iconFolder from './icons/folder.svg';
-import iconSolidity from './icons/solidity.svg';
 import useThemeColors from './utils/useThemeColors';
 
 interface Props {
@@ -74,8 +73,6 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed, selecte
             );
           }
 
-          const icon = /.sol|.yul|.vy$/.test(leaf.name) ? iconSolidity : iconFile;
-
           return (
             <AccordionItem
               key={ index }
@@ -92,7 +89,7 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed, selecte
               }}
               bgColor={ selectedFile === leaf.file_path ? themeColors['list.inactiveSelectionBackground'] : 'none' }
             >
-              <Icon as={ icon } boxSize="16px" mr="4px"/>
+              <CodeEditorFileIcon fileName={ leaf.name } mr="4px"/>
               { leafName }
             </AccordionItem>
           );

ui/shared/monaco/CodeEditorSearchSection.tsx

-import { AccordionButton, AccordionItem, AccordionPanel, Icon, Box } from '@chakra-ui/react';
+import { AccordionButton, AccordionItem, AccordionPanel, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResult } from './types';
 
+import CodeEditorFileIcon from './CodeEditorFileIcon';
 import CodeEditorSearchResultItem from './CodeEditorSearchResultItem';
-import iconFile from './icons/file.svg';
-import iconSolidity from './icons/solidity.svg';
 import getFileName from './utils/getFileName';
 import useThemeColors from './utils/useThemeColors';
 
@@ -24,8 +23,6 @@ const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
     }
   }, [ data.file_path, onItemClick ]);
 
-  const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
-
   const themeColors = useThemeColors();
 
   return (
@@ -48,7 +45,7 @@ const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
               height="22px"
               py="3px"
             />
-            <Icon as={ icon } boxSize="16px" mr="4px"/>
+            <CodeEditorFileIcon mr="4px" fileName={ fileName }/>
             <span>{ fileName }</span>
             <Box className="monaco-count-badge" ml="auto" bgColor={ themeColors['badge.background'] }>{ data.matches.length }</Box>
           </AccordionButton>

ui/shared/monaco/CodeEditorTab.tsx

-import { Flex, Icon, chakra, Box } from '@chakra-ui/react';
+import { Flex, chakra, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { alt } from 'lib/html-entities';
 import useThemeColors from 'ui/shared/monaco/utils/useThemeColors';
 
-import iconFile from './icons/file.svg';
-import iconSolidity from './icons/solidity.svg';
+import CodeEditorFileIcon from './CodeEditorFileIcon';
 import getFilePathParts from './utils/getFilePathParts';
 
 interface Props {
@@ -30,8 +29,6 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
     !isCloseDisabled && onClose(path);
   }, [ isCloseDisabled, onClose, path ]);
 
-  const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
-
   return (
     <Flex
       pl="10px"
@@ -55,7 +52,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
       }}
       userSelect="none"
     >
-      <Icon as={ icon } boxSize="16px" mr="4px"/>
+      <CodeEditorFileIcon mr="4px" fileName={ fileName }/>
       <span>{ fileName }</span>
       { folderName && <chakra.span fontSize="11px" opacity={ 0.8 } ml={ 1 }>{ folderName[0] === '.' ? '' : '...' }{ folderName }</chakra.span> }
       <Box

ui/shared/monaco/icons/vyper.svg

+<svg xmlns="http://www.w3.org/2000/svg" data-name="Transparent Logo" viewBox="0 0 2048 1773.62">
+  <path d="m1024 886.81-256 443.41 256 443.4 256-443.4-256-443.41z" style="opacity:.8"/>
+  <path d="m1280 443.41-256 443.4 256 443.41 256-443.41-256-443.4zm-512 0-256 443.4 256 443.41 256-443.41-256-443.4z" style="opacity:.6"/>
+  <path d="m1536 0-256 443.41 256 443.4 256-443.4L1536 0zm-384 221.7H896L768 443.41l256 443.4 256-443.4-128-221.71zM512 0 256 443.41l256 443.4 256-443.4L512 0z" style="opacity:.45"/>
+  <path d="M1792 443.4 2048 0h-512l256 443.4zm-1536 0L512 0H0l256 443.4z" style="opacity:.3"/>
+</svg>