fix(tabs): Ensure dropdown actions await compilation

Author: hsy822

libs/remix-ui/tabs/src/lib/components/CompileDropdown.tsx

@@ -15,12 +15,37 @@ interface CompileDropdownProps {
   compiledFileName?: string
   onNotify?: (msg: string) => void
   onOpen?: () => void
-  onRequestCompileAndPublish?: (type: string) => void;
+  onRequestCompileAndPublish?: (type: string) => void
+  setCompileState: (state: 'idle' | 'compiling' | 'compiled') => void
 }
 
-export const CompileDropdown: React.FC<CompileDropdownProps> = ({ tabPath, plugin, disabled, onNotify, onOpen, onRequestCompileAndPublish, compiledFileName }) => {
+export const CompileDropdown: React.FC<CompileDropdownProps> = ({ tabPath, plugin, disabled, onNotify, onOpen, onRequestCompileAndPublish, compiledFileName, setCompileState }) => {
   const [scriptFiles, setScriptFiles] = useState<string[]>([])
 
+  const compileThen = async (nextAction: () => void) => {
+    setCompileState('compiling')
+
+    setTimeout(async () => {
+      plugin.once('solidity', 'compilationFinished', (data) => {
+        const hasErrors = data.errors && data.errors.filter(e => e.severity === 'error').length > 0
+        if (hasErrors) {
+          setCompileState('idle')
+          plugin.call('notification', 'toast', 'Compilation failed')
+        } else {
+          setCompileState('compiled')
+          nextAction()
+        }
+      })
+
+      try {
+        await plugin.call('solidity', 'compile', tabPath)
+      } catch (e) {
+        console.error(e)
+        setCompileState('idle')
+      }
+    }, 0)
+  }
+
   const fetchScripts = async () => {
     try {
       let files = {}
@@ -38,33 +63,31 @@ export const CompileDropdown: React.FC<CompileDropdownProps> = ({ tabPath, plugi
   }
 
   const runScript = async (path: string) => {
-    await plugin.call('solidity', 'compile', tabPath)
-    const content = await plugin.call('fileManager', 'readFile', path)
-    await plugin.call('scriptRunnerBridge', 'execute', content, path)
-    onNotify?.(`Executed script: ${path}`)
+    await compileThen(async () => {
+      const content = await plugin.call('fileManager', 'readFile', path)
+      await plugin.call('scriptRunnerBridge', 'execute', content, path)
+      onNotify?.(`Executed script: ${path}`)
+    })
   }
 
   const runRemixAnalysis = async () => {
     _paq.push(['trackEvent', 'solidityCompiler', 'staticAnalysis', 'initiate'])
-    await plugin.call('solidity', 'compile', tabPath)
-    const isStaticAnalyzersActive = await plugin.call('manager', 'isActive', 'solidityStaticAnalysis')
-    if (!isStaticAnalyzersActive) {
-      await plugin.call('manager', 'activatePlugin', 'solidityStaticAnalysis')
-    }
-    plugin.call('menuicons', 'select', 'solidityStaticAnalysis')
-    onNotify?.("Ran Remix static analysis")
+    await compileThen(async () => {
+      const isStaticAnalyzersActive = await plugin.call('manager', 'isActive', 'solidityStaticAnalysis')
+      if (!isStaticAnalyzersActive) {
+        await plugin.call('manager', 'activatePlugin', 'solidityStaticAnalysis')
+      }
+      plugin.call('menuicons', 'select', 'solidityStaticAnalysis')
+      onNotify?.("Ran Remix static analysis")
+    })
   }
 
   const handleScanContinue = async () => {
-    await plugin.call('solidity', 'compile', tabPath)
-
-    const firstSlashIndex = compiledFileName.indexOf('/');
-    
-    const finalPath = firstSlashIndex > 0 
-      ? compiledFileName.substring(firstSlashIndex + 1) 
-      : compiledFileName;
-
-    await handleSolidityScan(plugin, finalPath)
+    await compileThen(async () => {
+      const firstSlashIndex = compiledFileName.indexOf('/')
+      const finalPath = firstSlashIndex > 0 ? compiledFileName.substring(firstSlashIndex + 1) : compiledFileName
+      await handleSolidityScan(plugin, finalPath)
+    })
   }
 
   const runSolidityScan = async () => {

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -219,7 +219,7 @@ export const TabsUI = (props: TabsUIProps) => {
    * * @param {'ipfs' | 'swarm'} storageType - The type of storage to publish to.
    */
   const handleCompileAndPublish = async (storageType: 'ipfs' | 'swarm') => {
-    setCompileState('compiling');
+    setCompileState('compiling')
     await props.plugin.call('notification', 'toast', `Switching to Solidity Compiler to publish...`)
 
     await props.plugin.call('manager', 'activatePlugin', 'solidity')
@@ -229,19 +229,19 @@ export const TabsUI = (props: TabsUIProps) => {
       _paq.push(['trackEvent', 'editor', 'publishFromEditor', storageType])
 
       setTimeout(() => {
-        let buttonId;
+        let buttonId
         if (storageType === 'ipfs') {
-          buttonId = 'publishOnIpfs';
+          buttonId = 'publishOnIpfs'
         } else {
-          buttonId = 'publishOnSwarm';
+          buttonId = 'publishOnSwarm'
         }
 
-        const buttonToClick = document.getElementById(buttonId);
+        const buttonToClick = document.getElementById(buttonId)
 
         if (buttonToClick) {
-          buttonToClick.click();
+          buttonToClick.click()
         } else {
-          props.plugin.call('notification', 'toast', 'Could not find the publish button.');
+          props.plugin.call('notification', 'toast', 'Could not find the publish button.')
         }
       }, 500)
 
@@ -250,8 +250,8 @@ export const TabsUI = (props: TabsUIProps) => {
       await props.plugin.call('notification', 'toast', `Error publishing: ${e.message}`)
     }
 
-    setCompileState('idle');
-  };
+    setCompileState('idle')
+  }
 
   const handleRunScript = async (runnerKey: string) => {
     if (runnerKey === 'new_script') {
@@ -352,7 +352,7 @@ export const TabsUI = (props: TabsUIProps) => {
         } else {
           setCompileState('compiled')
         }
-      });
+      })
 
       if (tabsState.currentExt === 'vy') {
         await props.plugin.call(compilerName, 'vyperCompileCustomAction')
@@ -437,6 +437,7 @@ export const TabsUI = (props: TabsUIProps) => {
                   disabled={!(PlayExtList.includes(tabsState.currentExt)) || compileState === 'compiling'}
                   onNotify={(msg) => console.log(msg)}
                   onRequestCompileAndPublish={handleCompileAndPublish}
+                  setCompileState={setCompileState}
                 />
               </>
             )}