Merge pull request #696 from blockscout/monaco-code-editor

monaco code editor

.github/workflows/checks.yml

@@ -52,7 +52,6 @@ jobs:
     name: Run unit tests with Jest
     needs: [ lint, type_check ]
     runs-on: ubuntu-latest
-    if: ${{ false }}  # disable since there are no jest test yet
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3

lib/csp/generateCspPolicy.ts

@@ -8,6 +8,7 @@ function generateCspPolicy() {
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
     descriptors.googleReCaptcha(),
+    descriptors.monaco(),
     descriptors.sentry(),
     descriptors.walletConnect(),
   );

lib/csp/policies/index.ts

@@ -3,5 +3,6 @@ export { app } from './app';
 export { googleAnalytics } from './googleAnalytics';
 export { googleFonts } from './googleFonts';
 export { googleReCaptcha } from './googleReCaptcha';
+export { monaco } from './monaco';
 export { sentry } from './sentry';
 export { walletConnect } from './walletConnect';

lib/csp/policies/monaco.ts

+import type CspDev from 'csp-dev';
+
+import { KEY_WORDS } from '../utils';
+
+export function monaco(): CspDev.DirectiveDescriptor {
+  return {
+    'script-src': [
+      KEY_WORDS.BLOB,
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/loader.js',
+      '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/base/worker/workerMain.js',
+    ],
+    'style-src': [
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/editor/editor.main.css',
+    ],
+    'font-src': [
+      'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/base/browser/ui/codicons/codicon/codicon.ttf',
+    ],
+  };
+}

lib/isMetaKey.tsx

+export default function isMetaKey(event: React.KeyboardEvent) {
+  return event.metaKey || event.getModifierState('Meta') || event.getModifierState('OS');
+}

lib/stripLeadingSlash.ts

+const stripLeadingSlash = (str: string) => str[0] === '/' ? str.slice(1) : str;
+
+export default stripLeadingSlash;

package.json

@@ -34,6 +34,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@metamask/providers": "^10.2.1",
+    "@monaco-editor/react": "^4.4.6",
     "@sentry/nextjs": "^7.12.1",
     "@sentry/react": "^7.24.0",
     "@sentry/tracing": "^7.24.0",
@@ -43,7 +44,6 @@
     "@types/react-scroll": "^1.8.4",
     "@web3modal/ethereum": "^2.0.0-rc.2",
     "@web3modal/react": "^2.0.0-rc.2",
-    "ace-builds": "^1.14.0",
     "bignumber.js": "^9.1.0",
     "chakra-react-select": "^4.4.3",
     "d3": "^7.6.1",
@@ -56,6 +56,7 @@
     "graphql-ws": "^5.11.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
+    "monaco-editor": "^0.34.1",
     "next": "12.2.5",
     "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
@@ -66,7 +67,6 @@
     "pino-pretty": "^9.1.1",
     "qrcode": "^1.5.1",
     "react": "18.2.0",
-    "react-ace": "^10.1.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^2.1.0",
     "react-hook-form": "^7.33.1",
@@ -96,6 +96,7 @@
     "@types/swagger-ui-react": "^4.11.0",
     "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "css-loader": "^6.7.3",
     "dotenv-cli": "^6.0.0",
     "eslint": "^8.32.0",
     "eslint-config-next": "^12.3.0",
@@ -112,6 +113,7 @@
     "mockdate": "^3.0.5",
     "next-transpile-modules": "^10.0.0",
     "playwright": "1.31.0",
+    "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",

ui/address/contract/ContractCode.pw.tsx

@@ -20,6 +20,7 @@ test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page
     status: 200,
     body: JSON.stringify(contractMock.withChangedByteCode),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   const component = await mount(
     <TestApp>
@@ -36,6 +37,7 @@ test('verified with multiple sources +@mobile', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.withMultiplePaths),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   await mount(
     <TestApp>
@@ -54,6 +56,7 @@ test('verified via sourcify', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.verifiedViaSourcify),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   await mount(
     <TestApp>
@@ -70,6 +73,7 @@ test('self destructed', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.selfDestructed),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   await mount(
     <TestApp>
@@ -87,6 +91,7 @@ test('with twin address alert +@mobile', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.withTwinAddress),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   const component = await mount(
     <TestApp>
@@ -103,6 +108,7 @@ test('with proxy address alert +@mobile', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.withProxyAddress),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   const component = await mount(
     <TestApp>
@@ -119,6 +125,7 @@ test('non verified', async({ mount, page }) => {
     status: 200,
     body: JSON.stringify(contractMock.nonVerified),
   }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
 
   const component = await mount(
     <TestApp>

ui/address/contract/ContractSourceCode.tsx

-import { Box, chakra, Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
-import CodeEditor from 'ui/shared/CodeEditor';
 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';
 
 interface Props {
   data: string;
@@ -37,38 +38,25 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
     </Tooltip>
   ) : null;
 
-  if (!additionalSource?.length) {
-    return (
-      <section>
-        <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
-          { heading }
-          { diagramLink }
-          <CopyToClipboard text={ data }/>
-        </Flex>
-        <CodeEditor value={ data } id="source_code"/>
-      </section>
-    );
-  }
+  const editorData = React.useMemo(() => {
+    const defaultName = isViper ? '/index.vy' : '/index.sol';
+    return [
+      { file_path: formatFilePath(filePath || defaultName), source_code: data },
+      ...(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>
-      <Flex flexDir="column" rowGap={ 3 }>
-        { [ { file_path: filePath, source_code: data }, ...additionalSource ].map((item, index, array) => (
-          <Box key={ index }>
-            <Flex justifyContent="space-between" alignItems="flex-end" mb={ 3 }>
-              <chakra.span fontSize="sm" wordBreak="break-all" lineHeight="20px">
-                File { index + 1 } of { array.length }: { item.file_path }
-              </chakra.span>
-              <CopyToClipboard text={ item.source_code } ml={ 4 }/>
-            </Flex>
-            <CodeEditor value={ item.source_code } id={ `source_code_${ index }` }/>
-          </Box>
-        )) }
-      </Flex>
+      <CodeEditor data={ editorData }/>
     </section>
   );
 };

ui/shared/CodeEditor.tsx

-import { chakra, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import type ReactAce from 'react-ace/lib/ace';
-
-interface Props {
-  id: string;
-  value: string;
-  className?: string;
-}
-
-const CodeEditorBase = chakra(({ id, value, className }: Props) => {
-
-  const [ AceEditor, setAceEditor ] = React.useState<{default: typeof ReactAce} | null>(null);
-
-  React.useEffect(() => {
-    const load = async() => {
-      const component = await import('react-ace');
-      await import('ace-builds/src-noconflict/mode-csharp');
-      await import('ace-builds/src-noconflict/theme-tomorrow');
-      await import('ace-builds/src-noconflict/theme-tomorrow_night');
-      await import('ace-builds/src-noconflict/ext-language_tools');
-      setAceEditor(component);
-    };
-
-    load();
-
-    return () => {
-      setAceEditor(null);
-    };
-  }, []);
-
-  const theme = useColorModeValue('tomorrow', 'tomorrow_night');
-
-  if (!AceEditor) {
-    return null;
-  }
-
-  return (
-    <AceEditor.default
-      className={ className }
-      mode="csharp" // TODO need to find mode for solidity
-      theme={ theme }
-      value={ value }
-      name={ id }
-      editorProps={{ $blockScrolling: true }}
-      readOnly
-      width="100%"
-      showPrintMargin={ false }
-      maxLines={ 25 }
-    />
-  );
-});
-
-const CodeEditor = ({ id, value }: Props) => {
-  // see theme/components/Textarea.ts variantFilledInactive
-  const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
-  const gutterBgColor = useColorModeValue('gray.100', '#25282c');
-
-  return (
-    <CodeEditorBase
-      id={ id }
-      value={ value }
-      bgColor={ bgColor }
-      borderRadius="md"
-      overflow="hidden"
-      sx={{
-        '.ace_gutter': {
-          backgroundColor: gutterBgColor,
-        },
-      }}
-    />
-  );
-};
-
-export default React.memo(CodeEditor);

ui/shared/monaco/CodeEditor.tsx

+import type { SystemStyleObject } from '@chakra-ui/react';
+import { Box, useColorMode, Flex } from '@chakra-ui/react';
+import type { EditorProps } from '@monaco-editor/react';
+import MonacoEditor from '@monaco-editor/react';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import React from 'react';
+
+import type { File, Monaco } from './types';
+
+import useClientRect from 'lib/hooks/useClientRect';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isMetaKey from 'lib/isMetaKey';
+
+import CodeEditorBreadcrumbs from './CodeEditorBreadcrumbs';
+import CodeEditorLoading from './CodeEditorLoading';
+import CodeEditorSideBar, { CONTAINER_WIDTH as SIDE_BAR_WIDTH } from './CodeEditorSideBar';
+import CodeEditorTabs from './CodeEditorTabs';
+import addFileImportDecorations from './utils/addFileImportDecorations';
+import getFullPathOfImportedFile from './utils/getFullPathOfImportedFile';
+import * as themes from './utils/themes';
+import useThemeColors from './utils/useThemeColors';
+
+const EDITOR_OPTIONS: EditorProps['options'] = {
+  readOnly: true,
+  minimap: { enabled: false },
+  scrollbar: {
+    alwaysConsumeMouseWheel: true,
+  },
+  dragAndDrop: false,
+};
+
+const TABS_HEIGHT = 35;
+const BREADCRUMBS_HEIGHT = 22;
+const EDITOR_HEIGHT = 500;
+
+interface Props {
+  data: Array<File>;
+}
+
+const CodeEditor = ({ data }: Props) => {
+  const [ instance, setInstance ] = React.useState<Monaco | undefined>();
+  const [ index, setIndex ] = React.useState(0);
+  const [ tabs, setTabs ] = React.useState([ data[index].file_path ]);
+  const [ isMetaPressed, setIsMetaPressed ] = React.useState(false);
+
+  const editorRef = React.useRef<monaco.editor.IStandaloneCodeEditor>();
+  const [ containerRect, containerNodeRef ] = useClientRect<HTMLDivElement>();
+
+  const { colorMode } = useColorMode();
+  const isMobile = useIsMobile();
+  const themeColors = useThemeColors();
+
+  const editorWidth = containerRect ? containerRect.width - (isMobile ? 0 : SIDE_BAR_WIDTH) : 0;
+
+  React.useEffect(() => {
+    instance?.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');
+  }, [ colorMode, instance?.editor ]);
+
+  const handleEditorDidMount = React.useCallback((editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
+    setInstance(monaco);
+    editorRef.current = editor;
+
+    monaco.editor.defineTheme('blockscout-light', themes.light);
+    monaco.editor.defineTheme('blockscout-dark', themes.dark);
+    monaco.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');
+
+    const loadedModels = monaco.editor.getModels();
+    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)));
+
+    loadedModels.concat(newModels).forEach(addFileImportDecorations);
+  // componentDidMount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
+
+  const handleSelectFile = React.useCallback((index: number, lineNumber?: number) => {
+    setIndex(index);
+    setTabs((prev) => prev.some((item) => item === data[index].file_path) ? prev : ([ ...prev, data[index].file_path ]));
+    if (lineNumber !== undefined && !Object.is(lineNumber, NaN)) {
+      window.setTimeout(() => {
+        editorRef.current?.revealLineInCenter(lineNumber);
+      }, 0);
+    }
+    editorRef.current?.focus();
+  }, [ data ]);
+
+  const handleTabSelect = React.useCallback((path: string) => {
+    const index = data.findIndex((item) => item.file_path === path);
+    if (index > -1) {
+      setIndex(index);
+    }
+  }, [ data ]);
+
+  const handleTabClose = React.useCallback((path: string) => {
+    setTabs((prev) => {
+      if (prev.length > 1) {
+        const tabIndex = prev.findIndex((item) => item === path);
+        const isActive = data[index].file_path === path;
+
+        if (isActive) {
+          const nextActiveIndex = data.findIndex((item) => item.file_path === prev[Math.max(0, tabIndex - 1)]);
+          setIndex(nextActiveIndex);
+        }
+
+        return prev.filter((item) => item !== path);
+      }
+
+      return prev;
+    });
+  }, [ data, index ]);
+
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    if (!isMetaPressed && !isMobile) {
+      return;
+    }
+
+    const target = event.target as HTMLSpanElement;
+    const isImportLink = target.classList.contains('import-link');
+    if (isImportLink) {
+      const path = target.innerText;
+      const fullPath = getFullPathOfImportedFile(data[index].file_path, path);
+      const fileIndex = data.findIndex((file) => file.file_path === fullPath);
+      if (fileIndex > -1) {
+        event.stopPropagation();
+        handleSelectFile(fileIndex);
+      }
+    }
+  }, [ data, handleSelectFile, index, isMetaPressed, isMobile ]);
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+    isMetaKey(event) && setIsMetaPressed(true);
+  }, []);
+
+  const handleKeyUp = React.useCallback(() => {
+    setIsMetaPressed(false);
+  }, []);
+
+  const containerSx: SystemStyleObject = React.useMemo(() => ({
+    '.editor-container': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: `${ editorWidth }px`,
+      height: '100%',
+    },
+    '.highlight': {
+      backgroundColor: themeColors['custom.findMatchHighlightBackground'],
+    },
+    '&&.meta-pressed .import-link': {
+      _hover: {
+        color: themeColors['custom.fileLink.hoverForeground'],
+        textDecoration: 'underline',
+        cursor: 'pointer',
+      },
+    },
+  }), [ editorWidth, themeColors ]);
+
+  if (data.length === 1) {
+    return (
+      <Box overflow="hidden" borderRadius="md" height={ `${ EDITOR_HEIGHT }px` }>
+        <MonacoEditor
+          language="sol"
+          path={ data[index].file_path }
+          defaultValue={ data[index].source_code }
+          options={ EDITOR_OPTIONS }
+          onMount={ handleEditorDidMount }
+          loading={ <CodeEditorLoading/> }
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Flex
+      className={ isMetaPressed ? 'meta-pressed' : undefined }
+      overflow="hidden"
+      borderRadius="md"
+      width="100%"
+      height={ `${ EDITOR_HEIGHT + TABS_HEIGHT + BREADCRUMBS_HEIGHT }px` }
+      position="relative"
+      ref={ containerNodeRef }
+      sx={ containerSx }
+      onClick={ handleClick }
+      onKeyDown={ handleKeyDown }
+      onKeyUp={ handleKeyUp }
+    >
+      <Box flexGrow={ 1 }>
+        <CodeEditorTabs tabs={ tabs } activeTab={ data[index].file_path } onTabSelect={ handleTabSelect } onTabClose={ handleTabClose }/>
+        <CodeEditorBreadcrumbs path={ data[index].file_path }/>
+        <MonacoEditor
+          className="editor-container"
+          height={ `${ EDITOR_HEIGHT }px` }
+          language="sol"
+          path={ data[index].file_path }
+          defaultValue={ data[index].source_code }
+          options={ EDITOR_OPTIONS }
+          onMount={ handleEditorDidMount }
+          loading={ <CodeEditorLoading/> }
+        />
+      </Box>
+      <CodeEditorSideBar data={ data } onFileSelect={ handleSelectFile } monaco={ instance } selectedFile={ data[index].file_path }/>
+    </Flex>
+  );
+};
+
+export default React.memo(CodeEditor);

ui/shared/monaco/CodeEditorBreadcrumbs.tsx

+import { Flex, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import stripLeadingSlash from 'lib/stripLeadingSlash';
+import useThemeColors from 'ui/shared/monaco/utils/useThemeColors';
+
+interface Props {
+  path: string;
+}
+
+const CodeEditorBreadcrumbs = ({ path }: Props) => {
+  const chunks = stripLeadingSlash(path).split('/');
+  const themeColors = useThemeColors();
+
+  return (
+    <Flex
+      color={ themeColors['breadcrumbs.foreground'] }
+      bgColor={ themeColors['editor.background'] }
+      pl="16px"
+      pr="8px"
+      flexWrap="wrap"
+      fontSize="13px"
+      lineHeight="22px"
+      alignItems="center"
+    >
+      { chunks.map((chunk, index) => {
+        return (
+          <React.Fragment key={ index }>
+            { index !== 0 && (
+              <Box
+                className="codicon codicon-breadcrumb-separator"
+                boxSize="16px"
+                _before={{
+                  content: '"\\eab6"',
+                }}/>
+            ) }
+            <Box>{ chunk }</Box>
+          </React.Fragment>
+        );
+      }) }
+    </Flex>
+  );
+};
+
+export default React.memo(CodeEditorBreadcrumbs);

ui/shared/monaco/CodeEditorFileExplorer.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { File } from './types';
+
+import CodeEditorFileTree from './CodeEditorFileTree';
+import CoderEditorCollapseButton from './CoderEditorCollapseButton';
+import composeFileTree from './utils/composeFileTree';
+
+interface Props {
+  data: Array<File>;
+  onFileSelect: (index: number) => void;
+  selectedFile: string;
+  isActive: boolean;
+  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => JSX.Element) | undefined>>;
+}
+
+const CodeEditorFileExplorer = ({ data, onFileSelect, selectedFile, isActive, setActionBarRenderer }: Props) => {
+  const [ key, setKey ] = React.useState(0);
+  const tree = React.useMemo(() => {
+    return composeFileTree(data);
+  }, [ data ]);
+
+  const handleCollapseButtonClick = React.useCallback(() => {
+    setKey((prev) => prev + 1);
+  }, []);
+
+  const renderActionBar = React.useCallback(() => {
+    return (
+      <CoderEditorCollapseButton onClick={ handleCollapseButtonClick } label="Collapse folders"/>
+    );
+  }, [ handleCollapseButtonClick ]);
+
+  const handleFileClick = React.useCallback((event: React.MouseEvent) => {
+    const filePath = (event.currentTarget as HTMLDivElement).getAttribute('data-file-path');
+    const fileIndex = data.findIndex((item) => item.file_path === filePath);
+
+    if (fileIndex > -1) {
+      onFileSelect(fileIndex);
+    }
+  }, [ data, onFileSelect ]);
+
+  React.useEffect(() => {
+    isActive && setActionBarRenderer(() => renderActionBar);
+  }, [ isActive, renderActionBar, setActionBarRenderer ]);
+
+  return (
+    <Box>
+      <CodeEditorFileTree key={ key } tree={ tree } onItemClick={ handleFileClick } isCollapsed={ key > 0 } selectedFile={ selectedFile }/>
+    </Box>
+  );
+};
+
+export default React.memo(CodeEditorFileExplorer);

ui/shared/monaco/CodeEditorFileTree.tsx

+import type { ChakraProps } from '@chakra-ui/react';
+import { Box, Accordion, AccordionButton, AccordionItem, AccordionPanel, Icon, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FileTree } from './types';
+
+import iconFile from './icons/file.svg';
+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 {
+  tree: FileTree;
+  level?: number;
+  isCollapsed?: boolean;
+  onItemClick: (event: React.MouseEvent) => void;
+  selectedFile: string;
+}
+
+const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed, selectedFile }: Props) => {
+  const itemProps: ChakraProps = {
+    borderWidth: '0px',
+    cursor: 'pointer',
+    lineHeight: '22px',
+    _last: {
+      borderBottomWidth: '0px',
+    },
+  };
+  const themeColors = useThemeColors();
+
+  return (
+    <Accordion allowMultiple defaultIndex={ isCollapsed ? undefined : tree.map((item, index) => index) } reduceMotion>
+      {
+        tree.map((leaf, index) => {
+          const leafName = <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ leaf.name }</chakra.span>;
+
+          if ('children' in leaf) {
+            return (
+              <AccordionItem key={ index } { ...itemProps }>
+                { ({ isExpanded }) => (
+                  <>
+                    <AccordionButton
+                      pr="8px"
+                      py="0"
+                      pl={ `${ 8 + 8 * level }px` }
+                      _hover={{ bgColor: themeColors['custom.list.hoverBackground'] }}
+                      fontSize="13px"
+                      lineHeight="22px"
+                      h="22px"
+                      transitionDuration="0"
+                    >
+                      <Box
+                        className="codicon codicon-tree-item-expanded"
+                        transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }
+                        boxSize="16px"
+                        mr="2px"
+                      />
+                      <Icon as={ isExpanded ? iconFolderOpen : iconFolder } boxSize="16px" mr="4px"/>
+                      { leafName }
+                    </AccordionButton>
+                    <AccordionPanel p="0">
+                      <CodeEditorFileTree
+                        tree={ leaf.children }
+                        level={ level + 1 }
+                        onItemClick={ onItemClick }
+                        isCollapsed={ isCollapsed }
+                        selectedFile={ selectedFile }
+                      />
+                    </AccordionPanel>
+                  </>
+                ) }
+              </AccordionItem>
+            );
+          }
+
+          const icon = /.sol|.yul|.vy$/.test(leaf.name) ? iconSolidity : iconFile;
+
+          return (
+            <AccordionItem
+              key={ index }
+              { ...itemProps }
+              pl={ `${ 26 + (level * 8) }px` }
+              pr="8px"
+              onClick={ onItemClick }
+              data-file-path={ leaf.file_path }
+              display="flex"
+              alignItems="center"
+              overflow="hidden"
+              _hover={{
+                bgColor: selectedFile === leaf.file_path ? themeColors['list.inactiveSelectionBackground'] : themeColors['custom.list.hoverBackground'],
+              }}
+              bgColor={ selectedFile === leaf.file_path ? themeColors['list.inactiveSelectionBackground'] : 'none' }
+            >
+              <Icon as={ icon } boxSize="16px" mr="4px"/>
+              { leafName }
+            </AccordionItem>
+          );
+        })
+      }
+    </Accordion>
+  );
+};
+
+export default React.memo(CodeEditorFileTree);

ui/shared/monaco/CodeEditorLoading.tsx

+import { Center } from '@chakra-ui/react';
+import React from 'react';
+
+import ContentLoader from 'ui/shared/ContentLoader';
+
+import useThemeColors from './utils/useThemeColors';
+
+const CodeEditorLoading = () => {
+  const themeColors = useThemeColors();
+
+  return (
+    <Center bgColor={ themeColors['editor.background'] } w="100%" h="100%">
+      <ContentLoader/>
+    </Center>
+  );
+};
+
+export default React.memo(CodeEditorLoading);

ui/shared/monaco/CodeEditorSearch.tsx

+import type { ChakraProps } from '@chakra-ui/react';
+import { Accordion, Box, Input, InputGroup, InputRightElement, useBoolean } from '@chakra-ui/react';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import React from 'react';
+
+import type { File, Monaco, SearchResult } from './types';
+
+import useDebounce from 'lib/hooks/useDebounce';
+
+import CodeEditorSearchSection from './CodeEditorSearchSection';
+import CoderEditorCollapseButton from './CoderEditorCollapseButton';
+import useThemeColors from './utils/useThemeColors';
+
+interface Props {
+  data: Array<File>;
+  monaco: Monaco | undefined;
+  onFileSelect: (index: number, lineNumber?: number) => void;
+  isInputStuck: boolean;
+  isActive: boolean;
+  setActionBarRenderer: React.Dispatch<React.SetStateAction<(() => JSX.Element) | undefined>>;
+}
+
+const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck, isActive, setActionBarRenderer }: Props) => {
+  const [ searchTerm, changeSearchTerm ] = React.useState('');
+  const [ searchResults, setSearchResults ] = React.useState<Array<SearchResult>>([]);
+  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>([]);
+  const [ isMatchCase, setMatchCase ] = useBoolean();
+  const [ isMatchWholeWord, setMatchWholeWord ] = useBoolean();
+  const [ isMatchRegex, setMatchRegex ] = useBoolean();
+  const decorations = React.useRef<Record<string, Array<string>>>({});
+
+  const themeColors = useThemeColors();
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  React.useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+
+    if (!debouncedSearchTerm) {
+      setSearchResults([]);
+    }
+
+    const models = monaco.editor.getModels();
+    const matches = models.map((model) => model.findMatches(debouncedSearchTerm, false, isMatchRegex, isMatchCase, isMatchWholeWord ? 'true' : null, false));
+
+    models.forEach((model, index) => {
+      const filePath = model.uri.path;
+      const prevDecorations = decorations.current[filePath] || [];
+      const newDecorations: Array<monaco.editor.IModelDeltaDecoration> = matches[index].map(({ range }) => ({ range, options: { className: 'highlight' } }));
+
+      const newDecorationsIds = model.deltaDecorations(prevDecorations, newDecorations);
+      decorations.current[filePath] = newDecorationsIds;
+    });
+
+    const result: Array<SearchResult> = matches
+      .map((match, index) => {
+        const model = models[index];
+        return {
+          file_path: model.uri.path,
+          matches: match.map(({ range }) => ({ ...range, lineContent: model.getLineContent(range.startLineNumber) })),
+        };
+      })
+      .filter(({ matches }) => matches.length > 0);
+
+    setSearchResults(result.length > 0 ? result : []);
+  }, [ debouncedSearchTerm, isMatchCase, isMatchRegex, isMatchWholeWord, monaco ]);
+
+  React.useEffect(() => {
+    setExpandedSections(searchResults.map((item, index) => index));
+  }, [ searchResults ]);
+
+  const handleSearchTermChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    changeSearchTerm(event.target.value);
+  }, []);
+
+  const handleResultItemClick = React.useCallback((filePath: string, lineNumber: number) => {
+    const fileIndex = data.findIndex((item) => item.file_path === filePath);
+    if (fileIndex > -1) {
+      onFileSelect(fileIndex, Number(lineNumber));
+    }
+  }, [ data, onFileSelect ]);
+
+  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
+    setExpandedSections(newValue);
+  }, []);
+
+  const handleToggleCollapseClick = React.useCallback(() => {
+    if (expandedSections.length === 0) {
+      setExpandedSections(searchResults.map((item, index) => index));
+    } else {
+      setExpandedSections([]);
+    }
+  }, [ expandedSections.length, searchResults ]);
+
+  const renderActionBar = React.useCallback(() => {
+    return (
+      <CoderEditorCollapseButton
+        onClick={ handleToggleCollapseClick }
+        label={ expandedSections.length === 0 ? 'Expand all' : 'Collapse all' }
+        isDisabled={ searchResults.length === 0 }
+        isCollapsed={ expandedSections.length === 0 }
+      />
+    );
+  }, [ expandedSections.length, handleToggleCollapseClick, searchResults.length ]);
+
+  React.useEffect(() => {
+    isActive && setActionBarRenderer(() => renderActionBar);
+  }, [ isActive, renderActionBar, setActionBarRenderer ]);
+
+  const buttonProps: ChakraProps = {
+    boxSize: '20px',
+    p: '1px',
+    cursor: 'pointer',
+    borderRadius: '3px',
+    borderWidth: '1px',
+    borderColor: 'transparent',
+  };
+
+  const searchResultNum = (() => {
+    if (!debouncedSearchTerm) {
+      return null;
+    }
+
+    const totalResults = searchResults.map(({ matches }) => matches.length).reduce((result, item) => result + item, 0);
+
+    if (!totalResults) {
+      return (
+        <Box px="8px" fontSize="13px" lineHeight="18px" mb="8px">
+          No results found. Review your settings for configured exclusions.
+        </Box>
+      );
+    }
+
+    return (
+      <Box px="8px" fontSize="13px" lineHeight="18px" mb="8px">
+        { totalResults } result{ totalResults > 1 ? 's' : '' } in { searchResults.length } file{ searchResults.length > 1 ? 's' : '' }
+      </Box>
+    );
+  })();
+
+  return (
+    <Box>
+      <InputGroup
+        px="8px"
+        position="sticky"
+        top="35px"
+        left="0"
+        zIndex="2"
+        bgColor={ themeColors['sideBar.background'] }
+        pb="8px"
+        boxShadow={ isInputStuck ? 'md' : 'none' }
+      >
+        <Input
+          size="xs"
+          onChange={ handleSearchTermChange }
+          value={ searchTerm }
+          placeholder="Search"
+          variant="unstyled"
+          color={ themeColors['input.foreground'] }
+          bgColor={ themeColors['input.background'] }
+          borderRadius="none"
+          fontSize="13px"
+          lineHeight="20px"
+          borderWidth="1px"
+          borderColor={ themeColors['input.background'] }
+          py="2px"
+          px="4px"
+          transitionDuration="0"
+          _focus={{
+            borderColor: themeColors.focusBorder,
+          }}
+        />
+        <InputRightElement w="auto" h="auto" right="12px" top="3px" columnGap="2px">
+          <Box
+            { ...buttonProps }
+            className="codicon codicon-case-sensitive"
+            onClick={ setMatchCase.toggle }
+            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['custom.inputOption.activeBackground'] : 'transparent' }
+            onClick={ setMatchWholeWord.toggle }
+            _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['custom.inputOption.activeBackground'] : 'transparent' }
+            onClick={ setMatchRegex.toggle }
+            _hover={{ bgColor: isMatchRegex ? themeColors['custom.inputOption.activeBackground'] : themeColors['custom.inputOption.hoverBackground'] }}
+            title="Use Regular Expression"
+            aria-label="Use Regular Expression"
+          />
+        </InputRightElement>
+      </InputGroup>
+      { searchResultNum }
+      <Accordion
+        key={ debouncedSearchTerm }
+        allowMultiple
+        index={ expandedSections }
+        onChange={ handleAccordionStateChange }
+        reduceMotion
+      >
+        { searchResults.map((item) => <CodeEditorSearchSection key={ item.file_path } data={ item } onItemClick={ handleResultItemClick }/>) }
+      </Accordion>
+    </Box>
+  );
+};
+
+export default React.memo(CodeEditorSearch);

ui/shared/monaco/CodeEditorSearchResultItem.tsx

+import { Box, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SearchResult } from './types';
+import type ArrayElement from 'types/utils/ArrayElement';
+
+import useThemeColors from './utils/useThemeColors';
+
+interface Props extends ArrayElement<SearchResult['matches']> {
+  filePath: string;
+  onClick: (event: React.MouseEvent) => void;
+}
+
+const calculateStartPosition = (lineContent: string, startColumn: number) => {
+
+  let start = 0;
+
+  for (let index = 0; index < startColumn; index++) {
+    const element = lineContent[index];
+
+    if (element === ' ') {
+      start = index + 1;
+      continue;
+    }
+  }
+
+  return start ? start - 1 : 0;
+};
+
+const CodeEditorSearchResultItem = ({ lineContent, filePath, onClick, startLineNumber, startColumn, endColumn }: Props) => {
+  const start = calculateStartPosition(lineContent, startColumn);
+  const themeColors = useThemeColors();
+
+  return (
+    <Box
+      pr="8px"
+      pl="36px"
+      fontSize="13px"
+      lineHeight="22px"
+      whiteSpace="nowrap"
+      overflow="hidden"
+      textOverflow="ellipsis"
+      cursor="pointer"
+      data-file-path={ filePath }
+      data-line-number={ startLineNumber }
+      onClick={ onClick }
+      transitionDuration="0"
+      _hover={{ bgColor: themeColors['custom.list.hoverBackground'] }}
+    >
+      <span>{ lineContent.slice(start, startColumn - 1) }</span>
+      <chakra.span bgColor={ themeColors['custom.findMatchHighlightBackground'] }>
+        { lineContent.slice(startColumn - 1, endColumn - 1) }
+      </chakra.span>
+      <span>{ lineContent.slice(endColumn - 1) }</span>
+    </Box>
+  );
+};
+
+export default React.memo(CodeEditorSearchResultItem);

ui/shared/monaco/CodeEditorSearchSection.tsx

+import { AccordionButton, AccordionItem, AccordionPanel, Icon, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SearchResult } from './types';
+
+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';
+
+interface Props {
+  data: SearchResult;
+  onItemClick: (filePath: string, lineNumber: number) => void;
+}
+
+const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
+  const fileName = getFileName(data.file_path);
+
+  const handleFileLineClick = React.useCallback((event: React.MouseEvent) => {
+    const lineNumber = Number((event.currentTarget as HTMLDivElement).getAttribute('data-line-number'));
+    if (!Object.is(lineNumber, NaN)) {
+      onItemClick(data.file_path, Number(lineNumber));
+    }
+  }, [ data.file_path, onItemClick ]);
+
+  const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
+
+  const themeColors = useThemeColors();
+
+  return (
+    <AccordionItem borderWidth="0px" _last={{ borderBottomWidth: '0px' }} >
+      { ({ isExpanded }) => (
+        <>
+          <AccordionButton
+            py={ 0 }
+            px={ 2 }
+            _hover={{ bgColor: themeColors['custom.list.hoverBackground'] }}
+            fontSize="13px"
+            transitionDuration="0"
+            lineHeight="22px"
+            alignItems="center"
+          >
+            <Box
+              className="codicon codicon-tree-item-expanded"
+              transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }
+              width="20px"
+              height="22px"
+              py="3px"
+            />
+            <Icon as={ icon } boxSize="16px" mr="4px"/>
+            <span>{ fileName }</span>
+            <Box className="monaco-count-badge" ml="auto" bgColor={ themeColors['badge.background'] }>{ data.matches.length }</Box>
+          </AccordionButton>
+          <AccordionPanel p={ 0 }>
+            { data.matches.map((match) => (
+              <CodeEditorSearchResultItem
+                key={ data.file_path + '_' + match.startLineNumber + '_' + match.startColumn }
+                filePath={ data.file_path }
+                onClick={ handleFileLineClick }
+                { ...match }
+              />
+            ),
+            ) }
+          </AccordionPanel>
+        </>
+      ) }
+    </AccordionItem>
+  );
+};
+
+export default React.memo(CodeEditorSearchSection);

ui/shared/monaco/CodeEditorSideBar.tsx

+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs, useBoolean } from '@chakra-ui/react';
+import _throttle from 'lodash/throttle';
+import React from 'react';
+
+import type { File, Monaco } from './types';
+
+import CodeEditorFileExplorer from './CodeEditorFileExplorer';
+import CodeEditorSearch from './CodeEditorSearch';
+import useThemeColors from './utils/useThemeColors';
+
+interface Props {
+  monaco: Monaco | undefined;
+  data: Array<File>;
+  onFileSelect: (index: number, lineNumber?: number) => void;
+  selectedFile: string;
+}
+
+export const CONTAINER_WIDTH = 250;
+
+const CodeEditorSideBar = ({ onFileSelect, data, monaco, selectedFile }: Props) => {
+
+  const [ isStuck, setIsStuck ] = React.useState(false);
+  const [ isDrawerOpen, setIsDrawerOpen ] = useBoolean(false);
+  const [ tabIndex, setTabIndex ] = React.useState(0);
+  const [ actionBarRenderer, setActionBarRenderer ] = React.useState<() => JSX.Element>();
+
+  const themeColors = useThemeColors();
+
+  const tabProps: HTMLChakraProps<'button'> = {
+    fontFamily: 'heading',
+    textTransform: 'uppercase',
+    fontSize: '11px',
+    lineHeight: '35px',
+    fontWeight: 500,
+    color: themeColors['tab.inactiveForeground'],
+    _selected: {
+      color: themeColors['tab.activeForeground'],
+    },
+    px: 0,
+    letterSpacing: 0.3,
+  };
+
+  const handleScrollThrottled = React.useRef(_throttle((event: React.SyntheticEvent) => {
+    setIsStuck((event.target as HTMLDivElement).scrollTop > 0);
+  }, 100));
+
+  const handleFileSelect = React.useCallback((index: number, lineNumber?: number) => {
+    isDrawerOpen && setIsDrawerOpen.off();
+    onFileSelect(index, lineNumber);
+  }, [ isDrawerOpen, onFileSelect, setIsDrawerOpen ]);
+
+  return (
+    <>
+      <Box
+        w={ `${ CONTAINER_WIDTH }px` }
+        flexShrink={ 0 }
+        bgColor={ themeColors['sideBar.background'] }
+        fontSize="13px"
+        overflowY="scroll"
+        onScroll={ handleScrollThrottled.current }
+        position={{ base: 'absolute', lg: 'relative' }}
+        right={{ base: isDrawerOpen ? '0' : `-${ CONTAINER_WIDTH }px`, lg: '0' }}
+        top={{ base: 0, lg: undefined }}
+        h="100%"
+        pb="22px"
+        boxShadow={{ base: isDrawerOpen ? 'md' : 'none', lg: 'none' }}
+        zIndex={{ base: '2', lg: undefined }}
+        transitionProperty="right"
+        transitionDuration="normal"
+        transitionTimingFunction="ease-in-out"
+        borderTopRightRadius="md"
+        borderBottomRightRadius="md"
+      >
+        <Tabs isLazy lazyBehavior="keepMounted" variant="unstyled" size="13px" index={ tabIndex } onChange={ setTabIndex }>
+          <TabList
+            columnGap={ 3 }
+            position="sticky"
+            top={ 0 }
+            left={ 0 }
+            bgColor={ themeColors['sideBar.background'] }
+            zIndex="1"
+            px={ 2 }
+            boxShadow={ isStuck ? 'md' : 'none' }
+            borderTopRightRadius="md"
+          >
+            <Tab { ...tabProps }>Explorer</Tab>
+            <Tab { ...tabProps }>Search</Tab>
+            { actionBarRenderer?.() }
+          </TabList>
+          <TabPanels>
+            <TabPanel p={ 0 }>
+              <CodeEditorFileExplorer
+                data={ data }
+                onFileSelect={ handleFileSelect }
+                selectedFile={ selectedFile }
+                isActive={ tabIndex === 0 }
+                setActionBarRenderer={ setActionBarRenderer }
+              />
+            </TabPanel>
+            <TabPanel p={ 0 }>
+              <CodeEditorSearch
+                data={ data }
+                onFileSelect={ handleFileSelect }
+                monaco={ monaco }
+                isInputStuck={ isStuck }
+                isActive={ tabIndex === 1 }
+                setActionBarRenderer={ setActionBarRenderer }
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Box>
+      <Box
+        boxSize="24px"
+        p="4px"
+        position="absolute"
+        display={{ base: 'block', lg: 'none' }}
+        right={ isDrawerOpen ? `${ CONTAINER_WIDTH - 1 }px` : '0' }
+        top="calc(50% - 12px)"
+        backgroundColor={ themeColors['sideBar.background'] }
+        borderTopLeftRadius="4px"
+        borderBottomLeftRadius="4px"
+        boxShadow="md"
+        onClick={ setIsDrawerOpen.toggle }
+        zIndex="1"
+        transitionProperty="right"
+        transitionDuration="normal"
+        transitionTimingFunction="ease-in-out"
+        title={ isDrawerOpen ? 'Open sidebar' : 'Close sidebar' }
+        aria-label={ isDrawerOpen ? 'Open sidebar' : 'Close sidebar' }
+      >
+        <Box
+          className="codicon codicon-tree-item-expanded"
+          transform={ isDrawerOpen ? 'rotate(-90deg)' : 'rotate(+90deg)' }
+          boxSize="16px"
+        />
+      </Box>
+    </>
+  );
+};
+
+export default React.memo(CodeEditorSideBar);

ui/shared/monaco/CodeEditorTab.tsx

+import { Flex, Icon, chakra, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import useThemeColors from 'ui/shared/monaco/utils/useThemeColors';
+
+import iconFile from './icons/file.svg';
+import iconSolidity from './icons/solidity.svg';
+import getFilePathParts from './utils/getFilePathParts';
+
+interface Props {
+  isActive?: boolean;
+  path: string;
+  onClick: (path: string) => void;
+  onClose: (path: string) => void;
+  isCloseDisabled: boolean;
+  tabsPathChunks: Array<Array<string>>;
+}
+
+const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabsPathChunks }: Props) => {
+  const [ fileName, folderName ] = getFilePathParts(path, tabsPathChunks);
+  const themeColors = useThemeColors();
+
+  const handleClick = React.useCallback(() => {
+    onClick(path);
+  }, [ onClick, path ]);
+
+  const handleClose = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    !isCloseDisabled && onClose(path);
+  }, [ isCloseDisabled, onClose, path ]);
+
+  const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
+
+  return (
+    <Flex
+      pl="10px"
+      pr="4px"
+      fontSize="13px"
+      lineHeight="34px"
+      bgColor={ isActive ? themeColors['tab.activeBackground'] : themeColors['tab.inactiveBackground'] }
+      borderRightWidth="1px"
+      borderRightColor={ themeColors['tab.border'] }
+      borderBottomWidth="1px"
+      borderBottomColor={ isActive ? 'transparent' : themeColors['tab.border'] }
+      color={ isActive ? themeColors['tab.activeForeground'] : themeColors['tab.inactiveForeground'] }
+      alignItems="center"
+      fontWeight={ 400 }
+      cursor="pointer"
+      onClick={ handleClick }
+      _hover={{
+        '.codicon-close': {
+          visibility: 'visible',
+        },
+      }}
+      userSelect="none"
+    >
+      <Icon as={ icon } boxSize="16px" mr="4px"/>
+      <span>{ fileName }</span>
+      { folderName && <chakra.span fontSize="11px" opacity={ 0.8 } ml={ 1 }>{ folderName[0] === '.' ? '' : '...' }{ folderName }</chakra.span> }
+      <Box
+        className="codicon codicon-close"
+        boxSize="20px"
+        ml="4px"
+        p="2px"
+        title="Close"
+        aria-label="Close"
+        onClick={ handleClose }
+        borderRadius="sm"
+        opacity={ isCloseDisabled ? 0.3 : 1 }
+        visibility={{ base: 'visible', lg: isActive ? 'visible' : 'hidden' }}
+        color={ themeColors['icon.foreground'] }
+        _hover={{ bgColor: isCloseDisabled ? 'transparent' : themeColors['custom.inputOption.hoverBackground'] }}
+      />
+    </Flex>
+  );
+};
+
+export default React.memo(CodeEditorTab);

ui/shared/monaco/CodeEditorTabs.tsx

+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import CodeEditorTab from './CodeEditorTab';
+import useThemeColors from './utils/useThemeColors';
+
+interface Props {
+  tabs: Array<string>;
+  activeTab: string;
+  onTabSelect: (tab: string) => void;
+  onTabClose: (tab: string) => void;
+}
+
+const CodeEditorTabs = ({ tabs, activeTab, onTabSelect, onTabClose }: Props) => {
+  const themeColors = useThemeColors();
+
+  const tabsPathChunks = React.useMemo(() => {
+    return tabs.map((tab) => tab.split('/'));
+  }, [ tabs ]);
+
+  return (
+    <Flex
+      bgColor={ themeColors['sideBar.background'] }
+      flexWrap="wrap"
+    >
+      { tabs.map((tab) => (
+        <CodeEditorTab
+          key={ tab }
+          path={ tab }
+          isActive={ activeTab === tab }
+          onClick={ onTabSelect }
+          onClose={ onTabClose }
+          isCloseDisabled={ tabs.length === 1 }
+          tabsPathChunks={ tabsPathChunks }
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default React.memo(CodeEditorTabs);

ui/shared/monaco/CoderEditorCollapseButton.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import useThemeColors from './utils/useThemeColors';
+
+interface Props {
+  onClick: () => void;
+  label: string;
+  isDisabled?: boolean;
+  isCollapsed?: boolean;
+}
+
+const CoderEditorCollapseButton = ({ onClick, label, isDisabled, isCollapsed }: Props) => {
+  const themeColors = useThemeColors();
+
+  return (
+    <Box
+      ml="auto"
+      alignSelf="center"
+      className={ isCollapsed ? 'codicon codicon-search-expand-results' : 'codicon codicon-collapse-all' }
+      opacity={ isDisabled ? 0.6 : 1 }
+      boxSize="20px"
+      p="2px"
+      borderRadius="sm"
+      _before={{
+        content: isCollapsed ? '"\\eb95"' : '"\\eac5"',
+      }}
+      _hover={{
+        bgColor: themeColors['custom.inputOption.hoverBackground'],
+      }}
+      onClick={ onClick }
+      cursor="pointer"
+      title={ label }
+      aria-label={ label }
+    />
+  );
+};
+
+export default React.memo(CoderEditorCollapseButton);

ui/shared/monaco/icons/file.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m5 2H6v16h12v-9h-7V4z" fill="#42a5f5"/>
+</svg>

ui/shared/monaco/icons/folder-open.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 20H4a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2h6l2 2h7a2 2 0 0 1 2 2H4v10l2.14-8h17.07l-2.28 8.5c-.23.87-1.01 1.5-1.93 1.5z" fill="#90a4ae"/>
+</svg>

ui/shared/monaco/icons/folder.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 4H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z" fill="#90a4ae"/>
+</svg>

ui/shared/monaco/icons/solidity.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#0288d1">
+    <path d="m5.747 14.046 6.254 8.61 6.252-8.61-6.254 3.807z"/>
+    <path d="M11.999 1.343 5.747 11.83l6.252 3.807 6.253-3.807z"/>
+  </g>
+</svg>

ui/shared/monaco/types.ts

+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export interface File {
+  file_path: string;
+  source_code: string;
+}
+
+export interface FileTreeFile extends File {
+  name: string;
+}
+
+export interface FileTreeFolder {
+  name: string;
+  children: Array<FileTreeFile | FileTreeFolder>;
+}
+
+export type FileTree = Array<FileTreeFile | FileTreeFolder>;
+
+export type Monaco = typeof monaco;
+
+export interface SearchResult {
+  file_path: string;
+  matches: Array<
+  Pick<monaco.editor.FindMatch['range'], 'startColumn' | 'endColumn' | 'startLineNumber' | 'endLineNumber'> &
+  { lineContent: string }
+  >;
+}

ui/shared/monaco/utils/addFileImportDecorations.ts

+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export default function addFileImportDecorations(model: monaco.editor.ITextModel) {
+  const matches = model.findMatches('^import "((\\/|\\.)(\\w|\\.|\\/|-)+)"', false, true, false, null, true);
+  const decorations: Array<monaco.editor.IModelDeltaDecoration> = matches.map(({ range }) => ({
+    range: {
+      ...range,
+      startColumn: range.startColumn + 8,
+      endColumn: range.endColumn - 1,
+    },
+    options: {
+      inlineClassName: 'import-link',
+      hoverMessage: {
+        value: 'Cmd/Win + click to open file',
+      },
+    },
+  }));
+  model.deltaDecorations([], decorations);
+}

ui/shared/monaco/utils/composeFileTree.test.ts

+import composeFileTree from './composeFileTree';
+
+const files = [
+  {
+    file_path: 'index.sol',
+    source_code: 'zero',
+  },
+  {
+    file_path: 'contracts/Zeta.eth.sol',
+    source_code: 'one',
+  },
+  {
+    file_path: '/_openzeppelin/contracts/utils/Context.sol',
+    source_code: 'two',
+  },
+  {
+    file_path: '/_openzeppelin/contracts/token/ERC20/extensions/IERC20Metadata.sol',
+    source_code: 'three',
+  },
+  {
+    file_path: '/_openzeppelin/contracts/token/ERC20/IERC20.sol',
+    source_code: 'four',
+  },
+  {
+    file_path: '/_openzeppelin/contracts/token/ERC20/ERC20.sol',
+    source_code: 'five',
+  },
+];
+
+test('builds correct file tree', () => {
+  const result = composeFileTree(files);
+  expect(result).toMatchInlineSnapshot(`
+[
+  {
+    "children": [
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "children": [
+                  {
+                    "children": [
+                      {
+                        "file_path": "/_openzeppelin/contracts/token/ERC20/extensions/IERC20Metadata.sol",
+                        "name": "IERC20Metadata.sol",
+                        "source_code": "three",
+                      },
+                    ],
+                    "name": "extensions",
+                  },
+                  {
+                    "file_path": "/_openzeppelin/contracts/token/ERC20/ERC20.sol",
+                    "name": "ERC20.sol",
+                    "source_code": "five",
+                  },
+                  {
+                    "file_path": "/_openzeppelin/contracts/token/ERC20/IERC20.sol",
+                    "name": "IERC20.sol",
+                    "source_code": "four",
+                  },
+                ],
+                "name": "ERC20",
+              },
+            ],
+            "name": "token",
+          },
+          {
+            "children": [
+              {
+                "file_path": "/_openzeppelin/contracts/utils/Context.sol",
+                "name": "Context.sol",
+                "source_code": "two",
+              },
+            ],
+            "name": "utils",
+          },
+        ],
+        "name": "contracts",
+      },
+    ],
+    "name": "_openzeppelin",
+  },
+  {
+    "children": [
+      {
+        "file_path": "contracts/Zeta.eth.sol",
+        "name": "Zeta.eth.sol",
+        "source_code": "one",
+      },
+    ],
+    "name": "contracts",
+  },
+  {
+    "file_path": "index.sol",
+    "name": "index.sol",
+    "source_code": "zero",
+  },
+]
+`);
+});

ui/shared/monaco/utils/composeFileTree.ts

+import type { File, FileTree } from '../types';
+
+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
+import sortFileTree from './sortFileTree';
+
+export default function composeFileTree(files: Array<File>) {
+  const result: FileTree = [];
+    type Level = {
+      result: FileTree;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } & Record<string, any>;
+    const level: Level = { result };
+
+    files.forEach((file) => {
+      const path = stripLeadingSlash(file.file_path);
+      const segments = path.split('/');
+
+      segments.reduce((acc, segment, currentIndex, array) => {
+        if (!acc[segment]) {
+          acc[segment] = { result: [] };
+          acc.result.push({
+            name: segment,
+            ...(currentIndex === array.length - 1 ? file : { children: acc[segment].result }),
+          });
+        }
+        acc.result.sort(sortFileTree);
+
+        return acc[segment];
+      }, level);
+    });
+
+    return result.sort(sortFileTree);
+}

ui/shared/monaco/utils/formatFilePath.ts

+// ensure that path always starts with /
+export default function formatFilePath(path: string) {
+  if (path[0] === '.' && path[1] === '/') {
+    return path.slice(1);
+  }
+
+  if (path[0] === '/') {
+    return path;
+  }
+
+  return '/' + path;
+}

ui/shared/monaco/utils/getFileName.ts

+export default function getFileName(path: string) {
+  const chunks = path.split('/');
+
+  return chunks[chunks.length - 1];
+}

ui/shared/monaco/utils/getFilePathParts.test.ts

+import getFilePathParts from './getFilePathParts';
+
+it('computes correct chunks if all file name are unique', () => {
+  const result = getFilePathParts(
+    '/src/utils/Ownable.sol',
+    [
+      '/src/utils/EIP712.sol'.split('/'),
+      '/src/token/BaseERC20.sol'.split('/'),
+    ],
+  );
+
+  expect(result).toEqual([ 'Ownable.sol', undefined ]);
+});
+
+it('computes correct chunks if files with the same name is not in folders with the same name', () => {
+  const result = getFilePathParts(
+    '/src/utils/Ownable.sol',
+    [
+      '/src/utils/EIP712.sol'.split('/'),
+      '/lib/_openzeppelin/contracts/contracts/access/Ownable.sol'.split('/'),
+    ],
+  );
+
+  expect(result).toEqual([ 'Ownable.sol', '/utils' ]);
+});
+
+it('computes correct chunks if files with the same name is in folders with the same name', () => {
+  const result = getFilePathParts(
+    '/src/utils/Ownable.sol',
+    [
+      '/src/utils/EIP712.sol'.split('/'),
+      '/lib/_openzeppelin/contracts/src/utils/Ownable.sol'.split('/'),
+    ],
+  );
+
+  expect(result).toEqual([ 'Ownable.sol', './src/utils' ]);
+});
+
+it('computes correct chunks if file is in root directory', () => {
+  const result = getFilePathParts(
+    '/Ownable.sol',
+    [
+      '/src/utils/EIP712.sol'.split('/'),
+      '/lib/_openzeppelin/contracts/src/utils/Ownable.sol'.split('/'),
+    ],
+  );
+
+  expect(result).toEqual([ 'Ownable.sol', './' ]);
+});

ui/shared/monaco/utils/getFilePathParts.ts

+export default function getFilePathParts(path: string, tabsPathChunks: Array<Array<string>>): [string, string | undefined] {
+  const chunks = path.split('/');
+  const fileName = chunks[chunks.length - 1];
+  const folderName = getFolderName(chunks, tabsPathChunks);
+
+  return [ fileName, folderName ];
+}
+
+function getFolderName(chunks: Array<string>, tabsPathChunks: Array<Array<string>>): string | undefined {
+  const fileName = chunks[chunks.length - 1];
+  const otherTabsPathChunks = tabsPathChunks.filter((item) => item.join('/') !== chunks.join('/'));
+  const tabsWithSameFileName = otherTabsPathChunks.filter((tabChunks) => tabChunks[tabChunks.length - 1] === fileName);
+
+  if (tabsWithSameFileName.length === 0 || chunks.length <= 1) {
+    return;
+  }
+
+  if (chunks.length === 2) {
+    return './' + chunks[chunks.length - 2];
+  }
+
+  let result = '/' + chunks[chunks.length - 2];
+
+  for (let index = 3; index <= chunks.length; index++) {
+    const element = chunks[chunks.length - index];
+
+    if (element === '') {
+      result = '.' + result;
+    }
+
+    const subFolderNames = tabsWithSameFileName.map((tab) => tab[tab.length - index]);
+    if (subFolderNames.includes(element)) {
+      result = '/' + element + result;
+    } else {
+      break;
+    }
+  }
+
+  return result;
+}

ui/shared/monaco/utils/getFullPathOfImportedFile.test.ts

+import getFullPathOfImportedFile from './getFullPathOfImportedFile';
+
+it('construct correct absolute path', () => {
+  const result = getFullPathOfImportedFile(
+    '/foo/bar/baz/index.sol',
+    './.././../abc/contract.sol',
+  );
+
+  expect(result).toBe('/foo/abc/contract.sol');
+});
+
+it('returns undefined if imported file is outside the base file folder', () => {
+  const result = getFullPathOfImportedFile(
+    '/index.sol',
+    '../../abc/contract.sol',
+  );
+
+  expect(result).toBeUndefined();
+});
+
+it('returns unmodified path if it is already absolute', () => {
+  const result = getFullPathOfImportedFile(
+    '/index.sol',
+    '/abc/contract.sol',
+  );
+
+  expect(result).toBe('/abc/contract.sol');
+});
+
+it('returns undefined for external path', () => {
+  const result = getFullPathOfImportedFile(
+    '/index.sol',
+    'https://github.com/ethereum/dapp/contract.sol',
+  );
+
+  expect(result).toBeUndefined();
+});

ui/shared/monaco/utils/getFullPathOfImportedFile.ts

+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
+export default function getFullPathOfImportedFile(baseFilePath: string, importedFilePath: string) {
+  if (importedFilePath[0] === '/') {
+    return importedFilePath;
+  }
+
+  if (importedFilePath[0] !== '.') {
+    return;
+  }
+
+  const baseFileChunks = stripLeadingSlash(baseFilePath).split('/');
+  const importedFileChunks = importedFilePath.split('/');
+
+  const result: Array<string> = baseFileChunks.slice(0, -1);
+
+  for (let index = 0; index < importedFileChunks.length - 1; index++) {
+    const element = importedFileChunks[index];
+
+    if (element === '.') {
+      continue;
+    }
+
+    if (element === '..') {
+      if (result.length === 0) {
+        break;
+      }
+      result.pop();
+      continue;
+    }
+
+    result.push(element);
+  }
+
+  if (result.length === 0) {
+    return;
+  }
+
+  result.push(importedFileChunks[importedFileChunks.length - 1]);
+
+  return '/' + result.join('/');
+}

ui/shared/monaco/utils/sortFileTree.ts

+import type { FileTree } from '../types';
+import type ArrayElement from 'types/utils/ArrayElement';
+
+export default function sortFileTree(a: ArrayElement<FileTree>, b: ArrayElement<FileTree>) {
+  if ('children' in a && !('children' in b)) {
+    return -1;
+  }
+
+  if ('children' in b && !('children' in a)) {
+    return 1;
+  }
+
+  return a.name.localeCompare(b.name);
+}

ui/shared/monaco/utils/themes.ts

+export const light = {
+  base: 'vs' as const,
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#f5f5f6',
+    'editorWidget.background': '#f5f5f6',
+
+    'tab.activeBackground': '#f5f5f6',
+    'tab.inactiveBackground': 'rgb(236, 236, 236)',
+    'tab.activeForeground': '#101112', // black
+    'tab.inactiveForeground': '#4a5568', // gray.600
+    'tab.border': 'rgb(243, 243, 243)',
+
+    'icon.foreground': '#616161',
+
+    'input.foreground': '#616161',
+    'input.background': '#fff',
+
+    'list.inactiveSelectionBackground': '#e4e6f1',
+
+    'breadcrumbs.foreground': 'rgb(97, 97, 97)',
+
+    'badge.background': '#c4c4c4',
+
+    'sideBar.background': '#eee',
+
+    focusBorder: '#0090f1',
+
+    // not able to use rgba for standard variables, so we use custom prefix here
+    'custom.list.hoverBackground': 'rgba(16, 17, 18, 0.08)', // blackAlpha.200
+    '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)',
+
+    // don't know the name of this variables in vscode
+    'custom.fileLink.hoverForeground': '#4299E1', // blue.400
+  } as const,
+};
+
+export const dark = {
+  base: 'vs-dark' as const,
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#1a1b1b',
+    'editorWidget.background': '#1a1b1b',
+
+    'tab.activeBackground': '#1a1b1b', // black
+    'tab.inactiveBackground': 'rgb(45, 45, 45)',
+    'tab.activeForeground': '#fff', // white
+    'tab.inactiveForeground': '#a0aec0', // gray.400
+    'tab.border': 'rgb(37, 37, 38)',
+
+    'icon.foreground': '#616161',
+
+    'input.foreground': '#cccccc',
+    'input.background': '#3c3c3c',
+
+    'list.inactiveSelectionBackground': '#37373d',
+
+    'badge.background': '#4d4d4d',
+
+    'breadcrumbs.foreground': 'rgb(97, 97, 97)',
+
+    'sideBar.background': '#222',
+
+    focusBorder: '#007fd4',
+
+    // not able to use rgba for standard variables, so we use custom prefix here
+    'custom.list.hoverBackground': 'rgba(255, 255, 255, 0.08)', // whiteAlpha.200
+    '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)',
+
+    // don't know the name of this variables in vscode
+    'custom.fileLink.hoverForeground': '#4299E1', // blue.400
+  } as const,
+};

ui/shared/monaco/utils/useThemeColors.ts

+import { useColorModeValue } from '@chakra-ui/react';
+
+import * as themes from './themes';
+
+export default function useThemeColors() {
+  const theme = useColorModeValue(themes.light, themes.dark);
+
+  return theme.colors;
+}

yarn.lock

@@ -3045,6 +3045,21 @@
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
   integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==
 
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
+  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218"
+  integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==
+  dependencies:
+    "@monaco-editor/loader" "^1.3.2"
+    prop-types "^15.7.2"
+
 "@motionone/animation@^10.12.0":
   version "10.14.0"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.14.0.tgz#2f2a3517183bb58d82e389aac777fe0850079de6"
@@ -5327,11 +5342,6 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
-ace-builds@^1.14.0, ace-builds@^1.4.14:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.14.0.tgz#85a6733b4fa17b0abc3dbfe38cd8d823cad79716"
-  integrity sha512-3q8LvawomApRCt4cC0OzxVjDsZ609lDbm8l0Xl9uqG06dKEq4RT0YXLUyk7J2SxmqIp5YXzZNw767Dr8GKUruw==
-
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
@@ -6403,6 +6413,20 @@ css-box-model@1.2.1:
   dependencies:
     tiny-invariant "^1.0.6"
 
+css-loader@^6.7.3:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
+  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.19"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.3.8"
+
 css-select@^4.1.3:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@@ -6432,6 +6456,11 @@ css.escape@1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
@@ -6866,11 +6895,6 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
-diff-match-patch@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
-  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
-
 diff-sequences@^29.3.1:
   version "29.3.1"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e"
@@ -8504,6 +8528,11 @@ iconv-lite@0.6, iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -9710,12 +9739,7 @@ lodash.debounce@^4, lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-  integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
-
-lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
+lodash.isequal@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
@@ -9946,6 +9970,11 @@ mockdate@^3.0.5:
   resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
   integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==
 
+monaco-editor@^0.34.1:
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"
+  integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==
+
 motion@10.15.3:
   version "10.15.3"
   resolved "https://registry.yarnpkg.com/motion/-/motion-10.15.3.tgz#4a9f63a751dcf83c195f1192a069caebed59112f"
@@ -10639,6 +10668,47 @@ popmotion@11.0.3:
     style-value-types "5.0.0"
     tslib "^2.1.0"
 
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
@@ -10648,7 +10718,7 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.21:
+postcss@^8.4.19, postcss@^8.4.21:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@@ -10876,17 +10946,6 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-ace@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-10.1.0.tgz#d348eac2b16475231779070b6cd16768deed565f"
-  integrity sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==
-  dependencies:
-    ace-builds "^1.4.14"
-    diff-match-patch "^1.0.5"
-    lodash.get "^4.4.2"
-    lodash.isequal "^4.5.0"
-    prop-types "^15.7.2"
-
 react-async-script@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
@@ -11556,7 +11615,7 @@ secure-json-parse@^2.4.0:
   resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.5.0.tgz#f929829df2adc7ccfb53703569894d051493a6ac"
   integrity sha512-ZQruFgZnIWH+WyO9t5rWt4ZEGqCKPwhiw+YbzTwpmT9elgLrLcfuyUiSnwwjUiVy9r4VM3urtbNF1xmEh9IL2w==
 
-semver@7.x, semver@^7.3.5, semver@^7.3.7:
+semver@7.x, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
   integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
@@ -11754,6 +11813,11 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 stream-browserify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
@@ -11959,6 +12023,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-loader@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
+  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
+
 style-value-types@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
@@ -12511,7 +12580,7 @@ utf-8-validate@^5.0.2:
   dependencies:
     node-gyp-build "^4.3.0"
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==