hotfix: display error inside snippet if code editor crashes (#1364)

ui/shared/monaco/CodeEditor.tsx

 import type { SystemStyleObject } from '@chakra-ui/react';
-import { Box, useColorMode, Flex, useToken } from '@chakra-ui/react';
+import { Box, useColorMode, Flex, useToken, Center } 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';
@@ -11,6 +11,7 @@ import type { SmartContractExternalLibrary } from 'types/api/contract';
 import useClientRect from 'lib/hooks/useClientRect';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import isMetaKey from 'lib/isMetaKey';
+import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 import CodeEditorBreadcrumbs from './CodeEditorBreadcrumbs';
 import CodeEditorLoading from './CodeEditorLoading';
@@ -207,6 +208,10 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
     },
   }), [ editorWidth, themeColors, borderRadius ]);
 
+  const renderErrorScreen = React.useCallback(() => {
+    return <Center bgColor={ themeColors['editor.background'] } w="100%" borderRadius="md">Oops! Something went wrong!</Center>;
+  }, [ themeColors ]);
+
   if (data.length === 1) {
     const sx = {
       ...containerSx,
@@ -220,6 +225,7 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
 
     return (
       <Box height={ `${ EDITOR_HEIGHT }px` } width="100%" sx={ sx } ref={ containerNodeRef }>
+        <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
           <MonacoEditor
             className="editor-container"
             language={ editorLanguage }
@@ -229,6 +235,7 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
             onMount={ handleEditorDidMount }
             loading={ <CodeEditorLoading borderRadius="md"/> }
           />
+        </ErrorBoundary>
       </Box>
     );
   }
@@ -247,6 +254,7 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
       onKeyDown={ handleKeyDown }
       onKeyUp={ handleKeyUp }
     >
+      <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
         <Box flexGrow={ 1 }>
           <CodeEditorTabs
             tabs={ tabs }
@@ -275,6 +283,7 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile }: Props)
           selectedFile={ data[index].file_path }
           mainFile={ mainFile }
         />
+      </ErrorBoundary>
     </Flex>
   );
 };