rollback all debugs

playwright-ct.config.ts

 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
 import react from '@vitejs/plugin-react';
-import dynamicImport from 'vite-plugin-dynamic-import';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
@@ -51,7 +50,6 @@ const config: PlaywrightTestConfig = {
         svgr({
           exportAsDefault: true,
         }),
-        dynamicImport(),
       ],
     },
   },

ui/address/contract/ContractCode.pw.tsx

@@ -15,7 +15,7 @@ const hooksConfig = {
   },
 };
 
-test.skip('verified with changed byte code +@mobile +@dark-mode', async({ mount, page }) => {
+test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.withChangedByteCode),
@@ -31,7 +31,7 @@ test.skip('verified with changed byte code +@mobile +@dark-mode', async({ mount,
   await expect(component).toHaveScreenshot();
 });
 
-test.skip('verified with multiple sources', async({ mount, page }) => {
+test('verified with multiple sources', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.withMultiplePaths),
@@ -65,7 +65,7 @@ test('verified via sourcify', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
 });
 
-test.skip('self destructed', async({ mount, page }) => {
+test('self destructed', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.selfDestructed),
@@ -82,7 +82,7 @@ test.skip('self destructed', async({ mount, page }) => {
   await expect(section).toHaveScreenshot();
 });
 
-test.skip('with twin address alert +@mobile', async({ mount, page }) => {
+test('with twin address alert +@mobile', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.withTwinAddress),
@@ -98,7 +98,7 @@ test.skip('with twin address alert +@mobile', async({ mount, page }) => {
   await expect(component.getByRole('alert')).toHaveScreenshot();
 });
 
-test.skip('non verified', async({ mount, page }) => {
+test('non verified', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.nonVerified),

ui/address/contract/ContractCode.tsx

@@ -11,7 +11,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import ExternalLink from 'ui/shared/ExternalLink';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
-import type TContractSourceCode from './ContractSourceCode';
+import ContractSourceCode from './ContractSourceCode';
 
 const InfoItem = ({ label, value }: { label: string; value: string }) => (
   <GridItem display="flex" columnGap={ 6 }>
@@ -22,15 +22,6 @@ const InfoItem = ({ label, value }: { label: string; value: string }) => (
 
 const ContractCode = () => {
   const router = useRouter();
-  const [ ContractSourceCode, setContractSourceCode ] = React.useState<typeof TContractSourceCode | null>(null);
-
-  React.useEffect(() => {
-    import('./ContractSourceCode').then((component) => setContractSourceCode(component.default));
-
-    return () => {
-      setContractSourceCode(null);
-    };
-  }, []);
 
   const addressHash = router.query.id?.toString();
   const { data, isLoading, isError } = useApiQuery('contract', {
@@ -158,7 +149,7 @@ const ContractCode = () => {
             textareaMaxHeight="200px"
           />
         ) }
-        { data.source_code && ContractSourceCode && (
+        { data.source_code && (
           <ContractSourceCode
             data={ data.source_code }
             hasSol2Yml={ Boolean(data.can_be_visualized_via_sol2uml) }

ui/shared/CodeEditor.tsx

 import { chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-csharp';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import 'ace-builds/src-noconflict/theme-tomorrow_night';
-import 'ace-builds/src-noconflict/ext-language_tools';
+import type ReactAce from 'react-ace/lib/ace';
 
 interface Props {
   id: string;
@@ -14,10 +10,33 @@ interface Props {
 
 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
+    <AceEditor.default
       className={ className }
       mode="csharp" // TODO need to find mode for solidity
       theme={ theme }