editor for one file and color fixes

ui/address/contract/ContractSourceCode.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import LinkInternal from 'ui/shared/LinkInternal';
 import CodeEditor from 'ui/shared/monaco/CodeEditor';
 import formatFilePath from 'ui/shared/monaco/utils/formatFilePath';
@@ -44,11 +45,16 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
       ...(additionalSource || []).map((source) => ({ ...source, file_path: formatFilePath(source.file_path) })) ];
   }, [ additionalSource, data, filePath, isViper ]);
 
+  const copyToClipboard = editorData.length === 1 ?
+    <CopyToClipboard text={ editorData[0].source_code }/> :
+    null;
+
   return (
     <section>
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
         { heading }
         { diagramLink }
+        { copyToClipboard }
       </Flex>
       <CodeEditor data={ editorData }/>
     </section>

ui/shared/monaco/CodeEditor.tsx

@@ -88,6 +88,20 @@ const CodeEditor = ({ data }: Props) => {
     });
   }, [ data, index ]);
 
+  if (data.length === 1) {
+    return (
+      <Box overflow="hidden" borderRadius="md" height="540px">
+        <MonacoEditor
+          language="sol"
+          path={ data[index].file_path }
+          defaultValue={ data[index].source_code }
+          options={ EDITOR_OPTIONS }
+          onMount={ handleEditorDidMount }
+        />
+      </Box>
+    );
+  }
+
   return (
     <Flex overflow="hidden" borderRadius="md" height="540px" position="relative">
       <Box flexGrow={ 1 }>

ui/shared/monaco/CodeEditorSearch.tsx

@@ -152,26 +152,26 @@ const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck }: Props) =
             { ...buttonProps }
             className="codicon codicon-case-sensitive"
             onClick={ setMatchCase.toggle }
-            bgColor={ isMatchCase ? themeColors['inputOption.activeBackground'] : 'transparent' }
-            _hover={{ bgColor: isMatchCase ? themeColors['inputOption.activeBackground'] : themeColors['inputOption.hoverBackground'] }}
+            bgColor={ isMatchCase ? themeColors['custom.inputOption.activeBackground'] : 'transparent' }
+            _hover={{ bgColor: isMatchCase ? themeColors['custom.inputOption.activeBackground'] : themeColors['custom.inputOption.hoverBackground'] }}
             title="Match Case"
             aria-label="Match Case"
           />
           <Box
             { ...buttonProps }
             className="codicon codicon-whole-word"
-            bgColor={ isMatchWholeWord ? themeColors['inputOption.activeBackground'] : 'transparent' }
+            bgColor={ isMatchWholeWord ? themeColors['custom.inputOption.activeBackground'] : 'transparent' }
             onClick={ setMatchWholeWord.toggle }
-            _hover={{ bgColor: isMatchWholeWord ? themeColors['inputOption.activeBackground'] : themeColors['inputOption.hoverBackground'] }}
+            _hover={{ bgColor: isMatchWholeWord ? themeColors['custom.inputOption.activeBackground'] : themeColors['custom.inputOption.hoverBackground'] }}
             title="Match Whole Word"
             aria-label="Match Whole Word"
           />
           <Box
             { ...buttonProps }
             className="codicon codicon-regex"
-            bgColor={ isMatchRegex ? themeColors['inputOption.activeBackground'] : 'transparent' }
+            bgColor={ isMatchRegex ? themeColors['custom.inputOption.activeBackground'] : 'transparent' }
             onClick={ setMatchRegex.toggle }
-            _hover={{ bgColor: isMatchRegex ? themeColors['inputOption.activeBackground'] : themeColors['inputOption.hoverBackground'] }}
+            _hover={{ bgColor: isMatchRegex ? themeColors['custom.inputOption.activeBackground'] : themeColors['custom.inputOption.hoverBackground'] }}
             title="Use Regular Expression"
             aria-label="Use Regular Expression"
           />

ui/shared/monaco/CodeEditorSearchResultItem.tsx

@@ -48,7 +48,7 @@ const CodeEditorSearchResultItem = ({ lineContent, filePath, onClick, startLineN
       _hover={{ bgColor: themeColors['list.hoverBackground'] }}
     >
       <span>{ lineContent.slice(start, startColumn - 1) }</span>
-      <chakra.span bgColor={ themeColors['editor.findMatchHighlightBackground'] }>
+      <chakra.span bgColor={ themeColors['custom.findMatchHighlightBackground'] }>
         { lineContent.slice(startColumn - 1, endColumn - 1) }
       </chakra.span>
       <span>{ lineContent.slice(endColumn - 1) }</span>

ui/shared/monaco/CodeEditorTab.tsx

@@ -69,7 +69,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
         opacity={ isCloseDisabled ? 0.3 : 1 }
         visibility={ isActive ? 'visible' : 'hidden' }
         color={ themeColors['icon.foreground'] }
-        _hover={{ bgColor: isCloseDisabled ? 'transparent' : themeColors['inputOption.hoverBackground'] }}
+        _hover={{ bgColor: isCloseDisabled ? 'transparent' : themeColors['custom.inputOption.hoverBackground'] }}
       />
     </Flex>
   );

ui/shared/monaco/CoderEditorCollapseButton.tsx

@@ -28,7 +28,7 @@ const CoderEditorCollapseButton = ({ onClick, label, isDisabled, isCollapsed }:
         content: isCollapsed ? '"\\eb95"' : '"\\eac5"',
       }}
       _hover={{
-        bgColor: themeColors['inputOption.hoverBackground'],
+        bgColor: themeColors['custom.inputOption.hoverBackground'],
       }}
       onClick={ onClick }
       cursor="pointer"

ui/shared/monaco/utils/themes.ts

@@ -4,7 +4,6 @@ export const light = {
   rules: [],
   colors: {
     'editor.background': '#f5f5f6',
-    'editor.findMatchHighlightBackground': 'rgba(234, 92, 0, 0.33)',
 
     'tab.activeBackground': '#f5f5f6',
     'tab.inactiveBackground': 'rgb(236, 236, 236)',
@@ -14,12 +13,9 @@ export const light = {
 
     'icon.foreground': '#616161',
 
-    'input.foreground': 'rgb(97, 97, 97)',
+    'input.foreground': '#616161',
     'input.background': '#fff',
 
-    'inputOption.activeBackground': 'rgba(0, 144, 241, 0.2)',
-    'inputOption.hoverBackground': 'rgba(184, 184, 184, 0.31)',
-
     'list.hoverBackground': 'rgba(16, 17, 18, 0.08)', // blackAlpha.200
     'list.inactiveSelectionBackground': '#e4e6f1',
 
@@ -30,6 +26,11 @@ export const light = {
     'sideBar.background': '#eee',
 
     focusBorder: '#0090f1',
+
+    // not able to use rgba for standard variables, so we use custom prefix here
+    'custom.findMatchHighlightBackground': 'rgba(234,92,0,0.33)',
+    'custom.inputOption.activeBackground': 'rgba(0, 144, 241, 0.2)',
+    'custom.inputOption.hoverBackground': 'rgba(184, 184, 184, 0.31)',
   } as const,
 };
 
@@ -39,7 +40,6 @@ export const dark = {
   rules: [],
   colors: {
     'editor.background': '#1a1b1b',
-    'editor.findMatchHighlightBackground': 'rgba(234, 92, 0, 0.33)',
 
     'tab.activeBackground': '#1a1b1b', // black
     'tab.inactiveBackground': 'rgb(45, 45, 45)',
@@ -49,11 +49,8 @@ export const dark = {
 
     'icon.foreground': '#616161',
 
-    'input.foreground': 'rgb(204, 204, 204)',
-    'input.background': 'rgb(60, 60, 60)',
-
-    'inputOption.activeBackground': 'rgba(0, 127, 212, 0.4)',
-    'inputOption.hoverBackground': 'rgba(90, 93, 94, 0.31)',
+    'input.foreground': '#cccccc',
+    'input.background': '#3c3c3c',
 
     'list.hoverBackground': 'rgba(255, 255, 255, 0.08)', // whiteAlpha.200
     'list.inactiveSelectionBackground': '#37373d',
@@ -65,5 +62,10 @@ export const dark = {
     'sideBar.background': '#222',
 
     focusBorder: '#007fd4',
+
+    // not able to use rgba for standard variables, so we use custom prefix here
+    'custom.findMatchHighlightBackground': 'rgba(234,92,0,0.33)',
+    'custom.inputOption.activeBackground': 'rgba(0, 127, 212, 0.4)',
+    'custom.inputOption.hoverBackground': 'rgba(90, 93, 94, 0.31)',
   } as const,
 };